From f8cbcbe0e9fc1442c6c7c0b252366a392a085818 Mon Sep 17 00:00:00 2001
From: ziszat <276136889@qq.com>
Date: Tue, 12 Nov 2024 20:05:10 +0800
Subject: [PATCH 1/3] add: add grafana

---
 .eslintrc.js                      |  1 +
 src/router/index.js               |  6 ++--
 src/views/documentation/index.vue | 57 -------------------------------
 src/views/grafana/index.vue       | 48 ++++++++++++++++++++++++++
 vue.config.js                     |  2 +-
 5 files changed, 53 insertions(+), 61 deletions(-)
 delete mode 100644 src/views/documentation/index.vue
 create mode 100644 src/views/grafana/index.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index c9775054..bd03f8ed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -69,6 +69,7 @@ module.exports = {
       'newIsCap': true,
       'capIsNew': false
     }],
+    'vue/no-unused-components': 'off',
     'new-parens': 2,
     'no-array-constructor': 2,
     'no-caller': 2,
diff --git a/src/router/index.js b/src/router/index.js
index 26cba844..9e5aac54 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -84,13 +84,13 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/documentation',
+    path: '/grafana',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
+        component: () => import('@/views/grafana/index'),
+        name: 'Grafana',
         meta: { title: '算力可视化', icon: 'chart', affix: true }
       }
     ]
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
deleted file mode 100644
index 09f5951b..00000000
--- a/src/views/documentation/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="app-container documentation-container">
-    <a class="document-btn" target="_blank" href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=demo_English_button">Java backend integration</a>
-    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
-    <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
-    <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
-    <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
-    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</a>
-  </div>
-</template>
-
-<script>
-import DropdownMenu from '@/components/Share/DropdownMenu'
-
-export default {
-  name: 'Documentation',
-  components: { DropdownMenu },
-  data() {
-    return {
-      articleList: [
-        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
-        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
-        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
-        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.documentation-container {
-  margin: 50px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .document-btn {
-    flex-shrink: 0;
-    display: block;
-    cursor: pointer;
-    background: black;
-    color: white;
-    height: 60px;
-    padding: 0 16px;
-    margin: 16px;
-    line-height: 60px;
-    font-size: 20px;
-    text-align: center;
-  }
-}
-</style>
diff --git a/src/views/grafana/index.vue b/src/views/grafana/index.vue
new file mode 100644
index 00000000..8c4e07be
--- /dev/null
+++ b/src/views/grafana/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container documentation-container">
+    <iframe src="http://localhost:3030/d/rYdddlPWk/node-exporter-full" frameborder="0" name="popup" class="web" />
+  </div>
+</template>
+
+<script>
+import DropdownMenu from '@/components/Share/DropdownMenu'
+
+export default {
+  name: 'Documentation',
+  components: { DropdownMenu },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.documentation-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: 0px;
+
+  .document-btn {
+    flex-shrink: 0;
+    display: block;
+    cursor: pointer;
+    background: black;
+    color: white;
+    height: 60px;
+    padding: 0 16px;
+    margin: 16px;
+    line-height: 60px;
+    font-size: 20px;
+    text-align: center;
+  }
+
+  .web {
+    display: inline;
+    width: 100%;
+    height: 90vh;
+  }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 33a63483..b51c81ef 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -27,7 +27,7 @@ module.exports = {
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,
   productionSourceMap: false,
   devServer: {
     port: port,

From f061dc90715bab454deeeca7c8cf0ae6a1c65d96 Mon Sep 17 00:00:00 2001
From: ziszat <276136889@qq.com>
Date: Tue, 12 Nov 2024 23:20:26 +0800
Subject: [PATCH 2/3] add table

---
 src/views/dashboard/admin/index.vue | 133 +++++++++++-----------------
 vue.config.js                       |   7 ++
 2 files changed, 60 insertions(+), 80 deletions(-)

diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 8cb557be..451295d0 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,96 +1,69 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
-      </el-col>
-    </el-row>
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="date"
+        label="所属集群"
+        width="180"
+      />
+      <el-table-column
+        prop="name"
+        label="Node 名称"
+        width="180"
+      />
+      <el-table-column
+        prop="address"
+        label="Node IP"
+      />
+      <el-table-column
+        prop="role"
+        label="Role"
+      />
+      <el-table-column
+        prop="status"
+        label="状态"
+      />
+    </el-table>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
 export default {
   name: 'DashboardAdmin',
-  components: {
-    GithubCorner,
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
-  },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      tableData: [] // 初始为空数组，将在 mounted 时获取数据
     }
   },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+    fetchTableData() {
+      fetch('http://localhost:5090/dashboard/nodes', {
+        method: 'Get',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          console.log('looking handsome', data)
+
+          // 假设返回的数据包含节点列表，并转换成表格所需格式
+          this.tableData = data.map(node => ({
+            date: node.cluster, // 假设 cluster 表示集群
+            name: node.name, // 假设 name 表示节点名称
+            address: node.ip, // 假设 ip 表示节点 IP
+            role: node.role, // 假设 role 表示节点角色
+            status: node.status // 假设 status 表示状态
+          }))
+        })
+        .catch(error => console.error('Error fetching table data:', error))
     }
   }
 }
diff --git a/vue.config.js b/vue.config.js
index b51c81ef..7a5f89a4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -36,6 +36,13 @@ module.exports = {
       warnings: false,
       errors: true
     },
+    proxy: {
+      '/grafana': {
+        target: 'http://localhost:3030', // 替换为服务器 B 的域名或 IP 地址
+        changeOrigin: true,
+        pathRewrite: { '^/grafana': '' } // 如果服务器 B 的接口不以 /api 开头，去掉前缀
+      }
+    },
     before: require('./mock/mock-server.js')
   },
   configureWebpack: {

From 5617d4bdab359c5ce8a2e00da365c01f90c0f431 Mon Sep 17 00:00:00 2001
From: handsomewu <562390063@qq.com>
Date: Wed, 13 Nov 2024 14:28:02 +0800
Subject: [PATCH 3/3] update table

---
 src/views/dashboard/admin/index.vue | 69 ++++++++++++++++-------------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 451295d0..e6d85363 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,32 +1,18 @@
 <template>
   <div class="dashboard-editor-container">
-    <el-table
-      :data="tableData"
-      border
-      style="width: 100%"
-    >
-      <el-table-column
-        prop="date"
-        label="所属集群"
-        width="180"
-      />
-      <el-table-column
-        prop="name"
-        label="Node 名称"
-        width="180"
-      />
-      <el-table-column
-        prop="address"
-        label="Node IP"
-      />
-      <el-table-column
-        prop="role"
-        label="Role"
-      />
-      <el-table-column
-        prop="status"
-        label="状态"
-      />
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="date" label="所属集群" width="180" />
+      <el-table-column prop="name" label="Node 名称" width="180" />
+      <el-table-column prop="address" label="Node IP" />
+      <el-table-column prop="role" label="Role" />
+      <el-table-column prop="status" label="状态">
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.status === 'Ready' ? 'success' : 'danger'"
+            disable-transitions
+          >{{ scope.row.status }}</el-tag>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -44,7 +30,7 @@ export default {
   },
   methods: {
     fetchTableData() {
-      fetch('http://localhost:5090/dashboard/nodes', {
+      fetch('http://localhost:5000/dashboard/nodes', {
         method: 'Get',
         headers: {
           'Content-Type': 'application/json'
@@ -52,10 +38,33 @@ export default {
       })
         .then(response => response.json())
         .then(data => {
-          console.log('looking handsome', data)
+          // 转换数据为json
+          const parseClusterData = (clusterString, clusterName) => {
+            const rows = clusterString.trim().split('\n').slice(1)
+            return rows.map(row => {
+              const columns = row.trim().split(/\s{2,}/)
+              return {
+                cluster: clusterName,
+                name: columns[0],
+                status: columns[1],
+                role: columns[2],
+                age: columns[3],
+                version: columns[4],
+                ip: columns[5],
+                externalIp: columns[6] || '<none>',
+                osImage: columns[7],
+                kernelVersion: columns[8],
+                containerRuntime: columns[9]
+              }
+            })
+          }
+          const clusterAData = parseClusterData(data.cluster_a, 'Cluster A')
+          const clusterBData = parseClusterData(data.cluster_b, 'Cluster B')
+          const combinedData = [...clusterAData, ...clusterBData]
+          console.log('looking handsome', combinedData)
 
           // 假设返回的数据包含节点列表，并转换成表格所需格式
-          this.tableData = data.map(node => ({
+          this.tableData = combinedData.map(node => ({
             date: node.cluster, // 假设 cluster 表示集群
             name: node.name, // 假设 name 表示节点名称
             address: node.ip, // 假设 ip 表示节点 IP