[frontend] Add data columns and force zip (#5548-support-logs)

opencti-platform/opencti-front/src/private/components/settings/support/SupportPackageLine.tsx

@@ -5,7 +5,7 @@ import ListItemText from '@mui/material/ListItemText';
 import makeStyles from '@mui/styles/makeStyles';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { FileOutline } from 'mdi-material-ui';
+import { FileOutline, ProgressUpload } from 'mdi-material-ui';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import IconButton from '@mui/material/IconButton';
 import { DeleteOutlined, GetAppOutlined } from '@mui/icons-material';
@@ -17,10 +17,13 @@ import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import CircularProgress from '@mui/material/CircularProgress';
-import { APP_BASE_PATH, handleError } from '../../../../relay/environment';
+import Chip from '@mui/material/Chip';
+import { APP_BASE_PATH, handleError, MESSAGING$ } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
 import Transition from '../../../../components/Transition';
 import { deleteNode } from '../../../../utils/store';
+import { hexToRGB } from '../../../../utils/Colors';
+import { DataColumns } from '../../../../components/list_lines';
 
 const useStyles = makeStyles(() => ({
   bodyItem: {
@@ -37,8 +40,32 @@ const useStyles = makeStyles(() => ({
     height: 50,
     cursor: 'default',
   },
+  chipInList: {
+    fontSize: 12,
+    height: 20,
+    float: 'left',
+    borderRadius: 4,
+    width: 80,
+  },
+  label: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
 }));
 
+type PackageStatus = 'IN_PROGRESS' | 'READY' | 'IN_ERROR' | '%future added value';
+
+const SupportPackageLineForceZipMutation = graphql`
+  mutation SupportPackageLineForceZipMutation(    
+    $input: SupportPackageForceZipInput!
+  ) {
+      supportPackageForceZip(input: $input) {
+        id
+      }
+  }
+`;
+
 const SupportPackageLineDeleteMutation = graphql`
   mutation SupportPackageLineDeleteMutation($id: ID!) {
     supportPackageDelete(id: $id)
@@ -52,24 +79,39 @@ export const supportPackageLineFragment = graphql`
     package_status
     package_url
     package_upload_dir
+    created_at
+    creators {
+      id
+      name
+    }
   }
 `;
 
+const packageStatusColors: { [key in PackageStatus]: string } = {
+  IN_PROGRESS: '#303f9f',
+  READY: '#4caf50',
+  IN_ERROR: '#f44336',
+  '%future added value': '#9e9e9e',
+};
+
 interface SupportPackageLineProps {
+  dataColumns: DataColumns;
   node: SupportPackageLine_node$key;
   paginationOptions: { search: string; orderMode: string; orderBy: string };
 }
 
 const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
   node,
   paginationOptions,
+  dataColumns,
 }) => {
   const classes = useStyles();
-  const { t_i18n } = useFormatter();
+  const { t_i18n, fd } = useFormatter();
   const data = useFragment(supportPackageLineFragment, node);
   const [displayDelete, setDisplayDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [commitDelete] = useMutation(SupportPackageLineDeleteMutation);
+  const [commitForceZip] = useMutation(SupportPackageLineForceZipMutation);
   const isProgress = data?.package_status === 'IN_PROGRESS';
 
   const handleOpenDelete = () => {
@@ -102,6 +144,27 @@ const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
     });
   };
 
+  const handleForceZip = () => {
+    commitForceZip({
+      variables: {
+        input: {
+          id: data.id,
+        },
+      },
+      onCompleted: () => {
+        // Check if there is a valid URL and initiate download
+        if (data.package_url) {
+          MESSAGING$.notifySuccess(
+            'Force zip launched. Your download will start shortly.',
+          );
+          window.location.href = `${APP_BASE_PATH}/storage/get/${encodeURIComponent(data.package_url)}`;
+        } else {
+          MESSAGING$.notifyError('No download URL available.');
+        }
+      },
+    });
+  };
+
   return (
     <>
       <ListItem classes={{ root: classes.item }} divider={true}>
@@ -120,14 +183,54 @@ const SupportPackageLine: FunctionComponent<SupportPackageLineProps> = ({
         </ListItemIcon>
         <ListItemText
           primary={
-            <div>
-              <div className={classes.bodyItem}>
-                {data?.name}
+            <>
+              <Tooltip title={data.name}>
+                <div
+                  className={classes.bodyItem}
+                  style={{ width: dataColumns.name.width }}
+                >
+                  {data?.name}
+                </div>
+              </Tooltip>
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.packageStatus.width }}
+              >
+                <Chip
+                  classes={{ root: classes.chipInList, label: classes.label }}
+                  style={{
+                    color: packageStatusColors[data.package_status],
+                    borderColor: packageStatusColors[data.package_status],
+                    backgroundColor: hexToRGB(packageStatusColors[data.package_status]),
+                  }}
+                  label={data?.package_status}
+                />
+              </div>
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.creators.width }}
+              >
+                {(data.creators ?? []).map((c) => c?.name).join(', ')}
               </div>
-            </div>
-            }
+              <div
+                className={classes.bodyItem}
+                style={{ width: dataColumns.created.width }}
+              >
+                {fd(data.created_at)}
+              </div>
+            </>
+          }
         />
         <ListItemSecondaryAction>
+          <Tooltip title={t_i18n('Force Download on this file')}>
+            <span>
+              <IconButton
+                onClick={handleForceZip}
+              >
+                <ProgressUpload fontSize="small" />
+              </IconButton>
+            </span>
+          </Tooltip>
           <Tooltip title={t_i18n('Download this file')}>
             <span>
               <IconButton

opencti-platform/opencti-front/src/private/components/settings/support/SupportPackageLines.tsx

@@ -9,10 +9,12 @@ import SupportPackageLine from '@components/settings/support/SupportPackageLine'
 import usePreloadedPaginationFragment from '../../../../utils/hooks/usePreloadedPaginationFragment';
 import { UseLocalStorageHelpers } from '../../../../utils/hooks/useLocalStorage';
 import ListLinesContent from '../../../../components/list_lines/ListLinesContent';
+import { DataColumns } from '../../../../components/list_lines';
 
 const nbOfRowsToLoad = 50;
 
 interface SupportPackageLinesProps {
+  dataColumns: DataColumns;
   queryRef: PreloadedQuery<SupportPackageLinesPaginationQuery>;
   paginationOptions: SupportPackageLinesPaginationQuery$variables;
   setNumberOfElements: UseLocalStorageHelpers['handleSetNumberOfElements'];
@@ -70,6 +72,7 @@ const supportPackageLinesFragment = graphql`
 const SupportPackageLines: FunctionComponent<SupportPackageLinesProps> = ({
   queryRef,
   setNumberOfElements,
+  dataColumns,
   paginationOptions,
 }) => {
   const { data, hasMore, loadMore, isLoadingMore } = usePreloadedPaginationFragment<
@@ -89,6 +92,7 @@ const SupportPackageLines: FunctionComponent<SupportPackageLinesProps> = ({
         loadMore={loadMore}
         hasMore={hasMore}
         isLoading={isLoadingMore}
+        dataColumns={dataColumns}
         dataList={data?.supportPackages?.edges ?? []}
         globalCount={
           data?.supportPackages?.pageInfo?.globalCount ?? nbOfRowsToLoad

opencti-platform/opencti-front/src/private/components/settings/support/SupportPackages.tsx

@@ -101,9 +101,32 @@ const SupportPackages = () => {
       supportPackageLinesQuery,
       paginationOptions,
     );
+    const dataColumns = {
+      name: {
+        label: 'Name',
+        width: '25%',
+        isSortable: true,
+      },
+      packageStatus: {
+        label: 'Status',
+        width: '25%',
+        isSortable: true,
+      },
+      creators: {
+        label: 'Creator',
+        width: '25%',
+        isSortable: true,
+      },
+      created: {
+        label: 'Date',
+        width: '25%',
+        isSortable: true,
+      },
+    };
     return (
       <ListLines
         helpers={helpers}
+        dataColumns={dataColumns}
         sortBy={sortBy}
         orderAsc={orderAsc}
         keyword={searchTerm}
@@ -113,6 +136,7 @@ const SupportPackages = () => {
             <SupportPackageLines
               queryRef={queryRef}
               paginationOptions={paginationOptions}
+              dataColumns={dataColumns}
               setNumberOfElements={helpers.handleSetNumberOfElements}
             />
           </React.Suspense>
@@ -136,11 +160,11 @@ const SupportPackages = () => {
         <Grid container={true} spacing={4}
           classes={{ container: classes.gridContainer }}
         >
-          <Grid item={true} xs={6} style={{ paddingTop: 10 }}>
+          <Grid item={true} xs={8} style={{ paddingTop: 10 }}>
             <div style={{ height: '100%' }}>
               <div className="clearfix"/>
               <Paper classes={{ root: classes.paper }} variant="outlined">
-                <Typography variant="h4" gutterBottom={true} style={{ float: 'left', marginTop: '8px', fontSize: '13px' }}>
+                <Typography variant="h4" gutterBottom={true} style={{ float: 'left', marginTop: '8px', fontSize: '13px', marginBottom: '40px' }}>
                   {t_i18n('Generated Support Package')}
                 </Typography>
                 <Button

opencti-platform/opencti-front/src/schema/relay.schema.graphql

@@ -11495,12 +11495,14 @@ type SupportPackage implements InternalObject & BasicObject {
   standard_id: String!
   entity_type: String!
   parent_types: [String]!
-  created: DateTime!
+  created_at: DateTime!
   package_status: PackageStatus!
   package_url: String
   package_upload_dir: String
   nodes_status: [SupportNodeStatus]
   nodes_count: Int!
+  createdBy: Individual
+  creators: [Creator!]
 }
 
 type SupportPackageConnection {
@@ -11526,6 +11528,9 @@ enum PackageStatus {
 
 enum SupportPackageOrdering {
   name
+  created_at
+  creators
+  package_status
 }
 
 input SupportPackageAddInput {

opencti-platform/opencti-graphql/src/generated/graphql.ts

@@ -24169,7 +24169,9 @@ export type SupportNodeStatus = {
 
 export type SupportPackage = BasicObject & InternalObject & {
   __typename?: 'SupportPackage';
-  created: Scalars['DateTime']['output'];
+  createdBy?: Maybe<Individual>;
+  created_at: Scalars['DateTime']['output'];
+  creators?: Maybe<Array<Creator>>;
   entity_type: Scalars['String']['output'];
   id: Scalars['ID']['output'];
   name: Scalars['String']['output'];
@@ -24203,7 +24205,10 @@ export type SupportPackageForceZipInput = {
 };
 
 export enum SupportPackageOrdering {
-  Name = 'name'
+  CreatedAt = 'created_at',
+  Creators = 'creators',
+  Name = 'name',
+  PackageStatus = 'package_status'
 }
 
 export type Synchronizer = {
@@ -37228,7 +37233,9 @@ export type SupportNodeStatusResolvers<ContextType = any, ParentType extends Res
 }>;
 
 export type SupportPackageResolvers<ContextType = any, ParentType extends ResolversParentTypes['SupportPackage'] = ResolversParentTypes['SupportPackage']> = ResolversObject<{
-  created?: Resolver<ResolversTypes['DateTime'], ParentType, ContextType>;
+  createdBy?: Resolver<Maybe<ResolversTypes['Individual']>, ParentType, ContextType>;
+  created_at?: Resolver<ResolversTypes['DateTime'], ParentType, ContextType>;
+  creators?: Resolver<Maybe<Array<ResolversTypes['Creator']>>, ParentType, ContextType>;
   entity_type?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   name?: Resolver<ResolversTypes['String'], ParentType, ContextType>;

opencti-platform/opencti-graphql/src/modules/support/support.graphql

@@ -4,12 +4,14 @@ type SupportPackage implements InternalObject & BasicObject {
     standard_id: String!
     entity_type: String!
     parent_types: [String]!
-    created: DateTime!
+    created_at: DateTime!
     package_status: PackageStatus!
     package_url: String
     package_upload_dir: String
     nodes_status: [SupportNodeStatus]
     nodes_count: Int!
+    createdBy: Individual
+    creators: [Creator!]
 }
 
 type SupportPackageConnection {
@@ -35,6 +37,9 @@ enum PackageStatus {
 
 enum SupportPackageOrdering {
     name
+    created_at
+    creators
+    package_status
 }
 
 input SupportPackageAddInput {