Merge pull request #588 from Adamant-im/feat/health-check-improvements

feat: update Health Check (UI fix)

src/components/nodes/NodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes.root">
-    <v-tabs v-model="tab" bg-color="secondary">
+    <v-tabs v-model="tab" bg-color="transparent">
       <v-tab value="adm">{{ $t('nodes.tabs.adm_nodes') }}</v-tab>
       <v-tab value="coins">{{ $t('nodes.tabs.coin_nodes') }}</v-tab>
     </v-tabs>
@@ -14,17 +14,70 @@
         <CoinNodesTable />
       </v-window-item>
     </v-window>
+    <div class="ml-6">
+      <div v-if="tab === 'coins'">
+        <v-checkbox
+          v-model="preferFastestCoinNodeOption"
+          :label="$t('nodes.fastest_title')"
+          :class="classes.checkbox"
+          class="mt-4"
+          color="grey darken-1"
+          hide-details
+        />
+        <div class="a-text-explanation-enlarged">
+          {{ $t('nodes.fastest_tooltip') }}
+        </div>
+        <div>&nbsp;<br />&nbsp;</div>
+      </div>
+      <div v-else-if="tab === 'adm'">
+        <v-checkbox
+          v-model="preferFastestAdmNodeOption"
+          :label="$t('nodes.fastest_title')"
+          :class="classes.checkbox"
+          class="mt-4"
+          color="grey darken-1"
+          hide-details
+        />
+        <div class="a-text-explanation-enlarged">
+          {{ $t('nodes.fastest_tooltip') }}
+        </div>
+        <v-checkbox
+          v-model="useSocketConnection"
+          :label="$t('nodes.use_socket_connection')"
+          :class="classes.checkbox"
+          class="mt-4"
+          color="grey darken-1"
+          hide-details
+        />
+        <div class="a-text-explanation-enlarged">
+          {{ $t('nodes.use_socket_connection_tooltip') }}
+        </div>
+
+        <!-- eslint-disable vue/no-v-html -- Safe internal content -->
+        <div
+          :class="classes.info"
+          class="a-text-regular-enlarged mt-6"
+          v-html="$t('nodes.nodeLabelDescription')"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+
+        <div>&nbsp;<br />&nbsp;</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import { AdmNodesTable } from './adm'
 import { CoinNodesTable } from './coins'
+import { useStore } from 'vuex'
 
 const className = 'nodes-table'
 const classes = {
-  root: className
+  root: className,
+  info: `${className}__info`,
+  checkbox: `${className}__checkbox`
 }
 
 type Tab = 'adm' | 'coins'
