From 25f1d0b7668ce8883ce93d26debb0bf3f84f4e3a Mon Sep 17 00:00:00 2001
From: Joachim Prinzbach <joachim.prinzbach@gmail.com>
Date: Tue, 5 May 2020 22:17:24 +0200
Subject: [PATCH] Initial example for fetching rollouts

---
 src/api/rollouts.js                  |   8 ++
 src/api/vulnerabilities.js           |   1 +
 src/locales/en.json                  |   3 +-
 src/pages/Layout/DashboardLayout.vue |   7 ++
 src/pages/Rollouts/Rollouts.vue      | 112 +++++++++++++++++++++++++++
 src/routes/routes.js                 |   6 ++
 src/store/actions.type.js            |   1 +
 src/store/index.js                   |   4 +-
 src/store/mutations.type.js          |   1 +
 src/store/rollouts.module.js         |  41 ++++++++++
 10 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 src/api/rollouts.js
 create mode 100644 src/pages/Rollouts/Rollouts.vue
 create mode 100644 src/store/rollouts.module.js

diff --git a/src/api/rollouts.js b/src/api/rollouts.js
new file mode 100644
index 0000000..463f5be
--- /dev/null
+++ b/src/api/rollouts.js
@@ -0,0 +1,8 @@
+import Api from './Api'
+
+export default {
+  fetchRollouts () {
+    return Api.get('api/rollouts');
+  }
+}
+
diff --git a/src/api/vulnerabilities.js b/src/api/vulnerabilities.js
index 2fd7ce3..39c8589 100644
--- a/src/api/vulnerabilities.js
+++ b/src/api/vulnerabilities.js
@@ -5,3 +5,4 @@ export default {
     return Api.get('api/vulnerabilities');
   }
 }
+
diff --git a/src/locales/en.json b/src/locales/en.json
index f9e7207..1af3d1e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -30,6 +30,7 @@
     "extendedTables": "Extended Tables",
     "paginatedTables": "Paginated Tables",
     "widgets": "Widgets",
-    "charts": "Charts"
+    "charts": "Charts",
+    "rollouts": "Rollout Overview"
   }
 }
diff --git a/src/pages/Layout/DashboardLayout.vue b/src/pages/Layout/DashboardLayout.vue
index d84e1f7..f62f5f1 100644
--- a/src/pages/Layout/DashboardLayout.vue
+++ b/src/pages/Layout/DashboardLayout.vue
@@ -150,6 +150,13 @@
             path: '/charts'
           }"
         ></sidebar-item>
+        <sidebar-item
+          :link="{
+            name: $t('sidebar.rollouts'),
+            icon: 'tim-icons icon-chart-bar-32',
+            path: '/rollouts'
+          }"
+        ></sidebar-item>
       </template>
     </side-bar>
     <!--Share plugin (for demo purposes). You can remove it if don't plan on using it-->
