feat: implement search and actions in ConfigurationList view

ui/src/components/shared/UiParentCard.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 const props = defineProps({
   title: String,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>
 
 <template>
-  <v-card class="bg-surface overflow-hidden" elevation="0" variant="outlined">
+  <v-card class="bg-surface overflow-hidden" elevation="0" :loading="loading" variant="outlined">
     <v-card-item>
       <div class="d-sm-flex align-center justify-space-between">
         <v-card-title class="text-h6" style="line-height: 1.57">{{ props.title }}</v-card-title>

ui/src/utils/locales/en.json

@@ -63,12 +63,14 @@
     "Sector Events": "Sector Events",
     "Edit Configuration": "Edit Configuration",
     "Running Tasks": "Running Tasks",
-    "Storages": "Storages"
+    "Storages": "Storages",
+    "Node": "Node|Nodes"
   },
   "msgs": {
     "weekBlock": "This Week Total Mined",
     "sectorNotFailed": "THIS SECTOR IS NOT FAILED!|SOME SECTORS HAVE NOT FAILED!",
     "sureRemoveSector": "Are you sure you want to remove this sector?|Are you sure you want to remove this sectors?",
+    "sureRemoveConfig": "Are you sure you want to remove this configuration?|Are you sure you want to remove this configurations?",
     "actionCantUndo": "This action can't be undone!",
     "understand": "I understand"
   },

ui/src/utils/locales/zh.json

@@ -63,7 +63,8 @@
     "Sector Events": "扇区事件",
     "Edit Configuration": "编辑配置",
     "Running Tasks": "运行的任务",
-    "Storages": "存储"
+    "Storages": "存储",
+    "Node": "节点|节点"
   },
   "actions": {
     "Create": "创建",
@@ -76,6 +77,7 @@
     "weekBlock": "本周出块数",
     "sectorNotFailed": "这个 SECTOR 没有失败!|一些 SECTOR 没有失败!",
     "sureRemoveSector": "确定要删除这个 Sector 吗?|确定要删除这些 Sector 吗?",
+    "sureRemoveConfig": "确定要删除这个配置吗?|确定要删除这些配置吗?",
     "actionCantUndo": "此操作无法撤销!",
     "understand": "我明白"
   },

ui/src/views/configurations/ConfigRemoveDialog.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
 import { GetConfigs, RemoveConfig } from '@/views/query/config'
-import { IconTrash } from '@tabler/icons-vue'
+import { IconAlertOctagon, IconTrash } from '@tabler/icons-vue'
 import { useUIStore } from '@/stores/ui'
 const uiStore = useUIStore()
 
@@ -11,11 +11,23 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  useIcon: {
+    type: Boolean,
+    default: false,
+  },
+  color: {
+    type: String,
+    default: 'error',
+  },
+  size: {
+    type: String,
+    default: undefined,
+  },
 })
 
 const dialog = ref(false)
 