@@ -35,23 +88,74 @@ export default defineComponent({
     CoinNodesTable
   },
   setup() {
+    const store = useStore()
     const tab = ref<Tab>('adm')
 
+    const useSocketConnection = computed<boolean>({
+      get() {
+        return store.state.options.useSocketConnection
+      },
+      set(value) {
+        store.commit('options/updateOption', {
+          key: 'useSocketConnection',
+          value
+        })
+      }
+    })
+    const preferFastestAdmNodeOption = computed<boolean>({
+      get() {
+        return store.state.nodes.useFastestAdmNode
+      },
+      set(value) {
+        store.dispatch('nodes/setUseFastestAdmNode', value)
+      }
+    })
+
+    const preferFastestCoinNodeOption = computed<boolean>({
+      get() {
+        return store.state.nodes.useFastestCoinNode
+      },
+      set(value) {
+        store.dispatch('nodes/setUseFastestCoinNode', value)
+      }
+    })
+
     return {
       tab,
-      classes
+      classes,
+      useSocketConnection,
+      preferFastestAdmNodeOption,
+      preferFastestCoinNodeOption
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/themes/adamant/_mixins.scss';
 @import 'vuetify/settings';
+@import '@/assets/styles/settings/_colors.scss';
 
 .nodes-table {
   margin-left: -24px;
   margin-right: -24px;
   max-width: unset !important;
+
+  &__info {
+    :deep(a) {
+      text-decoration-line: none;
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  :deep(.v-input--selection-controls:not(.v-input--hide-details)) .v-input__slot {
+    margin-bottom: 0;
+  }
+
+  :deep(.v-checkbox) {
+    margin-left: -8px;
+  }
 }
 
 @media #{map-get($display-breakpoints, 'sm-and-down')} {
@@ -60,4 +164,19 @@ export default defineComponent({
     margin-right: -16px;
   }
 }
+/** Themes **/
+.v-theme--light {
+  .nodes-table {
+    &__checkbox {
+      :deep(.v-label) {
+        color: map-get($adm-colors, 'regular');
+      }
+      :deep(.v-input--selection-controls__ripple),
+      :deep(.v-input--selection-controls__input) i {
+        color: map-get($adm-colors, 'regular') !important;
+        caret-color: map-get($adm-colors, 'regular') !important;
+      }
+    }
+  }
+}
 </style>

src/components/nodes/adm/AdmNodesTableItem.vue

@@ -5,8 +5,8 @@
     </NodeColumn>
 
     <NodeColumn>
-      {{ url }}
-      <NodeVersion v-if="node.version" :node="node" />
+      <NodeUrl :node="node" />
+      <NodeVersion v-if="node.version && active" :node="node" />
     </NodeColumn>
 
     <NodeColumn :colspan="!showSocketColumn ? 2 : 1">
@@ -23,6 +23,7 @@
 import { computed, PropType } from 'vue'
 import { useStore } from 'vuex'
 import type { NodeStatusResult } from '@/lib/nodes/abstract.node'
+import NodeUrl from '@/components/nodes/components/NodeUrl.vue'
 import NodeColumn from '@/components/nodes/components/NodeColumn.vue'
 import NodeStatus from '@/components/nodes/components/NodeStatus.vue'
 import NodeVersion from '@/components/nodes/components/NodeVersion.vue'
@@ -43,7 +44,8 @@ export default {
     NodeColumn,
     NodeStatus,
     NodeVersion,
-    SocketSupport
+    SocketSupport,
+    NodeUrl
   },
   props: {
     node: {
@@ -58,31 +60,63 @@ export default {
     const active = computed(() => props.node.active)
     const socketSupport = computed(() => props.node.socketSupport)
     const isUnsupported = computed(() => props.node.status === 'unsupported_version')
-
+    const type = computed(() => props.node.type)
     const showSocketColumn = computed(() => active.value && !isUnsupported.value)
 
     const toggleActiveStatus = () => {
       store.dispatch('nodes/toggle', {
+        type: type.value,
         url: url.value,
         active: !active.value
       })
       store.dispatch('nodes/updateStatus')
     }
 
+    const computedResult = computed(() => {
+      const baseUrl = new URL(url.value)
+      const protocol = baseUrl.protocol
+      const hostname = baseUrl.hostname
+      const port = baseUrl.port
+      const result = /^[\d.]+$/.test(hostname)
+
+      let nodeName = null
+      let domain = null
+
+      if (result === false) {
+        const regex = /([^.]*)\.(.*)/
+        const parts = hostname.match(regex)
+        if (parts !== null) {
+          nodeName = parts[1]
+          domain = parts[2]
+        }
+      }
+
+      return {
+        protocol,
+        hostname,
+        nodeName,
+        domain,
+        result,
+        port
+      }
+    })
+
     return {
       classes,
       url,
       active,
       socketSupport,
       isUnsupported,
       showSocketColumn,
-      toggleActiveStatus
+      toggleActiveStatus,
+      computedResult
     }
   }
 }
 </script>
 
 <style lang="scss">
 .amd-nodes-table-item {
+  line-height: 14px;
 }
 </style>

src/components/nodes/coins/CoinNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-checkbox hide-socket />
+    <NodesTableHead hide-socket />
 
     <tbody>
       <CoinNodesTableItem v-for="node in nodes" :key="node.url" :label="node.label" :node="node" />

src/components/nodes/coins/CoinNodesTableItem.vue

@@ -1,15 +1,19 @@
 <template>
   <tr :class="classes.root">
-    <NodeColumn align="right">
+    <NodeColumn checkbox>
+      <NodeStatusCheckbox :value="active" @change="toggleActiveStatus" />
+    </NodeColumn>
+
+    <NodeColumn align="left">
       <NodeLabel :label="label" />
     </NodeColumn>
 
     <NodeColumn>
-      {{ url }}
-      <NodeVersion v-if="node.version" :node="node" />
+      <NodeUrl :node="node" />
+      <NodeVersion v-if="node.version && active" :node="node" />
     </NodeColumn>
 
-    <NodeColumn :colspan="isUnsupported ? 2 : 1">
+    <NodeColumn ping :colspan="isUnsupported ? 2 : 1">
       <NodeStatus :node="node" />
     </NodeColumn>
   </tr>
@@ -20,10 +24,12 @@ import { computed, PropType } from 'vue'
 import { useStore } from 'vuex'
 import type { NodeStatusResult } from '@/lib/nodes/abstract.node'
 import type { TNodeLabel } from '@/lib/nodes/constants'
+import NodeUrl from '@/components/nodes/components/NodeUrl.vue'
 import NodeColumn from '@/components/nodes/components/NodeColumn.vue'
 import NodeLabel from '@/components/nodes/components/NodeLabel.vue'
 import NodeStatus from '@/components/nodes/components/NodeStatus.vue'
 import NodeVersion from '@/components/nodes/components/NodeVersion.vue'
+import NodeStatusCheckbox from '@/components/nodes/components/NodeStatusCheckbox.vue'
 
 const className = 'nodes-table-item'
 const classes = {
@@ -38,7 +44,9 @@ export default {
     NodeColumn,
     NodeStatus,
     NodeVersion,
-    NodeLabel
+    NodeLabel,
+    NodeUrl,
+    NodeStatusCheckbox
   },
   props: {
     node: {
@@ -56,9 +64,11 @@ export default {
     const url = computed(() => props.node.url)
     const active = computed(() => props.node.active)
     const isUnsupported = computed(() => props.node.status === 'unsupported_version')
+    const type = computed(() => props.node.type)
 
     const toggleActiveStatus = () => {
       store.dispatch('nodes/toggle', {
+        type: type.value,
         url: url.value,
         active: !active.value
       })
@@ -79,4 +89,7 @@ export default {
 <style lang="scss">
 .nodes-table-item {
 }
+
+.nodeName {
+}
 </style>

src/components/nodes/components/NodeColumn.vue

@@ -2,6 +2,7 @@
   <td
     :class="{
       [classes.root]: true,
+      [classes.ping]: ping,
       [classes.checkbox]: checkbox,
       [classes.alignRight]: align === 'right',
       [classes.alignCenter]: align === 'center'
@@ -17,6 +18,7 @@ import { defineComponent, PropType } from 'vue'
 const className = 'node-column'
 const classes = {
   root: className,
+  ping: `${className}--ping`,
   checkbox: `${className}--checkbox`,
   alignRight: `${className}--align-right`,
   alignCenter: `${className}--align-center`
@@ -30,6 +32,9 @@ export default defineComponent({
     checkbox: {
       type: Boolean
     },
+    ping: {
+      type: Boolean
+    },
     align: {
       type: String as PropType<'left' | 'right' | 'center'>
     }
@@ -56,6 +61,9 @@ export default defineComponent({
     max-width: 64px;
     padding-right: 0 !important;
   }
+  &--ping {
+    padding-right: 8px !important;
+  }
 
   &--align-right {
     text-align: right;