[frontend] improve taxonomics retrieval strategy (#1734)

openbas-front/src/admin/Index.tsx

@@ -3,7 +3,9 @@ import { makeStyles, useTheme } from '@mui/styles';
 import { lazy, Suspense, useEffect } from 'react';
 import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 
+import { fetchAttackPatterns } from '../actions/AttackPattern';
 import type { LoggedHelper } from '../actions/helper';
+import { fetchKillChainPhases } from '../actions/KillChainPhase';
 import { fetchTags } from '../actions/Tag';
 import { errorWrapper } from '../components/Error';
 import Loader from '../components/Loader';
@@ -44,6 +46,7 @@ const Index = () => {
   const theme = useTheme<Theme>();
   const classes = useStyles();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const { logged, settings } = useHelper((helper: LoggedHelper) => {
     return { logged: helper.logged(), settings: helper.getPlatformSettings() };
   });
@@ -64,8 +67,10 @@ const Index = () => {
     overflowX: 'hidden',
     overflowY: 'hidden',
   };
-  const dispatch = useAppDispatch();
+  // load taxonomics one time at login
   useDataLoader(() => {
+    dispatch(fetchAttackPatterns());
+    dispatch(fetchKillChainPhases());
     dispatch(fetchTags());
   });
   const { bannerHeight } = computeBannerSettings(settings);

openbas-front/src/admin/components/Dashboard.tsx

@@ -6,10 +6,8 @@ import Chart from 'react-apexcharts';
 
 import { fetchStatistics } from '../../actions/Application';
 import type { AttackPatternHelper } from '../../actions/attack_patterns/attackpattern-helper';
-import { fetchAttackPatterns } from '../../actions/AttackPattern';
 import { searchExercises } from '../../actions/Exercise';
 import type { InjectExpectationResultsByAttackPatternStore } from '../../actions/exercises/Exercise';
-import { fetchKillChainPhases } from '../../actions/KillChainPhase';
 import type { StatisticsHelper } from '../../actions/statistics/statistics-helper';
 import { initSorting, type Page } from '../../components/common/queryable/Page';
 import Empty from '../../components/Empty';
@@ -94,11 +92,7 @@ const Dashboard = () => {
   const [loading, setLoading] = useState(true);
   useDataLoader(() => {
     setLoading(true);
-    Promise.all([
-      dispatch(fetchAttackPatterns()),
-      dispatch(fetchKillChainPhases()),
-      dispatch(fetchStatistics()),
-    ]).finally(() => {
+    dispatch(fetchStatistics()).finally(() => {
       setLoading(false);
     });
   });
@@ -295,7 +289,6 @@ const Dashboard = () => {
               : (
                   <MitreMatrix
                     injectResults={(statistics?.inject_expectation_results as InjectExpectationResultsByAttackPatternStore[])}
-                    ttpAlreadyLoaded
                   />
                 )
           }

openbas-front/src/admin/components/assets/asset_groups/AssetGroups.tsx

@@ -7,7 +7,6 @@ import { useSearchParams } from 'react-router-dom';
 import { searchAssetGroups } from '../../../../actions/asset_groups/assetgroup-action';
 import type { EndpointHelper } from '../../../../actions/assets/asset-helper';
 import type { TagHelper, UserHelper } from '../../../../actions/helper';
-import { fetchTags } from '../../../../actions/Tag';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import ClickableModeChip from '../../../../components/common/chips/ClickableModeChip';
 import ExportButton from '../../../../components/common/ExportButton';
@@ -22,8 +21,6 @@ import { useFormatter } from '../../../../components/i18n';
 import ItemTags from '../../../../components/ItemTags';
 import { useHelper } from '../../../../store';
 import type { AssetGroupOutput } from '../../../../utils/api-types';
-import { useAppDispatch } from '../../../../utils/hooks';
-import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import type { AssetGroupStore } from './AssetGroup';
 import AssetGroupCreation from './AssetGroupCreation';
 import AssetGroupManagement from './AssetGroupManagement';
@@ -134,7 +131,6 @@ const computeRuleValues = (assetGroup: AssetGroupOutput, t: (value: string) => s
 const AssetGroups = () => {
   // Standard hooks
   const classes = useStyles();
-  const dispatch = useAppDispatch();
   const { t } = useFormatter();
 
   const [selectedAssetGroupId, setSelectedAssetGroupId] = useState<AssetGroupStore['asset_group_id'] | undefined>(undefined);
@@ -149,10 +145,6 @@ const AssetGroups = () => {
     userAdmin: helper.getMe()?.user_admin ?? false,
   }));
 
-  useDataLoader(() => {
-    dispatch(fetchTags());
-  });
-
   // Headers
   const headers: Header[] = useMemo(() => [
     {

openbas-front/src/admin/components/assets/endpoints/Endpoints.tsx

@@ -8,7 +8,6 @@ import { searchEndpoints } from '../../../../actions/assets/endpoint-actions';
 import { fetchExecutors } from '../../../../actions/Executor';
 import type { ExecutorHelper } from '../../../../actions/executors/executor-helper';
 import type { TagHelper, UserHelper } from '../../../../actions/helper';
-import { fetchTags } from '../../../../actions/Tag';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import PaginationComponent from '../../../../components/common/pagination/PaginationComponent';
 import SortHeadersComponent from '../../../../components/common/pagination/SortHeadersComponent';
@@ -96,7 +95,6 @@ const Endpoints = () => {
   }));
   useDataLoader(() => {
     dispatch(fetchExecutors());
-    dispatch(fetchTags());
   });
 
   // Headers

openbas-front/src/admin/components/common/filters/KillChainPhasesFilter.js

@@ -3,9 +3,7 @@ import { Autocomplete, Box, TextField } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import * as R from 'ramda';
 import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 
-import { fetchKillChainPhases } from '../../../../actions/KillChainPhase';
 import { buildEmptyFilter } from '../../../../components/common/queryable/filter/FilterUtils';
 import { useFormatter } from '../../../../components/i18n';
 import { useHelper } from '../../../../store';
@@ -26,10 +24,8 @@ const KillChainPhasesFilter = (props) => {
   const { fullWidth, filterKey, helpers } = props;
   const classes = useStyles();
   const { t } = useFormatter();
-  const dispatch = useDispatch();
   const killChainPhases = useHelper(helper => helper.getKillChainPhases());
   useEffect(() => {
-    dispatch(fetchKillChainPhases());
     helpers.handleAddFilterWithEmptyValue(buildEmptyFilter(filterKey, 'eq'));
   }, []);
   const killChainPhaseTransform = n => ({

openbas-front/src/admin/components/common/filters/MitreFilter.tsx

@@ -4,11 +4,9 @@ import { FunctionComponent, useEffect } from 'react';
 
 import type { AttackPatternStore } from '../../../../actions/attack_patterns/AttackPattern';
 import type { AttackPatternHelper } from '../../../../actions/attack_patterns/attackpattern-helper';
-import { fetchAttackPatterns } from '../../../../actions/AttackPattern';
 import type { InjectorContractHelper } from '../../../../actions/injector_contracts/injector-contract-helper';
 import { fetchInjectorsContracts } from '../../../../actions/InjectorContracts';
 import type { KillChainPhaseHelper } from '../../../../actions/kill_chain_phases/killchainphase-helper';
-import { fetchKillChainPhases } from '../../../../actions/KillChainPhase';
 import { FilterHelpers } from '../../../../components/common/queryable/filter/FilterHelpers';
 import { buildEmptyFilter } from '../../../../components/common/queryable/filter/FilterUtils';
 import { useFormatter } from '../../../../components/i18n';
@@ -160,8 +158,6 @@ const MitreFilter: FunctionComponent<MitreFilterProps> = ({
     injectorsContracts: helper.getInjectorContracts(),
   }));
   useDataLoader(() => {
-    dispatch(fetchKillChainPhases());
-    dispatch(fetchAttackPatterns());
     dispatch(fetchInjectorsContracts());
   });
 

openbas-front/src/admin/components/common/filters/TagsFilter.js

@@ -2,10 +2,7 @@ import { LabelOutlined } from '@mui/icons-material';
 import { Autocomplete, Box, Chip, TextField } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import * as R from 'ramda';
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 
-import { fetchTags } from '../../../../actions/Tag';
 import { useFormatter } from '../../../../components/i18n';
 import { useHelper } from '../../../../store';
 
@@ -31,12 +28,6 @@ const useStyles = makeStyles(() => ({
 const TagsFilter = (props) => {
   const classes = useStyles();
   const { t } = useFormatter();
-  const dispatch = useDispatch();
-  useEffect(() => {
-    if (!props.tagsFetched) {
-      dispatch(fetchTags());
-    }
-  }, []);
   const tags = useHelper(helper => helper.getTags());
   const { onAddTag, onClearTag, onRemoveTag, currentTags, fullWidth } = props;
   const tagTransform = n => ({

openbas-front/src/admin/components/common/injects/CreateInject.tsx

@@ -5,11 +5,9 @@ import { CSSProperties, FunctionComponent, useEffect, useMemo, useRef, useState
 
 import type { AttackPatternStore } from '../../../../actions/attack_patterns/AttackPattern';
 import type { AttackPatternHelper } from '../../../../actions/attack_patterns/attackpattern-helper';
-import { fetchAttackPatterns } from '../../../../actions/AttackPattern';
 import { searchInjectorContracts } from '../../../../actions/InjectorContracts';
 import type { InjectorHelper } from '../../../../actions/injectors/injector-helper';
 import type { KillChainPhaseHelper } from '../../../../actions/kill_chain_phases/killchainphase-helper';
-import { fetchKillChainPhases } from '../../../../actions/KillChainPhase';
 import Drawer from '../../../../components/common/Drawer';
 import { buildEmptyFilter } from '../../../../components/common/queryable/filter/FilterUtils';
 import { initSorting } from '../../../../components/common/queryable/Page';
@@ -21,8 +19,6 @@ import { useFormatter } from '../../../../components/i18n';
 import PlatformIcon from '../../../../components/PlatformIcon';
 import { useHelper } from '../../../../store';
 import type { FilterGroup, Inject, InjectorContractOutput, KillChainPhase } from '../../../../utils/api-types';
-import { useAppDispatch } from '../../../../utils/hooks';
-import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import computeAttackPatterns from '../../../../utils/injector_contract/InjectorContractUtils';
 import { isNotEmptyField } from '../../../../utils/utils';
 import CreateInjectDetails from './CreateInjectDetails';
@@ -89,7 +85,6 @@ const CreateInject: FunctionComponent<Props> = ({ title, onCreateInject, open =
   // Standard hooks
   const classes = useStyles();
   const drawerRef = useRef(null);
-  const dispatch = useAppDispatch();
   const { t, tPick } = useFormatter();
 
   // Fetching data
@@ -98,10 +93,6 @@ const CreateInject: FunctionComponent<Props> = ({ title, onCreateInject, open =
     attackPatternsMap: helper.getAttackPatternsMap(),
     killChainPhasesMap: helper.getKillChainPhasesMap(),
   }));
-  useDataLoader(() => {
-    dispatch(fetchKillChainPhases());
-    dispatch(fetchAttackPatterns());
-  });
 
   // Headers
   const headers: Header[] = useMemo(() => [

openbas-front/src/admin/components/common/injects/CreateInjectDetails.js

@@ -6,11 +6,8 @@ import * as R from 'ramda';
 import { useContext, useState } from 'react';
 import { Form } from 'react-final-form';
 
-import { fetchTags } from '../../../../actions/Tag';
 import { useFormatter } from '../../../../components/i18n';
 import { useHelper } from '../../../../store';
-import { useAppDispatch } from '../../../../utils/hooks';
-import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import { isEmptyField, isNotEmptyField } from '../../../../utils/utils';
 import { PermissionsContext } from '../Context';
 import InjectDefinition from './InjectDefinition';
@@ -83,13 +80,10 @@ const CreateInjectDetails = ({
   const { permissions } = useContext(PermissionsContext);
   const [openDetails, setOpenDetails] = useState(false);
   const [injectDetailsState, setInjectDetailsState] = useState({});
-  const dispatch = useAppDispatch();
+
   const { tagsMap } = useHelper(helper => ({
     tagsMap: helper.getTagsMap(),
   }));
-  useDataLoader(() => {
-    dispatch(fetchTags());
-  });
   const toggleInjectContent = () => {
     if (openDetails) {
       drawerRef.current.scrollTop = 0;

openbas-front/src/admin/components/common/injects/InjectAddTeams.tsx

@@ -3,7 +3,6 @@ import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ListIte
 import { makeStyles } from '@mui/styles';
 import { FunctionComponent, useContext, useEffect, useMemo, useState } from 'react';
 
-import { fetchTags } from '../../../../actions/Tag';
 import type { TeamStore } from '../../../../actions/teams/Team';
 import { findTeams } from '../../../../actions/teams/team-actions';
 import PaginationComponentV2 from '../../../../components/common/queryable/pagination/PaginationComponentV2';
@@ -15,8 +14,6 @@ import { useFormatter } from '../../../../components/i18n';
 import ItemTags from '../../../../components/ItemTags';
 import type { Theme } from '../../../../components/Theme';
 import type { TeamOutput } from '../../../../utils/api-types';
-import { useAppDispatch } from '../../../../utils/hooks';
-import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import type { EndpointStore } from '../../assets/endpoints/Endpoint';
 import CreateTeam from '../../components/teams/CreateTeam';
 import { PermissionsContext, TeamContext } from '../Context';
@@ -45,15 +42,9 @@ const InjectAddTeams: FunctionComponent<Props> = ({
   // Standard hooks
   const { t } = useFormatter();
   const classes = useStyles();
-  const dispatch = useAppDispatch();
   const { permissions } = useContext(PermissionsContext);
   const { searchTeams } = useContext(TeamContext);
 
-  // Fetch datas
-  useDataLoader(() => {
-    dispatch(fetchTags());
-  });
-
   const [teamValues, setTeamValues] = useState<TeamOutput[]>([]);
   const [selectedTeamValues, setSelectedTeamValues] = useState<TeamOutput[]>([]);
 

openbas-front/src/admin/components/common/injects/UpdateInjectDetails.js

@@ -6,12 +6,9 @@ import * as R from 'ramda';
 import { useContext, useState } from 'react';
 import { Form } from 'react-final-form';
 
-import { fetchTags } from '../../../../actions/Tag';
 import { useFormatter } from '../../../../components/i18n';
 import PlatformIcon from '../../../../components/PlatformIcon';
 import { useHelper } from '../../../../store';
-import { useAppDispatch } from '../../../../utils/hooks';
-import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import { tagOptions } from '../../../../utils/Option';
 import { splitDuration } from '../../../../utils/Time';
 import { isEmptyField } from '../../../../utils/utils';
@@ -65,13 +62,9 @@ const UpdateInjectDetails = ({
   const { permissions } = useContext(PermissionsContext);
   const [openDetails, setOpenDetails] = useState(true);
   const [injectDetailsState, setInjectDetailsState] = useState({});
-  const dispatch = useAppDispatch();
   const { tagsMap } = useHelper(helper => ({
     tagsMap: helper.getTagsMap(),
   }));
-  useDataLoader(() => {
-    dispatch(fetchTags());
-  });
 
   const toggleInjectContent = () => {
     if (openDetails) {

openbas-front/src/admin/components/common/matrix/MitreMatrix.tsx

@@ -4,14 +4,10 @@ import { FunctionComponent } from 'react';
 
 import type { AttackPatternStore } from '../../../../actions/attack_patterns/AttackPattern';
 import type { AttackPatternHelper } from '../../../../actions/attack_patterns/attackpattern-helper';
-import { fetchAttackPatterns } from '../../../../actions/AttackPattern';
 import type { InjectExpectationResultsByAttackPatternStore } from '../../../../actions/exercises/Exercise';
 import type { KillChainPhaseHelper } from '../../../../actions/kill_chain_phases/killchainphase-helper';
-import { fetchKillChainPhases } from '../../../../actions/KillChainPhase';
 import { useHelper } from '../../../../store';
 import type { AttackPattern, KillChainPhase } from '../../../../utils/api-types';
-import { useAppDispatch } from '../../../../utils/hooks';
-import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import KillChainPhaseColumn from './KillChainPhaseColumn';
 import MitreMatrixDummy from './MitreMatrixDummy';
 
@@ -29,17 +25,14 @@ const useStyles = makeStyles(() => ({
 interface Props {
   goToLink?: string;
   injectResults: InjectExpectationResultsByAttackPatternStore[];
-  ttpAlreadyLoaded?: boolean;
 }
 
 const MitreMatrix: FunctionComponent<Props> = ({
   goToLink,
   injectResults,
-  ttpAlreadyLoaded,
 }) => {
   // Standard hooks
   const classes = useStyles();
-  const dispatch = useAppDispatch();
   // Fetching data
   const { attackPatternMap, killChainPhaseMap }: {
     attackPatternMap: Record<string, AttackPattern>;
@@ -48,15 +41,9 @@ const MitreMatrix: FunctionComponent<Props> = ({
     attackPatternMap: helper.getAttackPatternsMap(),
     killChainPhaseMap: helper.getKillChainPhasesMap(),
   }));
-  if (!ttpAlreadyLoaded) {
-    useDataLoader(() => {
-      dispatch(fetchKillChainPhases());
-      dispatch(fetchAttackPatterns());
-    });
-  }
 
   if (!injectResults) {
-    return <MitreMatrixDummy ttpAlreadyLoaded />;
+    return <MitreMatrixDummy />;
   }
 
   // Attack Pattern