diff --git a/src/pages/Rollouts/Rollouts.vue b/src/pages/Rollouts/Rollouts.vue
new file mode 100644
index 0000000..6adb161
--- /dev/null
+++ b/src/pages/Rollouts/Rollouts.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="row">
+    <div class="col-md-12">
+      <card card-body-classes="table-full-width">
+        <h4 slot="header" class="card-title">Striped table</h4>
+        <el-table :data="tableData">
+          <el-table-column
+            min-width="150"
+            sortable
+            label="Name"
+            property="name"
+          ></el-table-column>
+          <el-table-column
+            min-width="150"
+            sortable
+            label="Country"
+            property="country"
+          ></el-table-column>
+          <el-table-column
+            min-width="150"
+            sortable
+            label="City"
+            property="city"
+          ></el-table-column>
+          <el-table-column
+            min-width="150"
+            sortable
+            align="right"
+            header-align="right"
+            label="Salary"
+            property="salary"
+          ></el-table-column>
+        </el-table>
+      </card>
+    </div>
+
+  </div>
+</template>
+<script>
+import { Table, TableColumn } from 'element-ui';
+import {FETCH_ROLLOUTS} from "../../store/actions.type";
+
+export default {
+  components: {
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: 1,
+          name: 'Dakota Rice',
+          salary: '$36.738',
+          country: 'Niger',
+          city: 'Oud-Turnhout'
+        },
+        {
+          id: 2,
+          name: 'Minerva Hooper',
+          salary: '$23,789',
+          country: 'Curaçao',
+          city: 'Sinaai-Waas'
+        },
+        {
+          id: 3,
+          name: 'Sage Rodriguez',
+          salary: '$56,142',
+          country: 'Netherlands',
+          city: 'Baileux'
+        },
+        {
+          id: 4,
+          name: 'Philip Chaney',
+          salary: '$38,735',
+          country: 'Korea, South',
+          city: 'Overland Park'
+        },
+        {
+          id: 5,
+          name: 'Doris Greene',
+          salary: '$63,542',
+          country: 'Malawi',
+          city: 'Feldkirchen in Kärnten'
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.$store.dispatch(FETCH_ROLLOUTS);
+  },
+  methods: {
+    tableRowClassName({ rowIndex }) {
+      if (rowIndex === 0) {
+        return 'table-success';
+      } else if (rowIndex === 2) {
+        return 'table-info';
+      } else if (rowIndex === 4) {
+        return 'table-danger';
+      } else if (rowIndex === 6) {
+        return 'table-warning';
+      }
+      return '';
+    }
+  }
+};
+</script>
+<style>
+.table-transparent {
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/routes/routes.js b/src/routes/routes.js
index 4f586cd..90e7c71 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -41,6 +41,7 @@ const Dashboard = () =>
     /* webpackChunkName: "dashboard" */ "src/pages/Dashboard/Dashboard.vue"
   );
 import Widgets from "src/pages/Widgets.vue";
+import Rollouts from "../pages/Rollouts/Rollouts";
 
 // Forms pages
 const RegularForms = () => import("src/pages/Forms/RegularForms.vue");
@@ -248,6 +249,11 @@ const routes = [
         name: "Widgets",
         components: { default: Widgets },
       },
+      {
+        path: "rollouts",
+        name: "Rollout Overview",
+        components: { default: Rollouts },
+      },
     ],
   },
   { path: "*", component: NotFound },
diff --git a/src/store/actions.type.js b/src/store/actions.type.js
index b0442ca..00105e4 100644
--- a/src/store/actions.type.js
+++ b/src/store/actions.type.js
@@ -1 +1,2 @@
 export const FETCH_VULNERABILITIES = "fetchVulnerabilities";
+export const FETCH_ROLLOUTS = "fetchRollouts";
diff --git a/src/store/index.js b/src/store/index.js
index aa7aafb..f468f11 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import vulnerabilities from './vulnerabilities.module'
+import rollouts from './rollouts.module'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    vulnerabilities
+    vulnerabilities,
+    rollouts
   }
 })
diff --git a/src/store/mutations.type.js b/src/store/mutations.type.js
index d807421..81acb2f 100644
--- a/src/store/mutations.type.js
+++ b/src/store/mutations.type.js
@@ -1,2 +1,3 @@
 export const SET_VULNERABILITIES = "setVulnerabilities";
+export const SET_ROLLOUTS = "setRollouts";
 export const RESET_STATE = "resetState";
diff --git a/src/store/rollouts.module.js b/src/store/rollouts.module.js
new file mode 100644
index 0000000..b0f9f0d
--- /dev/null
+++ b/src/store/rollouts.module.js
@@ -0,0 +1,41 @@
+import rollouts from '../api/rollouts'
+import Vue from "vue";
+import {FETCH_ROLLOUTS} from "./actions.type";
+import {RESET_STATE, SET_ROLLOUTS} from "./mutations.type";
+
+const initialState = () => ({
+  rollouts: []
+})
+
+const state = { ...initialState };
+
+const getters = {
+  rollouts(state) {
+    return state.rollouts;
+  }
+};
+
+const actions = {
+  async [FETCH_ROLLOUTS](context) {
+    const { data } = await rollouts.fetchRollouts();
+    context.commit(SET_ROLLOUTS, data);
+    return data;
+  },}
+
+export const mutations = {
+  [SET_ROLLOUTS](state, rollouts) {
+    state.rollouts = rollouts;
+  },
+  [RESET_STATE]() {
+    for (let f in state) {
+      Vue.set(state, f, initialState[f]);
+    }
+  }
+};
+
+export default {
+  state,
+  actions,
+  mutations,
+  getters
+};