feat: switch button to control show/hide system indices (#194)

feat: switch button to control show/hide system indices

This pull request introduces several enhancements and fixes across
multiple files, focusing on improving data handling, user interface
functionality, and code maintainability. The most significant changes
include adding a toggle for hiding/displaying system indices, improving
shard and node data handling, and refactoring code to enhance type
safety and error handling.

### UI Enhancements:
* Added a switch to toggle hiding/displaying system indices in the
`ES_EDITOR` and `MANAGE` views, along with the necessary logic to manage
this state (`src/components/tool-bar.vue`).
[[1]](diffhunk://#diff-41529f6c831b85b601d7be26f3a5b99e5e80914851b3e9f3bcac05527d28cc52R36-R50)
[[2]](diffhunk://#diff-41529f6c831b85b601d7be26f3a5b99e5e80914851b3e9f3bcac05527d28cc52R126-R140)
[[3]](diffhunk://#diff-41529f6c831b85b601d7be26f3a5b99e5e80914851b3e9f3bcac05527d28cc52L119-R151)
[[4]](diffhunk://#diff-41529f6c831b85b601d7be26f3a5b99e5e80914851b3e9f3bcac05527d28cc52R239-R247)
[[5]](diffhunk://#diff-41529f6c831b85b601d7be26f3a5b99e5e80914851b3e9f3bcac05527d28cc52R269-R276)
* Updated shard and node displays to improve clarity and usability,
including rendering shard counts and node data more robustly
(`src/views/manage/components/index-manage.vue`,
`src/views/manage/components/shared-manage.vue`).
[[1]](diffhunk://#diff-98c3fe96f51a74a6d72e4ae6966bcde55c8a1ea6bb2d71687198c313e24e8d35L230-R238)
[[2]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L99-R148)
[[3]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L134-R161)

### Data Handling Improvements:
* Improved shard data handling by grouping shards by index and node, and
refactoring shard-related logic to use `ClusterShard` instead of
`ShardState` for better type consistency
(`src/views/manage/components/shared-manage.vue`).
[[1]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L99-R148)
[[2]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L157-R185)
[[3]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L214-R250)
* Enhanced node data retrieval by replacing a state-fetching function
with direct access to the `nodes` store, simplifying the logic and
reducing API calls (`src/views/manage/components/node-state.vue`).
[[1]](diffhunk://#diff-63fa584de9981b286070aab6e579ae15669c1d50652bf2e562dbfb9d0aa4055dL109-R112)
[[2]](diffhunk://#diff-63fa584de9981b286070aab6e579ae15669c1d50652bf2e562dbfb9d0aa4055dL124-R125)

### Code Refactoring:
* Refactored type definitions and imports for better modularity and
maintainability, moving shared types like `ClusterShard` and
`NodeRoleEnum` to `datasources` and updating their usage across
components (`src/views/manage/components/shared-manage.vue`,
`src/views/manage/components/node-state.vue`).
[[1]](diffhunk://#diff-98c3fe96f51a74a6d72e4ae6966bcde55c8a1ea6bb2d71687198c313e24e8d35R87)
[[2]](diffhunk://#diff-63fa584de9981b286070aab6e579ae15669c1d50652bf2e562dbfb9d0aa4055dL77-R84)
[[3]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704R83-R90)
* Added a new export for `esApi.ts` in `datasources/index.ts` to
centralize Elasticsearch API utilities (`src/datasources/index.ts`).

### Bug Fixes:
* Fixed an issue in `optionalToNullableInt` to return `null` for invalid
numeric strings, preventing unexpected behavior
(`src/common/valueConversion.ts`).
* Added fallback logic for shard and segment size calculations to avoid
runtime errors when data is missing or undefined
(`src/views/manage/components/shared-manage.vue`).
[[1]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L170-R216)
[[2]](diffhunk://#diff-04635db97053bc7b92172426dce08928141a0dc84445f714d256ea86f052d704L214-R250)


Refs: #182

---------

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

Author: Blankll

src/common/valueConversion.ts

@@ -1,4 +1,6 @@
 export const optionalToNullableInt = (value: string | number | null | undefined) => {
   if (value === null || value === undefined) return null;
-  return parseInt(`${value}`, 10);
+
+  const parsed = parseInt(`${value}`, 10);
+  return isNaN(parsed) ? null : parsed;
 };

src/components/tool-bar.vue

@@ -33,6 +33,21 @@
         <Search />
       </template>
     </n-select>
+    <n-tooltip trigger="hover" v-if="['ES_EDITOR', 'MANAGE'].includes(props.type ?? '')">
+      <template #trigger>
+        <n-switch
+          :round="false"
+          v-model:value="hideSystemIndicesRef"
+          class="action-index-switch"
+          @update:value="handleHiddenChange"
+        >
+          <template #checked> Hidden</template>
+          <template #unchecked>Display</template>
+        </n-switch>
+      </template>
+      Hide/Display system indices
+    </n-tooltip>
+
     <n-tooltip v-if="props.type === 'ES_EDITOR'" trigger="hover">
       <template #trigger>
         <n-icon size="20" class="action-load-icon" @click="loadDefaultSnippet">
@@ -99,7 +114,7 @@ const { loadDefaultSnippet, selectConnection } = tabStore;
 const { activePanel, activeElasticsearchIndexOption } = storeToRefs(tabStore);
 
 const clusterManageStore = useClusterManageStore();
-const { connection } = storeToRefs(clusterManageStore);
+const { connection, hideSystemIndices } = storeToRefs(clusterManageStore);
 
 const loadingRef = ref({ connection: false, index: false });
 
@@ -108,6 +123,21 @@ const selectionState = ref<{ connection: boolean; index: boolean }>({
   connection: false,
   index: false,
 });
+
+const hideSystemIndicesRef = ref(true);
+
+watch(
+  () => props.type,
+  newType => {
+    if (newType === 'ES_EDITOR') {
+      hideSystemIndicesRef.value = activePanel?.value.hideSystemIndices ?? true;
+    } else if (newType === 'MANAGE') {
+      hideSystemIndicesRef.value = hideSystemIndices.value;
+    }
+  },
+  { immediate: true },
+);
+
 const options = computed(
   () =>
     ({
@@ -116,9 +146,9 @@ const options = computed(
           ({ name }) => !filterRef.value.connection || name.includes(filterRef.value.connection),
         )
         .map(({ name }) => ({ label: name, value: name })),
-      index: activeElasticsearchIndexOption.value?.filter(
-        index => !filterRef.value.index || index.value.includes(filterRef.value.index),
-      ),
+      index: activeElasticsearchIndexOption.value
+        ?.filter(index => (hideSystemIndicesRef.value ? !index.value.startsWith('.') : true))
+        .filter(index => !filterRef.value.index || index.value.includes(filterRef.value.index)),
     }) as Record<string, { label: string; value: string }[]>,
 );
 
@@ -206,6 +236,15 @@ const handleSearch = async (input: string, type: 'CONNECTION' | 'INDEX') => {
 const handleManageTabChange = (tabName: string) => {
   emits('switch-manage-tab', tabName);
 };
+
+const handleHiddenChange = (value: boolean) => {
+  if (props.type === 'ES_EDITOR' && activePanel.value) {
+    activePanel.value.hideSystemIndices = value;
+  }
+  if (props.type === 'MANAGE' && connection.value) {
+    hideSystemIndices.value = value;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -227,6 +266,14 @@ const handleManageTabChange = (tabName: string) => {
     line-height: 40px;
   }
 
+  .action-index-switch {
+    cursor: pointer;
+    padding: 0;
+    margin-left: 10px;
+    height: inherit;
+    min-width: 80px;
+  }
+
   .manage-container {
     margin-right: 10px;
   }