Merge pull request #15 from Zorin95670/vmoittie/delete-project

Add actions to projects, deployments and environments

CHANGELOG

@@ -1,5 +1,19 @@
 # octo-board changelog
 
+## 2021/10/10: version 2.9.0
+
+### New features
+
+* Add environments management
+* Update button card display
+* Add button to manage deployments in historic table
+* Add button to delete master project
+
+### Bug fixes
+
+* Remove jira icon from project card
+* Fix display of no deployment for one client in deployments table
+
 ## 2021/10/10: version 2.8.1
 
 ### Bug fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "octo-board",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/ActionMenu.vue

@@ -1,6 +1,7 @@
 <template>
   <v-menu
     top
+    v-model="isOpen"
     origin="center center"
     :offset-y="true"
     transition="scale-transition">
@@ -10,14 +11,16 @@
           v-show="hasAction"
           v-bind="attrs"
           v-on="on"
-          :color="actionColor"
+          :color="isOpen ? 'dark-grey' : 'green'"
           dark
           fixed
           bottom
           right
           fab
           style="bottom: 130px;">
-          <v-icon>{{ actionIcon }}</v-icon>
+          <v-icon>
+            {{ isOpen ? 'mdi-minus': 'mdi-plus' }}
+          </v-icon>
         </v-btn>
       </v-fab-transition>
     </template>
@@ -47,6 +50,7 @@ export default {
   mixins: [AuthenticationMixin, DialogMixin],
   data() {
     return {
+      isOpen: false,
       hasAction: false,
       actionColor: null,
       actionIcon: null,

src/components/AdministratorSettings.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-expansion-panel-content>
-    <div style="display: flex; flex-direction: row; justify-content: space-around;">
+  <div style="display: flex; flex-direction: row; justify-content: space-around;">
+    <div>
       <v-card outlined max-width="372">
         <v-form
           ref="administratorPasswordForm"
@@ -30,6 +30,7 @@
               required></v-text-field>
           </v-card-text>
           <v-card-actions>
+            <v-spacer></v-spacer>
             <v-btn
               :disabled="!administratorPasswordValid"
               color="success"
@@ -40,6 +41,8 @@
           </v-card-actions>
         </v-form>
       </v-card>
+    </div>
+    <div>
       <v-card outlined max-width="372">
         <v-form
           ref="administratorEmailForm"
@@ -59,6 +62,7 @@
               required></v-text-field>
           </v-card-text>
           <v-card-actions>
+            <v-spacer></v-spacer>
             <v-btn
               :disabled="!administratorEmailValid"
               color="success"
@@ -70,7 +74,7 @@
         </v-form>
       </v-card>
     </div>
-  </v-expansion-panel-content>
+  </div>
 </template>
 
 <script>

src/components/DeploymentTable.vue

@@ -51,8 +51,9 @@
         <v-col
           :cols="environment.maxClients - environment.clients[project.name].length"
           :key="`${project}-${environment.name}-none`"
-          v-if="environment.maxClients - environment.clients[project.name].length > 0
-          && environment.clients[project.name].length > 1">
+          v-if="(environment.maxClients - environment.clients[project.name].length > 0
+          && environment.clients[project.name].length > 1)
+          || environment.clients[project.name].length === 0">
           <v-card></v-card>
         </v-col>
         <v-divider
@@ -145,11 +146,14 @@ export default {
         });
         const array = Object.keys(clients)
           .map((key) => clients[key].length);
-        if (Math.max(...array) > 0) {
+        const max = Math.max(...array);
+        this.maxClients[env.name] = max;
+
+        if (max > 0) {
           environments.push({
             name: env.name,
             clients,
-            maxClients: Math.max(...array),
+            maxClients: max,
           });
         }
       });

src/components/EnvironmentSettings.vue

@@ -0,0 +1,45 @@
+<template>
+  <div style="display: flex; flex-direction: row; justify-content: space-around;">
+    <div>
+      <create-environment-card/>
+    </div>
+    <div>
+      <rename-environment-card :environments="environments"/>
+    </div>
+    <div>
+      <list-environment-card :default-environments="environments"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import CreateEnvironmentCard from '@/components/cards/environment/CreateEnvironmentCard.vue';
+import RenameEnvironmentCard from '@/components/cards/environment/RenameEnvironmentCard.vue';
+import ListEnvironmentCard from '@/components/cards/environment/ListEnvironmentCard.vue';
+
+export default {
+  name: 'EnvironmentSettings',
+  components: { ListEnvironmentCard, RenameEnvironmentCard, CreateEnvironmentCard },
+  created() {
+    this.loadEnvironments();
+    this.$root.$on('reloadEnvironments', this.loadEnvironments);
+  },
+  beforeDestroy() {
+    this.$root.$off('reloadEnvironments', this.loadEnvironments);
+  },
+  data() {
+    return {
+      environments: [],
+    };
+  },
+  methods: {
+    loadEnvironments() {
+      return this.$http.get('/octo-spy/api/environments')
+        .then((response) => {
+          this.environments = response.data;
+          return response;
+        });
+    },
+  },
+};
+</script>

