Merge pull request #102 from arnaugiralt/feat/LITE-28300-LITE-28301-c…

…reate-abort-and-retry-actions LITE-283000 LITE-28301: create Abort and Retry actions for deployment requests
cloudblue · Sep 14, 2023 · 0a0b51d · 0a0b51d
2 parents c67a6e5 + 4896e6c
commit 0a0b51d
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 14 deletions.
diff --git a/...eployment-details.7fd1c2931ae682adf7b1.js → ...eployment-details.1527794e2ef6826e481c.js b/...eployment-details.7fd1c2931ae682adf7b1.js → ...eployment-details.1527794e2ef6826e481c.js
diff --git a/..._ppr/static/index.5fdf03c1a578e43267e6.js → ..._ppr/static/index.36fb1b65206989e793c7.js b/..._ppr/static/index.5fdf03c1a578e43267e6.js → ..._ppr/static/index.36fb1b65206989e793c7.js
diff --git a/connect_ext_ppr/static/index.html b/connect_ext_ppr/static/index.html
@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.5fdf03c1a578e43267e6.js"></script><link href="index.7f54bf0dcbb9dc626487.css" rel="stylesheet"></head>
+<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.36fb1b65206989e793c7.js"></script><link href="index.7f54bf0dcbb9dc626487.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

diff --git a/...c/request-details.f733e7047241083dcd7a.js → ...c/request-details.276a29e9143237446553.js b/...c/request-details.f733e7047241083dcd7a.js → ...c/request-details.276a29e9143237446553.js
diff --git a/ui/src/components/CheckboxTable.vue b/ui/src/components/CheckboxTable.vue
@@ -106,7 +106,7 @@ export default {
         notResizable: true,
         text: '',
         value: 'radio',
-        width: 80,
+        width: 24,
       },
     ],
 

diff --git a/ui/src/components/RadioTable.vue b/ui/src/components/RadioTable.vue
@@ -90,7 +90,7 @@ export default {
         notResizable: true,
         text: '',
         value: 'radio',
-        width: 80,
+        width: 24,
       },
     ],
   },

diff --git a/ui/src/components/RequestTasksTab.vue b/ui/src/components/RequestTasksTab.vue
@@ -98,8 +98,12 @@ import {
   readableTimeDiff,
 } from '~helpers';
 
