From babcdd6f15ca62f7d3def0731c929e04c9f7a366 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Thu, 18 Jul 2024 01:50:45 +0800
Subject: [PATCH] [wip] node page

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 src/store/connectionStore.ts               | 67 ++++++++++++++++++++++
 src/views/manage/components/node-state.vue | 36 +++++++++++-
 2 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index a20cf64..ad47028 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -2,6 +2,20 @@ import { defineStore } from 'pinia';
 import { pureObject } from '../common';
 import { loadHttpClient, storeApi } from '../datasources';
 
+export type SearchNode = {
+  ip: string;
+  name: string;
+  roles: Array<string>;
+  master: string;
+  heap: {
+    percent: string;
+  };
+  ram: {
+    percent: string;
+  };
+  cpu: string;
+};
+
 export type RawClusterStats = {
   cluster_name: string;
   cluster_uuid: string;
@@ -12,6 +26,7 @@ export type RawClusterStats = {
       master: number;
       data: number;
     };
+    instances: Array<SearchNode>;
     versions: Array<string>;
   };
   indices: {
@@ -135,6 +150,58 @@ export const useConnectionStore = defineStore('connectionStore', {
       })) as ConnectionIndex[];
       this.established = { ...connection, indices };
     },
+    async fetchNodes() {
+      if (!this.established) return;
+      const client = loadHttpClient(this.established as Connection);
+      try {
+        const data = await client.get('/_cat/nodes', 'format=json');
+        this.established.rawClusterState!.nodes.instances = data.map(
+          (node: {
+            ip: string;
+            name: string;
+            'node.role': string;
+            master: string;
+            'heap.percent': string;
+            'ram.percent': string;
+            cpu: string;
+          }) => ({
+            ip: node.ip,
+            name: node.name,
+            roles: node['node.role']
+              .split('')
+              .map((char: string) => {
+                switch (char) {
+                  case 'd':
+                    return 'data';
+                  case 'i':
+                    return 'ingest';
+                  case 'm':
+                    return 'master';
+                  case 'l':
+                    return 'ml';
+                  case 'r':
+                    return 'remote_cluster_client';
+                  case 't':
+                    return 'transform';
+                  default:
+                    return '';
+                }
+              })
+              .filter((role: string) => role !== ''),
+            master: node.master,
+            heap: {
+              percent: node['heap.percent'],
+            },
+            ram: {
+              percent: node['ram.percent'],
+            },
+            cpu: node.cpu,
+          }),
+        );
+      } catch (err) {
+        console.error('failed to fetch nodes', err);
+      }
+    },
     async fetchIndices() {
       if (!this.established) throw new Error('no connection established');
       const client = loadHttpClient(this.established as Connection);
diff --git a/src/views/manage/components/node-state.vue b/src/views/manage/components/node-state.vue
index 48d8312..6180596 100644
--- a/src/views/manage/components/node-state.vue
+++ b/src/views/manage/components/node-state.vue
@@ -1,7 +1,37 @@
 <template>
-  <div>nodes page</div>
+  <div class="node-list-container">
+    <n-card
+      class="node-item"
+      hoverable
+      v-for="node in established?.rawClusterState?.nodes.instances"
+      :key="node.name"
+      :title="node.name"
+    >
+    </n-card>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useConnectionStore } from '../../../store';
+import { storeToRefs } from 'pinia';
 
-<style scoped></style>
+const connectionStore = useConnectionStore();
+const { fetchNodes } = connectionStore;
+const { established } = storeToRefs(connectionStore);
+
+fetchNodes();
+</script>
+
+<style scoped lang="scss">
+.node-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 15px;
+  margin-top: 10px;
+  cursor: pointer;
+  .node-item {
+    max-width: 200px;
+  }
+}
+</style>