Fixed the deployment stdout display and behavior. Fixed other issues with...

Fixed the deployment stdout display and behavior. Fixed other issues with timers. Updated IOCDetails

src/components/IOC/IOCConfiguration.js

@@ -9,11 +9,9 @@ import { useCreateDeployment, useIOC, useUpdateIOC } from "../../api/SwaggerApi"
 import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
 import { useHistory } from "react-router-dom";
 
-export function IOCConfiguration({ ioc, getIOC }) {
+export function IOCConfiguration({ ioc, getIOC, deployment, createDeployment}) {
   const [iocFormOpen, setIOCFormOpen] = useState(false);
-  const [deployment, createDeployment] = useCreateDeployment();
   const theme = useTheme();
-  const history = useHistory()
   console.log(deployment);
 
   useGlobalAppBar(
@@ -29,29 +27,26 @@ export function IOCConfiguration({ ioc, getIOC }) {
     // history.push(window.location.pathname);
   }
 
-  useEffect(() => {
-    if (deployment) history.push(`/deployments/${deployment[0].id}`);
-  }, [deployment]);
-
   let content = <></>;
   if (ioc) {
-    const getSubset = ({ name, description, host, active, status, git }) => ({ name, description, host, active, status, git });
+    const getSubset = ({ name, description, host, active, status, latestVersion:{sourceVersion: version, sourceUrl: git} }) => ({ name, description, "target host": host, active: (active && (ioc.latestVersion.id == ioc.deployedVersion?.id)), "Target host status": status, git, version });
     const ioc2 = getSubset(ioc)
     console.log(ioc2);
     delete ioc2.activeDeployment;
     delete ioc2.latestVersion;
+    console.log(ioc2);
     // ioc2.latestVersion = <KeyValueTable obj={ioc2.latestVersion} variant="table"></KeyValueTable>
     // ioc2.deployedVersion = <KeyValueTable obj={ioc2.deployedVersion} variant="table"></KeyValueTable>
     content = (
       <>
         <Container>
-          {(ioc.host && ioc.status === "undeployed") &&
+          {/* {(ioc && ioc.host) &&
             <Box textAlign='center'>
               <Button variant="contained" color="secondary">
                 Deploy  &nbsp;  <DirectionsBoat />
               </Button>
             </Box>
-          }
+          } */}
           <IOCDetails ioc={ioc2} />
         </Container>
         {
@@ -64,11 +59,11 @@ export function IOCConfiguration({ ioc, getIOC }) {
             transform: "translate(-50%, -50%)"
           }}
             onClick={() => { createDeployment([ioc], "triggered from a button"); getIOC(); }}>
-            DEPLOY THIS VERSION
+            DEPLOY THIS VERSION &nbsp;  <DirectionsBoat />
         </Fab>
         }
         <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
-          <CreateIOC submitCallback={closeModal} buttonText="Update" init={ioc} hook={useUpdateIOC.bind(null, ioc.id)} />
+          <CreateIOC submitCallback={closeModal} buttonText="Update" init={ioc2} hook={useUpdateIOC.bind(null, ioc.id)} />
         </SimpleModal>
       </>
     );

src/components/IOC/IOCDetails.js

+import { Grid } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
 import React from "react";
 import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
 import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
 import { IOCBadge } from "./IOCBadge";
 
+export function diff(o1, o2) {
+  let diff = Object.keys(o2).reduce((diff, key) => {
+    if (o1[key] === o2[key]) return diff
+    return {
+      ...diff,
+      [key]: o2[key]
+    }
+  }, {})
+  return diff;
+}
+
 export function IOCDetails({ ioc }) {
   ioc = { ...ioc };
   ioc.git = <a href={ioc.git} target="_blank" rel="noreferrer">{ioc.git}</a>
-  delete ioc.iocVersion;
   return (
     <>
-    <SimpleAccordion defaultExpanded summary={<IOCBadge ioc={ioc} />} >
-      <KeyValueTable obj={ioc} variant="overline"/>
-    </SimpleAccordion>
-    <SimpleAccordion summary="Deployment">
-      Check me out!
-    </SimpleAccordion>
+      <Grid container>
+        <Grid item xs={12}>
+          <Alert severity="warning" variant="standard">
+            These changes have not been deployed yet.
+          </Alert>
+        </Grid>
+        <Grid item xs={12}>
+          <SimpleAccordion defaultExpanded summary={<IOCBadge ioc={ioc} />} >
+            <KeyValueTable obj={ioc} variant="overline" />
+          </SimpleAccordion>
+        </Grid>
+      </Grid>
     </>
 
 

src/components/deployments/DeploymentDetails.js

-import React, { useEffect } from 'react';
-import { TextField, Grid, Typography, Box, Button, Card, CardContent, CardActions } from '@material-ui/core';
+import React, { useEffect, useRef, useState } from 'react';
+import { TextField, Grid, Typography, Box, Button, Card, CardContent, CardActions, Container, LinearProgress, CircularProgress } from '@material-ui/core';
 import { makeStyles, createMuiTheme } from '@material-ui/core/styles';
 import { deploymentStatusColors } from "./DeploymentsTable"
 import { DeploymentStepper } from "./DeploymentStepper"
@@ -7,6 +7,7 @@ import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
 import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
 import { useDeploymentJob } from '../../api/SwaggerApi';
 import { DeploymentBadge } from './DeploymentBadge';
+import { Skeleton } from '@material-ui/lab';
 
 const useStyles = makeStyles({
   root: {
@@ -19,16 +20,13 @@ const useStyles = makeStyles({
 
 export function DeploymentDetails({ deployment, getDeployment, onDeploymentStart, startButtonDisabled }) {
   const [deploymentJob, getDeploymentJob] = useDeploymentJob(deployment.awxJobId);
-  // deployment.status = deploymentJob?.job.status ?? deployment.status;
-  console.log(deployment.status.toLowerCase());
-  console.log(["created", "pending", "running", "successful"].indexOf(deployment.status.toLowerCase()))
 
   console.log(deploymentJob);
 
   useEffect(() => {
     if (deployment && !(["successful", "failed"].includes(deployment.status.toLowerCase()))) {
       console.log(deployment.status.toLowerCase());
-      getDeploymentJob();
+      setTimeout(getDeploymentJob, 5000);
       setTimeout(getDeployment, 5000);
     }
   }, [deployment]);
@@ -69,13 +67,41 @@ export function DeploymentDetails({ deployment, getDeployment, onDeploymentStart
       </Grid>
       <Grid item xs={12} md={12}>
         <SimpleAccordion summary="Deployment Job Output" defaultExpanded>
-          <DeploymentJobStdOut deploymentJob={deploymentJob} />
+          <DeploymentJobStdOut2 deploymentJob={deploymentJob} />
         </SimpleAccordion>
       </Grid>
     </Grid>
   );
 }
 
-export function DeploymentJobStdOut({ deploymentJob }) {
-  return deploymentJob ? <iframe srcDoc={deploymentJob.stdout} width="100%" height="500px" /> : "Fetching job details";
+export function DeploymentJobStdOut2({ deploymentJob }) {
+  const stdoutRef = useRef(null);
+  const [firstTime, setFirstTime] = useState(true);
+
+  useEffect(() => {
+    if (stdoutRef.current) {
+      stdoutRef.current.scrollTop = stdoutRef.current.scrollHeight;
+      if (firstTime && deploymentJob?.job.started) {
+        console.log("bongo")
+        stdoutRef.current?.parentElement.scrollIntoView(false);
+        setFirstTime(false);
+      }
+    }
+  });
+
+  return deploymentJob?.job.started ?
+    <div 
+      ref={stdoutRef}
+      style={{
+      overflow: "auto",
+      minHeight: "500px",
+      maxHeight: "500px",
+      width: "100%",
+      color: "white",
+      backgroundColor: "black"
+    }}
+      dangerouslySetInnerHTML={{ __html: deploymentJob.stdout }}
+    />
+    // : <Skeleton variant="rect" width="100%" height={500} />
+    : <div style={{width: "100%"}}><LinearProgress color="primary" /></div>
 }

src/views/IOC/IOCDetailsView.js

@@ -5,28 +5,39 @@ import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/Global
 import { IOCDetails } from "../../components/IOC/IOCDetails";
 import { CreateIOC } from "../../components/IOC/CreateIOC";
 import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
-import { useIOC, useUpdateIOC } from "../../api/SwaggerApi";
+import { useCreateDeployment, useIOC, useUpdateIOC } from "../../api/SwaggerApi";
 import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
 import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
 import { TabPanel } from "@material-ui/lab";
 import { IOCConfiguration } from "../../components/IOC/IOCConfiguration";
+import { useHistory } from "react-router-dom";
 
 export function IOCDetailsView({ match }) {
   const id = parseInt(match.params.id);
   const [selectedTab, setSelectedTab] = useState("Configuration");
+  const [firstTime, setFirstTime] = useState(true);
   const [ioc, getIOC] = useIOC(id);
+  const [deployment, createDeployment] = useCreateDeployment();
+  const history = useHistory();
   console.log(ioc);
 
   const handleTabChange = (event, tab) => {
     setSelectedTab(tab);
   };
 
-  // useEffect(() => {
-  //   if (ioc && ioc.activeDeployment) setSelectedTab("Live Status")
-  // }, [ioc]);
+  useEffect(() => {
+    if (deployment) history.push(`/deployments/${deployment[0].id}`);
+  }, [deployment]);
+
+  useEffect(() => {
+    if (firstTime && ioc && ioc.activeDeployment) {
+      setSelectedTab("Live Status");
+      setFirstTime(false);
+    }
+  }, [ioc]);
 
   return (
-      <Container>
+      <Container style={{paddingBottom: "200px"}}>
         <Paper>
           <Grid container spacing={1}>
             <Grid item xs={12}>
@@ -44,7 +55,7 @@ export function IOCDetailsView({ match }) {
             </Grid>
             <Grid item xs={12}>
               {selectedTab === "Live Status" && <IOCLiveStatus ioc={ioc} />}
-              {selectedTab === "Configuration" && <IOCConfiguration ioc={ioc} getIOC={getIOC} />}
+              {selectedTab === "Configuration" && <IOCConfiguration ioc={ioc} getIOC={getIOC} deployment={deployment} createDeployment={createDeployment} />}
             </Grid>
           </Grid>
         </Paper>