dataplane-app · saul-data · Mar 13, 2022 · Mar 13, 2022 · Mar 13, 2022
diff --git a/app/mainapp/graphql/private/generated.go b/app/mainapp/graphql/private/generated.go
diff --git a/app/mainapp/graphql/private/models.go b/app/mainapp/graphql/private/models.go
diff --git a/app/mainapp/graphql/private/resolvers/pipelines.graphqls b/app/mainapp/graphql/private/resolvers/pipelines.graphqls
@@ -10,6 +10,7 @@ type Pipelines {
   current: String!
   workerGroup: String!
   created_at: Time!
+  updated_at: Time!
   node_type: String!
   node_type_desc: String!
   schedule: String!

diff --git a/app/mainapp/graphql/private/resolvers/pipelines.resolvers.go b/app/mainapp/graphql/private/resolvers/pipelines.resolvers.go
@@ -5,7 +5,7 @@ package privateresolvers
 
 import (
 	"context"
-	permissions "dataplane/mainapp/auth_permissions"
+	"dataplane/mainapp/auth_permissions"
 	"dataplane/mainapp/config"
 	"dataplane/mainapp/database"
 	"dataplane/mainapp/database/models"
@@ -96,7 +96,6 @@ func (r *mutationResolver) AddUpdatePipelineFlow(ctx context.Context, input *pri
 	currentUser := ctx.Value("currentUser").(string)
 	platformID := ctx.Value("platformID").(string)
 
-	// Doesnt require concurrency safety, should be written / read in sequence.
 	var destinations = make(map[string][]string)
 	var dependencies = make(map[string][]string)
 	var triggerType string = ""
@@ -581,6 +580,7 @@ a.description,
 a.active,
 a.worker_group,
 a.created_at,
+a.updated_at,
 b.node_type,
 b.node_type_desc,
 b.online,
@@ -614,6 +614,7 @@ a.description,
 a.active,
 a.worker_group,
 a.created_at,
+a.updated_at,
 b.node_type,
 b.node_type_desc,
 b.online,

diff --git a/frontend/src/components/TableContent/PipelineTable/index.jsx b/frontend/src/components/TableContent/PipelineTable/index.jsx
@@ -90,24 +90,19 @@ const PipelineTable = ({ data, filter, setPipelineCount, environmentID, getPipel
                 ),
             },
             {
-                accessor: 'node_type_desc',
+                Header: 'Trigger',
+                accessor: (row) => row,
                 Cell: (row) =>
-                    row.value ? (
+                    row.value.node_type_desc ? (
                         <Box display="flex" alignItems="center">
                             <Box component={FontAwesomeIcon} fontSize={19} sx={{ color: 'secondary.main' }} icon={row.value === 'play' ? faPlayCircle : faClock} mr={1.5} />
                             <Typography color="secondary.main" variant="body2">
-                                {row.value[0]?.toUpperCase() + row.value?.slice(1) + ' trigger'}
+                                {row.value.node_type_desc[0]?.toUpperCase() + row.value.node_type_desc.slice(1) + ' trigger'}
+                                {row.value.schedule && ' - ' + formatSchedule(row.value.schedule, row.value.schedule_type)}
                             </Typography>
                         </Box>
                     ) : null,
             },
-            {
-                Header: 'Schedule',
-                accessor: (row) => [row.schedule, row.schedule_type],
-                Cell: (row) => {
-                    return <Typography variant="body2">{formatSchedule(row.value[0], row.value[1])}</Typography>;
-                },
-            },
             {
                 accessor: 'online',
                 Cell: (row) => {

diff --git a/frontend/src/graphql/getPipeline.js b/frontend/src/graphql/getPipeline.js
@@ -14,6 +14,7 @@ const query = gql`
             online
             current
             created_at
+            updated_at
             node_type
             node_type_desc
             schedule

diff --git a/frontend/src/graphql/getPipelineRuns.js b/frontend/src/graphql/getPipelineRuns.js
@@ -13,6 +13,7 @@ const query = gql`
             run_json
             created_at
             ended_at
+            updated_at
         }
     }
 `;

diff --git a/frontend/src/pages/View/ActionLayer.jsx b/frontend/src/pages/View/ActionLayer.jsx
@@ -3,14 +3,14 @@ import React from 'react';
 import { useGlobalFlowState } from '../Flow';
 import Timer from './Timer';
 
-export function ActionLayer({ setElements, environmentId }) {
+export function ActionLayer({ setElements, environmentId, pipeline }) {
     // Global states
     const FlowState = useGlobalFlowState();
 
     return (
         <Grid mt={4} container alignItems="center" sx={{ width: { xl: '88%' }, flexWrap: 'nowrap' }}>
             {/* Timer */}
-            {FlowState.elements.get().length > 0 ? <Timer environmentID={environmentId} setElements={setElements} /> : null}
+            {FlowState.elements.get().length > 0 ? <Timer environmentID={environmentId} setElements={setElements} pipeline={pipeline} /> : null}
         </Grid>
     );
 }
diff --git a/frontend/src/pages/View/RunsDropdown.jsx b/frontend/src/pages/View/RunsDropdown.jsx
@@ -7,16 +7,17 @@ import { useSnackbar } from 'notistack';
 import { usePipelineTasksRun } from '../../graphql/getPipelineTasksRun';
 import { useGlobalFlowState } from '../Flow';
 
-export default function RunsDropdown({ environmentID, setElements, setPrevRunTime }) {
+export default function RunsDropdown({ environmentID, setElements, setPrevRunTime, pipeline }) {
     // Global states
     const RunState = useGlobalRunState();
 
     // Local state
     const [selectedRun, setSelectedRun] = useState();
     const [runs, setRuns] = useState([]);
+    const [isNewFlow, setIsNewFlow] = useState(true);
 
     // GraphQL hooks
-    const getPipelineRuns = useGetPipelineRunsHook(environmentID, setRuns, setSelectedRun);
+    const getPipelineRuns = useGetPipelineRunsHook(environmentID, setRuns, setSelectedRun, pipeline);
     const getPipelineTasksRun = usePipelineTasksRunHook();
 
     // Get pipeline runs on load and environment change and after each run.
@@ -34,6 +35,15 @@ export default function RunsDropdown({ environmentID, setElements, setPrevRunTim
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [RunState.pipelineRunsTrigger.get()]);
 
+    // Set flow status,color on change
+    useEffect(() => {
+        if (runs.length === 0 || !pipeline) return;
+        if (pipeline.updated_at < runs[0].updated_at) {
+            setSelectedRun(runs[0]);
+            setIsNewFlow(false);
+        }
+    }, [pipeline, runs]);
+
     // Update elements on run dropdown change
     useEffect(() => {
         if (!selectedRun) return;
@@ -52,7 +62,21 @@ export default function RunsDropdown({ environmentID, setElements, setPrevRunTim
 
     return (
         <Grid item alignItems="center" display="flex" width={520}>
-            {selectedRun || runs.length === 0 ? (
+            {selectedRun ? (
+                <Autocomplete
+                    id="run_autocomplete"
+                    onChange={(event, newValue) => {
+                        setSelectedRun(newValue);
+                    }}
+                    value={selectedRun}
+                    disableClearable
+                    sx={{ minWidth: '520px' }}
+                    options={runs}
+                    getOptionLabel={(a) => formatDate(a.created_at) + ' - ' + a.run_id}
+                    renderInput={(params) => <TextField {...params} label="Run" id="run" size="small" sx={{ fontSize: '.75rem', display: 'flex' }} />}
+                />
+            ) : null}
+            {isNewFlow ? (
                 <Autocomplete
                     id="run_autocomplete"
                     onChange={(event, newValue) => {
@@ -71,7 +95,7 @@ export default function RunsDropdown({ environmentID, setElements, setPrevRunTim
 }
 
 // ------ Custom hook
-export const useGetPipelineRunsHook = (environmentID, setRuns, setSelectedRun) => {
+export const useGetPipelineRunsHook = (environmentID, setRuns, setSelectedRun, pipeline) => {
     // GraphQL hook
     const getPipelineRuns = useGetPipelineRuns();
 
@@ -93,7 +117,6 @@ export const useGetPipelineRunsHook = (environmentID, setRuns, setSelectedRun) =
             response.errors.map((err) => enqueueSnackbar(err.message, { variant: 'error' }));
         } else {
             setRuns(response);
-            setSelectedRun(response[0]);
         }
     };
 };

diff --git a/frontend/src/pages/View/Timer.jsx b/frontend/src/pages/View/Timer.jsx
@@ -10,7 +10,7 @@ import useWebSocket, { useGlobalRunState } from './useWebSocket';
 import StatusChips from './StatusChips';
 import RunsDropdown from './RunsDropdown';
 
-export default function Timer({ environmentID, setElements }) {
+export default function Timer({ environmentID, setElements, pipeline }) {
     // Global state
     const FlowState = useGlobalFlowState();
     const RunState = useGlobalRunState();
@@ -115,7 +115,7 @@ export default function Timer({ environmentID, setElements }) {
 
                 <StatusChips />
 
-                <RunsDropdown environmentID={environmentID} setElements={setElements} setPrevRunTime={setPrevRunTime} />
+                <RunsDropdown environmentID={environmentID} setElements={setElements} setPrevRunTime={setPrevRunTime} pipeline={pipeline} />
 
                 {isRunning ? (
                     <Typography variant="h3" ml={2}>

diff --git a/frontend/src/pages/View/index.jsx b/frontend/src/pages/View/index.jsx
@@ -144,7 +144,7 @@ const View = () => {
                 </Grid>
 
                 {/* Run/Stop button, Chips, Timer */}
-                <ActionLayer setElements={setElements} environmentId={Environment.id.get()} />
+                <ActionLayer setElements={setElements} environmentId={Environment.id.get()} pipeline={pipeline} />
             </Box>
             {!FlowState.isOpenLogDrawer.get() && !isOpenAnalytics ? (
                 <Box mt={7} sx={{ position: 'absolute', top: offsetHeight, left: 0, right: 0, bottom: 0 }} ref={reactFlowWrapper}>