[frontend] format attribute name, translations and select placeholder (…

…#7295)
OpenCTI-Platform · Jan 13, 2025 · 3d5e1a2 · 3d5e1a2
1 parent f66dffa
commit 3d5e1a2
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 21 deletions.
diff --git a/opencti-platform/opencti-front/lang/front/de.json b/opencti-platform/opencti-front/lang/front/de.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "Anpassung: Benachrichtigungen | Einstellungen",
   "Customization: Retention | Settings": "Anpassung: Aufbewahrung | Einstellungen",
   "Customization: Rules Engine | Settings": "Anpassung: Rules Engine | Einstellungen",
+  "Customize columns": "Spalten anpassen",
   "Customize scale": "Skala anpassen",
   "CVSS3 - Attack vector": "CVSS3 - Angriffsvektor",
   "CVSS3 - Attack vector (AV)": "CVSS3 - Angriffsvektor (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "Alle vom Benutzer erstellten Entitäten anzeigen",
   "See all relationships created by user": "Alle vom Benutzer erstellten Beziehungen anzeigen",
   "Select": "Wählen Sie",
+  "Select a column to add": "Wählen Sie eine Spalte zum Hinzufügen",
   "Select a relationship": "Wählen Sie eine Beziehung",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "Wählen Sie eine Beispieldatei im CSV-Format mit einer maximalen Größe von 5 MB, um die Verarbeitungszeit zu begrenzen.",
   "Select a sighting": "Wählen Sie eine Sichtung",

diff --git a/opencti-platform/opencti-front/lang/front/en.json b/opencti-platform/opencti-front/lang/front/en.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "Customization: Notifiers | Settings",
   "Customization: Retention | Settings": "Customization: Retention | Settings",
   "Customization: Rules Engine | Settings": "Customization: Rules Engine | Settings",
+  "Customize columns": "Customize columns",
   "Customize scale": "Customize scale",
   "CVSS3 - Attack vector": "CVSS3 - Attack vector",
   "CVSS3 - Attack vector (AV)": "CVSS3 - Attack vector (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "See all entities created by user",
   "See all relationships created by user": "See all relationships created by user",
   "Select": "Select",
+  "Select a column to add": "Select a column to add",
   "Select a relationship": "Select a relationship",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.",
   "Select a sighting": "Select a sighting",

diff --git a/opencti-platform/opencti-front/lang/front/es.json b/opencti-platform/opencti-front/lang/front/es.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "Personalización: Notificadores | Configuración",
   "Customization: Retention | Settings": "Personalización: Retención | Configuración",
   "Customization: Rules Engine | Settings": "Personalización: Motor de reglas | Configuración",
+  "Customize columns": "Personalizar columnas",
   "Customize scale": "Personalizar escala",
   "CVSS3 - Attack vector": "CVSS3 - Vector de ataque",
   "CVSS3 - Attack vector (AV)": "CVSS3 - Vector de ataque (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "Ver todas las entidades creadas por el usuario",
   "See all relationships created by user": "Ver todas las relaciones creadas por el usuario",
   "Select": "Seleccione",
+  "Select a column to add": "Seleccione una columna para añadir",
   "Select a relationship": "Seleccionar una relación ",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "Seleccione un archivo de muestra en formato CSV, con un tamaño máximo de 1MB para limitar el tiempo de procesamiento.",
   "Select a sighting": "Seleccione un avistamiento",

diff --git a/opencti-platform/opencti-front/lang/front/fr.json b/opencti-platform/opencti-front/lang/front/fr.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "Personnalisation : Notificateurs | Paramètres",
   "Customization: Retention | Settings": "Personnalisation : Rétention | Paramètres",
   "Customization: Rules Engine | Settings": "Personnalisation : Moteur de règles | Paramètres",
+  "Customize columns": "Personnaliser les colonnes",
   "Customize scale": "Personnaliser l'intervalle",
   "CVSS3 - Attack vector": "CVSS3 - Vecteur d'attaque",
   "CVSS3 - Attack vector (AV)": "CVSS3 - Vecteur d'attaque (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "Voir toutes les entités crées par l'utilisateur",
   "See all relationships created by user": "Voir toutes les relations crées par l'utilisateur",
   "Select": "Sélectionnez",
+  "Select a column to add": "Sélectionner une colonne à ajouter",
   "Select a relationship": "Sélectionner une relation",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "Sélectionnez un fichier d'exemple au format CSV, avec une taille maximale de 5 Mo pour limiter le temps de traitement.",
   "Select a sighting": "Sélectionnez une observation",

diff --git a/opencti-platform/opencti-front/lang/front/ja.json b/opencti-platform/opencti-front/lang/front/ja.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "カスタマイズ: Notifiers | Settings",
   "Customization: Retention | Settings": "カスタマイズ:保持|設定",
   "Customization: Rules Engine | Settings": "カスタマイズ:ルールエンジン|設定",
+  "Customize columns": "コラムのカスタマイズ",
   "Customize scale": "スケールのカスタマイズ",
   "CVSS3 - Attack vector": "CVSS3 - 攻撃ベクトル",
   "CVSS3 - Attack vector (AV)": "CVSS3 - 攻撃ベクトル (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "ユーザーが作成したすべてのエンティティを見る",
   "See all relationships created by user": "ユーザーが作成したすべての関係を見る",
   "Select": "選択する",
+  "Select a column to add": "追加する列を選択する",
   "Select a relationship": "リレーションシップを選択",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "処理時間を制限するために、最大サイズが1MBのCSV形式のサンプルファイルを選択してください。",
   "Select a sighting": "目撃情報を選択してください",

diff --git a/opencti-platform/opencti-front/lang/front/ko.json b/opencti-platform/opencti-front/lang/front/ko.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "사용자 정의: 알림 | 설정",
   "Customization: Retention | Settings": "사용자 정의: 보존 | 설정",
   "Customization: Rules Engine | Settings": "사용자 정의: 규칙 엔진 | 설정",
+  "Customize columns": "열 사용자 지정",
   "Customize scale": "척도 맞춤 설정",
   "CVSS3 - Attack vector": "CVSS3 - 공격 벡터",
   "CVSS3 - Attack vector (AV)": "CVSS3 - 공격 벡터 (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "사용자가 만든 모든 엔터티 보기",
   "See all relationships created by user": "사용자가 만든 모든 관계 보기",
   "Select": "선택",
+  "Select a column to add": "추가할 열을 선택합니다",
   "Select a relationship": "관계 선택",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "처리 시간을 제한하기 위해 최대 1MB 크기의 CSV 형식 샘플 파일을 선택하세요.",
   "Select a sighting": "목격 선택",

diff --git a/opencti-platform/opencti-front/lang/front/zh.json b/opencti-platform/opencti-front/lang/front/zh.json
@@ -622,6 +622,7 @@
   "Customization: Notifiers | Settings": "自定义：通知器|设置",
   "Customization: Retention | Settings": "自定义：保留|设置",
   "Customization: Rules Engine | Settings": "自定义：规则引擎|设置",
+  "Customize columns": "自定义列",
   "Customize scale": "定制规模",
   "CVSS3 - Attack vector": "CVSS3 - 攻击向量",
   "CVSS3 - Attack vector (AV)": "CVSS3 - 攻击向量 (AV)",
@@ -2546,6 +2547,7 @@
   "See all entities created by user": "查看用户创建的所有实体",
   "See all relationships created by user": "查看用户创建的所有关系",
   "Select": "选择",
+  "Select a column to add": "选择要添加的列",
   "Select a relationship": "更新关系",
   "Select a sample file in CSV format, with a maximum size of 1MB to limit the processing time.": "选择一个最大为1MB的CSV格式示例文件，以限制处理时间。",
   "Select a sighting": "选择目击事件",

diff --git a/...i-front/src/private/components/workspaces/dashboards/WidgetConfigColumnsCustomization.tsx b/...i-front/src/private/components/workspaces/dashboards/WidgetConfigColumnsCustomization.tsx
@@ -3,6 +3,7 @@ import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea
 import { List, ListItem, ListItemIcon, ListItemText, ListItemSecondaryAction, IconButton, Select, MenuItem, AccordionDetails } from '@mui/material';
 import { useTheme } from '@mui/styles';
 import { DeleteOutlined, DragIndicatorOutlined } from '@mui/icons-material';
+import Typography from '@mui/material/Typography';
 import type { Theme } from '../../../../components/Theme';
 import { useFormatter } from '../../../../components/i18n';
 import type { WidgetColumn } from '../../../../utils/widget/widget';
@@ -33,32 +34,37 @@ const WidgetConfigColumnsCustomization: FunctionComponent<WidgetConfigColumnsCus
     setColumns(reorderedColumns);
   };
 
