♻️ : migrate stacks page

gaia-app · Apr 9, 2020 · e83caf4 · e83caf4
1 parent 6310b45
commit e83caf4
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 3 deletions.
diff --git a/src/main/client/app/pages/stacks/stacks.vue b/src/main/client/app/pages/stacks/stacks.vue
@@ -1,10 +1,73 @@
 <template>
-  <div>This is not the final stacks page xD</div>
+  <b-card-group columns>
+    <b-card
+      v-for="stack in stacks"
+      :key="stack.id"
+      :title="stack.name"
+      :sub-title="stack.description"
+    >
+      <b-card-text>
+        <b-badge
+          :id="'badge-' + stack.id"
+          pill
+          :variant="states[stack.state].variant"
+        >
+          <font-awesome-icon :icon="states[stack.state].icon" />&nbsp;{{ states[stack.state].text }}
+        </b-badge>
+        <b-tooltip :target="'badge-' + stack.id">
+          {{ states[stack.state].tooltip }}
+        </b-tooltip>
+      </b-card-text>
+
+      <b-button
+        :to="{ name: 'stack_edition', params: { stackId: stack.id }}"
+        title="Edit this stack"
+        variant="primary"
+        class="mr-1"
+      >
+        <font-awesome-icon icon="edit" />
+      </b-button>
+    </b-card>
+  </b-card-group>
 </template>
 
 <script>
+  import { getStacks } from '@/shared/api/stacks-api';
+
   export default {
     name: 'AppStacks',
+    data: () => ({
+      stacks: [],
+      states: {
+        NEW: {
+          variant: 'success',
+          tooltip: 'Your stack is new and has not been started yet.',
+          icon: 'star-of-life',
+          text: 'new',
+        },
+        RUNNING: {
+          variant: 'primary',
+          tooltip: 'Your stack is up and running !',
+          icon: ['far', 'check-square'],
+          text: 'running',
+        },
+        TO_UPDATE: {
+          variant: 'warning',
+          tooltip: 'Your stack needs an update !',
+          icon: 'upload',
+          text: 'to update',
+        },
+        STOPPED: {
+          variant: 'danger',
+          tooltip: 'Your stack has been stopped.',
+          icon: 'stop-circle',
+          text: 'stopped',
+        },
+      },
+    }),
+    async created() {
+      this.stacks = await getStacks();
+    },
   };
 </script>
 

diff --git a/src/main/client/app/shared/config/bootstrap-vue-config.js b/src/main/client/app/shared/config/bootstrap-vue-config.js
@@ -19,6 +19,7 @@ import {
   TablePlugin,
   TabsPlugin,
   ToastPlugin,
+  TooltipPlugin,
 } from 'bootstrap-vue';
 
 export default {
@@ -42,5 +43,6 @@ export default {
     Vue.use(TablePlugin);
     Vue.use(TabsPlugin);
     Vue.use(ToastPlugin);
+    Vue.use(TooltipPlugin);
   },
 };
diff --git a/src/main/client/app/shared/config/fontawesome-config.js b/src/main/client/app/shared/config/fontawesome-config.js
@@ -11,12 +11,13 @@ import {
   faInfo,
   faLayerGroup,
   faLock,
-  faObjectGroup,
   faMinus,
+  faObjectGroup,
   faPlus,
   faRocket,
   faSave,
   faSignOutAlt,
+  faStarOfLife,
   faStopCircle,
   faStopwatch,
   faTachometerAlt,
@@ -33,7 +34,10 @@ import {
   faMarkdown,
   faSuperpowers,
 } from '@fortawesome/free-brands-svg-icons';
-import { faUser as farUser } from '@fortawesome/free-regular-svg-icons';
+import {
+  faCheckSquare as farCheckSquare,
+  faUser as farUser,
+} from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
@@ -70,6 +74,8 @@ export default {
       faStopCircle,
       faUpload,
       faUserShield,
+      faStarOfLife,
+      farCheckSquare,
     );
     Vue.component('font-awesome-icon', FontAwesomeIcon);
   },