Frontend - Toggle investigations

api_app/serializers/job.py

@@ -503,6 +503,20 @@ class JobTreeSerializer(ModelSerializer):
     evaluation = rfs.CharField(
         source="data_model.evaluation", allow_null=True, read_only=True
     )
+    reliability = rfs.IntegerField(
+        source="data_model.reliability", allow_null=True, read_only=True
+    )
+    tags = rfs.ListField(
+        source="data_model.tags",
+        allow_null=True,
+        child=rfs.CharField(read_only=True),
+        read_only=True,
+        default=[],
+    )
+    isp = rfs.CharField(source="data_model.isp", allow_null=True, read_only=True)
+    country = rfs.CharField(
+        source="data_model.country_code", allow_null=True, read_only=True
+    )
     is_sample = rfs.BooleanField(read_only=True)
 
     playbook = rfs.SlugRelatedField(
@@ -513,6 +527,9 @@ class JobTreeSerializer(ModelSerializer):
         required=False,
     )
     analyzed_object_name = rfs.CharField(source="analyzable.name", read_only=True)
+    mimetype = rfs.CharField(
+        source="analyzable.mimetype", allow_null=True, read_only=True
+    )
 
     class Meta:
         model = Job
@@ -525,6 +542,11 @@ class Meta:
             "received_request_time",
             "is_sample",
             "evaluation",
+            "reliability",
+            "tags",
+            "mimetype",
+            "isp",
+            "country",
         ]
 
     def to_representation(self, instance):

frontend/package.json

@@ -22,7 +22,7 @@
     "react-ace": "^13.0.0",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^5.0.0",
-    "react-icons": "^4.12.0",
+    "react-icons": "^5.5.0",
     "react-joyride": "^2.9.2",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.27.0",

frontend/src/components/common/engineBadges.jsx