+  const formatAttribute = (attribute: string) => attribute.replace('.', '_');
+
+  const handleSelect = (selectedColumnAttribute: string) => {
+    const columnToAdd = availableColumns.find((col) => col.attribute === selectedColumnAttribute);
+    if (columnToAdd) {
+      setColumns([...columns, columnToAdd]);
+    }
+    setNewColumn(null);
+  };
+
   const handleRemove = (attribute: string) => {
     setColumns(columns.filter((col) => col.attribute !== attribute));
   };
 
   return (
     <Accordion sx={{ width: '100%' }}>
-      <AccordionSummary
-        aria-controls="custom_columns_content"
-        id="custom_columns_header"
-      >
-        <ListItemText primary={t_i18n('Customize Columns')} />
+      <AccordionSummary>
+        <Typography> {t_i18n('Customize columns')} </Typography>
       </AccordionSummary>
-      <AccordionDetails id="custom_columns_content">
+      <AccordionDetails sx={{ padding: 0 }}>
         <DragDropContext onDragEnd={handleDragEnd}>
           <Droppable droppableId="custom_columns_list">
             {(providedDrop) => (
               <List
                 ref={providedDrop.innerRef}
                 {...providedDrop.droppableProps}
                 sx={{
-                  width: '100%',
-                  background: theme.palette.background.paper,
                   padding: '0',
                 }}
               >
-                <ListItem divider sx={{ background: theme.palette.background.nav }}>
+                <ListItem divider sx={{ background: theme.palette.background.accent }}>
                   <ListItemIcon />
 
                   <ListItemText
@@ -68,28 +74,27 @@ const WidgetConfigColumnsCustomization: FunctionComponent<WidgetConfigColumnsCus
                   >
                     <Select
                       value={newColumn || ''}
-                      onChange={(e) => {
-                        const selectedColumn = e.target.value;
-                        const columnToAdd = availableColumns.find((col) => col.attribute === selectedColumn);
-                        if (columnToAdd) {
-                          setColumns([...columns, columnToAdd]);
-                        }
-                        setNewColumn(null); // Reset selection
-                      }}
-                      displayEmpty
+                      onChange={(e) => e.target.value && handleSelect(e.target.value)}
                       fullWidth
                       variant="standard"
-                      placeholder={t_i18n('Select a column to add')}
+                      displayEmpty
+                      disabled={
+                        availableColumns.filter((col) => !columns.some((c) => c.attribute === col.attribute)).length === 0
+                      }
                     >
+                      <MenuItem value="" disabled>
+                        {t_i18n('Select a column to add')}
+                      </MenuItem>
                       {availableColumns
                         .filter((col) => !columns.some((c) => c.attribute === col.attribute))
                         .map((availableColumn) => availableColumn.attribute && (
                         <MenuItem key={availableColumn.attribute} value={availableColumn.attribute}>
-                          {t_i18n(availableColumn.attribute)}
+                          {formatAttribute(availableColumn.attribute)}
                         </MenuItem>
                         ))}
                     </Select>
                   </ListItemText>
+                  <ListItemSecondaryAction />
                 </ListItem>
 
                 {columns.map((column, index) => (
@@ -110,7 +115,7 @@ const WidgetConfigColumnsCustomization: FunctionComponent<WidgetConfigColumnsCus
                           <DragIndicatorOutlined />
                         </ListItemIcon>
 
-                        <ListItemText primary={t_i18n(column.attribute)} />
+                        <ListItemText primary={column.attribute && formatAttribute(column.attribute)} />
 
                         <ListItemSecondaryAction>
                           <IconButton onClick={() => column.attribute && handleRemove(column.attribute)}>