closes #53: Update vulnerable npm dependencies (#54)

* fix(frontend): bump versions of vulnerable npm dependencies

* chore: bump Vue plugins from 3.1.x to 4.5.x

* fixing frontend docker build

Co-authored-by: gbolo <george.bolo@gmail.com>

Dockerfile

@@ -4,17 +4,18 @@
 #  BUILD CONTAINER -------------------------------------------------------------
 #
 
-FROM gbolo/builder:alpine as builder
+FROM golang:1.14-alpine as builder
 
-COPY . ${GOPATH}/src/github.com/gbolo/aws-power-toggle
+WORKDIR /go/src/app
+COPY . .
 
 # Building
 RUN   set -xe; \
-      SRC_DIR=${GOPATH}/src/github.com/gbolo/aws-power-toggle; \
-      cd ${SRC_DIR}; \
-      mkdir -p /tmp/build && npm -v; \
+      mkdir -p /tmp/build && \
+      apk add --no-cache git nodejs nodejs-npm make && \
+      npm -v && node --version && \
       make all && \
-      cp -rp frontend/dist /tmp/build/frontend; \
+      cp -rp frontend/dist /tmp/build/frontend && \
       cp -rp testdata/sampleconfig/power-toggle-config.yaml bin/aws-power-toggle /tmp/build/
 
 

Makefile

@@ -36,7 +36,7 @@ $(BIN)/golint: REPOSITORY=golang.org/x/lint/golint
 # Targets for our app --------------------------------------------------------------------------------------------------
 
 .PHONY: all
-all: $(BIN) frontend backend;                                 @ ## Build both backend and frontend
+all: $(BIN) backend frontend;                                 @ ## Build both backend and frontend
 
 .PHONY: backend
 backend: ; $(info $(M) building backend executable...)        @ ## Build backend binary

frontend/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-nested-ternary': 'off',
   },
   parserOptions: {
     parser: 'babel-eslint',

frontend/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
   ],
 };

frontend/package.json

@@ -5,13 +5,14 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@clr/icons": "^0.13.10",
     "@webcomponents/custom-elements": "^1.0.0",
-    "axios": "^0.18.0",
+    "axios": "^0.18.1",
+    "core-js": "^3.6.5",
     "i": "^0.3.6",
     "register-service-worker": "^1.0.0",
     "v-tooltip": "^2.0.0-rc.33",
@@ -21,19 +22,20 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.5",
-    "@vue/cli-plugin-pwa": "^3.1.2",
-    "@vue/cli-plugin-unit-jest": "^3.1.1",
-    "@vue/cli-service": "^3.1.4",
-    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/cli-plugin-babel": "^4.5.3",
+    "@vue/cli-plugin-eslint": "^4.5.3",
+    "@vue/cli-plugin-pwa": "^4.5.3",
+    "@vue/cli-plugin-unit-jest": "^4.5.3",
+    "@vue/cli-service": "^4.5.3",
+    "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^23.6.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "node-sass": "^4.9.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.14.1",
     "sass-loader": "^7.0.1",
     "vue-template-compiler": "^2.5.17"
   }

frontend/src/App.vue

@@ -3,7 +3,11 @@
     <div class="appbody">
       <Header v-bind:version="version"/>
       <button class="refresh-btn" @click="refresh">
-        <clr-icon v-bind:class="[shouldSpinIcon ? 'spin-icon' : '']" shape="sync" size="16"></clr-icon>
+        <clr-icon
+          v-bind:class="[shouldSpinIcon ? 'spin-icon' : '']"
+          shape="sync"
+          size="16">
+        </clr-icon>
       </button>
       <EnvironmentList v-bind:environments="environments"/>
       <Snackbar v-bind:message="error"/>

frontend/src/components/EnvironmentList.vue

