[frontend] Re-introduce stream consumers drawer for Live streams (#14729)

opencti-platform/opencti-front/lang/front/de.json

@@ -1693,6 +1693,7 @@
   "Equals": "Ist gleich",
   "Error": "Fehler",
   "Error loading forms": "Fehler beim Laden von Formularen",
+  "Error loading stream collection consumers": "Fehler beim Laden von Stream-Sammelkunden",
   "Error trying to download in PDF": "Fehler beim Herunterladen in PDF",
   "Error trying to export a PDF template": "Fehler beim Versuch, eine PDF-Vorlage zu exportieren",
   "Error trying to export the file": "Fehler beim Versuch, die Datei zu exportieren",

opencti-platform/opencti-front/lang/front/en.json

@@ -1693,6 +1693,7 @@
   "Equals": "Equals",
   "Error": "Error",
   "Error loading forms": "Error loading forms",
+  "Error loading stream collection consumers": "Error loading stream collection consumers",
   "Error trying to download in PDF": "Error trying to download in PDF",
   "Error trying to export a PDF template": "Error trying to export a PDF template",
   "Error trying to export the file": "Error trying to export the file",

opencti-platform/opencti-front/lang/front/es.json

@@ -1693,6 +1693,7 @@
   "Equals": "Igual",
   "Error": "Error",
   "Error loading forms": "Error cargando formularios",
+  "Error loading stream collection consumers": "Error al cargar los consumidores de la colección de flujos",
   "Error trying to download in PDF": "Error al intentar descargar en PDF",
   "Error trying to export a PDF template": "Error al intentar exportar una plantilla PDF",
   "Error trying to export the file": "Error al intentar exportar el archivo",

opencti-platform/opencti-front/lang/front/fr.json

@@ -1693,6 +1693,7 @@
   "Equals": "Égal",
   "Error": "Erreur",
   "Error loading forms": "Erreur de chargement des formulaires",
+  "Error loading stream collection consumers": "Erreur de chargement des consommateurs de collections de flux",
   "Error trying to download in PDF": "Erreur lors du téléchargement en PDF",
   "Error trying to export a PDF template": "Erreur lors de l'exportation d'un modèle PDF",
   "Error trying to export the file": "Erreur lors de l'exportation du fichier",

opencti-platform/opencti-front/lang/front/it.json

@@ -1693,6 +1693,7 @@
   "Equals": "Uguale",
   "Error": "Errore",
   "Error loading forms": "Errore nel caricamento dei moduli",
+  "Error loading stream collection consumers": "Errore nel caricamento dei consumatori della raccolta di flussi",
   "Error trying to download in PDF": "Errore nel tentativo di scaricare in PDF",
   "Error trying to export a PDF template": "Errore nel tentativo di esportare un template PDF",
   "Error trying to export the file": "Errore nel tentativo di esportare il file",

opencti-platform/opencti-front/lang/front/ja.json

@@ -1693,6 +1693,7 @@
   "Equals": "等しい",
   "Error": "エラー",
   "Error loading forms": "フォームの読み込みエラー",
+  "Error loading stream collection consumers": "ストリーム・コレクション・コンシューマの読み込みエラー",
   "Error trying to download in PDF": "PDFでダウンロードしようとするエラー",
   "Error trying to export a PDF template": "PDFテンプレートをエクスポートしようとするエラー",
   "Error trying to export the file": "ファイルをエクスポートしようとするとエラーが発生します",

opencti-platform/opencti-front/lang/front/ko.json

@@ -1693,6 +1693,7 @@
   "Equals": "같음",
   "Error": "오류",
   "Error loading forms": "양식 로드 중 오류 발생",
+  "Error loading stream collection consumers": "스트림 컬렉션 소비자 로드 중 오류 발생",
   "Error trying to download in PDF": "PDF로 다운로드하는 동안 오류가 발생했습니다",
   "Error trying to export a PDF template": "PDF 템플릿을 내보내는 동안 오류가 발생했습니다",
   "Error trying to export the file": "파일을 내보내는 동안 오류가 발생했습니다",

opencti-platform/opencti-front/lang/front/ru.json

@@ -1693,6 +1693,7 @@
   "Equals": "Равняется",
   "Error": "Ошибка",
   "Error loading forms": "Ошибка при загрузке форм",
+  "Error loading stream collection consumers": "Ошибка при загрузке потребителей коллекции потоков",
   "Error trying to download in PDF": "Ошибка при попытке загрузки в формате PDF",
   "Error trying to export a PDF template": "Ошибка при попытке экспортировать шаблон PDF",
   "Error trying to export the file": "Ошибка при попытке экспортировать файл",

opencti-platform/opencti-front/lang/front/zh.json

@@ -1693,6 +1693,7 @@
   "Equals": "等于",
   "Error": "错误",
   "Error loading forms": "加载表格出错",
+  "Error loading stream collection consumers": "加载数据流集合消费者时出错",
   "Error trying to download in PDF": "尝试以 PDF 格式下载时出错",
   "Error trying to export a PDF template": "尝试导出 PDF 模板时出错",
   "Error trying to export the file": "尝试导出文件时出错",

opencti-platform/opencti-front/src/private/components/data/Stream.tsx

@@ -78,12 +78,12 @@ const Stream = () => {
       },
       id: {
         label: 'Stream ID',
-        width: '35%',
+        width: '25%',
         isSortable: true,
       },
       stream_public: {
         label: 'Public',
-        width: '10%',
+        width: '5%',
         isSortable: true,
       },
       stream_live: {
@@ -96,6 +96,11 @@ const Stream = () => {
         width: '15%',
         isSortable: false,
       },
+      filters: {
+        label: 'Filters',
+        width: '15%',
+        isSortable: false,
+      },
     };
     return (
       <ListLines

opencti-platform/opencti-front/src/private/components/data/stream/StreamConsumersDrawer.tsx

@@ -14,7 +14,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/styles';
 import Drawer from '../../common/drawer/Drawer';
-import { fetchQuery } from '../../../../relay/environment';
+import { fetchQuery, MESSAGING$ } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
 import { FIVE_SECONDS } from '../../../../utils/Time';
 import type { Theme } from '../../../../components/Theme';
@@ -173,6 +173,7 @@ const StreamConsumersDrawer: FunctionComponent<StreamConsumersDrawerProps> = ({
         setLoading(false);
       })
       .catch(() => {
+        MESSAGING$.notifyError(t_i18n('Error loading stream collection consumers'));
         setLoading(false);
       });
   }, [streamCollectionId, open]);

