From 3b3785eabe6a911710d1cefa371d3afd429eb196 Mon Sep 17 00:00:00 2001
From: Daniel Lando <daniel.sorridi@gmail.com>
Date: Thu, 18 Mar 2021 08:24:38 +0100
Subject: [PATCH] feat(ui): improved control panel (#900)

* style(ui): refactor control panel actions

* feat(ui): advanced dialog

* fix: devices db link

* fix: add confirm text to some actions

* fix: lint issues

* fix: remove some broadcast actions and make hard reset harder

* fix: restore hard reset

* fix: add some more info in confirm dialogs

* fix: typo

* fix: some nits in confirm texts

* fix: some other nits in confirm texts
---
 lib/ZwaveClient.js                         |   4 +-
 src/App.vue                                |  59 +++-
 src/components/ControlPanel.vue            | 321 ++++++++++-----------
 src/components/dialogs/DialogAdvanced.vue  |  71 +++++
 src/components/nodes-table/NodeDetails.vue | 248 ++++++++++------
 src/components/nodes-table/index.vue       |  29 --
 src/components/nodes-table/nodes-table.js  |   3 -
 7 files changed, 431 insertions(+), 304 deletions(-)
 create mode 100644 src/components/dialogs/DialogAdvanced.vue

diff --git a/lib/ZwaveClient.js b/lib/ZwaveClient.js
index 54c15bdd7f5..d707bfc18cc 100644
--- a/lib/ZwaveClient.js
+++ b/lib/ZwaveClient.js
@@ -875,7 +875,9 @@ function initNode (zwaveNode) {
     utils.num2hex(zwaveNode.productType)
   ]
   node.hexId = `${hexIds[0]}-${hexIds[2]}-${hexIds[1]}`
-  node.dbLink = `https://devices.zwave-js.io/?jumpTo=${hexIds[0]}:${hexIds[2]}:${hexIds[1]}:${node.firmwareVersion}`
+  node.dbLink = `https://devices.zwave-js.io/?jumpTo=${hexIds[0]}:${
+    hexIds[2]
+  }:${hexIds[1]}:${node.firmwareVersion || '0.0'}`
 
   const deviceConfig = zwaveNode.deviceConfig || {
     label: `Unknown product ${hexIds[1]}`,
diff --git a/src/App.vue b/src/App.vue
index 72a01c164aa..721f41fd12f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,17 +48,52 @@
 
       <v-app-bar app>
         <v-app-bar-nav-icon @click.stop="toggleDrawer" />
-        <v-toolbar-title>{{ title }}</v-toolbar-title>
+        <v-toolbar-title v-if="$vuetify.breakpoint.smAndUp">{{
+          title
+        }}</v-toolbar-title>
 
         <v-spacer></v-spacer>
 
+        <div class="controller-status">{{ appInfo.controllerStatus }}</div>
+
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on }">
+            <v-icon
+              dark
+              medium
+              style="cursor:default;margin:0 1rem"
+              color="primary"
+              v-on="on"
+              >info</v-icon
+            >
+          </template>
+          <div class="info-box">
+            <div>
+              <small>zwavejs2mqtt</small>
+              <strong>{{ appInfo.appVersion }}</strong>
+            </div>
+            <div>
+              <small>zwave-js</small>
+              <strong>{{ appInfo.zwaveVersion }}</strong>
+            </div>
+            <div>
+              <small>Home ID</small>
+              <strong>{{ appInfo.homeid }}</strong>
+            </div>
+            <div>
+              <small>Home Hex</small>
+              <strong>{{ appInfo.homeHex }}</strong>
+            </div>
+          </div>
+        </v-tooltip>
+
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
             <v-icon
               dark
               medium
               style="cursor:default;"
-              :color="statusColor || 'primary'"
+              :color="statusColor || 'orange'"
               v-on="on"
               >swap_horizontal_circle</v-icon
             >
@@ -166,6 +201,22 @@
 </template>
 
 <style>
+.controller-status {
+  color: #555;
+  background: #e0e0e0;
+  border-radius: 4px;
+  padding: 0.3rem 0;
+  font-size: 0.8rem;
+  min-width: 220px;
+  text-align: center;
+}
+.info-box > div {
+  display: flex;
+  justify-content: space-between;
+}
+.info-box > div > strong {
+  padding-left: 1.2rem;
+}
 /* Fix Vuetify code style after update to 2.4.0 */
 code {
   color: #c62828 !important;
@@ -193,7 +244,7 @@ export default {
   },
   name: 'app',
   computed: {
-    ...mapGetters(['user', 'auth'])
+    ...mapGetters(['user', 'auth', 'appInfo'])
   },
   watch: {
     $route: function (value) {
@@ -289,7 +340,7 @@ export default {
         alert: 'red'
       }
 
-      options.color = levelMap[level] || 'primary'
+      options.color = options.color || levelMap[level] || 'primary'
 
       return this.$refs.confirm.open(title, text, options)
     },
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 8402d3e58eb..4fed3828013 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -3,35 +3,6 @@
     <v-card>
       <v-card-text>
         <v-container fluid>
-          <v-row justify="start">
-            <v-col class="text-center" cols="12" sm="3" md="2">
-              <div class="h6">Home ID</div>
-              <div class="body-1 font-weight-bold">{{ appInfo.homeid }}</div>
-            </v-col>
-            <v-col class="text-center" cols="12" sm="3" md="2">
-              <div class="h6">Home Hex</div>
-              <div class="body-1 font-weight-bold">{{ appInfo.homeHex }}</div>
-            </v-col>
-            <v-col class="text-center" cols="12" sm="3" md="2">
-              <div class="h6">App Version</div>
-              <div class="body-1 font-weight-bold">
-                {{ appInfo.appVersion }}
-              </div>
-            </v-col>
-            <v-col class="text-center" cols="12" sm="3" md="2">
-              <div class="h6">Zwavejs Version</div>
-              <div class="body-1 font-weight-bold">
-                {{ appInfo.zwaveVersion }}
-              </div>
-            </v-col>
-            <v-col class="text-center" cols="12" sm="3" md="2">
-              <div class="h6">Zwavejs-server Version</div>
-              <div class="body-1 font-weight-bold">
-                {{ appInfo.serverVersion }}
-              </div>
-            </v-col>
-          </v-row>
-
           <v-row justify="start">
             <v-col cols="12" sm="4" md="3" style="text-align:center">
               <v-btn
@@ -42,22 +13,15 @@
                 Add/Remove Device
               </v-btn>
             </v-col>
-            <v-col cols="12" sm="6" md="3">
-              <v-text-field
-                label="Controller status"
-                readonly
-                v-model="appInfo.controllerStatus"
-              ></v-text-field>
-            </v-col>
-
-            <v-col cols="12" sm="6" md="3">
-              <v-select
-                label="Actions"
-                append-outer-icon="send"
-                v-model="cnt_action"
-                :items="cnt_actions.concat(node_actions)"
-                @click:append-outer="sendCntAction"
-              ></v-select>
+            <v-col cols="12" sm="4" md="3" style="text-align:center">
+              <v-btn
+                dark
+                color="green"
+                depressed
+                @click="advancedShowDialog = true"
+              >
+                Advanced
+              </v-btn>
             </v-col>
           </v-row>
         </v-container>
@@ -69,13 +33,14 @@
           @apiRequest="apiRequest"
         />
 
-        <nodes-table
-          :node-actions="node_actions"
-          :socket="socket"
-          v-on="$listeners"
-          @exportNodes="exportConfiguration"
-          @importNodes="importConfiguration"
+        <DialogAdvanced
+          v-model="advancedShowDialog"
+          @close="advancedShowDialog = false"
+          :actions="actions"
+          @action="onAction"
         />
+
+        <nodes-table :socket="socket" v-on="$listeners" @action="sendAction" />
       </v-card-text>
     </v-card>
   </v-container>
@@ -86,6 +51,7 @@ import ConfigApis from '@/apis/ConfigApis'
 import { mapGetters, mapMutations } from 'vuex'
 
 import DialogAddRemove from '@/components/dialogs/DialogAddRemove'
+import DialogAdvanced from '@/components/dialogs/DialogAdvanced'
 import NodesTable from '@/components/nodes-table'
 import { Settings } from '@/modules/Settings'
 import { socketEvents } from '@/plugins/socket'
@@ -97,15 +63,13 @@ export default {
   },
   components: {
     NodesTable,
-    DialogAddRemove
+    DialogAddRemove,
+    DialogAdvanced
   },
   computed: {
-    ...mapGetters(['nodes', 'appInfo', 'zwave']),
+    ...mapGetters(['nodes', 'zwave']),
     timeoutMs () {
       return this.zwave.commandsTimeout * 1000 + 800 // add small buffer
-    },
-    controllerStatus () {
-      return this.appInfo.controllerStatus
     }
   },
   watch: {},
@@ -115,61 +79,72 @@ export default {
       bindedSocketEvents: {}, // keep track of the events-handlers
       addRemoveShowDialog: false,
       addRemoveNode: null,
-      node_actions: [
+      advancedShowDialog: false,
+      actions: [
         {
-          text: 'Heal node',
-          value: 'healNode'
+          text: 'Backup',
+          options: [
+            { name: 'Import', action: 'import' },
+            { name: 'Export', action: 'export' }
+          ],
+          icon: 'save',
+          desc: 'Save or load `nodes.json` file with names and locations'
         },
         {
-          text: 'Re-interview Node',
-          value: 'refreshInfo'
+          text: 'Dump',
+          options: [{ name: 'Export', action: 'exportDump' }],
+          icon: 'bug_report',
+          desc: 'Export all nodes in a json file. Useful for debugging purposes'
         },
-        {
-          text: 'Refresh values',
-          value: 'refreshValues'
-        },
-        {
-          text: 'Is Failed Node',
-          value: 'isFailedNode'
-        },
-        {
-          text: 'Remove failed node',
-          value: 'removeFailedNode'
-        },
-        {
-          text: 'Replace failed node',
-          value: 'replaceFailedNode'
-        },
-        {
-          text: 'Begin Firmware update',
-          value: 'beginFirmwareUpdate'
-        },
-        {
-          text: 'Abort Firmware update',
-          value: 'abortFirmwareUpdate'
-        },
-        {
-          text: 'Remove all associations',
-          value: 'removeAllAssociations'
-        },
-        {
-          text: 'Remove node from all associations',
-          value: 'removeNodeFromAllAssociations'
-        }
-      ],
-      cnt_action: 'healNetwork',
-      cnt_actions: [
         {
           text: 'Heal Network',
-          value: 'beginHealingNetwork'
+          options: [
+            {
+              name: 'Begin',
+              action: 'beginHealingNetwork',
+              args: {
+                confirm:
+                  'Healing network causes a lot of traffic, can take minutes up to hours and users have to expect degraded performance while it is going on'
+              }
+            },
+            { name: 'Stop', action: 'stopHealingNetwork' }
+          ],
+          icon: 'healing',
+          desc: 'Force nodes to establish better connections to the controller'
         },
         {
-          text: 'Stop Heal Network',
-          value: 'stopHealingNetwork'
+          text: 'Hard Reset',
+          options: [
+            {
+              name: 'Factory Reset',
+              action: 'hardReset'
+            }
+          ],
+          icon: 'warning',
+          color: 'red',
+          desc:
+            'Reset controller to factory defaults (all paired devices will be removed)'
         },
         {
-          text: 'Hard reset',
-          value: 'hardReset'
+          text: 'Failed Nodes',
+          options: [
+            {
+              name: 'Check all',
+              action: 'isFailedNode',
+              args: { broadcast: true }
+            },
+            {
+              name: 'Remove all',
+              action: 'removeFailedNode',
+              args: {
+                broadcast: true,
+                confirm: 'This action will remove all failed nodes'
+              }
+            }
+          ],
+          icon: 'dangerous',
+          desc:
+            'Manage nodes that are dead and/or marked as failed with the controller'
         }
       ],
       rules: {
@@ -186,6 +161,21 @@ export default {
   },
   methods: {
     ...mapMutations(['showSnackbar']),
+    onAddRemoveClose () {
+      this.addRemoveShowDialog = false
+      this.addRemoveNode = null
+    },
+    async onAction (action, args = {}) {
+      if (action === 'import') {
+        this.importConfiguration()
+      } else if (action === 'export') {
+        this.exportConfiguration()
+      } else if (action === 'exportDump') {
+        this.exportDump()
+      } else {
+        this.sendAction(action, args)
+      }
+    },
     async importConfiguration () {
       if (
         await this.$listeners.showConfirm(
@@ -216,54 +206,29 @@ export default {
           console.log(error)
         })
     },
-    onAddRemoveClose () {
-      this.addRemoveShowDialog = false
-      this.addRemoveNode = null
+    exportDump () {
+      this.$listeners.export(this.nodes, 'nodes_dump', 'json')
     },
-    async sendCntAction () {
-      if (this.cnt_action) {
-        const args = []
-        let broadcast = false
-        const askId = this.node_actions.find(a => a.value === this.cnt_action)
-        if (askId) {
-          // don't send replaceFailed as broadcast
-          if (
-            this.cnt_action !== 'replaceFailedNode' &&
-            this.cnt_action !== 'beginFirmwareUpdate'
-          ) {
-            broadcast = await this.$listeners.showConfirm(
-              'Broadcast',
-              'Send this command to all nodes?',
-              'info',
-              {
-                cancelText: 'No'
-              }
-            )
-          }
+    async sendAction (action, { nodeId, broadcast, confirm }) {
+      if (action) {
+        if (confirm) {
+          const ok = await this.$listeners.showConfirm(
+            'Info',
+            confirm,
+            'info',
+            {
+              cancelText: 'cancel',
+              confirmText: 'ok'
+            }
+          )
 
+          if (!ok) {
+            return
+          }
+        }
+        const args = []
+        if (nodeId !== undefined) {
           if (!broadcast) {
-            const { nodeId } = await this.$listeners.showConfirm(
-              'Choose a node',
-              '',
-              'info',
-              {
-                confirmText: 'Ok',
-                inputs: [
-                  {
-                    type: 'list',
-                    allowManualEntry: true,
-                    items: this.nodes,
-                    label: 'Node',
-                    hint: 'Select a node',
-                    required: true,
-                    key: 'nodeId',
-                    itemText: '_name',
-                    itemValue: 'id'
-                  }
-                ]
-              }
-            )
-
             if (isNaN(nodeId)) {
               this.showSnackbar('Node ID must be an integer value')
               return
@@ -272,10 +237,7 @@ export default {
           }
         }
 
-        if (
-          this.cnt_action === 'startInclusion' ||
-          this.cnt_action === 'replaceFailedNode'
-        ) {
+        if (action === 'startInclusion' || action === 'replaceFailedNode') {
           const secure = await this.$listeners.showConfirm(
             'Node inclusion',
             'Start inclusion in secure mode?',
@@ -285,38 +247,53 @@ export default {
             }
           )
           args.push(secure)
-        } else if (this.cnt_action === 'hardReset') {
-          const ok = await this.$listeners.showConfirm(
+        } else if (action === 'hardReset') {
+          const { confirm } = await this.$listeners.showConfirm(
             'Hard Reset',
             'Your controller will be reset to factory and all paired devices will be removed',
-            { color: 'red' }
-          )
-          if (!ok) {
-            return
-          }
-        } else if (this.cnt_action === 'beginFirmwareUpdate') {
-          const { target } = await this.$listeners.showConfirm(
-            'Choose target',
-            '',
-            'info',
+            'alert',
             {
               confirmText: 'Ok',
               inputs: [
                 {
-                  type: 'number',
-                  label: 'Target',
-                  default: 0,
-                  rules: [v => v >= 0 || 'Invalid target'],
-                  hint:
-                    'The firmware target (i.e. chip) to upgrade. 0 updates the Z-Wave chip, >=1 updates others if they exist',
+                  type: 'text',
+                  label: 'Confirm',
                   required: true,
-                  key: 'target'
+                  key: 'confirm',
+                  hint: 'Type "yes" and press OK to confirm'
                 }
               ]
             }
           )
-
+          console.log(confirm)
+          if (!confirm || confirm !== 'yes') {
+            return
+          }
+        } else if (action === 'beginFirmwareUpdate') {
           try {
+            const { target } = await this.$listeners.showConfirm(
+              'Choose target',
+              '',
+              'info',
+              {
+                confirmText: 'Ok',
+                inputs: [
+                  {
+                    type: 'number',
+                    label: 'Target',
+                    default: 0,
+                    rules: [v => v >= 0 || 'Invalid target'],
+                    hint:
+                      'The firmware target (i.e. chip) to upgrade. 0 updates the Z-Wave chip, >=1 updates others if they exist',
+                    required: true,
+                    key: 'target'
+                  }
+                ]
+              }
+            )
+
+            if (target === undefined) throw Error('Must specify a target')
+
             const { data, file } = await this.$listeners.import('buffer')
             args.push(file.name)
             args.push(data)
@@ -329,10 +306,10 @@ export default {
         if (broadcast) {
           for (let i = 0; i < this.nodes.length; i++) {
             const nodeid = this.nodes[i].id
-            this.apiRequest(this.cnt_action, [nodeid])
+            this.apiRequest(action, [nodeid])
           }
         } else {
-          this.apiRequest(this.cnt_action, args)
+          this.apiRequest(action, args)
         }
       }
     },
diff --git a/src/components/dialogs/DialogAdvanced.vue b/src/components/dialogs/DialogAdvanced.vue
new file mode 100644
index 00000000000..e63ead9c8b1
--- /dev/null
+++ b/src/components/dialogs/DialogAdvanced.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-dialog v-model="value" persistent max-width="800">
+    <v-card>
+      <v-card-title>
+        <span class="headline">Advanced</span>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="$emit('close')"><v-icon>close</v-icon></v-btn>
+      </v-card-title>
+
+      <v-card-text>
+        <div :class="['action-grid', $vuetify.breakpoint.name]">
+          <div v-for="(a, i) in actions" :key="i">
+            <v-icon :color="a.color || 'primary'" x-large>{{ a.icon }}</v-icon>
+            <div style="font-size:1.1rem">{{ a.text }}</div>
+            <div class="action-desc">{{ a.desc }}</div>
+            <v-btn
+              v-for="(o, i) in a.options"
+              :key="i"
+              @click="$emit('action', o.action, o.args)"
+              text
+              :color="a.color || 'primary'"
+              >{{ o.name }}</v-btn
+            >
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean, // show or hide
+    actions: Array
+  },
+  data () {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 1.4rem;
+  row-gap: 1.2rem;
+  justify-items: center;
+  align-items: center;
+}
+.action-grid.xs {
+  grid-template-columns: repeat(1, 1fr);
+}
+.action-grid.sm {
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 1rem;
+}
+.action-grid > div {
+  text-align: center;
+  max-width: 215px;
+}
+.action-desc {
+  font-size: 0.7rem;
+  color: #999;
+  line-height: 0.9rem;
+  margin-top: -0.2rem;
+}
+</style>
diff --git a/src/components/nodes-table/NodeDetails.vue b/src/components/nodes-table/NodeDetails.vue
index a76a9caba7b..2e7da7906a0 100644
--- a/src/components/nodes-table/NodeDetails.vue
+++ b/src/components/nodes-table/NodeDetails.vue
@@ -10,47 +10,8 @@
 
     <v-row>
       <v-col cols="8" style="max-width:300px">
-        <v-select
-          label="Node actions"
-          append-outer-icon="send"
-          v-model="node_action"
-          :items="node_actions"
-          @click:append-outer="sendNodeAction"
-        ></v-select>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col>
-        <v-btn text @click="exportNode">
-          Export
-          <v-icon right dark color="primary">file_download</v-icon>
-        </v-btn>
-        <v-btn
-          v-if="!mqtt.disabled"
-          text
-          @click="
-            sendMqttAction(
-              'removeNodeRetained',
-              'With this action all retained messages of this node will be removed from broker'
-            )
-          "
-        >
-          Clear retained
-          <v-icon right dark color="red">clear</v-icon>
-        </v-btn>
-        <v-btn
-          v-if="!mqtt.disabled"
-          text
-          @click="
-            sendMqttAction(
-              'updateNodeTopics',
-              'With this action all node topics will be updated'
-            )
-          "
-        >
-          Update topics
-          <v-icon right dark color="green">refresh</v-icon>
+        <v-btn dark color="green" depressed @click="advancedShowDialog = true">
+          Advanced
         </v-btn>
       </v-col>
     </v-row>
@@ -120,23 +81,32 @@
         </v-expansion-panel>
       </v-expansion-panels>
     </v-row>
+
+    <DialogAdvanced
+      v-model="advancedShowDialog"
+      @close="advancedShowDialog = false"
+      :actions="actions"
+      @action="nodeAction"
+    />
   </v-container>
 </template>
 
 <script>
 import ValueID from '@/components/ValueId'
+import DialogAdvanced from '@/components/dialogs/DialogAdvanced'
+
 import { inboundEvents as socketActions } from '@/plugins/socket'
 import { mapMutations, mapGetters } from 'vuex'
 
 export default {
   props: {
     headers: Array,
-    actions: Array,
     node: Object,
     socket: Object
   },
   components: {
-    ValueID
+    ValueID,
+    DialogAdvanced
   },
   data () {
     return {
@@ -144,7 +114,137 @@ export default {
       nameError: null,
       newName: this.node.name,
       newLoc: this.node.loc,
-      node_action: 'requestNetworkUpdate'
+      advancedShowDialog: false,
+      actions: [
+        {
+          text: 'Export json',
+          options: [{ name: 'Export', action: 'exportNode' }],
+          icon: 'get_app',
+          desc: 'Export this node in a json file'
+        },
+        {
+          text: 'Clear Retained',
+          options: [
+            {
+              name: 'Clear',
+              action: 'removeNodeRetained',
+              args: {
+                mqtt: true,
+                confirm:
+                  'Are you sure you want to remove all retained messages?'
+              }
+            }
+          ],
+          icon: 'clear',
+          desc: 'All retained messages of this node will be removed from broker'
+        },
+        {
+          text: 'Update topics',
+          options: [
+            {
+              name: 'Update',
+              action: 'updateNodeTopics',
+              args: {
+                mqtt: true,
+                confirm: 'Are you sure you want to update all topics?'
+              }
+            }
+          ],
+          icon: 'update',
+          desc: 'Update all node topics. Useful when name/location has changed'
+        },
+        {
+          text: 'Firmware update',
+          options: [
+            { name: 'Begin', action: 'beginFirmwareUpdate' },
+            { name: 'Abort', action: 'abortFirmwareUpdate' }
+          ],
+          icon: 'update',
+          desc: 'Start/Stop a firmware update'
+        },
+        {
+          text: 'Heal Node',
+          options: [
+            {
+              name: 'Heal',
+              action: 'healNode',
+              args: {
+                confirm:
+                  'Healing a node causes a lot of traffic, can take minutes up to hours and you can expect degraded performance while it is going on'
+              }
+            }
+          ],
+          icon: 'healing',
+          desc: 'Force nodes to establish better connections to the controller'
+        },
+        {
+          text: 'Refresh Values',
+          options: [
+            {
+              name: 'Refresh',
+              action: 'refreshValues',
+              args: {
+                confirm:
+                  'Are you sure you want to refresh values of this node? This action increases network traffic'
+              }
+            }
+          ],
+          icon: 'cached',
+          desc:
+            'Update all CC values and metadata. Use only when many values seems stale'
+        },
+        {
+          text: 'Re-interview Node',
+          options: [
+            {
+              name: 'Interview',
+              action: 'refreshInfo',
+              args: {
+                confirm:
+                  "Are you sure you want to re-interview this node? All known information about this node is discarded. Battery powered nodes need to be woken up, interaction with the node won't be reliable until the interview is done."
+              }
+            }
+          ],
+          icon: 'history',
+          desc:
+            'Clear all info about this node and make a new full interview. Use when the node has wrong or missing capabilities'
+        },
+        {
+          text: 'Failed Nodes',
+          options: [
+            { name: 'Check', action: 'isFailedNode' },
+            { name: 'Remove', action: 'removeFailedNode' },
+            { name: 'Replace', action: 'replaceFailedNode' }
+          ],
+          icon: 'dangerous',
+          desc:
+            'Manage nodes that are dead and/or marked as failed with the controller'
+        },
+        {
+          text: 'Associations',
+          options: [
+            {
+              name: 'Clear',
+              action: 'removeAllAssociations',
+              args: {
+                confirm:
+                  "This action will remove all associations of this node. This will also clear lifeline association with controller node, the node won't report state changes until that is set up again"
+              }
+            },
+            {
+              name: 'Remove',
+              action: 'removeNodeFromAllAssociations',
+              args: {
+                confirm:
+                  'All direct associations to this node will be removed. Battery-powered nodes need to be woken up to edit their associations.'
+              }
+            }
+          ],
+          icon: 'link_off',
+          desc:
+            'Clear all node associations / Remove node from all associations'
+        }
+      ]
     }
   },
   computed: {
@@ -163,9 +263,6 @@ export default {
       } else {
         return {}
       }
-    },
-    node_actions () {
-      return this.actions
     }
   },
   watch: {
@@ -180,11 +277,17 @@ export default {
       this.nameError = this.validateTopic(val)
     }
   },
-  created () {
-    this.node_action = null
-  },
   methods: {
     ...mapMutations(['showSnackbar']),
+    nodeAction (action, args = {}) {
+      if (action === 'exportNode') {
+        this.exportNode()
+      } else if (args.mqtt) {
+        this.sendMqttAction(action, args.confirm)
+      } else {
+        this.$emit('action', action, { ...args, nodeId: this.node.id })
+      }
+    },
     openLink (link) {
       window.open(link, '_blank')
     },
@@ -219,51 +322,6 @@ export default {
         this.newName = this.node.name
       }, 10)
     },
-    async sendNodeAction (action) {
-      action = typeof action === 'string' ? action : this.node_action
-      if (this.node) {
-        const args = [this.node.id]
-
-        if (this.node_action === 'beginFirmwareUpdate') {
-          const { target } = await this.$listeners.showConfirm(
-            'Choose target',
-            '',
-            'info',
-            {
-              confirmText: 'Ok',
-              inputs: [
-                {
-                  type: 'number',
-                  label: 'Target',
-                  default: 0,
-                  rules: [v => v >= 0 || 'Invalid target'],
-                  hint:
-                    'The firmware target (i.e. chip) to upgrade. 0 updates the Z-Wave chip, >=1 updates others if they exist',
-                  required: true,
-                  key: 'target'
-                }
-              ]
-            }
-          )
-          try {
-            const { data, file } = await this.$listeners.import('buffer')
-            args.push(file.name)
-            args.push(data)
-            args.push(target)
-          } catch (error) {
-            return
-          }
-        } else if (this.node_action === 'replaceFailedNode') {
-          const secure = await this.$listeners.showConfirm(
-            'Node inclusion',
-            'Start inclusion in secure mode?'
-          )
-          args.push(secure)
-        }
-
-        this.apiRequest(action, args)
-      }
-    },
     async sendMqttAction (action, confirmMessage) {
       if (this.node) {
         let ok = true
diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
index 1f73156cc72..a2d97291c95 100644
--- a/src/components/nodes-table/index.vue
+++ b/src/components/nodes-table/index.vue
@@ -82,35 +82,6 @@
             </template>
             <span>Reset all table settings</span>
           </v-tooltip>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <v-btn text color="green" v-on="on" @click="$emit('importNodes')">
-                IMPORT
-              </v-btn>
-            </template>
-            <span>Import nodes.json Configuration</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <v-btn
-                text
-                color="purple"
-                v-on="on"
-                @click="$emit('exportNodes')"
-              >
-                EXPORT
-              </v-btn>
-            </template>
-            <span>Export nodes.json Configuration</span>
-          </v-tooltip>
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on }">
-              <v-btn text color="yellow" v-on="on" @click="exportDump">
-                DUMP
-              </v-btn>
-            </template>
-            <span>Export Nodes Dump (for debugging)</span>
-          </v-tooltip>
         </v-col>
       </v-row>
     </template>
diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
index 4deba671146..47a39975c9a 100644
--- a/src/components/nodes-table/nodes-table.js
+++ b/src/components/nodes-table/nodes-table.js
@@ -40,9 +40,6 @@ export default {
     }
   },
   methods: {
-    exportDump () {
-      this.$listeners.export(this.nodes, 'nodes_dump', 'json')
-    },
     toggleExpanded (item) {
       this.expanded = this.expanded.includes(item)
         ? this.expanded.filter(i => i !== item)