From 048d79601e3c617e83e4aa87b9174d82a373c513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20K=C3=B6nig?= <carstenkoenig92@gmail.com>
Date: Thu, 23 May 2024 19:50:52 +0200
Subject: [PATCH] adds shard relocation confirm msg and cancel button, fixes
 #236

---
 CHANGELOG.md                                  |  1 +
 .../stylesheets/theme/components/shards.css   | 23 +++++------
 src/components/shards/ShardsTable.vue         | 38 ++++++++++++-------
 .../components/shards/ShardsTable.ts          | 22 +++++++++--
 src/locales/cn.json                           |  5 ++-
 src/locales/en.json                           |  6 ++-
 6 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47a901f0..4e42584d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 1.0.8
 
 * fix update&delete documents that use `routing`, fixes [#235](https://github.com/cars10/elasticvue/issues/235)
+* adds shard relocation confirm msg and cancel button, fixes [#236](https://github.com/cars10/elasticvue/issues/236)
 
 ## 1.0.7
 
diff --git a/src/assets/stylesheets/theme/components/shards.css b/src/assets/stylesheets/theme/components/shards.css
index 1b6042f8..4e27ed90 100644
--- a/src/assets/stylesheets/theme/components/shards.css
+++ b/src/assets/stylesheets/theme/components/shards.css
@@ -1,16 +1,17 @@
 .shard-reroute-target {
-  background-color: transparent;
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 2px dashed grey;
+    background-color: transparent;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px dashed grey;
+    color: var(--theme-muted-color) !important;
 }
 
 .shard-reroute-target:hover {
-  background-color: rgba(150, 150, 150, 0.5);
-  cursor: pointer;
+    background-color: rgba(150, 150, 150, 0.5);
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/components/shards/ShardsTable.vue b/src/components/shards/ShardsTable.vue
index 49f9bf47..eaa600fb 100644
--- a/src/components/shards/ShardsTable.vue
+++ b/src/components/shards/ShardsTable.vue
@@ -1,17 +1,26 @@
 <template>
-  <div class="flex justify-end q-pa-md">
-    <filter-input v-model="filter" />
+  <div class="flex justify-between q-pa-md">
+    <div class="flex">
+      <q-btn v-if="Object.keys(currentReroutingShard).length > 0"
+             :label="t('shards.shards_table.cancel_relocation')"
+             color="primary-dark"
+             @click="cancelRelocation" />
+    </div>
 
-    <q-btn icon="settings" round flat class="q-ml-sm">
-      <q-menu style="white-space: nowrap" anchor="bottom right" self="top end">
-        <q-list dense>
-          <q-item style="padding-left: 0">
-            <q-checkbox v-model="indicesStore.showHiddenIndices" size="32px"
-                        :label="t('indices.indices_table.show_hidden_indices.label')" />
-          </q-item>
-        </q-list>
-      </q-menu>
-    </q-btn>
+    <div class="flex">
+      <filter-input v-model="filter" />
+
+      <q-btn icon="settings" round flat class="q-ml-sm">
+        <q-menu style="white-space: nowrap" anchor="bottom right" self="top end">
+          <q-list dense>
+            <q-item style="padding-left: 0">
+              <q-checkbox v-model="indicesStore.showHiddenIndices" size="32px"
+                          :label="t('indices.indices_table.show_hidden_indices.label')" />
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+    </div>
   </div>
 
   <q-table v-model:pagination="pagination"
@@ -74,7 +83,9 @@
                        :outlined="!(currentReroutingShard.index === col.name && currentReroutingShard.node === row && currentReroutingShard.shard === shard.shard)" />
 
           <div v-if="currentReroutingShard.index === col.name && currentReroutingShard.node !== row">
-            <button class="shard-reroute-target" @click="reroute(currentReroutingShard, row)" />
+            <button class="shard-reroute-target" @click="reroute(currentReroutingShard, row)">
+              {{ t('shards.shards_table.reroute.label', { node: row }) }}
+            </button>
           </div>
         </td>
       </tr>
@@ -103,6 +114,7 @@
     markColumn,
     unmarkColumn,
     currentReroutingShard,
+    cancelRelocation,
     initReroute,
     reroute
   } = useShardsTable(props, emit)
diff --git a/src/composables/components/shards/ShardsTable.ts b/src/composables/components/shards/ShardsTable.ts
index b5ded6d9..d498b722 100644
--- a/src/composables/components/shards/ShardsTable.ts
+++ b/src/composables/components/shards/ShardsTable.ts
@@ -4,6 +4,7 @@ import { useTableColumnHover } from '../../TableColumnHover.ts'
 import { useSnackbar } from '../../Snackbar.ts'
 import { useElasticsearchAdapter } from '../../CallElasticsearch.ts'
 import { EsShard, TableShards } from '../../../helpers/shards.ts'
+import { useTranslation } from '../../i18n.ts'
 
 export type ShardsTableProps = {
   shards: TableShards
@@ -72,9 +73,16 @@ export const useShardsTable = (props: ShardsTableProps, emit: any) => {
     }
   }
 
+  const t = useTranslation()
   const { showSnackbar } = useSnackbar()
   const { requestState, callElasticsearch } = useElasticsearchAdapter()
-  const reroute = (shardToReroute: EsShard, targetNode: string) => {
+  const reroute = async (shardToReroute: EsShard, targetNode: string) => {
+    if (!confirm(t('shards.shards_table.reroute.confirm', {
+      shard: shardToReroute.shard,
+      fromNode: shardToReroute.node,
+      toNode: targetNode
+    }))) return
+
     const commands = [
       {
         move: {
@@ -85,12 +93,17 @@ export const useShardsTable = (props: ShardsTableProps, emit: any) => {
         }
       }]
 
-    callElasticsearch('clusterReroute', commands).then(() => {
+    try {
+      await callElasticsearch('clusterReroute', commands)
       currentReroutingShard.value = {} as EsShard
       emit('reload')
-    }).catch(() => {
+    } catch (_e) {
       showSnackbar(requestState.value)
-    })
+    }
+  }
+
+  const cancelRelocation = () => {
+    currentReroutingShard.value = {} as EsShard
   }
 
   return {
@@ -103,6 +116,7 @@ export const useShardsTable = (props: ShardsTableProps, emit: any) => {
     markColumn,
     unmarkColumn,
     currentReroutingShard,
+    cancelRelocation,
     initReroute,
     reroute
   }
diff --git a/src/locales/cn.json b/src/locales/cn.json
index 83107760..0c708724 100644
--- a/src/locales/cn.json
+++ b/src/locales/cn.json
@@ -542,7 +542,10 @@
   "shards": {
     "heading": "分片",
     "shards_table": {
-      "cancel_relocation": "取消relocation"
+      "cancel_relocation": "取消relocation",
+      "reroute": {
+        "confirm": null
+      }
     }
   },
   "shared": {
diff --git a/src/locales/en.json b/src/locales/en.json
index 26e299da..9fc3cea5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -541,7 +541,11 @@
   "shards": {
     "heading": "Shards",
     "shards_table": {
-      "cancel_relocation": "Cancel relocation"
+      "cancel_relocation": "Cancel reroute",
+      "reroute": {
+        "label": "reroute to '{node}'",
+        "confirm": "Reroute shard '{shard}' from node '{fromNode}' to '{toNode}'?"
+      }
     }
   },
   "shared": {