-const { mutate: removeConfig, loading, onDone, error } = useMutation(RemoveConfig, () => ({
+const { mutate: removeConfig, loading, onDone, onError } = useMutation(RemoveConfig, () => ({
   variables: {
     title: props.title,
   },
@@ -33,38 +45,94 @@ onDone(() => {
   })
 })
 
+onError(e => {
+  uiStore.appendMsg({
+    type: 'error',
+    msg: e.message,
+  })
+})
+
 </script>
 
 <template>
-  <v-btn color="error">
-    <template #prepend>
-      <IconTrash />
+  <v-dialog v-model="dialog" max-width="500">
+    <template #activator="{ props: p }">
+      <v-icon
+        v-if="useIcon"
+        :color="props.color"
+        v-bind="p"
+        :icon="IconTrash"
+        :size="props.size"
+        @click="dialog = true"
+      />
+      <v-btn
+        v-else
+        v-bind="p"
+        :color="props.color"
+        :prepend-icon="IconTrash"
+        :size="props.size"
+        variant="flat"
+        @click="dialog = true"
+      >Remove</v-btn>
     </template>
-    Remove
-    <v-dialog v-model="dialog" activator="parent" max-width="600">
-      <v-card
-        subtitle="Are you sure you want to remove this configuration?"
-        title="Remove Configuration"
-      >
-        <v-card-text>
-          <v-chip color="error" label>{{ props.title }}</v-chip>
-          <v-alert
-            v-if="error"
-            class="mt-4"
-            color="error"
-            :text="error.message"
-          />
+    <template #default="{ }">
+      <v-card border class="mx-auto" flat max-width="500">
+        <v-list-item class="px-6" height="88">
+          <template #append>
+            <v-icon color="warning" :icon="IconAlertOctagon" />
+          </template>
+          <template #title> {{ $t('msgs.sureRemoveConfig', 1) }}</template>
+        </v-list-item>
+
+        <v-divider />
+
+        <v-card-text class="text-medium-emphasis pa-6">
+          <div class="text-h6 mb-6">{{ $t('msgs.actionCantUndo') }}</div>
+          <div class="my-4">Configuration: <v-chip color="red" variant="outlined">{{ props.title }}</v-chip></div>
         </v-card-text>
         <v-card-actions>
+          <v-spacer />
+          <v-btn @click="dialog = false">{{ $t('actions.Cancel') }}</v-btn>
           <v-btn
             color="error"
             :loading="loading"
-            text="true"
-            variant="outlined"
-            @click="removeConfig({ title: props.title })"
-          > Confirm </v-btn>
+            variant="flat"
+            @click="removeConfig"
+          >{{ $t('actions.Remove') }}</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
-  </v-btn>
+    </template>
+  </v-dialog>
+
+<!--  <v-btn color="error">-->
+<!--    <template #prepend>-->
+<!--      <IconTrash />-->
+<!--    </template>-->
+<!--    Remove-->
+<!--    <v-dialog v-model="dialog" activator="parent" max-width="600">-->
+<!--      <v-card-->
+<!--        subtitle="Are you sure you want to remove this configuration?"-->
+<!--        title="Remove Configuration"-->
+<!--      >-->
+<!--        <v-card-text>-->
+<!--          <v-chip color="error" label>{{ props.title }}</v-chip>-->
+<!--          <v-alert-->
+<!--            v-if="error"-->
+<!--            class="mt-4"-->
+<!--            color="error"-->
+<!--            :text="error.message"-->
+<!--          />-->
+<!--        </v-card-text>-->
+<!--        <v-card-actions>-->
+<!--          <v-btn-->
+<!--            color="error"-->
+<!--            :loading="loading"-->
+<!--            text="true"-->
+<!--            variant="outlined"-->
+<!--            @click="removeConfig({ title: props.title })"-->
+<!--          > Confirm </v-btn>-->
+<!--        </v-card-actions>-->
+<!--      </v-card>-->
+<!--    </v-dialog>-->
+<!--  </v-btn>-->
 </template>

ui/src/views/configurations/ConfigurationEdit.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 
 const enableEdit = ref(false)
 
-const { result, error } = useQuery(GetConfig, {
+const { result, loading, error } = useQuery(GetConfig, {
   layer: props.layer,
 }, () => ({
   fetchPolicy: 'cache-first',
@@ -41,7 +41,7 @@ watch(result, () => {
   editTitle.value = config.value?.title
 })
 
-const { mutate: updateConfig, loading, onDone } = useMutation(UpdateConfig)
+const { mutate: updateConfig, loading: updateLoading, onDone } = useMutation(UpdateConfig)
 
 function saveEdit () {
   updateConfig({
@@ -83,12 +83,12 @@ const extensions = computed(() => {
 
 <template>
   <BaseBreadcrumb :breadcrumbs="breadcrumbs" />
-  <UiParentCard :title="t('fields.Edit Configuration')">
+  <UiParentCard :loading="loading" :title="t('fields.Edit Configuration')">
     <template #action>
       <v-btn
         v-if="enableEdit"
         color="primary"
-        :loading="loading"
+        :loading="updateLoading"
         @click="saveEdit"
       >
         <template #prepend>

ui/src/views/configurations/ConfigurationList.vue

@@ -2,11 +2,12 @@
 
 import { useQuery } from '@vue/apollo-composable'
 import { computed, ComputedRef, ref } from 'vue'
-import { Config } from '@/typed-graph'
+import { Config, MachineDetail, Maybe } from '@/typed-graph'
 import { GetConfigs } from '@/views/query/config'
 import { IconPlus, IconReload, IconSearch } from '@tabler/icons-vue'
 import ConfigRemoveDialog from '@/views/configurations/ConfigRemoveDialog.vue'
 import { useI18n } from 'vue-i18n'
+import UsedByListDialog from '@/views/configurations/UsedByListDialog.vue'
 
 const { t } = useI18n()
 
@@ -19,7 +20,7 @@ const headers = [
   { title: 'ID', key: 'id' },
   { title: 'Layer', key: 'title' },
   { title: 'Used By', key: 'usedBy' },
-  { title: '    ', key: 'action' },
+  { title: 'Actions', key: 'actions', sortable: false },
 ]
 
 const searchValue = ref('')
@@ -81,12 +82,10 @@ const searchValue = ref('')
               <RouterLink :to="{ name: 'ConfigurationEdit', params: { layer: value } }">{{ value }}</RouterLink>
             </template>
             <template #item.usedBy="{ item }">
-              <v-chip-group column>
-                <v-chip v-for="(by, index) in item.usedBy" :key="index" :to="{name: 'MachineInfo', params: {id: by?.machineId}}">{{ by?.machineName || by?.machineId }}</v-chip>
-              </v-chip-group>
+              <UsedByListDialog :title="item.title" :used-by="item.usedBy.filter((usedByItem: Maybe<MachineDetail>) => usedByItem !== null)" />
             </template>
-            <template #item.action="{ item }">
-              <ConfigRemoveDialog v-if="item.usedBy.length === 0 && item.id > 100" :title="item.title" />
+            <template #item.actions="{ item }">
+              <ConfigRemoveDialog v-if="item.usedBy.length === 0 && item.id > 100" :title="item.title" use-icon />
             </template>
           </v-data-table-virtual>
         </v-card-text>

ui/src/views/configurations/UsedByListDialog.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { PropType, ref } from 'vue'
+import { MachineDetail } from '@/typed-graph'
+import { IconSearch } from '@tabler/icons-vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  usedBy: {
+    type: Array as PropType<MachineDetail[]>,
+    required: true,
+  },
+})
+
+const searchValue = ref('')
+const dialog = ref(false)
+const headers = [
+  { title: 'ID', value: 'id' },
+  { title: 'Name', value: 'machineName' },
+  { title: 'Startup', value: 'startupTime' },
+  { title: 'Miners', value: 'miners' },
+]
+</script>
+
+<template>
+  <v-dialog v-model="dialog" max-height="800" max-width="800">
+    <template #activator="{ props: p }">
+      <v-btn
+        v-bind="p"
+        color="success"
+        :readonly="usedBy.length === 0"
+        variant="text"
+        @click="dialog = true"
+      >{{ props.usedBy.length }}</v-btn> {{ $t('fields.Node', props.usedBy.length) }}
+    </template>
+    <template #default="{ }">
+      <v-data-table-virtual
+        fixed-header
+        :headers="headers"
+        hover
+        :items="usedBy"
+        :search="searchValue"
+      >
+        <template #top>
+          <v-text-field
+            v-model="searchValue"
+            hide-details
+            persistent-placeholder
+            placeholder="Search"
+            type="text"
+            variant="outlined"
+          >
+            <template #prepend-inner>
+              <IconSearch :size="14" />
+            </template>
+          </v-text-field>
+        </template>
+        <template #item.startupTime="{ value }">
+          {{ $d(value, 'short') }}
+        </template>
+      </v-data-table-virtual>
+    </template>
+  </v-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>

ui/src/views/query/config.ts

@@ -7,8 +7,12 @@ export const GetConfigs = gql`
       title
       config
       usedBy {
+        id
         machineId
         machineName
+        minersArray
+        miners
+        startupTime
       }
     }
   }
@@ -21,8 +25,12 @@ export const GetConfig = gql`
         title
         config
         usedBy {
+          id
           machineId
           machineName
+          minersArray
+          miners
+          startupTime
         }
       }
     }`