@cccsaurora/howler-ui 2.14.0-dev.226 → 2.14.0-dev.228

package/components/routes/home/AddNewCard.js

@@ -5,7 +5,7 @@ import { Autocomplete, Box, Card, CardContent, CardHeader, Divider, FormControl,
 import api from '@cccsaurora/howler-ui/api';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 const TYPES = {
@@ -33,7 +33,14 @@ const AddNewCard = ({ dashboard, addCard }) => {
             type: selectedType,
             config: JSON.stringify(config)
         });
-    }, [addCard, config, selectedType]);
+        // Zero the config so we don't prep the user to add the same card
+        // We can leave the analyticId, because it is allowed to be duplicated across viz types
+        ['type', 'viewId'].forEach(key => {
+            if (key in config) {
+                setConfig(key, '');
+            }
+        });
+    }, [selectedType, addCard, config, setConfig]);
     const fetchAllAnalytics = async () => {
         setAnalyticsLoading(true);
         const batchSize = 150;
@@ -56,6 +63,15 @@ const AddNewCard = ({ dashboard, addCard }) => {
     useEffect(() => {
         fetchAllAnalytics();
     }, []);
+    const filteredAnalyticVisualizations = useMemo(() => {
+        const existingAnalyticCards = dashboard.filter(_card => _card.type === "analytic");
+        return VISUALIZATIONS.filter(viz => {
+            return !existingAnalyticCards.some(_card => {
+                const parsedConfig = JSON.parse(_card.config);
+                return parsedConfig.analyticId === config.analyticId && parsedConfig.type === viz;
+            });
+        });
+    }, [dashboard, config.analyticId]);
     useEffect(() => {
         if (selectedType === 'view') {
             _setConfig({
@@ -78,7 +94,7 @@ const AddNewCard = ({ dashboard, addCard }) => {
     }, [fetchViews]);
     return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), loading: analyticsLoading, options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                             opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: filteredAnalyticVisualizations.length > 0 ? (filteredAnalyticVisualizations.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz)))) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.home.add.visualization.unavailable') }) })) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, value: views[config.viewId] || null, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
                                             !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
                                             (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                                 opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },

package/locales/en/translation.json

@@ -543,12 +543,13 @@
     "route.home.add.visualization.assessment": "Assessment Result of Created Hits",
     "route.home.add.visualization.created.description": "Time series of the number of hits created by the analytic over the last 90 days.",
     "route.home.add.visualization.created": "Number of Created Hits",
+    "route.home.add.visualization.detection.description": "For hits ingested in the last three months, what is their detection?",
+    "route.home.add.visualization.detection": "Hits Created by Detection",
     "route.home.add.visualization.escalation.description": "For hits that have been triaged, what was the resulting escalation?",
     "route.home.add.visualization.escalation": "Escalation of Created Hits",
     "route.home.add.visualization.status.description": "For hits ingested in the last three months, what is their status?",
     "route.home.add.visualization.status": "Cumulative Status of Hits Created",
-    "route.home.add.visualization.detection.description": "For hits ingested in the last three months, what is their detection?",
-    "route.home.add.visualization.detection": "Hits Created by Detection",
+    "route.home.add.visualization.unavailable": "No visualization options available.",
     "route.home.add.visualization": "Visualization",
     "route.home.add": "Add New Panel",
     "route.home.alert.updated.description": "There have been updates to alerts you are involved in. Since you last viewed, {{count}} alert(s) have updates.",

package/locales/fr/translation.json

@@ -548,6 +548,7 @@
     "route.home.add.visualization.escalation": "Escalade des hits créés",
     "route.home.add.visualization.status.description": "Quel est l'état des hits créés au cours des trois derniers mois ?",
     "route.home.add.visualization.status": "État cumulatif des hits créés",
+    "route.home.add.visualization.unavailable": "Aucune option de visualisation disponible.",
     "route.home.add.visualization": "Visualisation",
     "route.home.add": "Ajouter un nouveau panneau",
     "route.home.alert.updated.description": "Des mises à jour ont été apportées aux alertes auxquelles vous participez. Depuis votre dernière consultation, {{count}} alertes ont été mises à jour",

package/package.json

@@ -95,7 +95,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.14.0-dev.226",
+  "version": "2.14.0-dev.228",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",