Initial example for fetching rollouts

src/api/rollouts.js

@@ -0,0 +1,8 @@
+import Api from './Api'
+
+export default {
+  fetchRollouts () {
+    return Api.get('api/rollouts');
+  }
+}
+

src/api/vulnerabilities.js

@@ -5,3 +5,4 @@ export default {
     return Api.get('api/vulnerabilities');
   }
 }
+

src/locales/en.json

@@ -30,6 +30,7 @@
     "extendedTables": "Extended Tables",
     "paginatedTables": "Paginated Tables",
     "widgets": "Widgets",
-    "charts": "Charts"
+    "charts": "Charts",
+    "rollouts": "Rollout Overview"
   }
 }

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-->

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>

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 },

src/store/actions.type.js

@@ -1 +1,2 @@
 export const FETCH_VULNERABILITIES = "fetchVulnerabilities";
+export const FETCH_ROLLOUTS = "fetchRollouts";

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
   }
 })

src/store/mutations.type.js

@@ -1,2 +1,3 @@
 export const SET_VULNERABILITIES = "setVulnerabilities";
+export const SET_ROLLOUTS = "setRollouts";
 export const RESET_STATE = "resetState";

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
+};