Merge pull request #216 from onattech/DA-230_Frontend_For_Deployments

DA-230: Deployments page is ready.

app/mainapp/graphql/private/resolvers/deployments.graphqls

@@ -2,6 +2,7 @@ type Deployments {
   pipelineID: String!
   version: String!
 	name: String!
+  fromEnvironmentID: String!
   environmentID: String!
   description: String!
   online: Boolean!

app/mainapp/graphql/private/resolvers/deployments.resolvers.go

@@ -683,6 +683,7 @@ select
 a.pipeline_id, 
 a.name,
 a.environment_id,
+a.from_environment_id,
 a.description,
 a.active,
 a.worker_group,
@@ -719,6 +720,7 @@ order by a.created_at desc
 a.pipeline_id, 
 a.name,
 a.environment_id,
+a.from_environment_id
 a.description,
 a.active,
 a.worker_group,
@@ -817,6 +819,7 @@ select
 a.pipeline_id, 
 a.name,
 a.environment_id,
+a.from_environment_id,
 a.description,
 a.active,
 a.worker_group,
@@ -852,6 +855,7 @@ order by a.created_at desc
 a.pipeline_id, 
 a.name,
 a.environment_id,
+a.from_environment_id,
 a.description,
 a.active,
 a.worker_group,

frontend/src/components/EnviromentDropdown/index.jsx

@@ -40,6 +40,13 @@ const EnviromentDropdown = () => {
         setAnchorEl(null);
     };
 
+    // Set selected environment in dropdown when global environment changes
+    React.useEffect(() => {
+        setSelectedEnviroment(GlobalEnvironmentID.id.get());
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [GlobalEnvironmentID.id.get()]);
+
     // Retrieve environments on load
     React.useEffect(() => {
         let active = true;

frontend/src/components/TableContent/PipelineTable/index.jsx

@@ -82,7 +82,7 @@ const PipelineTable = ({ data, filter, setPipelineCount, environmentID, getPipel
                             onClick={() => {
                                 history.push({ pathname: `/pipelines/view/${row.value.pipelineID}`, state: row.value });
                                 FlowState.isRunning.set(true);
-                                runPipelines(environmentID, row.value.pipelineID);
+                                runPipelines(environmentID, row.value.pipelineID, 'pipeline');
                             }}>
                             Run
                         </Button>
@@ -217,7 +217,7 @@ export const useRunPipelinesHook = () => {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
     // Run pipeline flow
-    return async (environmentID, pipelineID) => {
+    return async (environmentID, pipelineID, RunType) => {
         // First get pipeline flow graph
         const rawResponse = await getPipelineFlow({ pipelineID, environmentID, RunType: 'pipeline' });
         const run_json = prepareInputForFrontend(rawResponse);
@@ -227,7 +227,7 @@ export const useRunPipelinesHook = () => {
         const response = await runPipelines({
             pipelineID,
             environmentID,
-            run_json,
+            RunType,
         });
 
         if (response.r === 'error') {

frontend/src/graphql/deleteDeployment.js

@@ -0,0 +1,32 @@
+import { gql, GraphQLClient } from 'graphql-request';
+import { useGlobalAuthState } from '../Auth/UserAuth';
+
+const graphlqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT_PRIVATE;
+
+const query = gql`
+    mutation deleteDeployment($pipelineID: String!, $environmentID: String!, $version: String!) {
+        deleteDeployment(environmentID: $environmentID, pipelineID: $pipelineID, version: $version)
+    }
+`;
+
+export const useDeleteDeployment = () => {
+    const authState = useGlobalAuthState();
+    const jwt = authState.authToken.get();
+
+    const headers = {
+        Authorization: 'Bearer ' + jwt,
+    };
+
+    const client = new GraphQLClient(graphlqlEndpoint, {
+        headers,
+    });
+
+    return async (input) => {
+        try {
+            const res = await client.request(query, input);
+            return res?.deleteDeployment;
+        } catch (error) {
+            return JSON.parse(JSON.stringify(error, undefined, 2)).response;
+        }
+    };
+};

frontend/src/graphql/getDeployment.js

@@ -10,6 +10,7 @@ const query = gql`
             version
             name
             environmentID
+            fromEnvironmentID
             description
             active
             online

frontend/src/graphql/getDeployments.js

@@ -10,6 +10,7 @@ const query = gql`
             version
             name
             environmentID
+            fromEnvironmentID
             description
             active
             online

frontend/src/graphql/turnOnOffDeployment.js

@@ -0,0 +1,32 @@
+import { gql, GraphQLClient } from 'graphql-request';
+import { useGlobalAuthState } from '../Auth/UserAuth';
+
+const graphlqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT_PRIVATE;
+
+const query = gql`
+    mutation turnOnOffDeployment($pipelineID: String!, $environmentID: String!, $online: Boolean!) {
+        turnOnOffDeployment(environmentID: $environmentID, pipelineID: $pipelineID, online: $online)
+    }
+`;
+
+export const useTurnOnOffDeployment = () => {
+    const authState = useGlobalAuthState();
+    const jwt = authState.authToken.get();
+
+    const headers = {
+        Authorization: 'Bearer ' + jwt,
+    };
+
+    const client = new GraphQLClient(graphlqlEndpoint, {
+        headers,
+    });
+
+    return async (input) => {
+        try {
+            const res = await client.request(query, input);
+            return res?.turnOnOffDeployment;
+        } catch (error) {
+            return JSON.parse(JSON.stringify(error, undefined, 2)).response;
+        }
+    };
+};

frontend/src/pages/Deploy.jsx

@@ -74,7 +74,7 @@ const Deploy = () => {
                 patch: deployment.version.split('.')[2],
                 workerGroup: deployment.workerGroup,
             });
-            setLive(true);
+            setLive(deployment.online);
         } else {
             setWorkerGroup(null);
             reset({ major: '0', minor: '0', patch: '0', workerGroup: null });