@@ -0,0 +1,207 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Badge, UncontrolledTooltip } from "reactstrap";
+import { FaTag } from "react-icons/fa";
+import { VscFile } from "react-icons/vsc";
+import { TbWorld } from "react-icons/tb";
+import classnames from "classnames";
+import { EvaluationColors, TagsColors } from "../../constants/colorConst";
+import { EvaluationIcons, TagsIcons } from "../../constants/engineConst";
+import { getIcon } from "./icon/icons";
+
+export function EvaluationBadge(props) {
+  const { id, evaluation, className } = props;
+
+  const color = EvaluationColors?.[evaluation];
+  const divClass = classnames(`bg-${color}`, className);
+  const icon = EvaluationIcons?.[evaluation];
+
+  return (
+    <Badge
+      id={`evaluation__job${id}_${evaluation}`}
+      className={`d-flex-center ${divClass}`}
+    >
+      {getIcon(icon)}
+      <UncontrolledTooltip
+        target={`evaluation__job${id}_${evaluation}`}
+        placement="top"
+        fade={false}
+      >
+        {evaluation.toUpperCase()}
+      </UncontrolledTooltip>
+    </Badge>
+  );
+}
+
+EvaluationBadge.propTypes = {
+  id: PropTypes.string.isRequired,
+  evaluation: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+EvaluationBadge.defaultProps = {
+  className: null,
+};
+
+export function ReliabilityBar(props) {
+  const { id, reliability, evaluation, className } = props;
+  const color = EvaluationColors?.[evaluation];
+
+  return (
+    <div
+      id={`reliability-bar__job${id}_rel${reliability}`}
+      className={`d-flex-center ${className}`}
+      style={{ width: "300px" }}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => (
+        <hr
+          style={{
+            width: "10%",
+            borderTop: "3px solid white",
+            opacity: 1,
+          }}
+          className={`mt-1 me-1 ${
+            index <= reliability ? `border-${color}` : "border-tertiary"
+          }`}
+        />
+      ))}
+      <UncontrolledTooltip
+        target={`reliability-bar__job${id}_rel${reliability}`}
+        placement="top"
+        fade={false}
+      >
+        Reliability: {reliability}
+      </UncontrolledTooltip>
+    </div>
+  );
+}
+
+ReliabilityBar.propTypes = {
+  id: PropTypes.string.isRequired,
+  reliability: PropTypes.string.isRequired,
+  evaluation: PropTypes.number.isRequired,
+  className: PropTypes.string,
+};
+
+ReliabilityBar.defaultProps = {
+  className: null,
+};
+
+export function TagsBadge(props) {
+  const { id, tag, className } = props;
+  let color = "";
+  let icon = "";
+  if (Object.keys(TagsIcons).includes(tag)) {
+    color = TagsColors?.[tag];
+    icon = getIcon(TagsIcons?.[tag]);
+  } else {
+    color = "secondary";
+    icon = <FaTag />;
+  }
+
+  const divClass = classnames(`bg-${color}`, className);
+
+  return (
+    <Badge id={`tag__${id}`} className={`d-flex-center ${divClass}`}>
+      {icon}
+      <UncontrolledTooltip target={`tag__${id}`} placement="top" fade={false}>
+        {tag}
+      </UncontrolledTooltip>
+    </Badge>
+  );
+}
+
+TagsBadge.propTypes = {
+  id: PropTypes.string.isRequired,
+  tag: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+TagsBadge.defaultProps = {
+  className: null,
+};
+
+export function CountryBadge(props) {
+  const { id, country, className } = props;
+
+  return (
+    <span
+      id={`country__${id}_${country.toLowerCase()}`}
+      className={`${className}`}
+    >
+      {getIcon(country)}
+      <UncontrolledTooltip
+        placement="top"
+        target={`country__${id}_${country.toLowerCase()}`}
+      >
+        {country.toUpperCase()}
+      </UncontrolledTooltip>
+    </span>
+  );
+}
+
+CountryBadge.propTypes = {
+  id: PropTypes.string.isRequired,
+  country: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+CountryBadge.defaultProps = {
+  className: null,
+};
+
+export function MimetypeBadge(props) {
+  const { id, mimetype, className } = props;
+
+  return (
+    <Badge
+      id={`mimetype__job${id}`}
+      className={`d-flex-center bg-secondary ${className}`}
+    >
+      <VscFile />
+      <UncontrolledTooltip
+        target={`mimetype__job${id}`}
+        placement="top"
+        fade={false}
+      >
+        {mimetype}
+      </UncontrolledTooltip>
+    </Badge>
+  );
+}
+
+MimetypeBadge.propTypes = {
+  id: PropTypes.string.isRequired,
+  mimetype: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+MimetypeBadge.defaultProps = {
+  className: null,
+};
+
+export function IspBadge(props) {
+  const { id, isp, className } = props;
+
+  return (
+    <Badge
+      id={`isp__${id}`}
+      className={`d-flex-center bg-secondary ${className}`}
+    >
+      <TbWorld />
+      <UncontrolledTooltip target={`isp__${id}`} placement="top" fade={false}>
+        {isp}
+      </UncontrolledTooltip>
+    </Badge>
+  );
+}
+
+IspBadge.propTypes = {
+  id: PropTypes.string.isRequired,
+  isp: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+IspBadge.defaultProps = {
+  className: null,
+};

frontend/src/components/common/icon/actionIcons.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Spinner } from "reactstrap";
+import {
+  MdDeleteOutline,
+  MdOutlineRefresh,
+  MdComment,
+  MdFileDownload,
+} from "react-icons/md";
+import { FaRegStopCircle } from "react-icons/fa";
+
+// These function are needed in IconButton because it expects Icon as a function
+
+export function DeleteIcon() {
+  return (
+    <span className="d-flex align-items-center">
+      <MdDeleteOutline className="text-danger me-1" />
+      Delete
+    </span>
+  );
+}
+
+export function CommentIcon({ commentNumber }) {
+  return (
+    <span className="d-flex align-items-center">
+      <MdComment className="me-1" />
+      Comments ({commentNumber})
+    </span>
+  );
+}
+
+CommentIcon.propTypes = {
+  commentNumber: PropTypes.number.isRequired,
+};
+
+export function retryJobIcon() {
+  return (
+    <span className="d-flex align-items-center">
+      <MdOutlineRefresh className="me-1" />
+      Rescan
+    </span>
+  );
+}
+
+export function downloadReportIcon() {
+  return (
+    <span className="d-flex align-items-center">
+      <MdFileDownload className="me-1" />
+      Report
+    </span>
+  );
+}
+
+export function SpinnerIcon() {
+  return <Spinner type="border" size="sm" className="text-darker" />;
+}
+
+export function killJobIcon() {
+  return (
+    <span className="d-flex align-items-center">
+      <FaRegStopCircle className="me-1" />
+      Kill job
+    </span>
+  );
+}