[front] Enhance infrastructures list

OpenCTI-Platform · Mar 8, 2023 · c1c9abb · c1c9abb
1 parent 0a77b6c
commit c1c9abb
Show file tree

Hide file tree

Showing 24 changed files with 361 additions and 138 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemPatternType.tsx b/opencti-platform/opencti-front/src/components/ItemPatternType.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import Chip from '@mui/material/Chip';
 import makeStyles from '@mui/styles/makeStyles';
-import { useFormatter } from './i18n';
 
 const styles = makeStyles(() => ({
   chip: {
@@ -93,15 +92,14 @@ const ItemPatternType: FunctionComponent<ItemPatternTypeProps> = ({
   variant,
   label,
 }) => {
-  const { t } = useFormatter();
   const classes = styles();
   const style = variant === 'inList' ? classes.chipInList : classes.chip;
   const hasPredefinedStyle = Object.keys(inlineStyles).includes(label);
   return (
     <Chip
       className={style}
       style={hasPredefinedStyle ? inlineStyles[label] : inlineStyles.stix}
-      label={t(label)}
+      label={label}
     />
   );
 };

diff --git a/opencti-platform/opencti-front/src/private/components/analysis/ExternalReferences.tsx b/opencti-platform/opencti-front/src/private/components/analysis/ExternalReferences.tsx
@@ -63,7 +63,7 @@ const ExternalReferences: FunctionComponent<ExternalReferencesProps> = () => {
       isSortable: isRuntimeSort,
     },
     created: {
-      label: 'Creation date',
+      label: 'Date',
       width: '15%',
       isSortable: true,
     },

diff --git a/opencti-platform/opencti-front/src/private/components/analysis/Reports.tsx b/opencti-platform/opencti-front/src/private/components/analysis/Reports.tsx
@@ -220,14 +220,14 @@ const Reports: FunctionComponent<ReportsProps> = ({
     );
   };
   return (
-      <ExportContextProvider>
-          <div>
-            {renderLines()}
-            <Security needs={[KNOWLEDGE_KNUPDATE]}>
-              <ReportCreation paginationOptions={paginationOptions} />
-            </Security>
-          </div>
-      </ExportContextProvider>
+    <ExportContextProvider>
+      <div>
+        {renderLines()}
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <ReportCreation paginationOptions={paginationOptions} />
+        </Security>
+      </div>
+    </ExportContextProvider>
   );
 };
 

diff --git a/opencti-platform/opencti-front/src/private/components/cases/Incidents.tsx b/opencti-platform/opencti-front/src/private/components/cases/Incidents.tsx
@@ -106,7 +106,7 @@ const Incidents: FunctionComponent<CasesProps> = () => {
         isSortable: false,
       },
       created: {
-        label: 'Creation date',
+        label: 'Date',
         width: '10%',
         isSortable: true,
       },

diff --git a/opencti-platform/opencti-front/src/private/components/events/Incidents.tsx b/opencti-platform/opencti-front/src/private/components/events/Incidents.tsx
@@ -110,7 +110,7 @@ const Incidents: FunctionComponent = () => {
       isSortable: false,
     },
     created: {
-      label: 'Creation date',
+      label: 'Date',
       width: '10%',
       isSortable: true,
     },

diff --git a/opencti-platform/opencti-front/src/private/components/observations/Artifacts.js b/opencti-platform/opencti-front/src/private/components/observations/Artifacts.js
@@ -184,36 +184,47 @@ class StixCyberObservables extends Component {
     return {
       observable_value: {
         label: 'Value',
-        width: '15%',
+        width: '12%',
         isSortable: isRuntimeSort,
       },
       file_name: {
         label: 'File name',
-        width: '20%',
+        width: '12%',
         isSortable: false,
       },
       file_mime_type: {
         label: 'Mime/Type',
-        width: '15%',
+        width: '8%',
         isSortable: false,
       },
       file_size: {
         label: 'File size',
-        width: '10%',
+        width: '8%',
         isSortable: false,
       },
+      createdBy: {
+        label: 'Author',
+        width: '12%',
+        isSortable: isRuntimeSort,
+      },
+      creator: {
+        label: 'Creators',
+        width: '12%',
+        isSortable: isRuntimeSort,
+      },
       objectLabel: {
         label: 'Labels',
         width: '15%',
         isSortable: false,
       },
       created_at: {
-        label: 'Creation date',
-        width: '15%',
+        label: 'Date',
+        width: '10%',
         isSortable: true,
       },
       objectMarking: {
         label: 'Marking',
+        width: '10%',
         isSortable: isRuntimeSort,
       },
     };

diff --git a/opencti-platform/opencti-front/src/private/components/observations/Indicators.tsx b/opencti-platform/opencti-front/src/private/components/observations/Indicators.tsx
@@ -128,36 +128,42 @@ const Indicators = () => {
     const dataColumns = {
       pattern_type: {
         label: 'Pattern type',
-        width: '10%',
+        width: '8%',
         isSortable: true,
       },
       name: {
         label: 'Name',
-        width: '25%',
+        width: '22%',
         isSortable: true,
       },
+      createdBy: {
+        label: 'Author',
+        width: '12%',
+        isSortable: isRuntimeSort ?? false,
+      },
+      creator: {
+        label: 'Creators',
+        width: '12%',
+        isSortable: isRuntimeSort ?? false,
+      },
       objectLabel: {
         label: 'Labels',
-        width: '10%',
+        width: '15%',
         isSortable: false,
       },
       created: {
-        label: 'Creation date',
-        width: '15%',
-        isSortable: true,
-      },
-      creator: {
-        label: 'Creator',
+        label: 'Date',
         width: '10%',
         isSortable: true,
       },
       valid_until: {
         label: 'Valid until',
-        width: '13%',
+        width: '10%',
         isSortable: true,
       },
       objectMarking: {
         label: 'Marking',
+        width: '10%',
         isSortable: isRuntimeSort ?? false,
       },
     };

diff --git a/opencti-platform/opencti-front/src/private/components/observations/Infrastructures.js b/opencti-platform/opencti-front/src/private/components/observations/Infrastructures.js
@@ -8,6 +8,7 @@ import {
   convertFilters,
   saveViewParameters,
 } from '../../../utils/ListParameters';
+import { UserContext } from '../../../utils/hooks/useAuth';
 import inject18n from '../../../components/i18n';
 import ListLines from '../../../components/list_lines/ListLines';
 import InfrastructuresLines, {
@@ -97,7 +98,7 @@ class Infrastructures extends Component {
     this.setState({ numberOfElements });
   }
 
-  renderLines(paginationOptions) {
+  renderLines(paginationOptions, helper) {
     const {
       sortBy,
       orderAsc,
@@ -106,26 +107,42 @@ class Infrastructures extends Component {
       openExports,
       numberOfElements,
     } = this.state;
+    const isRuntimeSort = helper?.isRuntimeFieldEnable() ?? false;
     const dataColumns = {
       name: {
         label: 'Name',
-        width: '35%',
+        width: '25%',
+        isSortable: true,
+      },
+      infrastructure_types: {
+        label: 'Type',
+        width: '8%',
         isSortable: true,
       },
+      createdBy: {
+        label: 'Author',
+        width: '12%',
+        isSortable: isRuntimeSort,
+      },
+      creator: {
+        label: 'Creators',
+        width: '12%',
+        isSortable: isRuntimeSort,
+      },
       objectLabel: {
         label: 'Labels',
-        width: '25%',
+        width: '15%',
         isSortable: false,
       },
       created: {
-        label: 'Creation date',
-        width: '15%',
+        label: 'Date',
+        width: '10%',
         isSortable: true,
       },
-      modified: {
-        label: 'Modification date',
-        width: '15%',
-        isSortable: true,
+      objectMarking: {
+        label: 'Marking',
+        isSortable: isRuntimeSort,
+        width: '8%',
       },
     };
     return (
@@ -181,12 +198,18 @@ class Infrastructures extends Component {
       filters: finalFilters,
     };
     return (
-      <div>
-        {view === 'lines' ? this.renderLines(paginationOptions) : ''}
-        <Security needs={[KNOWLEDGE_KNUPDATE]}>
-          <InfrastructureCreation paginationOptions={paginationOptions} />
-        </Security>
-      </div>
+      <UserContext.Consumer>
+        {({ helper }) => (
+          <div>
+            {view === 'lines'
+              ? this.renderLines(paginationOptions, helper)
+              : ''}
+            <Security needs={[KNOWLEDGE_KNUPDATE]}>
+              <InfrastructureCreation paginationOptions={paginationOptions} />
+            </Security>
+          </div>
+        )}
+      </UserContext.Consumer>
     );
   }
 }

diff --git a/opencti-platform/opencti-front/src/private/components/observations/StixCyberObservables.tsx b/opencti-platform/opencti-front/src/private/components/observations/StixCyberObservables.tsx
@@ -135,14 +135,14 @@ const StixCyberObservables: FunctionComponent = () => {
         isSortable: false,
       },
       created_at: {
-        label: 'Creation',
+        label: 'Date',
         width: '10%',
         isSortable: true,
       },
       objectMarking: {
         label: 'Marking',
-        isSortable: isRuntimeSort,
         width: '10%',
+        isSortable: isRuntimeSort,
       },
     };
   };

diff --git a/opencti-platform/opencti-front/src/private/components/observations/artifacts/ArtifactLine.js b/opencti-platform/opencti-front/src/private/components/observations/artifacts/ArtifactLine.js
@@ -120,6 +120,18 @@ class ArtifactLineComponent extends Component {
               >
                 {b(file.size)}
               </div>
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.createdBy.width }}
+              >
+                {node.createdBy?.name}
+              </div>
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.creator.width }}
+              >
+                {(node.creators ?? []).map((c) => c?.name).join(', ')}
+              </div>
               <div
                 className={classes.bodyItem}
                 style={{ width: dataColumns.objectLabel.width }}
@@ -178,6 +190,13 @@ const ArtifactLineFragment = createFragmentContainer(ArtifactLineComponent, {
       parent_types
       observable_value
       created_at
+      createdBy {
+        ... on Identity {
+          id
+          name
+          entity_type
+        }
+      }
       objectMarking {
         edges {
           node {
@@ -198,6 +217,10 @@ const ArtifactLineFragment = createFragmentContainer(ArtifactLineComponent, {
           }
         }
       }
+      creators {
+        id
+        name
+      }
       importFiles {
         edges {
           node {
@@ -285,6 +308,28 @@ class ArtifactLineDummyComponent extends Component {
                   height="100%"
                 />
               </div>
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.createdBy.width }}
+              >
+                <Skeleton
+                  animation="wave"
+                  variant="rectangular"
+                  width="90%"
+                  height="100%"
+                />
+              </div>
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.creator.width }}
+              >
+                <Skeleton
+                  animation="wave"
+                  variant="rectangular"
+                  width="90%"
+                  height="100%"
+                />
+              </div>
               <div
                 className={classes.bodyItem}
                 style={{ width: dataColumns.objectLabel.width }}