Alert Title in Alert Tables + minor changes on AlertDetails & AlertTa…

…bles (#707) * Add title in Alerts as required * Removed dedupString from alertSummary * isHash Util function and change for breadcrumb * Added updateTime * Updated AlertTables to a new format * Added dedupString to AlertDetails that missing rule * Fixed Fragments for Alerts * Added severity to AlertSummary * Updated Alert table on RuleDetails * Changed flex for Title * Reinstated licence for schema * Updated naming for regex * Changed flex for Title Column * Fixed broken <Link> Co-authored-by: Kostas Papageorgiou <[email protected]> Co-authored-by: Aggelos Arvanitakis <[email protected]>
glerb · Apr 22, 2020 · ec23c4c · ec23c4c
1 parent bb87501
commit ec23c4c
Show file tree

Hide file tree

Showing 17 changed files with 184 additions and 78 deletions.
diff --git a/api/graphql/schema.graphql b/api/graphql/schema.graphql
@@ -115,6 +115,7 @@ type LogIntegrationHealth {
 type AlertDetails {
   alertId: ID!
   ruleId: ID
+  title: String!
   creationTime: AWSDateTime!
   updateTime: AWSDateTime!
   eventsMatched: Int!
@@ -132,10 +133,10 @@ type AlertSummary {
   alertId: String!
   creationTime: AWSDateTime!
   eventsMatched: Int!
+  title: String!
   updateTime: AWSDateTime!
   ruleId: String
   severity: String
-  dedupString: String!
 }
 
 input ListRulesInput {

diff --git a/web/__generated__/schema.tsx b/web/__generated__/schema.tsx
diff --git a/web/src/components/Breadcrumbs/Breadcrumbs.tsx b/web/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -18,10 +18,12 @@
 
 import { Box, Breadcrumbs as PounceBreadcrumbs } from 'pouncejs';
 import * as React from 'react';
-import { isGuid, capitalize } from 'Helpers/utils';
+import { isGuid, capitalize, shortenId, isHash } from 'Helpers/utils';
 import { Link as RRLink } from 'react-router-dom';
 import useRouter from 'Hooks/useRouter';
 
+const transformBreadcrumbText = text => (isHash(text) ? shortenId(text) : text);
+
 const Breadcrumbs: React.FC = () => {
   const {
     location: { pathname },
@@ -60,7 +62,7 @@ const Breadcrumbs: React.FC = () => {
       items={fragments}
       itemRenderer={item => (
         <Box as={RRLink} to={item.href} display="block" maxWidth="450px" truncated>
-          {item.text}
+          {transformBreadcrumbText(item.text)}
         </Box>
       )}
     />

diff --git a/web/src/constants.ts b/web/src/constants.ts
@@ -32,6 +32,8 @@ export const INCLUDE_UPPERCASE_REGEX = new RegExp('(?=.*[A-Z])');
 
 export const INCLUDE_SPECIAL_CHAR_REGEX = new RegExp('[^\\d\\sA-Za-z]');
 
+export const CHECK_IF_HASH_REGEX = new RegExp('[a-f0-9]{32}');
+
 export const DEFAULT_POLICY_FUNCTION =
   'def policy(resource):\n\t# Return False if the resource is non-compliant, which will trigger alerts/remediation.\n\treturn True';
 

diff --git a/web/src/graphql/fragments/AlertDetailsFull.generated.ts b/web/src/graphql/fragments/AlertDetailsFull.generated.ts
@@ -26,6 +26,7 @@ export type AlertDetailsFull = Pick<
   Types.AlertDetails,
   | 'alertId'
   | 'ruleId'
+  | 'title'
   | 'creationTime'
   | 'eventsMatched'
   | 'updateTime'
@@ -38,6 +39,7 @@ export const AlertDetailsFull = gql`
   fragment AlertDetailsFull on AlertDetails {
     alertId
     ruleId
+    title
     creationTime
     eventsMatched
     updateTime

diff --git a/web/src/graphql/fragments/AlertDetailsFull.graphql b/web/src/graphql/fragments/AlertDetailsFull.graphql
@@ -1,6 +1,7 @@
 fragment AlertDetailsFull on AlertDetails {
   alertId
   ruleId
+  title
   creationTime
   eventsMatched
   updateTime

diff --git a/web/src/graphql/fragments/AlertSummaryFull.generated.ts b/web/src/graphql/fragments/AlertSummaryFull.generated.ts
@@ -0,0 +1,40 @@
+/**
+ * Panther is a Cloud-Native SIEM for the Modern Security Team.
+ * Copyright (C) 2020 Panther Labs Inc
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* eslint-disable import/order, import/no-duplicates, @typescript-eslint/no-unused-vars */
+
+import * as Types from '../../../__generated__/schema';
+
+import gql from 'graphql-tag';
+
+export type AlertSummaryFull = Pick<
+  Types.AlertSummary,
+  'alertId' | 'ruleId' | 'title' | 'severity' | 'creationTime' | 'eventsMatched' | 'updateTime'
+>;
+
+export const AlertSummaryFull = gql`
+  fragment AlertSummaryFull on AlertSummary {
+    alertId
+    ruleId
+    title
+    severity
+    creationTime
+    eventsMatched
+    updateTime
+  }
+`;
diff --git a/web/src/graphql/fragments/AlertSummaryFull.graphql b/web/src/graphql/fragments/AlertSummaryFull.graphql
@@ -0,0 +1,9 @@
+fragment AlertSummaryFull on AlertSummary {
+  alertId
+  ruleId
+  title
+  severity
+  creationTime
+  eventsMatched
+  updateTime
+}
diff --git a/web/src/helpers/utils.tsx b/web/src/helpers/utils.tsx
@@ -31,6 +31,7 @@ import {
   INCLUDE_LOWERCASE_REGEX,
   INCLUDE_SPECIAL_CHAR_REGEX,
   INCLUDE_UPPERCASE_REGEX,
+  CHECK_IF_HASH_REGEX,
 } from 'Source/constants';
 import mapValues from 'lodash-es/mapValues';
 import sum from 'lodash-es/sum';
@@ -101,6 +102,12 @@ export const formatDatetime = (datetime: string) => {
   );
 };
 
+/** Slice text to 7 characters, mostly used for hashIds */
+export const shortenId = (id: string) => id.slice(0, 7);
+
+/** Checking if string is a proper hash */
+export const isHash = (str: string) => CHECK_IF_HASH_REGEX.test(str);
+
 /** Converts minutes integer to representative string i.e. 15 -> 15min,  120 -> 2h */
 export const minutesToString = (minutes: number) =>
   minutes < 60 ? `${minutes}min` : `${minutes / 60}h`;

diff --git a/web/src/pages/AlertDetails/AlertDetailsInfo/AlertDetailsInfo.tsx b/web/src/pages/AlertDetails/AlertDetailsInfo/AlertDetailsInfo.tsx
@@ -24,6 +24,7 @@ import Linkify from 'Components/Linkify';
 import { SEVERITY_COLOR_MAP } from 'Source/constants';
 import { formatDatetime } from 'Helpers/utils';
 import Panel from 'Components/Panel';
+import { Link as RRLink } from 'react-router-dom';
 
 interface AlertDetailsInfoProps {
   alert: AlertDetails;
@@ -44,7 +45,15 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
           <SimpleGrid columns={3} spacing={6}>
             <Box my={1}>
               <Label mb={1} as="div" size="small" color="grey300">
-                ID
+                TITLE
+              </Label>
+              <Text size="medium" color="black">
+                {alert.title}
+              </Text>
+            </Box>
+            <Box my={1}>
+              <Label mb={1} as="div" size="small" color="grey300">
+                FULL ALERT ID
               </Label>
               <Text size="medium" color="black">
                 {alert.alertId}
@@ -61,6 +70,14 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
                 <Badge color="pink">DELETED</Badge>
               </Flex>
             </Box>
+            <Box my={1}>
+              <Label mb={1} as="div" size="small" color="grey300">
+                DEDUP STRING
+              </Label>
+              <Text size="medium" color="black">
+                {alert.dedupString}
+              </Text>
+            </Box>
             <Box my={1}>
               <Label mb={1} as="div" size="small" color="grey300">
                 CREATED AT
@@ -69,6 +86,14 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
                 {formatDatetime(alert.creationTime)}
               </Text>
             </Box>
+            <Box my={1}>
+              <Label mb={1} as="div" size="small" color="grey300">
+                LAST MATCHED AT
+              </Label>
+              <Text size="medium" color="black">
+                {formatDatetime(alert.updateTime)}
+              </Text>
+            </Box>
           </SimpleGrid>
         </Panel>
       </Box>
@@ -80,7 +105,15 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
       <SimpleGrid columns={3} spacing={6}>
         <Box my={1}>
           <Label mb={1} as="div" size="small" color="grey300">
-            ID
+            TITLE
+          </Label>
+          <Text size="medium" color="black">
+            {alert.title}
+          </Text>
+        </Box>
+        <Box my={1}>
+          <Label mb={1} as="div" size="small" color="grey300">
+            FULL ALERT ID
           </Label>
           <Text size="medium" color="black">
             {alert.alertId}
@@ -91,7 +124,7 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
             RULE ORIGIN
           </Label>
           {rule ? (
-            <Link color="blue300" to={urls.logAnalysis.rules.details(rule.id)}>
+            <Link color="blue300" as={RRLink} to={urls.logAnalysis.rules.details(rule.id)}>
               {rule.displayName || rule.id}
             </Link>
           ) : (
@@ -163,6 +196,14 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
             </Text>
           )}
         </Box>
+        <Box my={1}>
+          <Label mb={1} as="div" size="small" color="grey300">
+            DEDUP STRING
+          </Label>
+          <Text size="medium" color="black">
+            {alert.dedupString}
+          </Text>
+        </Box>
         <Box my={1}>
           <Label mb={1} as="div" size="small" color="grey300">
             CREATED AT
@@ -173,10 +214,10 @@ const AlertDetailsInfo: React.FC<AlertDetailsInfoProps> = ({ alert, rule }) => {
         </Box>
         <Box my={1}>
           <Label mb={1} as="div" size="small" color="grey300">
-            DEDUP STRING
+            LAST MATCHED AT
           </Label>
           <Text size="medium" color="black">
-            {alert.dedupString}
+            {formatDatetime(alert.updateTime)}
           </Text>
         </Box>
       </SimpleGrid>

diff --git a/web/src/pages/ListAlerts/ListAlertsTable/ListAlertsTable.tsx b/web/src/pages/ListAlerts/ListAlertsTable/ListAlertsTable.tsx
@@ -21,19 +21,24 @@ import { AlertSummary } from 'Generated/schema';
 import { generateEnumerationColumn } from 'Helpers/utils';
 import { Table } from 'pouncejs';
 import columns from 'Pages/ListAlerts/columns';
+import urls from 'Source/urls';
+import useRouter from 'Hooks/useRouter';
 
 interface ListAlertsTableProps {
-  items?: Partial<AlertSummary>[];
+  items?: AlertSummary[];
   enumerationStartIndex?: number;
 }
 
 const ListAlertsTable: React.FC<ListAlertsTableProps> = ({ items }) => {
+  const { history } = useRouter();
+
   const enumeratedColumns = [generateEnumerationColumn(0), ...columns];
   return (
-    <Table<Partial<AlertSummary>>
+    <Table<AlertSummary>
       columns={enumeratedColumns}
       getItemKey={alert => alert.alertId}
       items={items}
+      onSelect={alert => history.push(urls.logAnalysis.alerts.details(alert.alertId))}
     />
   );
 };