opencti-platform/opencti-front/src/private/components/data/stream/StreamLine.jsx

@@ -12,7 +12,9 @@ import Slide from '@mui/material/Slide';
 import Skeleton from '@mui/material/Skeleton';
 import StreamPopover from './StreamPopover';
 import inject18n from '../../../../components/i18n';
+import Tag from '@common/tag/Tag';
 import FilterIconButton from '../../../../components/FilterIconButton';
+import StreamConsumersDrawer from './StreamConsumersDrawer';
 import { deserializeFilterGroupForFrontend, isFilterGroupNotEmpty } from '../../../../utils/filters/filtersUtils';
 import ItemCopy from '../../../../components/ItemCopy';
 import ItemBoolean from '../../../../components/ItemBoolean';
@@ -45,6 +47,13 @@ const styles = (theme) => ({
     textOverflow: 'ellipsis',
     paddingRight: 10,
   },
+  filtersItem: {
+    height: 40,
+    display: 'flex',
+    alignItems: 'center',
+    float: 'left',
+    paddingRight: 10,
+  },
   consumersItem: {
     height: 40,
     display: 'flex',
@@ -110,92 +119,111 @@ class StreamLineLineComponent extends Component {
 
   render() {
     const { classes, node, dataColumns, paginationOptions, t } = this.props;
-    const _health = this.computeConsumersHealth();
+    const health = this.computeConsumersHealth();
     const filters = deserializeFilterGroupForFrontend(node.filters);
     return (
-      <ListItem
-        divider={true}
-        disablePadding
-        secondaryAction={(
-          <Security needs={[TAXIIAPI_SETCOLLECTIONS]}>
-            <StreamPopover
-              streamCollection={node}
-              paginationOptions={paginationOptions}
-            />
-          </Security>
-        )}
-      >
-        <ListItemButton
-          classes={{ root: classes.item }}
-          component="a"
-          href={`/stream/${node.id}`}
-          target="_blank"
+      <>
+        <ListItem
+          divider={true}
+          disablePadding
+          secondaryAction={(
+            <Security needs={[TAXIIAPI_SETCOLLECTIONS]}>
+              <StreamPopover
+                streamCollection={node}
+                paginationOptions={paginationOptions}
+              />
+            </Security>
+          )}
         >
-          <ListItemIcon classes={{ root: classes.itemIcon }}>
-            <Stream />
-          </ListItemIcon>
-          <ListItemText
-            primary={(
-              <>
-                <div
-                  className={classes.bodyItem}
-                  style={{ width: dataColumns.name.width }}
-                >
-                  {node.name}
-                </div>
-                <div
-                  className={classes.bodyItem}
-                  style={{ width: dataColumns.description.width }}
-                >
-                  <FieldOrEmpty source={node.description}>{node.description}</FieldOrEmpty>
-                </div>
-                <div
-                  className={classes.bodyItem}
-                  style={{ width: dataColumns.id.width, paddingRight: 10 }}
-                >
-                  <ItemCopy content={node.id} variant="inLine" />
-                </div>
-                <div
-                  className={classes.bodyItem}
-                  style={{ width: dataColumns.stream_public.width }}
-                >
-                  <ItemBoolean
-                    variant="inList"
-                    label={node.stream_public ? t('Yes') : t('No')}
-                    status={node.stream_public}
-                  />
-                </div>
-                <div
-                  className={classes.bodyItem}
-                  style={{ width: dataColumns.stream_live.width }}
-                >
-                  <ItemBoolean
-                    variant="inList"
-                    label={node.stream_live ? t('Started') : t('Stopped')}
-                    status={node.stream_live}
-                  />
-                </div>
-                <div
-                  className={classes.consumersItem}
-                  style={{ width: dataColumns.consumers.width }}
-                >
-                  {isFilterGroupNotEmpty(filters)
-                    ? (
-                        <FilterIconButton
-                          filters={filters}
-                          dataColumns={dataColumns}
-                          variant="small"
-                          entityTypes={['Stix-Filtering']}
-                        />
-                      )
-                    : EMPTY_VALUE
-                  }
-                </div>
-              </>
-            )}
-          />
-        </ListItemButton>
-      </ListItem>
+          <ListItemButton
+            classes={{ root: classes.item }}
+            onClick={this.handleOpenConsumers.bind(this)}
+          >
+            <ListItemIcon classes={{ root: classes.itemIcon }}>
+              <Stream />
+            </ListItemIcon>
+            <ListItemText
+              primary={(
+                <>
+                  <div
+                    className={classes.bodyItem}
+                    style={{ width: dataColumns.name.width }}
+                  >
+                    {node.name}
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={{ width: dataColumns.description.width }}
+                  >
+                    <FieldOrEmpty source={node.description}>{node.description}</FieldOrEmpty>
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={{ width: dataColumns.id.width, paddingRight: 10 }}
+                  >
+                    <ItemCopy content={node.id} variant="inLine" />
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={{ width: dataColumns.stream_public.width }}
+                  >
+                    <ItemBoolean
+                      variant="inList"
+                      label={node.stream_public ? t('Yes') : t('No')}
+                      status={node.stream_public}
+                    />
+                  </div>
+                  <div
+                    className={classes.bodyItem}
+                    style={{ width: dataColumns.stream_live.width }}
+                  >
+                    <ItemBoolean
+                      variant="inList"
+                      label={node.stream_live ? t('Started') : t('Stopped')}
+                      status={node.stream_live}
+                    />
+                  </div>
+                  <div
+                    className={classes.consumersItem}
+                    style={{ width: dataColumns.consumers.width }}
+                  >
+                    {health.count === 0
+                      ? <>{EMPTY_VALUE}</>
+                      : (
+                          <Tag
+                            label={health.label}
+                            color={health.hexColor}
+                          />
+                        )}
+                  </div>
+                  <div
+                    className={classes.filtersItem}
+                    style={{ width: dataColumns.filters.width }}
+                  >
+                    {isFilterGroupNotEmpty(filters)
+                      ? (
+                          <FilterIconButton
+                            filters={filters}
+                            dataColumns={dataColumns}
+                            variant="small"
+                            entityTypes={['Stix-Filtering']}
+                          />
+                        )
+                      : EMPTY_VALUE
+                    }
+                  </div>
+                </>
+              )}
+            />
+          </ListItemButton>
+        </ListItem>
+        <StreamConsumersDrawer
+          streamCollectionId={node.id}
+          streamCollectionName={node.name}
+          open={this.state.displayConsumers}
+          onClose={this.handleCloseConsumers.bind(this)}
+        />
+      </>
     );
   }
 }