update remaining vue plugins and eslint

.eslintrc.js

@@ -6,38 +6,31 @@ module.exports = {
   plugins: [
     'vuetify'
   ],
-  'extends': [
+  extends: [
     'plugin:vue/essential',
-    '@vue/standard',
-    'standard'
+    '@vue/standard'
   ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
   rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    indent: 'off',
     'vuetify/no-deprecated-classes': 'error',
     'vuetify/grid-unknown-attributes': 'error',
     'vuetify/no-legacy-grid': 'error',
-    'indent': 'off',
-    'vue/script-indent': ['error', 2, {
-      'baseIndent': 1
-    }],
-    'no-console': 'off',
-    'no-debugger': 'off',
-    'import/no-webpack-loader-syntax': 'off',
-    'vue/attribute-hyphenation': [
-      'error',
-      'always'
-    ],
-    'vue/html-end-tags': 'error',
-    'vue/html-self-closing': 'error',
-    'vue/require-default-prop': 'error',
-    'vue/require-prop-types': 'error',
-    'vue/attributes-order': 'error',
-    'vue/html-quotes': [
-      'error',
-      'double'
-    ],
-    'vue/order-in-components': 'error'
+    'import/no-webpack-loader-syntax': 'off'
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
 }

package.json

@@ -1,15 +1,17 @@
 {
   "name": "elasticvue",
   "version": "0.32.0",
+  "description": "Elasticsearch frontend",
+  "author": "Carsten König <carstenkoenig92@gmail.com>",
   "scripts": {
     "serve": "npx --max_old_space_size=4096 vue-cli-service serve",
     "build": "rm -rf dist && vue-cli-service build --modern",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
     "build_browser_extensions": "./scripts/build_browser_extensions.sh",
     "prod": "node scripts/express-server.js",
-    "test:unit": "vue-cli-service test:unit",
-    "test:unit:watch": "vue-cli-service test:unit --watch",
-    "test:e2e": "vue-cli-service test:e2e"
+    "test:unit:watch": "vue-cli-service test:unit --watch"
   },
   "dependencies": {
     "@mdi/font": "^5.9.55",
@@ -26,27 +28,32 @@
     "vuex-persistedstate": "^3.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.11.0",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.9",
-    "@vue/cli-plugin-eslint": "^3.11.0",
-    "@vue/cli-plugin-unit-jest": "^3.11.0",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-e2e-cypress": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-plugin-unit-jest": "^4.5.12",
     "@vue/cli-service": "^4.5.12",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-standard": "^6.0.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.5.2",
-    "babel-loader": "^8.1.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.23.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vuetify": "^1.0.0-beta.8",
     "puppeteer": "^8.0.0",
     "sass": "^1.32.8",
     "sass-loader": "^10.1.1",
     "vue-template-compiler": "^2.6.12",
     "worker-loader": "^3.0.8"
   },
-  "description": "Elasticsearch frontend",
-  "author": "Carsten König <carstenkoenig92@gmail.com>",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/cars10/elasticvue.git"
-  },
-  "license": "MIT"
+  }
 }

src/components/App/TheHeader.vue

@@ -1,12 +1,12 @@
 <template>
   <v-app-bar :dense="dense" app>
-    <router-link class="mt-2" to="/" aria-label="Home">
+    <router-link aria-label="Home" class="mt-2" to="/">
       <img v-if="dark" :height="logoSize" :width="logoSize"
            alt="Logo" src="../../../public/images/logo/white_96.png">
       <img v-else :height="logoSize" :width="logoSize" alt="Logo" src="../../../public/images/logo/blue_96.png">
     </router-link>
     <v-toolbar-title class="ml-3 hidden-md-and-down">
-      <router-link to="/" aria-label="Home">
+      <router-link aria-label="Home" to="/">
         Elasticvue
       </router-link>
     </v-toolbar-title>
@@ -26,7 +26,7 @@
 
       <v-menu offset-y>
         <template v-slot:activator="{on}">
-          <v-btn id="navbar_snapshots" :class="navbarSnapshotClasses" text v-on="on">
+          <v-btn id="navbar_snapshots" v-on="on" :class="navbarSnapshotClasses" text>
             Snapshots
             <v-icon>mdi-menu-down</v-icon>
           </v-btn>
@@ -57,15 +57,13 @@
 </template>
 
 <script>
