diff --git a/ui-vue3/src/api/mock/mockCluster.js b/ui-vue3/src/api/mock/mockCluster.ts
similarity index 80%
rename from ui-vue3/src/api/mock/mockCluster.js
rename to ui-vue3/src/api/mock/mockCluster.ts
index 7a8b57e23..69f064f13 100644
--- a/ui-vue3/src/api/mock/mockCluster.js
+++ b/ui-vue3/src/api/mock/mockCluster.ts
@@ -25,13 +25,6 @@ Mock.mock('/mock/metrics/cluster', 'get', {
         consumers: Mock.mock('@integer(80, 200)'),
         providers: Mock.mock('@integer(80, 200)'),
         services: Mock.mock('@integer(80, 200)'),
-        versions: ["dubbo-golang-3.0.4"],
-        protocols: ["tri"],
-        rules: [],
-        configCenter: "127.0.0.1:2181",
-        registry: "127.0.0.1:2181",
-        metadataCenter: "127.0.0.1:2181",
-        grafana: "127.0.0.1:3000",
-        prometheus: "127.0.0.1:9090"
+
     }
 })
diff --git a/ui-vue3/src/api/mock/mockServer.js b/ui-vue3/src/api/mock/mockServer.ts
similarity index 70%
rename from ui-vue3/src/api/mock/mockServer.js
rename to ui-vue3/src/api/mock/mockServer.ts
index 4ec47683a..1b12d44f1 100644
--- a/ui-vue3/src/api/mock/mockServer.js
+++ b/ui-vue3/src/api/mock/mockServer.ts
@@ -22,11 +22,14 @@ Mock.mock('/mock/metrics/metadata', 'get', {
   code: 200,
   message: '成功',
   data: {
-    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']
+    versions: ["dubbo-golang-3.0.4"],
+    protocols: ["tri"],
+    rules:["DemoService:1.0.0:test.configurators","DemoService4:bb:aa.configurators"],
+    configCenter: "127.0.0.1:2181",
+    registry: "127.0.0.1:2181",
+    metadataCenter: "127.0.0.1:2181",
+    // make sure the X-Frame-Options is forbidden
+    grafana: `http://${window.location.host}/admin/home`,
+    prometheus: "127.0.0.1:9090"
   }
 })
diff --git a/ui-vue3/src/api/mock/mockVersion.js b/ui-vue3/src/api/mock/mockVersion.ts
similarity index 100%
rename from ui-vue3/src/api/mock/mockVersion.js
rename to ui-vue3/src/api/mock/mockVersion.ts
diff --git a/ui-vue3/src/api/service/serverInfo.ts b/ui-vue3/src/api/service/serverInfo.ts
new file mode 100644
index 000000000..15a7fc059
--- /dev/null
+++ b/ui-vue3/src/api/service/serverInfo.ts
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+
+import request from "@/base/http/request";
+
+export const getMetricsMetadata = (params: any):Promise<any> => {
+    return request({
+        url: '/metrics/metadata',
+        method: 'get',
+        params
+    })
+}
diff --git a/ui-vue3/src/main.ts b/ui-vue3/src/main.ts
index 16fec8c0f..774d6f154 100644
--- a/ui-vue3/src/main.ts
+++ b/ui-vue3/src/main.ts
@@ -14,17 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createApp } from 'vue'
-import Antd, { notification } from 'ant-design-vue'
+import {createApp} from 'vue'
+import Antd from 'ant-design-vue'
 
 import router from './router'
 import App from './App.vue'
 import 'ant-design-vue/dist/reset.css'
-import devTool from '@/utils/DevToolUtil'
-import { i18n } from '@/base/i18n'
-import './api/mock/mockServer.js'
-import './api/mock/mockCluster.js'
-import './api/mock/mockVersion.js'
+import {i18n} from '@/base/i18n'
+import './api/mock/mockServer'
+import './api/mock/mockCluster'
+import './api/mock/mockVersion'
 
 import Vue3ColorPicker from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
diff --git a/ui-vue3/src/views/home/index.vue b/ui-vue3/src/views/home/index.vue
index 5d5ef5804..a2e36dab2 100644
--- a/ui-vue3/src/views/home/index.vue
+++ b/ui-vue3/src/views/home/index.vue
@@ -20,7 +20,7 @@
     <a-flex wrap="wrap" gap="small" :vertical="false" justify="space-between" align="center">
       <a-card
           class="statistic-card"
-          v-for="(v, k, i) in clusterInfo.report">
+          v-for="(v, k) in clusterInfo.report">
         <a-flex gap="middle" :vertical="false" justify="space-between" align="center">
           <a-statistic :value="v.value" class="statistic">
             <template #prefix>
@@ -40,20 +40,20 @@
                     layout="horizontal">
 
       <a-descriptions-item label="versions">
-        <a-tag :color="PRIMARY_COLOR" v-for="v in clusterInfo.info.versions">{{ v }}</a-tag>
+        <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.versions">{{ v }}</a-tag>
       </a-descriptions-item>
       <a-descriptions-item label="protocols">
-        <a-tag :color="PRIMARY_COLOR" v-for="v in clusterInfo.info.protocols">{{ v }}</a-tag>
+        <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.protocols">{{ v }}</a-tag>
       </a-descriptions-item>