@@ -44,10 +44,10 @@ export default {
   },
   computed: {
     enabledFilters() {
-      return this.itemFilters.filter(f => f.selected);
+      return this.itemFilters.filter((f) => f.selected);
     },
     filteredEnvs() {
-      return this.environments.filter(env => this.enabledFilters.some((f) => {
+      return this.environments.filter((env) => this.enabledFilters.some((f) => {
         if (typeof f.value === 'string') {
           return (env[f.field] || '').toLowerCase() === f.value.toLowerCase();
         }

frontend/src/main.js

@@ -8,5 +8,5 @@ Vue.config.productionTip = false;
 
 new Vue({
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app');

frontend/src/services/api/Environments.js

@@ -2,23 +2,23 @@ import http from './HTTP';
 
 export default {
   fetchAllEnvironmentsDetails() {
-    return http.get('/env/details').then(response => response.data);
+    return http.get('/env/details').then((response) => response.data);
   },
   fetchAllEnvironmentsSummary() {
-    return http.get('/env/summary').then(response => response.data);
+    return http.get('/env/summary').then((response) => response.data);
   },
 
   fetchEnvironmentDetails(id) {
-    return http.get(`/env/${id}/details`).then(response => response.data);
+    return http.get(`/env/${id}/details`).then((response) => response.data);
   },
   fetchEnvironmentSummary(id) {
-    return http.get(`/env/${id}/summary`).then(response => response.data);
+    return http.get(`/env/${id}/summary`).then((response) => response.data);
   },
 
   startEnvironment(id) {
-    return http.post(`/env/${id}/start`).then(response => response.data);
+    return http.post(`/env/${id}/start`).then((response) => response.data);
   },
   stopEnvironment(id) {
-    return http.post(`/env/${id}/stop`).then(response => response.data);
+    return http.post(`/env/${id}/stop`).then((response) => response.data);
   },
 };

frontend/src/services/api/Instances.js

@@ -2,9 +2,9 @@ import http from './HTTP';
 
 export default {
   startInstance(id) {
-    return http.post(`/instance/${id}/start`).then(response => response.data);
+    return http.post(`/instance/${id}/start`).then((response) => response.data);
   },
   stopInstance(id) {
-    return http.post(`/instance/${id}/stop`).then(response => response.data);
+    return http.post(`/instance/${id}/stop`).then((response) => response.data);
   },
 };

frontend/src/services/api/Metadata.js

@@ -2,12 +2,12 @@ import http from './HTTP';
 
 export default {
   getVersion() {
-    return http.get('/version').then(response => response.data);
+    return http.get('/version').then((response) => response.data);
   },
   getConfig() {
-    return http.get('/config').then(response => response.data);
+    return http.get('/config').then((response) => response.data);
   },
   refresh() {
-    return http.post('/refresh').then(response => response.data);
+    return http.post('/refresh').then((response) => response.data);
   },
 };

frontend/src/store/actions.js

@@ -12,35 +12,35 @@ const errMsg = (e) => {
 
 export const fetchVersion = ({ commit }) => {
   MetadataApi.getVersion()
-    .then(data => commit('setVersion', data.version))
-    .catch(e => commit('setError', errMsg(e)));
+    .then((data) => commit('setVersion', data.version))
+    .catch((e) => commit('setError', errMsg(e)));
 };
 
 export const fetchAllEnvironmentsSummary = ({ commit }) => {
   EnvironmentsApi.fetchAllEnvironmentsSummary()
-    .then(data => commit('setEnvironments', data))
-    .catch(e => commit('setError', errMsg(e)));
+    .then((data) => commit('setEnvironments', data))
+    .catch((e) => commit('setError', errMsg(e)));
 };
 
 export const fetchAllEnvironmentsDetails = ({ commit }) => {
   commit('setIsLoading', true);
   EnvironmentsApi.fetchAllEnvironmentsDetails()
-    .then(data => commit('setEnvironments', data))
-    .catch(e => commit('setError', errMsg(e)))
+    .then((data) => commit('setEnvironments', data))
+    .catch((e) => commit('setError', errMsg(e)))
     .finally(() => commit('setIsLoading', false));
 };
 
 export const refresh = ({ commit }) => {
   EnvironmentsApi.fetchAllEnvironmentsDetails()
-    .then(data => commit('setEnvironments', data))
-    .catch(e => commit('setError', e.response.data.error));
+    .then((data) => commit('setEnvironments', data))
+    .catch((e) => commit('setError', e.response.data.error));
 };
 
 export const fetchEnvironmentDetails = ({ commit }, id) => {
   commit('setEnvironmentLoading', { id, flag: true });
   EnvironmentsApi.fetchEnvironmentDetails(id)
-    .then(data => commit('setEnvironment', { id, data }))
-    .catch(e => commit('setError', errMsg(e)))
+    .then((data) => commit('setEnvironment', { id, data }))
+    .catch((e) => commit('setError', errMsg(e)))
     .finally(() => commit('setEnvironmentLoading', { id, flag: false }));
 };
 

frontend/src/store/getters.js

@@ -1,16 +1,16 @@
-export const isAppLoading = state => state.isLoading;
-export const isEnvironmentLoading = state => id => state.environmentsLoading[id] === true;
-export const isInstanceLoading = state => id => state.instancesLoading[id] === true;
+export const isAppLoading = (state) => state.isLoading;
+export const isEnvironmentLoading = (state) => (id) => state.environmentsLoading[id] === true;
+export const isInstanceLoading = (state) => (id) => state.instancesLoading[id] === true;
 
 const isEnvironmentStateStatus = (vState, envId, status) => {
-  const env = vState.environments.find(x => x.id === envId);
+  const env = vState.environments.find((x) => x.id === envId);
   if (!env) {
     return false;
   }
   return env.state === status;
 };
 
-export const isEnvironmentStateRunning = vState => id => isEnvironmentStateStatus(vState, id, 'running');
-export const isEnvironmentStateStopped = vState => id => isEnvironmentStateStatus(vState, id, 'stopped');
-export const isEnvironmentStateMixed = vState => id => isEnvironmentStateStatus(vState, id, 'mixed');
-export const isEnvironmentStateChanging = vState => id => isEnvironmentStateStatus(vState, id, 'changing');
+export const isEnvironmentStateRunning = (vState) => (id) => isEnvironmentStateStatus(vState, id, 'running');
+export const isEnvironmentStateStopped = (vState) => (id) => isEnvironmentStateStatus(vState, id, 'stopped');
+export const isEnvironmentStateMixed = (vState) => (id) => isEnvironmentStateStatus(vState, id, 'mixed');
+export const isEnvironmentStateChanging = (vState) => (id) => isEnvironmentStateStatus(vState, id, 'changing');

frontend/src/store/index.js

@@ -9,7 +9,6 @@ import * as getters from './getters';
 Vue.use(VTooltip);
 Vue.use(Vuex);
 
-
 const store = new Vuex.Store({
   state: {
     environments: [],

frontend/src/store/mutations.js

@@ -7,7 +7,7 @@ export const setEnvironments = (state, data) => {
 };
 
 export const setEnvironment = (state, { id, data }) => {
-  state.environments = state.environments.map(env => (env.id === id ? data : env));
+  state.environments = state.environments.map((env) => (env.id === id ? data : env));
 };
 
 export const setEnvironmentLoading = (state, { id, flag }) => {
@@ -31,15 +31,15 @@ export const setInstanceStateStatus = (state, { id, status, envId }) => {
     }
 
     const newInstances = env.instances.map(
-      instance => (instance.id !== id
+      (instance) => (instance.id !== id
         ? instance
         : {
           ...instance,
           state: status,
         }),
     );
 
-    const numInstancesRunning = newInstances.filter(x => x.state === 'running').length;
+    const numInstancesRunning = newInstances.filter((x) => x.state === 'running').length;
     const newState = numInstancesRunning === env.total_instances
       ? 'running'
       : numInstancesRunning === 0