fix history incident details (#521)

thinkst · Jul 16, 2024 · ea7abf8 · ea7abf8
1 parent 8e74c51
commit ea7abf8
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 14 deletions.
diff --git a/frontend_vue/src/components/HistoryToken.vue b/frontend_vue/src/components/HistoryToken.vue
@@ -144,11 +144,13 @@ async function fetchTokenHistoryData() {
 }
 
 async function handleSelectAlert(incident: HitsType) {
-  await addViewTransition(() => (selectedAlert.value = incident));
-  const container = document.getElementById('incident_detail');
+  await addViewTransition(() => {
+    selectedAlert.value = incident
+    const container = document.getElementById('incident_detail');
   container
     ? container.scrollTo({ top: 0, behavior: 'smooth' })
     : window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
 }
 </script>
 

diff --git a/frontend_vue/src/components/constants.ts b/frontend_vue/src/components/constants.ts
@@ -86,6 +86,7 @@ export const INCIDENT_DETAIL_CUSTOM_LABELS = {
   last_used: 'Key Last Used',
   src_ip: 'Source IP',
   loc: 'Location',
+  eventName: 'Event Name',
 };
 
 export const TOKEN_CATEGORY = {

diff --git a/frontend_vue/src/components/tokens/signed_exe/GenerateTokenForm.vue b/frontend_vue/src/components/tokens/signed_exe/GenerateTokenForm.vue
@@ -3,7 +3,6 @@
     <BaseLabel
       id="signed_exe"
       class="text-center"
-      required
       >Upload your file</BaseLabel
     >
     <BaseUploadFile

diff --git a/frontend_vue/src/components/tokens/sql_server/GenerateTokenForm.vue b/frontend_vue/src/components/tokens/sql_server/GenerateTokenForm.vue
@@ -3,7 +3,6 @@
     <div class="text-center">
       <BaseLabel
         id="radio-group-action"
-        required
       >
         Action</BaseLabel
       >

diff --git a/frontend_vue/src/components/tokens/types.ts b/frontend_vue/src/components/tokens/types.ts
@@ -160,8 +160,9 @@ export type GeoInfo = {
 export type RequestHeaders = Record<string, string>;
 
 export type AWSLogDataType = {
-  last_used: Date | number | null;
+  last_used: string | null;
   service_used: string;
+  eventName: string | null;
 };
 
 export type AdditionalInfoType = {

diff --git a/frontend_vue/src/components/tokens/web_image/GenerateTokenForm.vue b/frontend_vue/src/components/tokens/web_image/GenerateTokenForm.vue
@@ -3,7 +3,6 @@
     <BaseLabel
       id="web_image"
       class="text-center"
-      required
       >Upload your image</BaseLabel
     >
     <BaseUploadFile

diff --git a/frontend_vue/src/components/ui/IncidentDetails.vue b/frontend_vue/src/components/ui/IncidentDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pb-32 m-4 bg-white rounded-2xl">
+  <div class="pb-32 bg-white sm:m-8 rounded-3xl">
     <div class="sticky top-[0px] bg-white h-[4rem] sm:h-40 flex justify-end">
       <button
         type="button"
@@ -65,12 +65,28 @@
                       >
                         <IncidentDetailsListItem
                           v-if="
-                            !isObject(nested_val) && isNotEmpty(deepnested_val)
+                            !isObject(deepnested_val) && isNotEmpty(deepnested_val)
                           "
                           :label="deepnested_key"
                           :value="deepnested_val"
                           class="py-8 ml-24"
                         />
+                         <template v-else>
+                          <template
+                            v-for="(deepestnested_val, deepernested_key) in deepnested_val"
+                            :key="deepernested_key"
+                          >
+                            <IncidentDetailsListItem
+                              v-if="
+                                !isObject(deepestnested_val) &&
+                                isNotEmpty(deepestnested_val)
+                              "
+                              :label="deepnested_key"
+                              :value="deepestnested_val"
+                              class="py-8 ml-24"
+                            />
+                            </template>
+                         </template>
                       </template>
                     </ul>
                     <div class="border-b border-grey-100"></div>

diff --git a/frontend_vue/src/utils/incidentAlertService.ts b/frontend_vue/src/utils/incidentAlertService.ts
@@ -1,4 +1,7 @@
-import { convertUnixTimeStampToDate } from '@/utils/utils';
+import {
+  convertUnixTimeStampToDate,
+  convertISOtoLocalDate,
+} from '@/utils/utils';
 import type { HitsType, FormattedHitsType } from '@/components/tokens/types.ts';
 import { tokenServices } from './tokenServices';
 import {
@@ -146,14 +149,14 @@ export function buildIncidentDetails(
           hitAlert.additional_info.aws_key_log_data
             ? {
                 last_used: hitAlert.additional_info.aws_key_log_data.last_used
-                  ? new Date(
-                      Number(
-                        hitAlert.additional_info.aws_key_log_data.last_used
-                      )
+                  ? convertISOtoLocalDate(
+                      hitAlert.additional_info.aws_key_log_data.last_used
                     )
                   : null,
                 service_used:
                   hitAlert.additional_info.aws_key_log_data.service_used,
+                eventName:
+                  hitAlert.additional_info.aws_key_log_data?.eventName ?? null,
               }
             : null,
       },

diff --git a/frontend_vue/src/utils/utils.ts b/frontend_vue/src/utils/utils.ts
@@ -13,6 +13,21 @@ export function convertUnixTimeStampToDate(unixTimestamp: number) {
   return formatter.format(date);
 }
 
+export function convertISOtoLocalDate(ISODate: string) {
+  const date = new Date(ISODate);
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  };
+  const formatter = new Intl.DateTimeFormat('en-US', options);
+  return formatter.format(date);
+}
+
 export const validFileExtensions = {
   image: ['jpg', 'gif', 'png', 'jpeg'],
   exe: ['exe', 'dll'],

diff --git a/frontend_vue/src/views/ComponentPreview.vue b/frontend_vue/src/views/ComponentPreview.vue
@@ -390,7 +390,7 @@ const alertSample = {
   src_data: null,
   useragent:
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36',
-  token_type: 'web',
+  token_type: 'aws_keys',
   request_headers: {
     Host: 'maxoooo.com',
     'X-Real-Ip': '13.245.103.199',
@@ -413,6 +413,13 @@ const alertSample = {
     mysql_client: null,
     r: null,
     l: null,
+    aws_key_log_data: {
+      last_used: '2022-07-29T05:48:00+00:00',
+      service_used: 'service test value',
+      eventName: [
+        "DescribeInstances"
+      ]
+    }
   },
 };
 </script>