fix: show error message in different tabs

Signed-off-by: seven <[email protected]>

src/views/manage/components/index-manage.vue

@@ -19,7 +19,7 @@
       </n-tab-pane>
       <template #suffix>
         <div class="tab-action-group">
-          <n-button type="default" tertiary @click="refresh">
+          <n-button type="default" tertiary @click="handleRefresh">
             <template #icon>
               <n-icon>
                 <Renew />
@@ -275,11 +275,19 @@ const templateTable = computed(() => {
 });
 
 const refresh = async () => {
-  await Promise.all([fetchIndices(), fetchAliases(), fetchTemplates()]).catch(err =>
-    message.error(err.message, { closable: true, keepAliveOnHover: true }),
-  );
+  await Promise.all([fetchIndices(), fetchAliases(), fetchTemplates()]);
+};
+const handleRefresh = async () => {
+  try {
+    await refresh();
+  } catch (err) {
+    message.error(`status: ${err.status}, details: ${err.details}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3000,
+    });
+  }
 };
-
 const toggleModal = (target: string) => {
   if (target === 'index') indexDialogRef.value.toggleModal();
   if (target === 'alias') aliasDialogRef.value.toggleModal();
@@ -362,7 +370,7 @@ const handleAction = async (action: string, indexName: string, aliasName?: strin
 };
 
 onMounted(async () => {
-  await refresh();
+  await handleRefresh();
 });
 </script>
 

src/views/manage/components/node-state.vue

@@ -82,6 +82,8 @@ const clusterManageStore = useClusterManageStore();
 const { fetchNodes, fetchNodeState } = clusterManageStore;
 const { nodes } = storeToRefs(clusterManageStore);
 
+const message = useMessage();
+
 type NodeStats = {
   key: string;
   value: string | number;
@@ -120,7 +122,16 @@ const handleNodeClick = async (nodeName: string) => {
     { name: 'heap', ...heap },
   ];
 };
-fetchNodes();
+
+onMounted(() => {
+  fetchNodes().catch(err => {
+    message.error(`status: ${err.status}, details: ${err.details}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3000,
+    });
+  });
+});
 </script>
 
 <style scoped lang="scss">

src/views/manage/components/shared-manage.vue

@@ -79,10 +79,12 @@ import {
 import { Memory } from '@vicons/fa';
 import { NButton } from 'naive-ui';
 import { TableColumn } from 'naive-ui/es/data-table/src/interface';
+import { CustomError } from '../../../common';
 
 const clusterManageStore = useClusterManageStore();
 const { fetchNodes, fetchShards, getShardState } = clusterManageStore;
 const { shards, nodesWithShards } = storeToRefs(clusterManageStore);
+const message = useMessage();
 
 type IndexShard = ShardState & {
   details: Array<{
@@ -136,8 +138,20 @@ const indexShards = ref<{
   index: string;
   shards: Array<IndexShard>;
 }>();
+
 const refreshShards = async () => {
-  await Promise.all([fetchNodes(), fetchShards()]);
+  try {
+    await Promise.all([fetchNodes(), fetchShards()]);
+  } catch (err) {
+    message.error(
+      `status: ${(err as CustomError).status}, details: ${(err as CustomError).details}`,
+      {
+        closable: true,
+        keepAliveOnHover: true,
+        duration: 3000,
+      },
+    );
+  }
 };
 
 const handleShardClick = async (shard: Shard) => {

src/views/manage/index.vue

@@ -19,26 +19,62 @@ import { useClusterManageStore, useConnectionStore } from '../../store';
 import { storeToRefs } from 'pinia';
 import NodeState from './components/node-state.vue';
 import SharedManage from './components/shared-manage.vue';
-import { lang } from '../../lang';
+import { useLang } from '../../lang';
 import IndexManage from './components/index-manage.vue';
+import { CustomError } from '../../common';
 
-const activeTab = ref(lang.global.t('manage.cluster'));
+const lang = useLang();
+
+const activeTab = ref(lang.t('manage.cluster'));
 
 const connectionStore = useConnectionStore();
 const { established } = storeToRefs(connectionStore);
 
+const message = useMessage();
+
 const clusterManageStore = useClusterManageStore();
 const { fetchCluster, fetchIndices, fetchAliases, fetchNodes, fetchShards } = clusterManageStore;
 const { cluster } = storeToRefs(clusterManageStore);
 
 watch(established, async () => {
-  await Promise.all([fetchCluster(), fetchIndices(), fetchAliases(), fetchNodes(), fetchShards()]);
+  try {
+    await Promise.all([
+      fetchCluster(),
+      fetchIndices(),
+      fetchAliases(),
+      fetchNodes(),
+      fetchShards(),
+    ]);
+  } catch (err) {
+    message.error(
+      `status: ${(err as CustomError).status}, details: ${(err as CustomError).details}`,
+      {
+        closable: true,
+        keepAliveOnHover: true,
+        duration: 3000,
+      },
+    );
+    cluster.value = null;
+  }
 });
 
 const handleManageTabChange = (tab: string) => {
   activeTab.value = tab;
 };
-fetchCluster().catch(() => {});
+
+fetchCluster().catch(err =>
+  !established.value?.id
+    ? message.warning(lang.t('editor.establishedRequired'), {
+        closable: true,
+        keepAliveOnHover: true,
+        duration: 3000,
+      })
+    : message.error(`status: ${err.status}, details: ${err.details}`, {
+        closable: true,
+        keepAliveOnHover: true,
+        duration: 3000,
+      }),
+);
 </script>
 
 <style lang="scss" scoped>