Config viewable for running pipelines

src/components/Flows/FlowCreate.tsx

@@ -37,6 +37,7 @@ interface FlowCreateInterface {
   flowId?: string;
   setSelectedFlowId?: (args: string) => any;
   tasks: Array<TransformTask>;
+  readonly?: boolean;
 }
 
 // DispConnection is for the AutoComplete list: {id, label}
@@ -79,6 +80,7 @@ const FlowCreate = ({
   mutate,
   setSelectedFlowId = () => {},
   tasks,
+  readonly = false,
 }: FlowCreateInterface) => {
   const isEditPage = flowId !== '' && flowId !== undefined;
   const { data: session } = useSession();
@@ -308,7 +310,7 @@ const FlowCreate = ({
         </Backdrop>
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Typography sx={{ fontWeight: 700 }} variant="h4" gutterBottom color="#000">
-            {flowId ? 'Update pipeline' : 'Create a new Pipeline'}
+            {flowId ? (readonly ? 'View pipeline' : 'Update pipeline') : 'Create a new Pipeline'}
           </Typography>
           <Box display="flex" alignItems="center">
             <Typography
@@ -319,9 +321,11 @@ const FlowCreate = ({
             >
               Cancel
             </Typography>
-            <Button variant="contained" sx={{ m: 1 }} type="submit" data-testid="savebutton">
-              Save changes
-            </Button>
+            {!readonly && (
+              <Button variant="contained" sx={{ m: 1 }} type="submit" data-testid="savebutton">
+                Save changes
+              </Button>
+            )}
           </Box>
         </Box>
         <Box
@@ -348,6 +352,7 @@ const FlowCreate = ({
                           data-testid="activeSwitch"
                           checked={value}
                           value={value}
+                          disabled={readonly}
                           onChange={(event, value) => {
                             onChange(value);
                           }}
@@ -369,6 +374,7 @@ const FlowCreate = ({
                   required
                   error={!!errors.name}
                   helperText={errors.name?.message}
+                  disabled={readonly}
                 ></Input>
               </Box>
               <Box>
@@ -393,6 +399,7 @@ const FlowCreate = ({
                           val && option?.id === val?.id
                         }
                         onChange={(e, data) => field.onChange(data)}
+                        disabled={readonly}
                         renderInput={(params) => (
                           <Input
                             {...params}
@@ -402,6 +409,7 @@ const FlowCreate = ({
                             label="Connections"
                             error={!!errors.connections}
                             helperText={errors.connections?.message}
+                            disabled={readonly}
                           />
                         )}
                       />
@@ -418,6 +426,7 @@ const FlowCreate = ({
                     exclusive
                     onChange={handleChange}
                     aria-label="Platform"
+                    disabled={readonly}
                   >
                     <ToggleButton sx={{ padding: '4px 11px' }} value="simple">
                       Simple
@@ -454,6 +463,7 @@ const FlowCreate = ({
                           control={
                             <Checkbox
                               checked={field.value.length > 0}
+                              disabled={readonly}
                               onChange={() => {
                                 if (field.value.length > 0) {
                                   field.onChange([]);
@@ -493,6 +503,7 @@ const FlowCreate = ({
                       id="cron"
                       value={field.value}
                       data-testid="cronautocomplete"
+                      disabled={readonly}
                       options={[
                         { id: 'manual', label: 'manual' },
                         { id: 'daily', label: 'daily' },
@@ -511,6 +522,7 @@ const FlowCreate = ({
                           variant="outlined"
                           error={!!errors.cron}
                           helperText={errors.cron?.message}
+                          disabled={readonly}
                         />
                       )}
                     />
@@ -537,6 +549,7 @@ const FlowCreate = ({
                           val && option?.id === val?.id
                         }
                         onChange={(e, data: readonly any[]) => field.onChange(data)}
+                        disabled={readonly}
                         renderInput={(params) => (
                           <Input
                             name="cronDaysOfWeek"
@@ -575,6 +588,7 @@ const FlowCreate = ({
                               helperText: error?.message,
                             },
                           }}
+                          disabled={readonly}
                           onChange={(value: Moment | null) => {
                             // the value will have a local time moment object
                             const utcMinutes = moment.utc(value).minute();

src/components/Flows/Flows.tsx

@@ -240,7 +240,7 @@ const Actions = memo(
             key={'menu-' + idx}
             color="info"
             sx={{ px: 0, minWidth: 32 }}
-            disabled={tempSyncState || lock ? true : false}
+            disabled={tempSyncState && !lock}
           >
             <MoreHorizIcon />
           </Button>
@@ -373,6 +373,7 @@ export const Flows = ({ flows, updateCrudVal, mutate, setSelectedFlowId }: Flows
   const globalContext = useContext(GlobalContext);
   const permissions = globalContext?.Permissions.state || [];
 
+  const [currentFlowState, setCurrentFlowState] = useState(false);
   const open = Boolean(anchorEl);
   const handleClose = () => {
     setAnchorEl(null);
@@ -389,9 +390,27 @@ export const Flows = ({ flows, updateCrudVal, mutate, setSelectedFlowId }: Flows
     updateCrudVal('update');
   };
 
+  const handleViewConnection = () => {
+    handleClose();
+    setSelectedFlowId(deploymentId);
+    updateCrudVal('read');
+  };
+
   const handleClick = (blockId: string, event: HTMLElement | null) => {
     setDeploymentId(blockId);
     setAnchorEl(event);
+
+    const currentFlow = flows.find((flow) => flow.deploymentId === blockId);
+
+    if (currentFlow) {
+      const isFlowRunning =
+        currentFlow.lock?.status === 'running' ||
+        currentFlow.lock?.status === 'queued' ||
+        currentFlow.lock?.status === 'locked' ||
+        runningDeploymentIds.includes(blockId);
+
+      setCurrentFlowState(isFlowRunning);
+    }
   };
 
   const handleQuickRunDeployment = async (deploymentId: string) => {
@@ -508,6 +527,8 @@ export const Flows = ({ flows, updateCrudVal, mutate, setSelectedFlowId }: Flows
         handleEdit={handleEditConnection}
         handleClose={handleClose}
         handleDelete={handleDeleteConnection}
+        viewMode={currentFlowState}
+        handleView={handleViewConnection}
       />
       <Box
         sx={{ display: 'flex', justifyContent: 'space-between' }}

src/pages/pipeline/orchestrate.tsx

@@ -116,6 +116,16 @@ export default function Orchestrate() {
             tasks={tasks}
           />
         )}
+        {crudVal === 'read' && (
+          <FlowCreate
+            setSelectedFlowId={setSelectedFlowId}
+            flowId={selectedFlowId}
+            updateCrudVal={updateCrudVal}
+            mutate={mutate}
+            tasks={tasks}
+            readonly={true}
+          />
+        )}
       </main>
     </>
   );