-      <a-descriptions-item label="configCenter">{{ clusterInfo.info.configCenter }}</a-descriptions-item>
-      <a-descriptions-item label="registry">{{ clusterInfo.info.registry }}</a-descriptions-item>
-      <a-descriptions-item label="metadataCenter">{{ clusterInfo.info.metadataCenter }}</a-descriptions-item>
-      <a-descriptions-item label="grafana">{{ clusterInfo.info.grafana }}</a-descriptions-item>
-      <a-descriptions-item label="prometheus">{{ clusterInfo.info.prometheus }}</a-descriptions-item>
+      <a-descriptions-item label="configCenter">{{ metricsMetadata.info.configCenter }}</a-descriptions-item>
+      <a-descriptions-item label="registry">{{ metricsMetadata.info.registry }}</a-descriptions-item>
+      <a-descriptions-item label="metadataCenter">{{ metricsMetadata.info.metadataCenter }}</a-descriptions-item>
+      <a-descriptions-item label="grafana">{{ metricsMetadata.info.grafana }}</a-descriptions-item>
+      <a-descriptions-item label="prometheus">{{ metricsMetadata.info.prometheus }}</a-descriptions-item>
+      <a-descriptions-item label="Remark">empty</a-descriptions-item>
       <a-descriptions-item label="rules" :span="4">
-        <a-tag :color="PRIMARY_COLOR" v-for="v in clusterInfo.info.rules">{{ v }}</a-tag>
+        <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.rules">{{ v }}</a-tag>
       </a-descriptions-item>
-      <a-descriptions-item label="Remark">empty</a-descriptions-item>
     </a-descriptions>
     <div id="report_container"></div>
 
@@ -65,6 +65,7 @@ import {Icon} from '@iconify/vue'
 import {PRIMARY_COLOR} from '@/base/constants'
 import {onMounted, reactive} from 'vue'
 import {getClusterInfo} from '@/api/service/clusterInfo'
+import {getMetricsMetadata} from '@/api/service/serverInfo'
 import {useRoute} from "vue-router";
 import {Chart} from '@antv/g2';
 
@@ -77,29 +78,34 @@ let clusterInfo = reactive({
   report: <{ [key: string]: { value: string, icon: string } }>{}
 })
 
+let metricsMetadata = reactive({
+  info: <{ [key: string]: string }>{}
+})
+
 onMounted(async () => {
-  let {data} = await getClusterInfo({})
-  clusterInfo.info = data
+  let clusterData = (await getClusterInfo({})).data
+  metricsMetadata.info = <{ [key: string]: string }>(await getMetricsMetadata({})).data
+  clusterInfo.info = <{ [key: string]: string }>clusterData
   clusterInfo.report = {
     all: {
       icon: 'ic:outline-all-inclusive',
-      value: data.all
+      value: clusterInfo.info.all
     },
     application: {
       icon: 'cil:applications-settings',
-      value: data.application
+      value: clusterInfo.info.application
     },
     services: {
       icon: 'carbon:microservices-1',
-      value: data.services
+      value: clusterInfo.info.services
     },
     providers: {
       icon: 'arcticons:newsprovider',
-      value: data.providers
+      value: clusterInfo.info.providers
     },
     consumers: {
       icon: 'iconoir:consumable',
-      value: data.consumers
+      value: clusterInfo.info.consumers
     }
   };
 
@@ -112,11 +118,11 @@ onMounted(async () => {
   chart
       .interval()
       .data([
-        {name: 'all', value: data.all},
-        {name: 'application', value: data.application},
-        {name: 'services', value: data.services},
-        {name: 'providers', value: data.providers},
-        {name: 'consumers', value: data.consumers},
+        {name: 'all', value: clusterInfo.info.all},
+        {name: 'application', value: clusterInfo.info.application},
+        {name: 'services', value: clusterInfo.info.services},
+        {name: 'providers', value: clusterInfo.info.providers},
+        {name: 'consumers', value: clusterInfo.info.consumers},
       ])
       .encode('x', 'name')
       .encode('y', 'value')
diff --git a/ui-vue3/src/views/metrics/index.vue b/ui-vue3/src/views/metrics/index.vue
index 72b402ab0..ef13fc1d3 100644
--- a/ui-vue3/src/views/metrics/index.vue
+++ b/ui-vue3/src/views/metrics/index.vue
@@ -17,13 +17,25 @@
 <template>
   <div class="__container_home_index">
     <h1>{{ $t(routeName) }}</h1>
+    <a-flex v-if="showIframe">
+      <iframe :src="metricsMetadata.grafana" width="1350" height="700" frameborder="0"></iframe>
+    </a-flex>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 
 import {useRoute} from "vue-router";
+import {onMounted, reactive, ref} from "vue";
+import {getMetricsMetadata} from "@/api/service/serverInfo";
+let metricsMetadata = reactive(<{ [key: string]: string }>{})
+let showIframe = ref(false)
+
 const  routeName = <string>useRoute().name
+
+onMounted(async () => {
+  metricsMetadata = <{ [key: string]: string }>(await getMetricsMetadata({})).data
+  showIframe.value = true
+})
 </script>
 <style lang="less" scoped></style>
diff --git a/ui-vue3/vite.config.ts b/ui-vue3/vite.config.ts
index 6c449e1f5..9f66e50e8 100644
--- a/ui-vue3/vite.config.ts
+++ b/ui-vue3/vite.config.ts
@@ -15,26 +15,37 @@
  * limitations under the License.
  */
 
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import {fileURLToPath, URL} from 'node:url'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/admin',
-  build: {
-    outDir: './dist/admin',
-  },
-  plugins: [
-    vue(),
-    vueJsx(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+    base: '/admin',
+    build: {
+        outDir: './dist/admin',
     },
-    // ignore suffix
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
-  },
+    server: {
+        proxy: {
+            // with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
+                '/api': {
+                target: 'http://jsonplaceholder.typicode.com',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/api/, ''),
+            }
+        },
+    },
+    plugins: [
+        vue(),
+        vueJsx(),
+    ],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        },
+        // ignore suffix
+        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+
 })