src/components/HistoricTable.vue

@@ -61,6 +61,22 @@
           <template v-slot:[`item.alive`]="{item}">
             {{ item.alive ? 'Yes' : 'No' }}
           </template>
+          <template v-slot:[`item.id`]="{item}">
+            <v-btn
+              color="red"
+              @click="dialogDisableDeployment(item.id)"
+              v-if="item.alive">
+              <v-icon>mdi-close</v-icon>
+              Disable
+            </v-btn>
+            <v-btn
+              color="red"
+              @click="dialogDeleteDeployment(item.id)"
+              v-else>
+              <v-icon>mdi-delete</v-icon>
+              Delete
+            </v-btn>
+          </template>
         </v-data-table>
       </v-col>
       <v-spacer/>
@@ -72,10 +88,12 @@
 import axios from 'axios';
 import tableConfig from '@/assets/table.historic.config.json';
 import UrlMixin from '@/mixins/UrlMixin';
+import AuthenticationMixin from '../mixins/AuthenticationMixin';
+import DialogMixin from '../mixins/DialogMixin';
 
 export default {
   name: 'HistoricTable',
-  mixins: [UrlMixin],
+  mixins: [AuthenticationMixin, DialogMixin, UrlMixin],
   created() {
     this.initDataFromQuery(this.searchFields, {
       alive: (value) => `${value}`,
@@ -89,25 +107,39 @@ export default {
     this.$http.get('/octo-spy/api/clients').then((response) => {
       this.clients = response.data;
     });
+    this.$root.$on('disableDeployment', this.disableDeployment);
+    this.$root.$on('deleteDeployment', this.deleteDeployment);
+  },
+  beforeDestroy() {
+    this.$root.$off('disableDeployment', this.disableDeployment);
+    this.$root.$off('deleteDeployment', this.deleteDeployment);
   },
   computed: {
     aliveText() {
       const value = this.aliveValues.find((item) => item.value === this.alive);
       return (!value) ? 'Both' : value.text;
     },
   },
+  watch: {
+    roles() {
+      this.headers = this.initHeaders(this.isAdministrator());
+    },
+  },
   data() {
+    const headers = this.initHeaders(this.isAdministratorFromStorage(window.localStorage));
     return {
       params: {},
       lastParams: null,
       cancel: null,
-      headers: tableConfig.headers,
+      headers,
       pagination: {
         page: 1,
         total: 0,
       },
       searchFields: ['project', 'environment', 'client', 'version', 'alive'],
       items: [],
+      actions: null,
+      action: null,
       alive: null,
       aliveValues: [
         { text: 'Yes', value: 'true' },
@@ -127,6 +159,17 @@ export default {
     };
   },
   methods: {
+    initHeaders(isAdmin) {
+      if (isAdmin) {
+        return [...tableConfig.headers, {
+          text: 'Actions',
+          align: 'start',
+          sortable: false,
+          value: 'id',
+        }];
+      }
+      return tableConfig.headers;
+    },
     createQueryParameters() {
       const params = {
         page: this.pagination.page - 1,
@@ -177,6 +220,36 @@ export default {
         this.loading = false;
       });
     },
+    dialogDisableDeployment(id) {
+      this.openDialog('confirmationCard', {
+        text: 'Make this deployment inactive ?',
+        event: 'disableDeployment',
+        eventData: id,
+      });
+    },
+    disableDeployment(id) {
+      return this.$http.patch(`/octo-spy/api/deployments/${id}`, {
+        alive: false,
+      }, {
+        headers: {
+          Authorization: `Basic ${this.getUserToken()}`,
+        },
+      }).then(this.search);
+    },
+    dialogDeleteDeployment(id) {
+      this.openDialog('confirmationCard', {
+        text: 'Delete this deployment ?',
+        event: 'deleteDeployment',
+        eventData: id,
+      });
+    },
+    deleteDeployment(id) {
+      return this.$http.delete(`/octo-spy/api/deployments/${id}`, {
+        headers: {
+          Authorization: `Basic ${this.getUserToken()}`,
+        },
+      }).then(this.search);
+    },
   },
 };
 </script>

src/components/ProjectCard.vue

@@ -29,9 +29,6 @@
         :to="`/historic?project=${this.name}`">
         <v-icon>mdi-history</v-icon>
       </v-btn>
-      <v-btn icon title="Associated jira issues.">
-        <v-icon>mdi-jira</v-icon>
-      </v-btn>
       <v-menu
         v-model="colorMenu"
         :close-on-content-click="false"