[frontend/backend] Adding link to the injects

openbas-api/src/main/java/io/openbas/rest/inject/output/InjectOutput.java

@@ -35,6 +35,9 @@ public class InjectOutput {
   @Min(value = 0L, message = "The value must be positive")
   private Long dependsDuration;
 
+  @JsonProperty("inject_depends_on")
+  private String dependsOn;
+
   @JsonProperty("inject_injector_contract")
   private InjectorContract injectorContract;
 
@@ -68,6 +71,7 @@ public InjectOutput(
       String exerciseId,
       String scenarioId,
       Long dependsDuration,
+      String dependsOn,
       InjectorContract injectorContract,
       String[] tags,
       String[] teams,
@@ -80,6 +84,7 @@ public InjectOutput(
     this.exercise = exerciseId;
     this.scenario = scenarioId;
     this.dependsDuration = dependsDuration;
+    this.dependsOn = dependsOn;
     this.injectorContract = injectorContract;
     this.tags = tags != null ? new HashSet<>(Arrays.asList(tags)) : new HashSet<>();
 

openbas-api/src/main/java/io/openbas/service/InjectService.java

@@ -111,6 +111,7 @@ private void selectForInject(CriteriaBuilder cb, CriteriaQuery<Tuple> cq, Root<I
     Join<Inject, Scenario> injectScenarioJoin = createLeftJoin(injectRoot, "scenario");
     Join<Inject, InjectorContract> injectorContractJoin = createLeftJoin(injectRoot, "injectorContract");
     Join<InjectorContract, Injector> injectorJoin = injectorContractJoin.join("injector", JoinType.LEFT);
+    Join<Inject, Inject> injectDependsJoin = createLeftJoin(injectRoot, "dependsOn");
     // Array aggregations
     Expression<String[]> tagIdsExpression = createJoinArrayAggOnId(cb, injectRoot, "tags");
     Expression<String[]> teamIdsExpression = createJoinArrayAggOnId(cb, injectRoot, "teams");
@@ -127,6 +128,7 @@ private void selectForInject(CriteriaBuilder cb, CriteriaQuery<Tuple> cq, Root<I
         injectExerciseJoin.get("id").alias("inject_exercise"),
         injectScenarioJoin.get("id").alias("inject_scenario"),
         injectRoot.get("dependsDuration").alias("inject_depends_duration"),
+        injectDependsJoin.get("id").alias("inject_depends_from_another"),
         injectorContractJoin.alias("inject_injector_contract"),
         tagIdsExpression.alias("inject_tags"),
         teamIdsExpression.alias("inject_teams"),
@@ -141,7 +143,8 @@ private void selectForInject(CriteriaBuilder cb, CriteriaQuery<Tuple> cq, Root<I
         injectExerciseJoin.get("id"),
         injectScenarioJoin.get("id"),
         injectorContractJoin.get("id"),
-        injectorJoin.get("id")
+        injectorJoin.get("id"),
+        injectDependsJoin.get("id")
     ));
   }
 
@@ -157,6 +160,7 @@ private List<InjectOutput> execInject(TypedQuery<Tuple> query) {
             tuple.get("inject_exercise", String.class),
             tuple.get("inject_scenario", String.class),
             tuple.get("inject_depends_duration", Long.class),
+            tuple.get("inject_depends_from_another", String.class),
             tuple.get("inject_injector_contract", InjectorContract.class),
             tuple.get("inject_tags", String[].class),
             tuple.get("inject_teams", String[].class),

openbas-front/package.json

@@ -60,7 +60,7 @@
     "react-markdown": "9.0.1",
     "react-redux": "8.1.3",
     "react-router-dom": "6.23.1",
-    "reactflow": "11.11.3",
+    "reactflow": "11.11.4",
     "redux": "4.2.1",
     "redux-first-history": "5.2.0",
     "redux-thunk": "2.4.2",

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

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { makeStyles } from '@mui/styles';
 import { Checkbox, Chip, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, Menu, MenuItem, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import { BarChartOutlined, MoreVert, ReorderOutlined } from '@mui/icons-material';
+import { BarChartOutlined, MoreVert, ReorderOutlined, ViewTimelineOutlined, Link } from '@mui/icons-material';
 import { CSVLink } from 'react-csv';
 import { splitDuration } from '../../../../utils/Time';
 import ItemTags from '../../../../components/ItemTags';
@@ -21,6 +21,7 @@ import CreateInject from './CreateInject';
 import UpdateInject from './UpdateInject';
 import PlatformIcon from '../../../../components/PlatformIcon';
 import Timeline from '../../../../components/Timeline';
+import ChainedTimeline from '../../../../components/ChainedTimeline';
 import { isNotEmptyField } from '../../../../utils/utils';
 
 const useStyles = makeStyles(() => ({
@@ -171,6 +172,7 @@ const Injects = (props) => {
     selectAll,
     onToggleShiftEntity,
     handleToggleSelectAll,
+    onConnectInjects,
   } = props;
   // Standard hooks
   const classes = useStyles();
@@ -184,6 +186,7 @@ const Injects = (props) => {
   );
   const { permissions } = useContext(PermissionsContext);
   const injectContext = useContext(InjectContext);
+  const [chainMode, setChainMode] = useState('chaining');
 
   // Filter and sort hook
   const searchColumns = ['title', 'description', 'content'];
@@ -311,17 +314,54 @@ const Injects = (props) => {
                 </Tooltip>
               </ToggleButtonGroup>
             ) : null}
+            {setChainMode ? (
+                <ToggleButtonGroup
+                    size="small"
+                    exclusive
+                    value={chainMode}
+                    style={{ float: 'right' }}
+                    aria-label="Change chaining mode"
+                >
+                  <Tooltip title={t('Timeline view')}>
+                    <ToggleButton
+                        value='timeline'
+                        onClick={() => setChainMode('timeline')}
+                        aria-label="Timeline view mode"
+                    >
+                      <ViewTimelineOutlined fontSize="small" color='inherit'/>
+                    </ToggleButton>
+                  </Tooltip>
+                  <Tooltip title={t('Chaining view')}>
+                    <ToggleButton
+                        value='chaining'
+                        onClick={() => setChainMode('chaining')}
+                        aria-label="Chaining view mode"
+                    >
+                      <Link fontSize="small" color='primary'/>
+                    </ToggleButton>
+                  </Tooltip>
+                </ToggleButtonGroup>
+            ) : null}
           </div>
           <div className="clearfix"/>
         </div>
         {showTimeline && (
         <div style={{ marginBottom: 50 }}>
-          <Timeline
-            injects={sortedInjects}
-            onSelectInject={(id) => setSelectedInjectId(id)}
-            teams={teams}
-          />
-          <div className="clearfix"/>
+          <div>
+            {chainMode !== "chaining" ? (
+              <Timeline
+                injects={sortedInjects}
+                onSelectInject={(id) => setSelectedInjectId(id)}
+                teams={teams}
+              />
+                ) : (
+                <ChainedTimeline
+                    injects={sortedInjects}
+                    onConnectInjects={onConnectInjects}
+                />
+            )}
+            <div className="clearfix"/>
+          </div>
         </div>
         )}
         <List>

openbas-front/src/admin/components/scenarios/scenario/injects/ScenarioInjects.tsx

@@ -21,6 +21,7 @@ import ToolBar from '../../../common/ToolBar';
 import { isNotEmptyField } from '../../../../../utils/utils';
 import injectContextForScenario from '../ScenarioContext';
 import { fetchScenarioInjectsSimple } from '../../../../../actions/injects/inject-action';
+import {Connection} from "reactflow";
 
 interface Props {
 
@@ -105,6 +106,17 @@ const ScenarioInjects: FunctionComponent<Props> = () => {
     return onToggleEntity(currentEntity, event);
   };
 
+  const handleConnectInjects = async (connection: Connection) => {
+    const updateFields = [
+      'inject_title',
+      'inject_depends_from_another',
+      'inject_depends_duration',
+    ]
+    let sourceInject = injects.find((inject: Inject) => inject.inject_id === connection.source)
+    sourceInject.inject_depends_from_another = connection.target;
+    await injectContext.onUpdateInject(sourceInject.inject_id, R.pick(updateFields, sourceInject));
+  }
+
   const massUpdateInjects = async (actions: { field: string, type: string, values: { value: string }[] }[]) => {
     const updateFields = [
       'inject_title',
@@ -181,6 +193,7 @@ const ScenarioInjects: FunctionComponent<Props> = () => {
           selectedElements={selectedElements}
           deSelectedElements={deSelectedElements}
           selectAll={selectAll}
+          onConnectInjects={handleConnectInjects}
         />
         <ToolBar
           numberOfSelectedElements={numberOfSelectedElements}