feat：add Cluster overview pages (#1206)

dubbo-admin-ui/src/api/menu.js

@@ -16,7 +16,7 @@
  */
 
 const Menu = [
-  { title: 'homePage', path: '/', icon: 'home' },
+  { title: 'homePage', path: '/home', icon: 'home' },
   { title: 'serviceSearch', path: '/service', icon: 'search' },
   {
     title: 'trafficManagement',

dubbo-admin-ui/src/components/Home.vue

@@ -19,12 +19,144 @@
         <v-layout row wrap>
             <v-flex lg12>
         <Breadcrumb title="homePage" :items="breads"></breadcrumb>
-      </v-flex>
+          </v-flex>
         </v-layout>
+        <v-container fluid grid-list-md>
+    <v-data-iterator
+      :items=clusterData
+      content-tag="v-layout"
+      hide-actions
+      row
+      wrap
+    >
+      <template v-slot:header>
+        <v-toolbar
+          class="mb-2"
+          color="indigo darken-5"
+          dark
+          flat
+        >
+          <v-toolbar-title>ClusterOverview</v-toolbar-title>
+        </v-toolbar>
+      </template>
+      <template v-slot:item="props">
+        <v-flex
+          xs12
+          sm6
+          md4
+          lg4
+        >
+          <v-card>
+            <v-card-title class="subheading font-weight-bold">{{ props.item.name }}</v-card-title>
+
+            <v-divider></v-divider>
+
+            <v-list dense>
+              <v-list-tile>
+                <v-list-tile-content>Number:</v-list-tile-content>
+                <v-list-tile-content class="align-end">{{ props.item.number }}</v-list-tile-content>
+              </v-list-tile>
+            </v-list>
+          </v-card>
+        </v-flex>
+      </template>
+    </v-data-iterator>
+        </v-container>
+        <v-container fluid grid-list-md>
+    <v-data-iterator
+      :items=metaDate
+      content-tag="v-layout"
+      hide-actions
+      row
+      wrap
+    >
+      <template v-slot:header>
+        <v-toolbar
+          class="mb-2"
+          color="indigo darken-5"
+          dark
+          flat
+        >
+          <v-toolbar-title>MetadataOverview</v-toolbar-title>
+        </v-toolbar>
+      </template>
+      <template v-slot:item="props">
+        <v-flex
+          xs12
+          sm6
+          md4
+          lg6
+        >
+          <v-card>
+            <v-card-title class="subheading font-weight-bold">{{ props.item.name }}</v-card-title>
+
+            <v-divider></v-divider>
+            <template v-if="Array.isArray(props.item.value)">
+              <v-list dense>
+              <v-list-tile>
+                <v-list-tile-content>Value:</v-list-tile-content>
+                <v-list-tile-content class="align-end">{{joinArray(props.item.value) }}</v-list-tile-content>
+              </v-list-tile>
+              </v-list>
+            </template>
+            <template v-else>
+              <v-list dense>
+              <v-list-tile>
+                <v-list-tile-content>Value:</v-list-tile-content>
+                <v-list-tile-content class="align-end">{{ props.item.value }}</v-list-tile-content>
+              </v-list-tile>
+              </v-list>
+            </template>
+          </v-card>
+        </v-flex>
+      </template>
+    </v-data-iterator>
+        </v-container>
+        <v-container fluid grid-list-md>
+    <v-data-iterator
+      :items=version
+      content-tag="v-layout"
+      hide-actions
+      row
+      wrap
+    >
+      <template v-slot:header>
+        <v-toolbar
+          class="mb-2"
+          color="indigo darken-5"
+          dark
+          flat
+        >
+          <v-toolbar-title>VersionOverview</v-toolbar-title>
+        </v-toolbar>
+      </template>
+      <template v-slot:item="props">
+        <v-flex
+          xs12
+          sm6
+          md4
+          lg4
+        >
+          <v-card>
+            <v-card-title class="subheading font-weight-bold">{{ props.item.name }}</v-card-title>
+
+            <v-divider></v-divider>
+
+            <v-list dense>
+              <v-list-tile>
+                <v-list-tile-content>Value:</v-list-tile-content>
+                <v-list-tile-content class="align-end">{{ props.item.value }}</v-list-tile-content>
+              </v-list-tile>
+            </v-list>
+          </v-card>
+        </v-flex>
+      </template>
+    </v-data-iterator>
+        </v-container>
     </v-container>
 </template>
 <script>
-import Breadcrumb from '../public/Breadcrumb.vue'
+import Breadcrumb from './public/Breadcrumb.vue'
 export default {
   name: 'ClusterOverview',
   components: { Breadcrumb },
@@ -34,7 +166,41 @@ export default {
         text: 'homePage',
         href: ''
       }
-    ]
-  })
+    ],
+    clusterData:[],
+    version:[],
+    metaDate:[],
+  }),
+  methods:{
+    getCluster () {
+      this.$axios.get('/metrics/cluster').then(response => {
+        console.log(response)
+        this.clusterData =  Object.entries(response.data.data).map(([name, number]) => ({ name, number }));
+        console.log(this.clusterData)
+      })
+    },
+    getVersion () {
+      this.$axios.get('/version').then(response => {
+        console.log(response)
+        this.version =  Object.entries(response.data.data).map(([name, value]) => ({ name, value }));
+        console.log(this.version)
+      })
+    },
+    getMeta () {
+      this.$axios.get('/metrics/metadata').then(response => {
+        console.log(response)
+        this.metaDate =  Object.entries(response.data.data).map(([name, value]) => ({ name, value }));
+        console.log(this.metaDate)
+      })
+    },
+    joinArray(arr) {
+      return arr.join(', ');
+    }
+  },
+  mounted(){
+     this.getCluster();
+     this.getVersion();
+     this.getMeta();
+  }
 }
 </script>