-  import Timer from '@/components/shared/Timer'
   import { computed, onBeforeUnmount, onMounted, ref } from '@vue/composition-api'
   import store from '@/store'
   import ElasticsearchInstanceSelection from '@/components/ElasticsearchInstance/ElasticsearchInstanceSelection'
 
   export default {
     name: 'app-header',
     components: {
-      Timer,
       ElasticsearchInstanceSelection
     },
     setup (props, context) {

src/components/ElasticsearchInstance/ElasticsearchInstanceSelection.vue

@@ -3,16 +3,17 @@
     <v-menu v-model="menuOpen" offset-y>
       <template v-slot:activator="{ on, attrs }">
         <v-btn v-if="activeInstance" id="instance_selection_toggle" v-bind="attrs"
-               :title="`Connected to '${activeInstance.name}' (${activeInstance.uri})`"
-               aria-label="Instance selection" class="text-none" v-on="on">
+               v-on="on"
+               :title="`Connected to '${activeInstance.name}' (${activeInstance.uri})`" aria-label="Instance selection"
+               class="text-none">
           <svg :title="`Cluster health: ${activeInstance.status}`" class="mr-2" height="14" width="14">
             <circle :class="`health--${activeInstance.status}`" cx="7" cy="9" r="5"/>
           </svg>
           <span class="text-truncate" style="max-width: 200px">{{ activeInstance.name }}</span>
           <v-icon v-if="menuOpen">mdi-menu-up</v-icon>
           <v-icon v-else>mdi-menu-down</v-icon>
         </v-btn>
-        <v-btn v-else v-bind="attrs" class="text-none" v-on="on">
+        <v-btn v-else v-bind="attrs" v-on="on" class="text-none">
           Chose instance
           <v-icon v-if="menuOpen">mdi-menu-up</v-icon>
           <v-icon v-else>mdi-menu-down</v-icon>
@@ -37,11 +38,11 @@
             </v-list-item-title>
           </v-list-item-content>
 
-          <rename-elasticsearch-instance :cluster-name="item.name" :cluster-uri="item.uri" :cluster-idx="index"/>
+          <rename-elasticsearch-instance :cluster-idx="index" :cluster-name="item.name" :cluster-uri="item.uri"/>
 
           <v-list-item-action :id="`remove-instance-${index}`"
-                              title="Delete cluster"
                               class="ml-1"
+                              title="Delete cluster"
                               @click.stop="removeInstance(index)">
             <v-btn icon small>
               <v-icon small>mdi-delete</v-icon>

src/components/ElasticsearchInstance/NewElasticsearchInstance.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-dialog v-model="dialog" width="800" class="theme--dark">
+  <v-dialog v-model="dialog" class="theme--dark" width="800">
     <template v-slot:activator="{ on, attrs }">
-      <v-list-item id="add_new_instance" v-bind="attrs" ripple aria-label="Add elasticsearch instance" v-on="on">
+      <v-list-item id="add_new_instance" v-bind="attrs" v-on="on" aria-label="Add elasticsearch instance" ripple>
         <v-list-item-action>
           <v-icon>mdi-plus</v-icon>
         </v-list-item-action>
@@ -25,7 +25,7 @@
       <v-card-text v-if="enableCorsHint">
         <h2 class="text-h6 my-4">1. Configure</h2>
         <configure v-if="configureHintVisible"/>
-        <v-btn text small class="pl-1" @click="configureHintVisible = !configureHintVisible">
+        <v-btn class="pl-1" small text @click="configureHintVisible = !configureHintVisible">
           <v-icon>{{ configureHintVisible ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           Show help
         </v-btn>
@@ -51,13 +51,13 @@
                         @click:append="elasticsearchHost.name = ''"/>
 
           <v-row>
-            <v-col md="6" cols="12">
+            <v-col cols="12" md="6">
               <v-text-field v-model="elasticsearchHost.username"
                             label="Username"
                             title="Username"
                             type="text"/>
             </v-col>
-            <v-col md="6" cols="12">
+            <v-col cols="12" md="6">
               <v-text-field v-model="elasticsearchHost.password"
                             :append-icon="passwordVisible ? 'mdi-eye' : 'mdi-eye-off'"
                             :type="passwordVisible ? 'text' : 'password'"

src/components/ElasticsearchInstance/RenameElasticsearchInstance.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="dialog" width="800">
     <template v-slot:activator="{ on, attrs }">
-      <v-list-item-action v-bind="attrs" title="Rename cluster" ripple v-on="on">
+      <v-list-item-action v-bind="attrs" v-on="on" ripple title="Rename cluster">
         <v-btn icon small>
           <v-icon small>mdi-pencil-outline</v-icon>
         </v-btn>
@@ -37,7 +37,7 @@
         </v-card-text>
 
         <v-card-actions class="pa-4">
-          <v-btn :disabled="!valid" class="mr-2" type="submit" color="success">Rename</v-btn>
+          <v-btn :disabled="!valid" class="mr-2" color="success" type="submit">Rename</v-btn>
           <v-btn text @click="closeDialog">Cancel</v-btn>
         </v-card-actions>
       </v-form>

src/components/Indices/IndexAliases.vue

@@ -29,8 +29,8 @@
             <v-col class="flex-grow-1">
               <v-text-field id="new_index_alias_name"
                             v-model="newAlias"
-                            hide-details
                             autocomplete="off"
+                            hide-details
                             label="Add alias"/>
             </v-col>
             <v-col class="flex-grow-0">

src/components/Indices/IndexRow.vue

@@ -37,7 +37,7 @@
 
         <v-menu left offset-y>
           <template v-slot:activator="{on}">
-            <v-btn title="Options" v-on="on">
+            <v-btn v-on="on" title="Options">
               <v-icon>mdi-cog</v-icon>
               <v-icon small>mdi-menu-down</v-icon>
             </v-btn>

src/components/Indices/IndicesTable.vue

@@ -84,7 +84,7 @@
       const { filterTable } = useAsyncFilter()
 
       const fuzzyTableFilter = async (items, filter) => {
-        let result = await filterTable(items, filter, HEADERS)
+        const result = await filterTable(items, filter, HEADERS)
         filteredIndices.value = result.map(index => new ElasticsearchIndex(index))
       }
       const debouncedFuzzyTableFilter = debounce(fuzzyTableFilter, 500)

src/components/Indices/NewIndex.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="dialog" width="500">
     <template v-slot:activator="{on}">
-      <v-btn id="new_index" class="ml-0" color="primary-button" v-on="on">New index</v-btn>
+      <v-btn id="new_index" v-on="on" class="ml-0" color="primary-button">New index</v-btn>
     </template>
 
     <v-card>
@@ -21,29 +21,29 @@
                         id="index_name"
                         v-model="indexName"
                         :rules="[nameValidation]"
+                        autocomplete="off"
                         autofocus
                         label="Index name"
                         name="indexName"
                         required
-                        autocomplete="off"
                         @keyup.esc="closeDialog"/>
 
           <v-text-field id="index_shards"
                         v-model="indexShards"
+                        autocomplete="off"
                         label="Number of shards"
                         name="indexShards"
                         placeholder="1"
                         type="number"
-                        autocomplete="off"
                         @keyup.esc="closeDialog"/>
 
           <v-text-field id="index_replicas"
                         v-model="indexReplicas"
+                        autocomplete="off"
                         label="Number of replicas"
                         name="indexReplicas"
                         placeholder="1"
                         type="number"
-                        autocomplete="off"
                         @keyup.esc="closeDialog"/>
         </v-card-text>
 

src/components/Nodes/NodePercentBar.vue

@@ -23,7 +23,7 @@
     },
     setup (props) {
       const color = computed(() => {
-        let numberValue = parseFloat(props.value)
+        const numberValue = parseFloat(props.value)
         if (numberValue >= 90) {
           return 'red'
         } else if (numberValue < 90 && numberValue >= 80) {

src/components/Nodes/NodesGrid.vue

@@ -33,7 +33,7 @@
                      :options.sync="pagination">
       <template v-slot:default="props">
         <v-row>
-          <v-col v-for="item in props.items" slot="item" :key="item.name" cols="12" lg="4" md="6" sm="12">
+          <v-col v-for="item in props.items" :key="item.name" slot="item" cols="12" lg="4" md="6" sm="12">
             <v-card>
               <v-card-title>
                 <div class="row">

src/components/Query/Rest.vue

@@ -132,7 +132,7 @@
         }
 
         if (instance.username.length > 0) {
-          fetchOptions.headers['Authorization'] = buildFetchAuthHeader(instance.username, instance.password)
+          fetchOptions.headers.Authorization = buildFetchAuthHeader(instance.username, instance.password)
         }
 
         if (canSendBody.value) {

src/components/Repositories/NewRepository.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="dialog" width="500">
     <template v-slot:activator="{on}">
-      <v-btn id="new_snapshot_repository" class="ml-0" color="primary-button" v-on="on">New repository</v-btn>
+      <v-btn id="new_snapshot_repository" v-on="on" class="ml-0" color="primary-button">New repository</v-btn>
     </template>
 
     <v-card>

src/components/Search/ResultsTable.vue

@@ -147,7 +147,7 @@
               const mappings = indices[index].mappings
               if (typeof mappings.properties === 'undefined') {
                 // ES < 7
-                let indexProperties = {}
+                const indexProperties = {}
                 Object.keys(mappings).forEach(mapping => {
                   Object.assign(indexProperties, mappings[mapping].properties)
                 })
@@ -159,7 +159,7 @@
             })
 
             headers.value = filteredColumns.value.map(value => {
-              let filterableCol = sortableField(value, allProperties[value])
+              const filterableCol = sortableField(value, allProperties[value])
               let text
 
               if (filterableCol) {
@@ -178,7 +178,7 @@
       })
 
       const fuzzyTableFilter = async (items, filter, skipTimeout) => {
-        let filteredResults = await filterTable(items, filter, filteredColumns.value, skipTimeout)
+        const filteredResults = await filterTable(items, filter, filteredColumns.value, skipTimeout)
         filteredItems.value = filteredResults.map(el => Object.assign(el, el._source) && delete el._source && el)
       }