Add graph based filters and severity, subcategory fields

apps/dashboard/src/main/java/com/akto/action/threat_detection/DashboardMaliciousEvent.java

@@ -16,6 +16,7 @@ public class DashboardMaliciousEvent {
   private String type;
   private String refId;
   private String subCategory;
+  private String severity;
   private String eventType;
 
   public DashboardMaliciousEvent() {}
@@ -33,6 +34,7 @@ public DashboardMaliciousEvent(
       String type,
       String refId,
       String subCategory,
+      String severity,
       String eventType) {
     this.id = id;
     this.actor = actor;
@@ -46,6 +48,7 @@ public DashboardMaliciousEvent(
     this.type = type;
     this.refId = refId;
     this.subCategory = subCategory;
+    this.severity = severity;
     this.eventType = eventType;
   }
 
@@ -145,6 +148,14 @@ public void setSubCategory(String subCategory) {
     this.subCategory = subCategory;
   }
 
+  public String getSeverity() {
+    return severity;
+  }
+
+  public void setSeverity(String severity) {
+    this.severity = severity;
+  }
+
   public String getEventType() {
     return eventType;
   }

apps/dashboard/src/main/java/com/akto/action/threat_detection/DashboardThreatApi.java

@@ -9,14 +9,18 @@ public class DashboardThreatApi {
   private int actorsCount;
   private int requestsCount;
   private long discoveredAt;
+  private String severity;
+  private String subCategory;
 
   public DashboardThreatApi(
-      String api, URLMethods.Method method, int actorsCount, int requestsCount, long discoveredAt) {
+      String api, URLMethods.Method method, int actorsCount, int requestsCount, long discoveredAt, String severity, String subCategory) {
     this.api = api;
     this.method = method;
     this.actorsCount = actorsCount;
     this.requestsCount = requestsCount;
     this.discoveredAt = discoveredAt;
+    this.severity = severity;
+    this.subCategory = subCategory;
   }
 
   public String getApi() {
@@ -58,4 +62,21 @@ public long getDiscoveredAt() {
   public void setDiscoveredAt(long discoveredAt) {
     this.discoveredAt = discoveredAt;
   }
+
+  public String getSeverity() {
+    return severity;
+  }
+
+  public void setSeverity(String severity) {
+    this.severity = severity;
+  }
+
+  public String getSubCategory() {
+    return subCategory;
+  }
+
+  public void setSubCategory(String subCategory) {
+    this.subCategory = subCategory;
+  }
+
 }

apps/dashboard/src/main/java/com/akto/action/threat_detection/SuspectSampleDataAction.java

@@ -117,6 +117,7 @@ public String fetchSampleData() {
                             smr.getType(),
                             smr.getRefId(),
                             smr.getSubCategory(),
+                            smr.getSeverity(),
                             smr.getEventTypeVal()))
                     .collect(Collectors.toList());
                 this.total = m.getTotal();
@@ -144,6 +145,7 @@ public String fetchFilters() {
                 this.ips = msg.getActorsList();
                 this.urls = msg.getUrlsList();
                 this.subCategory = msg.getSubCategoryList();
+                this.severity = msg.getSeverityList();
               });
     } catch (Exception e) {
       e.printStackTrace();

apps/dashboard/src/main/java/com/akto/action/threat_detection/ThreatApiAction.java

@@ -275,7 +275,9 @@ public String fetchThreatApis() {
                             URLMethods.Method.fromString(smr.getMethod()),
                             smr.getActorsCount(),
                             smr.getRequestsCount(),
-                            smr.getDiscoveredAt()))
+                            smr.getDiscoveredAt(),
+                            smr.getSeverity(),
+                            smr.getSubCategory()))
                     .collect(Collectors.toList());
 
                 this.total = m.getTotal();

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/charts/BarGraph.jsx

@@ -4,14 +4,15 @@ import Highcharts from "highcharts"
 import { useRef } from "react";
 import observeFunc from "../../pages/observe/transform"
 
