feat: add Manage panel -cluster (#68)

feat: add manage pane-cluster - [x] add root level section of manage - [x] add tool bar with connection selector, manage switch tab - [x] implement manage cluster section Refs: #17 --------- Signed-off-by: seven <[email protected]>
geek-fun · Jul 17, 2024 · 8020379 · 8020379
1 parent f94fe04
commit 8020379
Show file tree

Hide file tree

Showing 15 changed files with 351 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -13,8 +13,7 @@
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
 
-<strong>DocKit is a modern cross-platform NoSQL/NewSQL GUI client. Explore your data any time from your Mac, Windows, and
-Linux.</strong>
+<strong>DocKit is a desktop client designed for NoSQL database, support Elasticsearch and OpenSearch across Mac, windows and Linux.</strong>
 </div>
 
 ## Client

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "version": "0.4.2",
-  "description": "A faster, better and more stable NoSQL desktop tools",
+  "description": "DocKit is a desktop client designed for NoSQL database, support Elasticsearch and OpenSearch across Mac, windows and Linux",
   "author": "geekfun <[email protected]>",
   "homepage": "ttps://dockit.geekfun.club",
   "license": "Apache-2.0",
@@ -31,6 +31,7 @@
     "monaco-editor": "^0.50.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "pretty-bytes": "^6.1.1",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
     "tauri-plugin-system-info-api": "^1.0.2",
     "ulidx": "^2.3.0",

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,8 +1,8 @@
 [package]
 name = "dockit"
 version = "0.0.0"
-description = "A Tauri App"
-authors = ["you"]
+description = "DocKit is a desktop client designed for NoSQL database, support Elasticsearch and OpenSearch across Mac, windows and Linux"
+authors = ["geekfun"]
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
@@ -9,6 +9,7 @@ body,
   --theme-color: #36ad6a;
   --theme-color-hover: #19934e;
   --dange-color: #cd2158;
+  --tool-bar-height: 40px;
 }
 :root[theme='light'] {
   --bg-color: #f1f1f1;

diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
@@ -1,5 +1,6 @@
 export const enUS = {
   aside: {
+    manage: 'Manage',
     connect: 'Connect',
     file: 'File',
     history: 'History',
@@ -40,6 +41,12 @@ export const enUS = {
         remove the slash at the start of the path, the body is a JSON object and its optional and should start as new line if it represents, you can use the provided index name and index mapping in the body to answer the question.`,
     },
   },
+  manage: {
+    cluster: 'CLUSTER',
+    nodes: 'NODES',
+    shards: 'SHARDS',
+    indices: 'INDICES',
+  },
   connection: {
     new: 'New connection',
     test: 'Test connection',
@@ -65,6 +72,7 @@ export const enUS = {
       remove: 'Remove',
     },
     selectIndex: 'No collection/index selected',
+    selectConnection: 'No Connection selected',
     validationFailed: 'Form validation failed!',
     unAuthorized: 'Authorization failed, ensure your username and password are correct',
   },

diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
@@ -1,5 +1,6 @@
 export const zhCN = {
   aside: {
+    manage: '管理',
     connect: '连接',
     file: '文件',
     history: '历史',
@@ -40,6 +41,12 @@ export const zhCN = {
         删除路径开头的斜杠，body 是一个 JSON 对象，如果表示，它是可选的，并且应该从新行开始，您可以在 body 中使用提供的索引名称和索引映射来回答问题。`,
     },
   },
+  manage: {
+    cluster: '集群',
+    nodes: '节点',
+    shards: '分片',
+    indices: '索引',
+  },
   connection: {
     new: '新建连接',
     test: '测试连接',
@@ -65,6 +72,7 @@ export const zhCN = {
       remove: '删除',
     },
     selectIndex: '未选择集合/索引',
+    selectConnection: '未选择连接',
     validationFailed: '表单验证失败！',
     unAuthorized: '认证失败，请输入正确的用户名和密码！',
   },

diff --git a/src/layout/components/the-aside.vue b/src/layout/components/the-aside.vue
@@ -45,7 +45,15 @@
 import { ref, markRaw } from 'vue';
 import { open } from '@tauri-apps/api/shell';
 import { useRouter, useRoute } from 'vue-router';
-import { DataBase, Folders, LogoGithub, Settings, UserAvatar, ExpandAll } from '@vicons/carbon';
+import {
+  DataBase,
+  Folders,
+  LogoGithub,
+  Settings,
+  UserAvatar,
+  ExpandAll,
+  ToolKit,
+} from '@vicons/carbon';
 import { useAppStore } from '../../store';
 import TheAsideIcon from './the-aside-icon.vue';
 const router = useRouter();
@@ -54,6 +62,13 @@ const appStore = useAppStore();
 const { setConnectPanel } = appStore;
 
 const mainNavList = ref([
+  {
+    id: 'manage',
+    path: '/manage',
+    name: 'manage',
+    icon: markRaw(ToolKit),
+    isLink: false,
+  },
   {
     id: 'connect',
     path: '/connect',

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -33,6 +33,14 @@ const router = createRouter({
           },
           component: () => import('../views/connect/index.vue'),
         },
+        {
+          name: 'Manage',
+          path: '/manage',
+          meta: {
+            keepAlive: false,
+          },
+          component: () => import('../views/manage/index.vue'),
+        },
         {
           name: 'History',
           path: '/history',

diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
@@ -2,6 +2,33 @@ import { defineStore } from 'pinia';
 import { pureObject } from '../common';
 import { loadHttpClient, storeApi } from '../datasources';
 
+export type RawClusterStats = {
+  cluster_name: string;
+  cluster_uuid: string;
+  status: string;
+  nodes: {
+    count: {
+      total: number;
+      master: number;
+      data: number;
+    };
+    versions: Array<string>;
+  };
+  indices: {
+    count: number;
+    shards: {
+      total: number;
+      primaries: number;
+    };
+    docs: {
+      count: number;
+    };
+    store: {
+      size_in_bytes: number;
+    };
+  };
+};
+
 export type Connection = {
   id?: number;
   name: string;
@@ -11,6 +38,7 @@ export type Connection = {
   sslCertVerification: boolean;
   password?: string;
   queryParameters?: string;
+  rawClusterState?: RawClusterStats;
 };
 export type ConnectionIndex = {
   health: string;
@@ -64,6 +92,14 @@ export const useConnectionStore = defineStore('connectionStore', {
     async fetchConnections() {
       this.connections = (await storeApi.get('connections', [])) as Connection[];
     },
+    async fetchClusterState() {
+      if (!this.established) return;
+      const client = loadHttpClient(this.established as Connection);
+      this.established.rawClusterState = (await client.get(
+        '/_cluster/stats',
+        'format=json',
+      )) as RawClusterStats;
+    },
     async testConnection(con: Connection) {
       const client = loadHttpClient(con);
 

diff --git a/src/views/connect/index.vue b/src/views/connect/index.vue
@@ -83,7 +83,7 @@ const editConnectHandler = (row: object) => {
     display: flex;
     flex-direction: column;
     .table-select {
-      height: 40px;
+      height: var(--tool-bar-height);
       border-bottom: 1px solid var(--border-color);
     }
     .editor-container {

diff --git a/src/views/manage/components/cluster-state.vue b/src/views/manage/components/cluster-state.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="manage-state-container">
+    <n-card class="cluster-item-box cluster-cluster-box">
+      <p :class="clusterStatusClass">
+        <span>{{ $t('manage.cluster') }}</span>
+        <n-icon size="24">
+          <CheckmarkOutline v-if="props.cluster?.status == 'green'" />
+          <WarningAlt v-else-if="props.cluster?.status == 'yellow'" />
+          <MisuseOutline v-else-if="props.cluster?.status == 'red'" />
+        </n-icon>
+      </p>
+      <p>name: {{ props.cluster?.cluster_name }}</p>
+      <p>id: {{ props.cluster?.cluster_uuid }}</p>
+      <p>version: {{ props.cluster?.nodes.versions }}</p>
+    </n-card>
+    <n-card class="cluster-item-box cluster-nodes-box">
+      <p>{{ $t('manage.nodes') }}: {{ props.cluster?.nodes.count.total }}</p>
+      <p>master: {{ props.cluster?.nodes.count.master }}</p>
+      <p>data: {{ props.cluster?.nodes.count.data }}</p>
+    </n-card>
+    <n-card class="cluster-item-box cluster-shards-box">
+      <p>{{ $t('manage.shards') }}: {{ props.cluster?.indices.shards.total }}</p>
+      <p>primaries: {{ props.cluster?.indices.shards.primaries }}</p>
+      <p>
+        replicas:
+        {{
+          (props.cluster?.indices?.shards?.total || 0) -
+          (props.cluster?.indices.shards?.primaries || 0)
+        }}
+      </p>
+    </n-card>
+    <n-card class="cluster-item-box cluster-indices-box">
+      <p>{{ $t('manage.indices') }}: {{ props.cluster?.indices.count }}</p>
+      <p>docs: {{ props.cluster?.indices.docs.count }}</p>
+      <p>size: {{ prettyBytes(props.cluster?.indices.store.size_in_bytes || 0) }}</p>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import prettyBytes from 'pretty-bytes';
+import { CheckmarkOutline, WarningAlt, MisuseOutline } from '@vicons/carbon';
+import { RawClusterStats } from '../../../store';
+
+const props = defineProps<{ cluster: RawClusterStats | null }>();
+
+const clusterStatusClass = computed(() => {
+  if (!props.cluster) return '';
+  return `cluster-status-color-${props.cluster.status}`;
+});
+const emits = defineEmits(['switch-manage-tab']);
+</script>
+
+<style lang="scss" scoped>
+.manage-state-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-top: 10px;
+
+  .n-card {
+    max-width: 300px;
+  }
+
+  .cluster-item-box p:first-of-type {
+    font-size: 28px;
+    font-weight: bold;
+    margin-block: 0;
+    color: #2478ec;
+  }
+
+  .cluster-cluster-box p:first-of-type {
+    color: #36ad6a;
+
+    span {
+      height: 100%;
+      margin-right: 10px;
+    }
+  }
+
+  .cluster-status-color-green {
+    color: #36ad6a;
+  }
+
+  .cluster-status-color-yellow {
+    color: #f1c40f;
+  }
+
+  .cluster-status-color-red {
+    color: #e74c3c;
+  }
+}
+</style>
diff --git a/src/views/manage/components/node-state.vue b/src/views/manage/components/node-state.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>nodes page</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>