+import sync from '~mixins/sync';
+
 
 export default {
+  mixins: [sync([{ prop: 'updating', local: 'localUpdating' }])],
+
   components: {
     cButton,
     cDataTable,
@@ -109,13 +113,15 @@ export default {
   },
 
   props: {
+    updating: Boolean,
     requestId: {
       type: String,
       required: true,
     },
   },
 
   data: () => ({
+    localUpdating: false,
     loading: true,
     tasks: [],
 
@@ -184,17 +190,27 @@ export default {
       this.currentError = item.errorMessage;
       this.isErrorDialogOpen = true;
     },
+
+    async loadTasks() {
+      this.loading = true;
+      this.tasks = await getDeploymentRequestTasks(this.requestId);
+      this.loading = false;
+      this.localUpdating = false;
+    },
   },
 
   watch: {
     isInfoDialogOpen(v) {
       if (!v) this.currentItem = null;
     },
+
+    localUpdating(v) {
+      if (v) this.loadTasks();
+    },
   },
 
-  async created() {
-    this.tasks = await getDeploymentRequestTasks(this.requestId);
-    this.loading = false;
+  created() {
+    this.loadTasks();
   },
 };
 

diff --git a/ui/src/pages/RequestDetails.vue b/ui/src/pages/RequestDetails.vue
@@ -6,6 +6,29 @@ c-view.request-details(
   :current-tab.sync="currentTab",
   :loading="loading"
 )
+  template(
+    #actions="",
+    v-if="isAnyActionVisible",
+  )
+    actions-menu(outline)
+      c-button.list-item(
+        v-if="canAbort",
+        :icon="icons.googleCancelBaseline",
+        :loading="isAbortingRequest",
+        :upper-case="false",
+        color="red",
+        label="Abort",
+        @click="abortRequest",
+      )
+      c-button.list-item(
+        v-if="canRetry",
+        :icon="icons.googleRefreshBaseline",
+        :loading="isRetryingRequest",
+        :upper-case="false",
+        label="Retry",
+        @click="retryRequest",
+      )
+
   .info-container
     .info-column
       grid-item(
@@ -76,18 +99,25 @@ c-view.request-details(
       request-marketplaces-tab(:request-id="requestId")
 
     template(#tasks="")
-      request-tasks-tab(:request-id="requestId")
+      request-tasks-tab(
+        :request-id="requestId",
+        :updating.sync="areTasksUpdating",
+      )
 
 </template>
 
 <script>
 import {
+  googleCancelBaseline,
   googleCheckCircleBaseline,
   googleDescriptionBaseline,
+  googleRefreshBaseline,
   googleRemoveCircleBaseline,
   googleSyncBaseline,
 } from '@cloudblueconnect/material-svg/baseline';
 
+import ActionsMenu from '~components/ActionsMenu.vue';
+import cButton from '~components/cButton.vue';
 import cIcon from '~components/cIcon.vue';
 import cStatus from '~components/cStatus.vue';
 import cTabs from '~components/cTabs.vue';
@@ -99,8 +129,10 @@ import RequestMarketplacesTab from '~components/RequestMarketplacesTab.vue';
 import RequestTasksTab from '~components/RequestTasksTab.vue';
 
 import {
+  abortDeploymentRequest,
   getDeploymentsRequest,
   getPPR,
+  retryDeploymentRequest,
 } from '@/utils';
 
 import {
@@ -110,6 +142,8 @@ import {
 
 export default {
   components: {
+    ActionsMenu,
+    cButton,
     cIcon,
     cStatus,
     cTabs,
@@ -125,12 +159,17 @@ export default {
     currentTab: null,
     loading: true,
     request: null,
+    isAbortingRequest: false,
+    isRetryingRequest: false,
+    areTasksUpdating: false,
   }),
 
   computed: {
     icons: () => ({
+      googleCancelBaseline,
       googleCheckCircleBaseline,
       googleDescriptionBaseline,
+      googleRefreshBaseline,
       googleRemoveCircleBaseline,
       googleSyncBaseline,
     }),
@@ -141,6 +180,10 @@ export default {
       { label: 'Marketplaces', value: 'marketplaces' },
       { label: 'Tasks', value: 'tasks' },
     ],
+
+    canAbort: vm => ['pending', 'processing'].includes(vm.request?.status),
+    canRetry: vm => vm.request?.status === 'error',
+    isAnyActionVisible: vm => vm.canAbort || vm.canRetry,
   },
 
   methods: {
@@ -156,6 +199,16 @@ export default {
     downloadPPR() {
       downloader({ url: this.pprFileUrl });
     },
+
+    async abortRequest() {
+      this.request = await abortDeploymentRequest(this.requestId);
+      this.areTasksUpdating = true;
+    },
+
+    async retryRequest() {
+      this.request = await retryDeploymentRequest(this.requestId);
+      this.areTasksUpdating = true;
+    },
   },
 
   async created() {

diff --git a/ui/src/utils.js b/ui/src/utils.js
@@ -63,3 +63,7 @@ export const getDeploymentRequestMarketplaces = (requestId) => rest.get(`/api/de
 export const getDeploymentRequestTasks = (requestId) => rest.get(`/api/deployments/requests/${requestId}/tasks`);
 
 export const createDeploymentRequest = (body) => rest.post('/api/deployments/requests', body);
+
+export const abortDeploymentRequest = (id) => rest.post(`/api/deployments/requests/${id}/abort`);
+
+export const retryDeploymentRequest = (id) => rest.post(`/api/deployments/requests/${id}/retry`);