-function BarGraph({defaultChartOptions, backgroundColor, height, title, data, xAxisTitle,barWidth, yAxisTitle, barGap, showGridLines, showYAxis}) {
+function BarGraph({defaultChartOptions, backgroundColor, height, title, data, xAxisTitle,barWidth, yAxisTitle, barGap, showGridLines, showYAxis, onBarClick}) {
 
     const chartComponentRef = useRef(null)
     let xCategories = []
     let seriesData = []
     data.forEach((x) => {
         xCategories.push(x.text)
         seriesData.push({
+            ...x,
             y: x.value,
             color: x.color,
             name: x.text
@@ -73,7 +74,13 @@ function BarGraph({defaultChartOptions, backgroundColor, height, title, data, xA
         },
         series:[{
             data: seriesData,
+            cursor: "pointer",
             colorByPoint: true,
+            events: {
+                click: (e) => {
+                    onBarClick(e.point);
+                }
+            },
             states: {
                 inactive: {
                     opacity: 1

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubServerTable.js

@@ -228,6 +228,13 @@ function GithubServerTable(props) {
     setAppliedFilters(temp);
   }, [appliedFilters, props.disambiguateLabel, handleRemoveAppliedFilter, setFiltersMap, currentPageKey, pageFiltersMap]);
 
+  useEffect(() => {
+    if (props.externalFilter) {
+      const { key, value } = props.externalFilter;
+      changeAppliedFilters(key, value);
+    }
+  }, [props.externalFilter]);
+
   const debouncedSearch = debounce((searchQuery) => {
       fetchData(searchQuery)
   }, 500);
@@ -415,6 +422,7 @@ function GithubServerTable(props) {
   if (typeof props.setSelectedResourcesForPrimaryAction === 'function') {
     props.setSelectedResourcesForPrimaryAction(bulkActionResources)
   }
+
   return (
     <div className={tableClass} style={{display: "flex", flexDirection: "column", gap: "20px"}}>
       <LegacyCard>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/threat_detection/ThreatActorPage.jsx

@@ -1,4 +1,4 @@
-import { useReducer, useState, useEffect } from "react";
+import { useReducer, useState, useEffect, useRef } from "react";
 import DateRangeFilter from "../../components/layouts/DateRangeFilter";
 import PageWithMultipleCards from "../../components/layouts/PageWithMultipleCards";
 import TitleWithInfo from "../../components/shared/TitleWithInfo";
@@ -18,7 +18,7 @@ import { ThreatSummary } from "./components/ThreatSummary";
 import ThreatActivityTimeline from "./components/ThreatActivityTimeline";
 import React from "react";
 
-const ChartComponent = ({ mapData, loading, onSubCategoryClick, currDateRange }) => {
+const ChartComponent = ({ mapData, loading, onSubCategoryClick, currDateRange, onCountryClick }) => {
     return (
         <VerticalStack gap={4} columns={2}>
             <HorizontalGrid gap={4} columns={2}>
@@ -35,6 +35,7 @@ const ChartComponent = ({ mapData, loading, onSubCategoryClick, currDateRange })
                     }}
                     loading={loading}
                     key={"threat-actor-world-map"}
+                    onCountryClick={onCountryClick}
                 />
             </HorizontalGrid>
         </VerticalStack>
@@ -56,6 +57,8 @@ function ThreatActorPage() {
     initialVal
   );
 
+  const [externalFilter, setExternalFilter] = useState(null);
+
   useEffect(() => {
     const fetchActorsPerCountry = async () => {
       setLoading(true);
@@ -86,7 +89,11 @@ function ThreatActorPage() {
   }, []);
 
   const onSubCategoryClick = (subCategory) => {
-    console.log({ subCategory });
+    setExternalFilter({key: "latestAttack", value: [subCategory]});
+  }
+
+  const onCountryClick = (country) => {
+    setExternalFilter({key: "country", value: [country]});
   }
 
   const onRowClick = (data) => {
@@ -100,13 +107,15 @@ function ThreatActorPage() {
       mapData={mapData}
       loading={loading}
       onSubCategoryClick={onSubCategoryClick}
+      onCountryClick={onCountryClick}
       currDateRange={currDateRange}
     />,
     <ThreatActorTable
       key={"threat-actor-data-table"}
       currDateRange={currDateRange}
       loading={loading}
       handleRowClick={onRowClick}
+      externalFilter={externalFilter}
     />,
     ...(showActorDetails ? [<ActorDetails actorDetails={actorDetails} setShowActorDetails={setShowActorDetails} />] : [])
   ];

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/threat_detection/ThreatDetectionPage.jsx

@@ -31,13 +31,14 @@ const convertToGraphData = (severityMap) => {
     return dataArr
 }
 
-const ChartComponent = ({ subCategoryCount, severityCountMap }) => {
+const ChartComponent = ({ subCategoryCount, severityCountMap, onSubCategoryClick, onSeverityClick }) => {
     return (
       <VerticalStack gap={4} columns={2}>
         <HorizontalGrid gap={4} columns={2}>
           <TopThreatTypeChart
             key={"top-threat-types"}
             data={subCategoryCount}
+            onSubCategoryClick={onSubCategoryClick}
           />
           <InfoCard
                 title={"Threats by severity"}
@@ -57,6 +58,7 @@ const ChartComponent = ({ subCategoryCount, severityCountMap }) => {
                         showGridLines={true}
                         barWidth={100 - (severityCountMap.length * 6)}
                         barGap={12}
+                        onBarClick={(eventPoint) => onSeverityClick(eventPoint.category.toUpperCase())}
                     />
                 }
             />
@@ -78,7 +80,7 @@ function ThreatDetectionPage() {
     const [showNewTab, setShowNewTab] = useState(false)
     const [subCategoryCount, setSubCategoryCount] = useState([]);
     const [severityCountMap, setSeverityCountMap] = useState([]);
-
+    const [externalFilter, setExternalFilter] = useState(null);
     const threatFiltersMap = SessionStore((state) => state.threatFiltersMap);
 
     const startTimestamp = parseInt(currDateRange.period.since.getTime()/1000)
@@ -146,11 +148,25 @@ function ThreatDetectionPage() {
         fetchCountBySeverity();
       }, [startTimestamp, endTimestamp]);
 
+      const onSubCategoryClick = (eventPoint ) => {
+        setExternalFilter({key: "subCategory", value: [eventPoint.subCategory]});
+      }
+
+      const onSeverityClick = (severity) => {
+        setExternalFilter({key: "severity", value: [severity]});
+      }
+
     const components = [
-        <ChartComponent subCategoryCount={subCategoryCount} severityCountMap={severityCountMap} />,
+        <ChartComponent
+            subCategoryCount={subCategoryCount}
+            severityCountMap={severityCountMap}
+            onSubCategoryClick={onSubCategoryClick}
+            onSeverityClick={onSeverityClick}
+        />,
         <SusDataTable key={"sus-data-table"}
             currDateRange={currDateRange}
             rowClicked={rowClicked} 
+            externalFilter={externalFilter}
         />,
         !showNewTab ? <NormalSampleDetails
             title={"Attacker payload"}

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/threat_detection/api.js

@@ -16,7 +16,7 @@ const threatDetectionRequests = {
         })
     },
 
-    fetchSuspectSampleData(skip, ips, apiCollectionIds, urls, types, sort, startTimestamp, endTimestamp) {
+    fetchSuspectSampleData(skip, ips, apiCollectionIds, urls, types, sort, startTimestamp, endTimestamp, subCategory, severity) {
         return request({
             url: '/api/fetchSuspectSampleData',
             method: 'post',
@@ -28,7 +28,9 @@ const threatDetectionRequests = {
                 apiCollectionIds: apiCollectionIds,
                 sort: sort,
                 startTimestamp: startTimestamp,
-                endTimestamp: endTimestamp
+                endTimestamp: endTimestamp,
+                subCategory: subCategory,
+                severity: severity
             }
         })
     },

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/threat_detection/components/FilterComponent.jsx

@@ -63,28 +63,30 @@ function FilterComponent() {
                 </Box>
             </LegacyCard.Section>
             <LegacyCard.Section>
-                <DropdownSearch
-                    placeholder={"Search filters"}
-                    optionsList={allData.map(x => {
-                        return {
-                            label: x.id,
-                            value: x.id
-                        }
-                    })}
-                    setSelected={(value) => {
-                        let content = allData.filter(x =>
-                            x.id == value
-                        )[0].content;
-                        let temp = { message: content }
-                        setId(value)
-                        setData(temp)
-                        setOgData(temp)
-                    }}
-                    preSelected={[
-                        id
-                    ]}
-                    value={id}
-                />
+                <Box width="300px">
+                    <DropdownSearch
+                        placeholder={"Search filters"}
+                        optionsList={testData.map(x => {
+                            return {
+                                label: x.id,
+                                value: x.id
+                            }
+                        })}
+                        setSelected={(value) => {
+                            let content = testData.filter(x =>
+                                x.id == value
+                            )[0].content;
+                            let temp = { message: content }
+                            setId(value)
+                            setData(temp)
+                            setOgData(temp)
+                        }}
+                        preSelected={[
+                            'test1',
+                        ]}
+                        value={'test1'}
+                    />
+                </Box>
             </LegacyCard.Section>
             <LegacyCard.Section flush>
                 <SampleData data={ogData} editorLanguage="custom_yaml" minHeight="65vh" readOnly={false} getEditorData={setData} />

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/threat_detection/components/SampleDetails.jsx

@@ -130,9 +130,11 @@ function SampleDetails(props) {
                                 </div>
                             </HorizontalStack>
                             <HorizontalStack gap={"1"} wrap={false}>
-                                <Tooltip content={moreInfoData?.url}>
-                                    <Text color="subdued" variant="bodySm" truncate>{moreInfoData?.url}</Text>
-                                </Tooltip>
+                                <Box maxWidth="300px">
+                                    <Tooltip content={moreInfoData?.url}>
+                                        <Text breakWord color="subdued" variant="bodySm">{moreInfoData?.url}</Text>
+                                    </Tooltip>
+                                </Box>
                                 {
                                     currentTemplateObj?.category?.name && (
                                         <>