dubbo-admin-ui/src/components/http-common.js

@@ -21,7 +21,7 @@ import router from '@/router'
 import i18n from '@/lang'
 
 const instance = axios.create({
-  // baseURL: '/mock'  // 本地mock接口
+   // baseURL: '/mock'  // 本地mock接口
   baseURL: '/api/dev'
 })
 

dubbo-admin-ui/src/main.js

@@ -32,6 +32,8 @@ import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/title'
 import VueClipboard from 'vue-clipboard2'
 import './mock/mockServer'
+import './mock/mockCluster'
+import './mock/mockVersion'
 
 Vue.use(Vuetify, {
   lang: {

dubbo-admin-ui/src/mock/mockCluster.js

@@ -0,0 +1,37 @@
+
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// 1、引入mockjs
+const Mock = require('mockjs')
+
+// 2、获取 mock.Random 对象
+const random = Mock.Random
+console.log(random) // 简单使用就不操作了，需要操作的可以去看文档
+
+// 3、基本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mock/wiki
+Mock.mock('/mock/metrics/cluster', 'get', {
+  code: 200,
+  message: '成功',
+  data: {
+    all:0,
+    application:0,
+    consumers:0,
+    providers:0,
+    services:0
+  }
+})

dubbo-admin-ui/src/mock/mockServer.js

@@ -24,20 +24,16 @@ const random = Mock.Random
 console.log(random) // 简单使用就不操作了，需要操作的可以去看文档
 
 // 3、基本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mock/wiki
-Mock.mock('/mock/user/list', 'get', {
+Mock.mock('/mock/metrics/metadata', 'get', {
   code: 200,
   message: '成功',
   data: {
     // 生成十个如下格式的数据
-    'list|10': [
-      {
-        'id|+1': 1, // 数字从当前数开始依次 +1
-        'age|18-40': 20, // 年龄为18-40之间的随机数字
-        'sex|1': ['男', '女'], // 性别是数组中随机的一个
-        name: '@cname', // 名字为随机中文名字
-        email: '@email', // 随机邮箱
-        isShow: '@boolean' // 随机获取boolean值
-      }
-    ]
+      versions:[],
+      configCenter:"127.0.0.1:2181",
+      registry:"127.0.0.1:2181",
+      metadataCenter:"127.0.0.1:2181",
+      protocols:[],
+      rules:["DemoService:1.0.0:test.configurators","DemoService4:bb:aa.configurators"]
   }
 })

dubbo-admin-ui/src/mock/mockVersion.js

@@ -0,0 +1,40 @@
+
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// 1、引入mockjs
+const Mock = require('mockjs')
+
+// 2、获取 mock.Random 对象
+const random = Mock.Random
+console.log(random) // 简单使用就不操作了，需要操作的可以去看文档
+
+// 3、基本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mock/wiki
+Mock.mock('/mock/version', 'get', {
+  code: 200,
+  message: '成功',
+  data: {
+    // 生成十个如下格式的数据
+    gitVersion:"dubbo-admin-",
+    gitCommit:"$Format:%H$",
+    gitTreeState:"",
+    buildDate:"1970-01-01T00:00:00Z",
+    goVersion:"go1.20.4",
+    compiler:"gc",
+    platform:"darwin/arm64"
+  }
+})

dubbo-admin-ui/src/router/index.js

@@ -43,6 +43,7 @@ import Region from '@/components/traffic/Region'
 import Retry from '@/components/traffic/Retry'
 import Timeout from '@/components/traffic/Timeout'
 import Weight from '@/components/traffic/Weight'
+import Home from '@/components/Home'
 import Index from '@/Index'
 import Login from '@/Login'
 
@@ -63,17 +64,34 @@ export default new Router({
         {
           path: '/service',
           name: 'ServiceSearch',
-          component: ServiceSearch
+          component: ServiceSearch,
+          meta: {
+            requireLogin: false
+          }
+        },
+        {
+          path: '/home',
+          name: 'Home',
+          component: Home,
+          meta: {
+            requireLogin: false
+          }
         },
         {
           path: '/serviceDetail',
           name: 'ServiceDetail',
-          component: ServiceDetail
+          component: ServiceDetail,
+          meta: {
+            requireLogin: false
+          }
         },
         {
           path: '/testMethod',
           name: 'TestMethod',
-          component: TestMethod
+          component: TestMethod,
+          meta: {
+            requireLogin: false
+          }
         },
         {
           path: '/traffic/routingRule',

dubbo-admin-ui/vue.config.js

@@ -19,7 +19,7 @@ const path = require('path');
 
 module.exports = {
   outputDir: "dist",
-  lintOnSave: "warning",
+  lintOnSave: false,
   assetsDir: 'static',
   publicPath: '/',
   devServer: {