[frontend] remove option to remove dynamic asset from asset group (#2434

) Signed-off-by: Antoine MAZEAS <[email protected]>
OpenBAS-Platform · Feb 12, 2025 · 9e05ec2 · 9e05ec2
1 parent 1eb6bc3
commit 9e05ec2
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 83 deletions.
diff --git a/openbas-front/src/admin/components/assets/asset_groups/AssetGroupManagement.tsx b/openbas-front/src/admin/components/assets/asset_groups/AssetGroupManagement.tsx
@@ -121,7 +121,7 @@ const AssetGroupManagement: FunctionComponent<Props> = ({
         <div className="clearfix" />
       </div>
       <EndpointsList
-        endpointIds={sortedAsset.map(e => e.asset_id)}
+        endpoints={sortedAsset}
         actions={userAdmin
           ? (
               // @ts-expect-error: Endpoint property handle by EndpointsList

diff --git a/openbas-front/src/admin/components/assets/endpoints/EndpointPopover.tsx b/openbas-front/src/admin/components/assets/endpoints/EndpointPopover.tsx
@@ -112,7 +112,7 @@ const EndpointPopover: React.FC<Props> = ({
   if ((assetGroupId && endpoint.type !== 'dynamic')) entries.push({ label: 'Remove from the asset group', action: () => handleRemoveFromAssetGroup() });
   if (onDelete) entries.push({ label: 'Delete', action: () => handleDelete() });
 
-  return (
+  return entries.length > 0 && (
     <>
       <ButtonPopover entries={entries} variant={inline ? 'icon' : 'toggle'} />
       {inline ? (
@@ -146,7 +146,7 @@ const EndpointPopover: React.FC<Props> = ({
         open={removalFromAssetGroup}
         handleClose={() => setRemovalFromAssetGroup(false)}
         handleSubmit={submitRemoveFromAssetGroup}
-        text={t('Do you want to remove the endpoint from the asset group ?')}
+        text={t('Do you want to remove the endpoint from the asset group?')}
       />
       <DialogDelete
         open={deletion}

diff --git a/openbas-front/src/admin/components/assets/endpoints/EndpointsList.tsx b/openbas-front/src/admin/components/assets/endpoints/EndpointsList.tsx
@@ -1,11 +1,9 @@
 import { DevicesOtherOutlined } from '@mui/icons-material';
 import { Chip, List, ListItem, ListItemIcon, ListItemText, Tooltip } from '@mui/material';
 import * as React from 'react';
-import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
+import { CSSProperties, FunctionComponent } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { findEndpoints } from '../../../../actions/assets/endpoint-actions';
-import ListLoader from '../../../../components/common/loader/ListLoader';
 import ItemTags from '../../../../components/ItemTags';
 import PlatformIcon from '../../../../components/PlatformIcon';
 import { EndpointOutput, EndpointOverviewOutput } from '../../../../utils/api-types';
@@ -50,96 +48,76 @@ const inlineStyles: Record<string, CSSProperties> = {
 export type EndpointStoreWithType = EndpointOutput & EndpointOverviewOutput & { type: string };
 
 interface Props {
-  endpointIds: string[];
+  endpoints: EndpointStoreWithType[];
   actions: React.ReactElement;
 }
 
 const EndpointsList: FunctionComponent<Props> = ({
-  endpointIds = [],
+  endpoints,
   actions,
 }) => {
   // Standard hooks
   const { classes } = useStyles();
 
-  const component = (endpoint: EndpointOutput) => {
+  const component = (endpoint: EndpointStoreWithType) => {
     return React.cloneElement(actions as React.ReactElement, { endpoint });
   };
 
-  const [loading, setLoading] = useState<boolean>(true);
-  const [endpointValues, setEndpointValues] = useState<EndpointOutput[]>([]);
-  useEffect(() => {
-    setLoading(true);
-    findEndpoints(endpointIds).then((result) => {
-      setEndpointValues(result.data);
-      setLoading(false);
-    });
-  }, [endpointIds]);
-
-  const isLoading = loading && endpointIds.length > 0;
-
   return (
-    <>
-      {
-        isLoading
-          ? <ListLoader Icon={DevicesOtherOutlined} headers={[]} headerStyles={inlineStyles} />
-          : (
-              <List>
-                {endpointValues?.map((endpoint) => {
-                  return (
-                    <ListItem
-                      key={endpoint.asset_id}
-                      classes={{ root: classes.item }}
-                      divider={true}
-                      secondaryAction={component(endpoint)}
-                    >
-                      <ListItemIcon>
-                        <DevicesOtherOutlined color="primary" />
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={(
-                          <>
-                            <div
-                              className={classes.bodyItem}
-                              style={inlineStyles.asset_name}
-                            >
-                              {endpoint.asset_name}
-                            </div>
-                            <div
-                              className={classes.bodyItem}
-                              style={inlineStyles.asset_platform}
-                            >
-                              <PlatformIcon platform={endpoint.endpoint_platform} width={20} marginRight={10} />
-                              {' '}
-                              {endpoint.endpoint_platform}
-                            </div>
-                            <div
-                              className={classes.bodyItem}
-                              style={inlineStyles.asset_tags}
-                            >
-                              <ItemTags variant="reduced-view" tags={endpoint.asset_tags} />
-                            </div>
-                            <div
-                              className={classes.bodyItem}
-                              style={inlineStyles.asset_type}
-                            >
-                              <Tooltip title={endpoint.asset_type}>
-                                <Chip
-                                  variant="outlined"
-                                  className={classes.typeChip}
-                                  label={endpoint.asset_type}
-                                />
-                              </Tooltip>
-                            </div>
-                          </>
-                        )}
+    <List>
+      {endpoints?.map((endpoint) => {
+        return (
+          <ListItem
+            key={endpoint.asset_id}
+            classes={{ root: classes.item }}
+            divider={true}
+            secondaryAction={component(endpoint)}
+          >
+            <ListItemIcon>
+              <DevicesOtherOutlined color="primary" />
+            </ListItemIcon>
+            <ListItemText
+              primary={(
+                <>
+                  <div
+                    className={classes.bodyItem}
+                    style={inlineStyles.asset_name}
+                  >
+                    {endpoint.asset_name}
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={inlineStyles.asset_platform}
+                  >
+                    <PlatformIcon platform={endpoint.endpoint_platform} width={20} marginRight={10} />
+                    {' '}
+                    {endpoint.endpoint_platform}
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={inlineStyles.asset_tags}
+                  >
+                    <ItemTags variant="reduced-view" tags={endpoint.asset_tags} />
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={inlineStyles.asset_type}
+                  >
+                    <Tooltip title={endpoint.asset_type}>
+                      <Chip
+                        variant="outlined"
+                        className={classes.typeChip}
+                        label={endpoint.asset_type}
                       />
-                    </ListItem>
-                  );
-                })}
-              </List>
-            )
-      }
-    </>
+                    </Tooltip>
+                  </div>
+                </>
+              )}
+            />
+          </ListItem>
+        );
+      })}
+    </List>
   );
 };
 

diff --git a/openbas-front/src/utils/Localization.js b/openbas-front/src/utils/Localization.js
@@ -871,7 +871,7 @@ const i18n = {
       'Update the asset group': 'Modifier l\'asset group',
       'Manage assets': 'Gérer les actifs',
       'Add assets in this asset group': 'Ajouter des actifs dans ce groupe d\'actifs',
-      'Remove from the asset group': 'Retirer de ce groupe d\'asset',
+      'Remove from the asset group': 'Retirer de ce groupe d\'actifs',
       'Targeted assets': 'Assets ciblés',
       'Targeted asset groups': 'Groupes d\'assets ciblés',
       'Modify target asset groups': 'Modifier des groupes d\'assets',
@@ -892,6 +892,7 @@ const i18n = {
         + 'Il peut contenir des espaces ou des tirets ( – ) ou des parenthèses.\n',
       'Instantiate a simulation': 'Créer une nouvelle simulation',
       'Do you want to delete the asset group ?': 'Voulez-vous supprimer le groupe d\'actifs ?',
+      'Do you want to remove the endpoint from the asset group?': 'Voulez-vous retirer cet endpoint du groupe d\'actifs ?',
       // -- FILTERS --
       'Add filter': 'Ajout d\'un filtre',
       'Clear filters': 'Supprimer les filtres',
@@ -2319,6 +2320,7 @@ const i18n = {
       'phone_number_tooltip': '电话号码应以加号 ( + )开头\n'
         + '它可以包含空格、连字符( - ) 或括号.\n',
       'Instantiate a simulation': '实例化模拟',
+      'Do you want to remove the endpoint from the asset group?': '您想从资产组中删除端点吗？',
       // -- FILTERS --
       'Add filter': '添加过滤器',
       'Clear filters': '清除过滤器',
@@ -2913,6 +2915,7 @@ const i18n = {
         + 'It may contain white spaces or hyphens ( – ) or parenthesis.\n',
       'Exercise': 'Simulation',
       'Scheduling_time': 'Time',
+      'Do you want to remove the endpoint from the asset group?': 'Do you want to remove the endpoint from the asset group?',
       // -- FILTERS --
       // Asset
       'asset_tags': 'Tags',