diff --git a/packages/gui/src/components/chart/openapi/AreaChart.vue b/packages/gui/src/components/chart/openapi/AreaChart.vue
deleted file mode 100644
index f85aa79..0000000
--- a/packages/gui/src/components/chart/openapi/AreaChart.vue
+++ /dev/null
@@ -1,300 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="areaChart"
-      class="full height-240"
-    />
-  </div>
-</template>
-
-<script>
-import { getTimeline, getTimeLabel, getTimeUnit } from "@/utils/util";
-import { getServiceWhere } from "@/services/clickhouse";
-export default {
-  name: "AreaChart",
-  props: {
-    pid: {
-      type: String,
-      default: ""
-    },
-
-    apply: {
-      type: String,
-      default: ""
-    },
-
-    params: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-
-    where: {
-      type: String,
-      default: ""
-    },
-
-    date: {
-      type: String,
-      default: ""
-    },
-  },
-
-  i18n: require("@/i18n"),
-  data() {
-    return {
-      name: "",
-      type: "",
-      areaData: {
-        day: "",
-        success: [],
-        failed: [],
-        xaxis: [],
-      },
-    };
-  },
-
-  watch: {
-    where: {
-      handler() {
-        this.loadData();
-      },
-
-      deep: true,
-    },
-  },
-
-  mounted() {
-    this.loadData();
-  },
-
-  methods: {
-    renderChart() {
-      let interval = getTimeUnit(this.date);
-      let dom = this.$refs.areaChart;
-      this.$echarts.dispose(dom);
-      let myChart = this.$echarts.init(dom);
-      let option = {
-        title: {},
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
-            },
-          },
-        },
-
-        color: ["#8bd4a1", "#fb9690"],
-        grid: {
-          top: "0",
-          left: "0px",
-          right: "0px",
-          bottom: "0px",
-          containLabel: true,
-        },
-
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            // data: this.areaData.xaxis,
-            nameGap: 30,
-            minorSplitLine: {
-              show: true,
-            },
-
-            axisLabel: {
-              margin: 0,
-              backgroundColor: "rgba(240,240,240,0.7)",
-              padding: [2, 3, 2, 3],
-              textStyle: {
-                color: "#6a7985",
-              },
-
-              inside: true,
-              borderRadius: [3,3,0,0],
-              minInterval: 20,
-            },
-
-            axisTick: {
-              show: false,
-            },
-
-            axisLine: {
-              show: false,
-            },
-
-            z: 10,
-          },
-        ],
-
-        yAxis: {
-          axisLine: {
-            show: false,
-          },
-
-          axisTick: {
-            show: false,
-          },
-
-          z: 10,
-          splitLine: {
-            show: false,
-          },
-
-          minInterval: 1,
-          axisLabel: {
-            margin: 0,
-            formatter: "{value} Req/"+interval,
-            showMinLabel: false,
-            showMaxLabel: false,
-            inside: true,
-            backgroundColor: "rgba(240,240,240,0.7)",
-            padding: [2, 3, 2, 3],
-            borderRadius: [0,3,3,0],
-            textStyle: {
-              color: "#6a7985",
-            },
-
-            textStyle: {
-              color: "#999",
-            },
-          },
-        },
-
-        series: [
-          {
-            name: "Success",
-            type: "line",
-            stack: "Total",
-            areaStyle: {},
-            emphasis: {
-              focus: "series",
-            },
-
-            lineStyle: {
-              width: 0,
-            },
-
-            showSymbol: false,
-            data: this.areaData.success,
-          },
-          {
-            name: "Failed",
-            type: "line",
-            stack: "Total",
-            areaStyle: {},
-            emphasis: {
-              focus: "series",
-            },
-
-            lineStyle: {
-              width: 0,
-            },
-
-            showSymbol: false,
-            data: this.areaData.failed,
-          },
-        ],
-      };
-      myChart.setOption(option, {
-        lazyUpdate: true,
-      });
-      myChart.hideLoading();
-    },
-
-    loadData() {
-      let dom = this.$refs.areaChart;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      let interval = getTimeline(this.date);
-      let pidFilter = "";
-      if (this.pid) {
-        if (this.apply == "openapi") {
-          pidFilter += ` AND x_parameters.aid = '${this.pid}'`;
-        } else if (this.apply == "project") {
-          pidFilter += ` AND x_parameters.pid = '${this.pid}'`;
-        } else if (this.apply == "mesh") {
-          pidFilter += ` AND meshName = '${this.params.name}'`;
-        } else if (this.apply == "service") {
-          pidFilter += getServiceWhere(
-            "and",
-            this.params.name,
-            this.params.namespace,
-            this.params.domain,
-          );
-        }
-      }
-      let SQL = `select count() as count ,count(CASE WHEN res.status<'400' THEN 1 END) as succss_count ,count(CASE WHEN res.status>='400' THEN 1 END) as error_count ,${interval} as min from log where 1=1 AND bondType != 'outbound' ${this.where} ${pidFilter} group by min order by min;`;
-      this.categories = [];
-      this.links = [];
-      this.$request(this.$REST.CLICKHOUSE.QUERY(SQL), this.$METHOD.GET)
-        .then((res) => {
-          this.areaData = {
-            day: "",
-            success: [],
-            failed: [],
-            xaxis: [],
-          };
-          let nodes = res.data.split("\n");
-          let index = 0;
-          nodes.map((nodeStr) => {
-            let node = nodeStr.split("\t");
-            index++;
-            if (node[3]) {
-              let dateAry = new Date(node[3]);
-              let _ts = dateAry.getTime();
-              let xaxiVal = getTimeLabel(_ts, this.date);
-              this.areaData.success.push([xaxiVal,node[1]]);
-              this.areaData.failed.push([xaxiVal,node[2]]);
-              this.areaData.xaxis.push(xaxiVal);
-              if (index == 1) {
-                this.areaData.day = xaxiVal;
-              } else if (
-                index + 1 == nodes.length &&
-                this.areaData.day != xaxiVal
-              ) {
-                this.areaData.day += " ~ " + xaxiVal;
-              }
-            }
-            return nodeStr;
-          });
-          if (this.areaData.success.length == 0) {
-            this.areaData.success.push(0);
-          }
-          if (this.areaData.failed.length == 0) {
-            this.areaData.failed.push(0);
-          }
-          if (this.areaData.xaxis.length == 0) {
-            this.areaData.xaxis.push(
-              getTimeLabel(new Date().getTime(), this.date),
-            );
-          }
-          this.renderChart();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
diff --git a/packages/gui/src/components/chart/openapi/BpsChart.vue b/packages/gui/src/components/chart/openapi/BpsChart.vue
deleted file mode 100644
index 77a8d5d..0000000
--- a/packages/gui/src/components/chart/openapi/BpsChart.vue
+++ /dev/null
@@ -1,301 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="bpsChart"
-      class="full height-240"
-    />
-  </div>
-</template>
-
-<script>
-import { getTimeline, getTimeLabel } from "@/utils/util";
-import { getServiceWhere } from "@/services/clickhouse";
-export default {
-  name: "BpsChart",
-  props: {
-    pid: {
-      type: String,
-      default: ""
-    },
-
-    apply: {
-      type: String,
-      default: ""
-    },
-
-    params: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-
-    where: {
-      type: String,
-      default: ""
-    },
-
-    date: {
-      type: String,
-      default: ""
-    },
-  },
-
-  i18n: require("@/i18n"),
-  data() {
-    return {
-      name: "",
-      type: "",
-      maxCnt: 0,
-      unit: "B",
-      bpsData: {
-        day: "",
-        success: [],
-        failed: [],
-        xaxis: [],
-      },
-    };
-  },
-
-  watch: {
-    where: {
-      handler() {
-        this.loadData();
-      },
-
-      deep: true,
-    },
-  },
-
-  mounted() {
-    this.loadData();
-  },
-
-  methods: {
-    renderChart() {
-      let dom = this.$refs.bpsChart;
-      this.$echarts.dispose(dom);
-      let myChart = this.$echarts.init(dom);
-
-      let option = {
-        title: {},
-        tooltip: {
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
-            },
-          },
-        },
-
-        color: ["#8bd4a1"],
-        legend: {
-          data: ["Success"],
-          bottom: 0,
-        },
-
-        grid: {
-          top: "0px",
-          left: "0px",
-          right: "0px",
-          bottom: "0px",
-          containLabel: true,
-        },
-
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            // data: this.bpsData.xaxis,
-            nameGap: 30,
-            axisLabel: {
-              backgroundColor: "rgba(240,240,240,0.7)",
-              padding: [2, 3, 2, 3],
-              textStyle: {
-                color: "#6a7985",
-              },
-
-              inside: true,
-              borderRadius: 2,
-              minInterval: 20,
-            },
-
-            axisTick: {
-              show: false,
-            },
-
-            axisLine: {
-              show: false,
-            },
-
-            z: 10,
-          },
-        ],
-
-        yAxis: {
-          axisLine: {
-            show: false,
-          },
-
-          axisTick: {
-            show: false,
-          },
-
-          z: 10,
-          splitLine: {
-            show: false,
-          },
-
-          minInterval: 1,
-          axisLabel: {
-            margin: 0,
-            showMinLabel: false,
-            showMaxLabel: false,
-            inside: true,
-            backgroundColor: "rgba(240,240,240,0.7)",
-            padding: [2, 3, 2, 3],
-            textStyle: {
-              color: "#6a7985",
-            },
-
-            textStyle: {
-              color: "#999",
-            },
-
-            formatter: "{value} " + this.unit,
-          },
-        },
-
-        series: [
-          {
-            type: "line",
-            stack: "Total",
-            areaStyle: {},
-            emphasis: {
-              focus: "series",
-            },
-
-            lineStyle: {
-              width: 0,
-            },
-
-            data: this.bpsData.success,
-          },
-        ],
-      };
-      myChart.setOption(option, {
-        lazyUpdate: true,
-      });
-      myChart.hideLoading();
-    },
-
-    loadData() {
-      let dom = this.$refs.bpsChart;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      let interval = getTimeline(this.date);
-      let pidFilter = "";
-      if (this.pid) {
-        if (this.apply == "openapi") {
-          pidFilter += ` AND x_parameters.aid = '${this.pid}'`;
-        } else if (this.apply == "project") {
-          pidFilter += ` AND x_parameters.pid = '${this.pid}'`;
-        } else if (this.apply == "mesh") {
-          pidFilter += ` AND meshName = '${this.params.name}'`;
-        } else if (this.apply == "service") {
-          pidFilter += getServiceWhere(
-            "and",
-            this.params.name,
-            this.params.namespace,
-            this.params.domain,
-          );
-        }
-      } else {
-        pidFilter += ` AND timestamp > subtractWeeks(now(),1)`;
-      }
-      let SQL = `select sum(reqSize+resSize) as bps,${interval} as time from log where 1=1 AND bondType != 'outbound' ${this.where} ${pidFilter} group by time order by time;`;
-      this.categories = [];
-      this.links = [];
-      this.maxCnt = 0;
-      this.$request(this.$REST.CLICKHOUSE.QUERY(SQL), this.$METHOD.GET)
-        .then((res) => {
-          this.bpsData = {
-            day: "",
-            success: [],
-            xaxis: [],
-          };
-          let nodes = res.data.split("\n");
-          let index = 0;
-          nodes.map((nodeStr) => {
-            let node = nodeStr.split("\t");
-            index++;
-            if (node[1]) {
-              let dateAry = new Date(node[1]);
-              let _ts = dateAry.getTime();
-              this.maxCnt = node[0]*1 > this.maxCnt ? node[0]*1 : this.maxCnt;
-              let xaxiVal = getTimeLabel(_ts, this.date);
-              this.bpsData.success.push([xaxiVal,node[0]*1]);
-              this.bpsData.xaxis.push(xaxiVal);
-              if (index == 1) {
-                this.bpsData.day = xaxiVal;
-              } else if (
-                index + 1 == nodes.length &&
-                this.bpsData.day != xaxiVal
-              ) {
-                this.bpsData.day += " ~ " + xaxiVal;
-              }
-            }
-            return nodeStr;
-          });
-          if (this.bpsData.success.length == 0) {
-            this.bpsData.success.push(0);
-          } else {
-            if(this.maxCnt>(1024 * 1024 * 1024)){
-              this.bpsData.success.forEach((item,index)=>{
-                this.bpsData.success[index] = item/(1024 * 1024 * 1024);
-              })
-              this.unit = "GB";
-            } else if(this.maxCnt>(1024 * 1024)){
-              this.bpsData.success.forEach((item,index)=>{
-                this.bpsData.success[index] = item/(1024 * 1024);
-              })
-              this.unit = "MB";
-            } else if(this.maxCnt>1024){
-              this.bpsData.success.forEach((item,index)=>{
-                this.bpsData.success[index] = item/1024;
-              })
-              this.unit = "KB";
-            } else {
-              this.unit = "B";
-            }
-          }
-          if (this.bpsData.xaxis.length == 0) {
-            this.bpsData.xaxis.push(
-              getTimeLabel(new Date().getTime(), this.date),
-            );
-          }
-          this.renderChart();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
diff --git a/packages/gui/src/components/chart/openapi/DelayChart.vue b/packages/gui/src/components/chart/openapi/DelayChart.vue
deleted file mode 100644
index b45a14b..0000000
--- a/packages/gui/src/components/chart/openapi/DelayChart.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <div :title="$t('Latency')">
-    <div
-      ref="delayChart"
-      class="full height-240"
-    />
-  </div>
-</template>
-
-<script>
-import { getServiceWhere } from "@/services/clickhouse";
-export default {
-  name: "DelayChart",
-  props: {
-    pid: {
-      type: String,
-      default: ""
-    },
-
-    apply: {
-      type: String,
-      default: ""
-    },
-
-    params: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-
-    where: {
-      type: String,
-      default: ""
-    },
-  },
-
-  i18n: require("@/i18n"),
-	
-  data() {
-    return {
-      name: "",
-      type: "",
-      latency: [],
-      maxCnt: 0,
-      delayData: {
-        data: [],
-        xaxis: [],
-      },
-    };
-  },
-
-  watch: {
-    where: {
-      handler() {
-        this.loadData();
-      },
-
-      deep: true,
-    },
-  },
-
-  mounted() {
-    this.loadData();
-  },
-
-  methods: {
-    renderChart() {
-      let dom = this.$refs.delayChart;
-      this.$echarts.dispose(dom);
-      let myChart = this.$echarts.init(dom);
-
-      let option = {
-        title: {},
-        xAxis: {
-          data: this.delayData.xaxis,
-          axisLabel: {
-            backgroundColor: "rgba(240,240,240,0.7)",
-            padding: [2, 3, 2, 3],
-            textStyle: {
-              color: "#6a7985",
-            },
-
-            inside: true,
-            borderRadius: 2,
-            minInterval: 20,
-          },
-
-          axisTick: {
-            show: false,
-          },
-
-          axisLine: {
-            show: false,
-          },
-
-          z: 10,
-        },
-
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
-            },
-          },
-        },
-
-        grid: {
-          top: "0px",
-          right: "10px",
-          left: "30px",
-          bottom: "0px",
-        },
-
-        yAxis: {
-          splitLine: {
-            show: false,
-          },
-
-          axisTick: {
-            show: false,
-          },
-
-          axisLine: {
-            show: false,
-          },
-
-          axisLabel: {
-            showMinLabel: false,
-            showMaxLabel: false,
-            inside: true,
-            margin: -30,
-            backgroundColor: "rgba(240,240,240,0.7)",
-            padding: [2, 3, 2, 3],
-            textStyle: {
-              color: "#6a7985",
-            },
-
-            formatter: "{value} "+(this.maxCnt>1000?'k':''),
-          },
-
-          z: 10,
-        },
-
-        dataZoom: [
-          {
-            type: "inside",
-          },
-        ],
-
-        series: [
-          {
-            type: "bar",
-            showBackground: true,
-            itemStyle: {
-              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#73bdef" },
-                { offset: 0.5, color: "#73bdef" },
-                { offset: 1, color: "#73bdef" },
-              ]),
-            },
-
-            emphasis: {
-              itemStyle: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#73bdef" },
-                  { offset: 0.7, color: "#73bdef" },
-                  { offset: 1, color: "#73bdef" },
-                ]),
-              },
-            },
-
-            data: this.delayData.data,
-          },
-        ],
-      };
-
-      // Enable data zoom when user click bar.
-      let zoomSize = 6;
-      myChart.on("click", function (params) {
-        myChart.dispatchAction({
-          type: "dataZoom",
-          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
-          endValue:
-            dataAxis[
-              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
-            ],
-        });
-      });
-
-      myChart.setOption(option, {
-        lazyUpdate: true,
-      });
-      myChart.hideLoading();
-    },
-
-    loadData() {
-      let dom = this.$refs.delayChart;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      let pidFilter = "";
-      if (this.pid) {
-        if (this.apply == "openapi") {
-          pidFilter += ` AND x_parameters.aid = '${this.pid}'`;
-        } else if (this.apply == "project") {
-          pidFilter += ` AND x_parameters.pid = '${this.pid}'`;
-        } else if (this.apply == "mesh") {
-          pidFilter += ` AND meshName = '${this.params.name}'`;
-        } else if (this.apply == "service") {
-          pidFilter += getServiceWhere(
-            "and",
-            this.params.name,
-            this.params.namespace,
-            this.params.domain,
-          );
-        }
-      }
-      let SQL = `select (ceil((resTime - reqTime)/10)) as latency ,count() as count from log where resTime > 0 and (resTime - reqTime) > 0 AND bondType != 'outbound' ${this.where} ${pidFilter} group by latency order by latency;`;
-      this.categories = [];
-      this.maxCnt = 0;
-      this.links = [];
-      this.$request(this.$REST.CLICKHOUSE.QUERY(SQL), this.$METHOD.GET)
-        .then((res) => {
-          this.delayData = {
-            data: [],
-            xaxis: [],
-          };
-          let nodes = res.data.split("\n");
-          nodes.map((nodeStr) => {
-            let node = nodeStr.split("\t");
-            if (node[1]) {
-              this.maxCnt = node[1]*1 > this.maxCnt ? node[1]*1 : this.maxCnt;
-              this.delayData.data.push(node[1]*1);
-              this.delayData.xaxis.push(node[0] * 10 + "ms");
-            }
-            return nodeStr;
-          });
-          if (this.delayData.data.length == 0) {
-            this.delayData.data.push(0);
-          } else {
-            if(this.maxCnt>1000){
-              this.delayData.data.forEach((item,index)=>{
-                this.delayData.data[index] = item/1000;
-              })
-            }
-          }
-          if (this.delayData.xaxis.length == 0) {
-            this.delayData.xaxis.push("0ms");
-          }
-          this.renderChart();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
diff --git a/packages/gui/src/components/chart/openapi/McsTopologyChart.vue b/packages/gui/src/components/chart/openapi/McsTopologyChart.vue
deleted file mode 100644
index 9fe2e9b..0000000
--- a/packages/gui/src/components/chart/openapi/McsTopologyChart.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<template>
-  <div class="Echarts relative">
-    <a-skeleton
-      v-show="loading"
-      avatar
-      active
-      :paragraph="{ rows: 6 }"
-      style="padding: 100px 50px"
-    />
-    <a-result
-      v-if="!loading && state == 0"
-      class="relative result"
-      style="margin-bottom: 100px"
-      :title="$t('No data')"
-      :sub-title="$t('Check other time periods.')"
-    >
-      <template #icon>
-        <img
-          src="../../../assets/img/empty.svg"
-          style="width: 300px"
-        >
-      </template>
-    </a-result>
-    <div
-      v-show="!loading && state > 0"
-      ref="main"
-      class="topology-main"
-      :style="height ? 'height:' + height : ''"
-    />
-  </div>
-</template>
-
-<script>
-import _ from "lodash";
-import { Empty } from "ant-design-vue";
-export default {
-  name: "McsTopologyChart",
-  i18n: require("@/i18n"),
-  components: { },
-  props: {
-    where: {
-      type: String,
-      default: ""
-    },
-
-    height: {
-      type: String,
-      default: "",
-    },
-
-    categories: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-		
-    nodes: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-
-    state: {
-      type: Number,
-      default: 0
-    },
-
-    loading: {
-      type: Boolean
-    },
-
-    links: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-  },
-
-  data() {
-    return {
-      isMounted: false,
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
-    };
-  },
-
-  watch: {
-    where: {
-      handler() {
-        this.loadData();
-      },
-
-      deep: true,
-    },
-
-    nodes: {
-      handler() {
-        if (this.isMounted) {
-          setTimeout(() => {
-            this.renderEcharts();
-          }, 100);
-        }
-      },
-
-      deep: true,
-    },
-  },
-
-  mounted() {
-    this.isMounted = true;
-    let dom = this.$refs.main;
-    let myChart = this.$echarts.init(dom);
-    myChart.showLoading();
-    this.renderEcharts();
-    myChart.on("click", "series.graph", (params) => {
-      if (params.data.name) {
-        this.$emit("destChange", {
-          name: params.data.name,
-          type: params.data.type,
-        });
-      }
-    });
-  },
-
-  methods: {
-    loadData() {
-      let dom = this.$refs.main;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      this.renderEcharts();
-    },
-
-    changeLayout(layout) {
-      this.layout = layout;
-      let dom = this.$refs.main;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      this.renderEcharts();
-    },
-
-    renderEcharts() {
-      let dom = this.$refs.main;
-      let myChart = this.$echarts.init(dom);
-      myChart.hideLoading();
-      let _data = _.cloneDeep(this.nodes);
-      let legends = this.categories.splice(0,5);
-      let option = {
-        title: {
-          text: "",
-          subtext: "",
-          top: "bottom",
-          left: "right",
-        },
-
-        tooltip: {
-          triggerOn: "mousemove|click",
-        },
-
-        legend: [
-          {
-            type: "scroll",
-            orient: "vertical",
-            itemHeight: 15,
-            itemWidth: 15,
-            top: "10px",
-            right: "20px",
-            // selectedMode: 'single',
-            data: legends,
-
-            formatter: function (name) {
-              return name.length > 18 ? name.substr(0, 18) + "..." : name;
-            },
-          },
-          {
-            type: "scroll",
-            orient: "vertical",
-            itemHeight: 15,
-            itemWidth: 15,
-            top: "10px",
-            right: "140px",
-            // selectedMode: 'single',
-            data: this.categories,
-
-            formatter: function (name) {
-              return name.length > 18 ? name.substr(0, 18) + "..." : name;
-            },
-          },
-        ],
-
-        animationDuration: 1500,
-        animationEasingUpdate: "quinticInOut",
-        series: [
-          {
-            name: "Les Miserables",
-            type: "graph",
-            layout: 'none',
-            data: _data,
-            circular: {
-              rotateLabel: false,
-            },
-
-            force: {
-              initLayout: "circular",
-              repulsion: 300,
-              gravity: "0.1",
-              edgeLength: [10, 300],
-            },
-
-            links: this.links,
-            categories: legends.concat(this.categories),
-            roam: true,
-            focusNodeAdjacency: true,
-            edgeSymbol: ["circle", "arrow"],
-            draggabled: true,
-            label: {
-              position: "right",
-              formatter: "{b}",
-            },
-
-            itemStyle: {
-              normal: {
-                borderColor: "#fff",
-                borderWidth: 1,
-                shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.3)",
-              },
-            },
-
-            tooltip: {
-              formatter: function (params) {
-                return params.data && params.data.name || params.name;
-              },
-            },
-
-            lineStyle: {
-              type: "solid",
-              color: "source",
-              // curveness: 0.3,
-            },
-
-            emphasis: {
-              focus: "adjacency",
-              lineStyle: {
-                opacity: 1,
-                width: 10,
-              },
-            },
-          },
-        ],
-      };
-
-      myChart.setOption(option, {
-        lazyUpdate: true,
-      });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-  a {
-    color: #42b983;
-  }
-
-  .iconfont-btn-group {
-    background-color: #fff;
-    border: 0px solid #00a2e6;
-    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    position: absolute;
-    left: 20px;
-    top: 20px;
-    z-index: 1000;
-  }
-  .iconfont-btn-group :not(:first-child) {
-    border-left: 1px dashed #ddd;
-  }
-  .iconfont-btn {
-    padding: 2px 10px 0 10px;
-    line-height: 36px;
-    color: #bbbbbb;
-    font-size: 24px;
-    cursor: pointer;
-    text-align: center;
-  }
-  .iconfont-btn.active {
-    color: #00a2e6;
-  }
-  .result {
-    top: 80px;
-  }
-  .topology-main {
-    height: calc(100vh - 100px);
-    width: calc(100vw - 50px);
-  }
-</style>
diff --git a/packages/gui/src/components/chart/openapi/QoSSummaryChart.vue b/packages/gui/src/components/chart/openapi/QoSSummaryChart.vue
deleted file mode 100644
index e9dca9b..0000000
--- a/packages/gui/src/components/chart/openapi/QoSSummaryChart.vue
+++ /dev/null
@@ -1,385 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="streamChart"
-      class="full height-240"
-    />
-  </div>
-</template>
-
-<script>
-import { getSteamTimeline, getTimeLabel } from "@/utils/util";
-import { getServiceWhere } from "@/services/clickhouse";
-export default {
-  name: "QoSSummaryChart",
-  props: {
-    pid: {
-      type: String,
-      default: ""
-    },
-
-    apply: {
-      type: String,
-      default: ""
-    },
-
-    params: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-
-    where: {
-      type: String,
-      default: ""
-    },
-
-    date: {
-      type: String,
-      default: ""
-    },
-  },
-
-  i18n: require("@/i18n"),
-  data() {
-    return {
-      name: "",
-      type: "",
-      streamData: {
-        day: "",
-        error: [],
-        success: [],
-      },
-    };
-  },
-
-  watch: {
-    where: {
-      handler() {
-        this.loadData();
-      },
-
-      deep: true,
-    },
-  },
-
-  mounted() {
-    this.loadData();
-  },
-
-  methods: {
-    renderChart() {
-      let dom = this.$refs.streamChart;
-      this.$echarts.dispose(dom);
-      let myChart = this.$echarts.init(dom);
-
-      let option = {
-        title: {},
-        color: ["#fb9690", "#8bd4a1"],
-        grid: {
-          left: "0px",
-          right: "0px",
-          top: "45px",
-          bottom: "0px",
-        },
-
-        tooltip: {
-          // trigger: 'axis',
-          showDelay: 0,
-          formatter: (value) => {
-            if (value.color) {
-              return (
-                `<span style="background:${value.color};width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:10px"></span>` +
-                getTimeLabel(value.data[0], this.date) +
-                " / " +
-                Math.ceil(value.data[1]) +
-                "ms"
-              );
-            } else {
-              return `${value.name}: ${Math.ceil(value.value)}ms`;
-            }
-          },
-
-          axisPointer: {
-            show: true,
-            type: "cross",
-            lineStyle: {
-              type: "dashed",
-              width: 1,
-            },
-          },
-        },
-
-        toolbox: {
-          feature: {
-            dataZoom: {},
-            brush: {
-              type: ["rect", "polygon", "clear"],
-            },
-          },
-        },
-
-        brush: {},
-        xAxis: [
-          {
-            type: "category",
-            scale: true,
-            nameGap: 30,
-            axisPointer: {
-              label: {
-                formatter: (value) => {
-                  return getTimeLabel(value.value, this.date);
-                },
-              },
-            },
-
-            axisLabel: {
-              showMinLabel: false,
-              showMaxLabel: false,
-              borderRadius: 2,
-              margin: 0,
-              minInterval: 20,
-              inside: true,
-              backgroundColor: "rgba(240,240,240,0.7)",
-              padding: [2, 3, 2, 3],
-              textStyle: {
-                color: "#6a7985",
-              },
-
-              hideOverlap: true,
-              interval: "auto",
-              borderRadius: 2,
-              inside: true,
-              formatter: (value) => {
-                return getTimeLabel(value, this.date);
-              },
-            },
-
-            splitLine: {
-              show: false,
-            },
-
-            axisTick: {
-              show: false,
-            },
-
-            axisLine: {
-              show: false,
-            },
-
-            z: 10,
-          },
-        ],
-
-        yAxis: [
-          {
-            type: "value",
-            scale: true,
-            min: 0,
-            z: 10,
-            axisLabel: {
-              showMinLabel: false,
-              showMaxLabel: false,
-              inside: true,
-              margin: 0,
-              backgroundColor: "rgba(240,240,240,0.7)",
-              padding: [2, 3, 2, 3],
-              textStyle: {
-                color: "#6a7985",
-              },
-
-              formatter: "{value} ms",
-            },
-
-            splitLine: {
-              show: false,
-            },
-
-            axisTick: {
-              show: false,
-            },
-
-            axisLine: {
-              show: false,
-            },
-          },
-        ],
-
-        series: [
-          {
-            name: "Failed",
-            type: "scatter",
-            emphasis: {
-              focus: "series",
-            },
-
-            data: this.streamData.error,
-            markArea: {
-              silent: true,
-              itemStyle: {
-                color: "transparent",
-                borderWidth: 1,
-                borderType: "dashed",
-              },
-
-              data: [
-                [
-                  {
-                    xAxis: "min",
-                    yAxis: "min",
-                  },
-                  {
-                    xAxis: "max",
-                    yAxis: "max",
-                  },
-                ],
-              ],
-            },
-
-            markLine: {
-              lineStyle: {
-                type: "solid",
-              },
-
-              data: [{ type: "average", name: "Average" }],
-            },
-          },
-          {
-            name: "Success",
-            type: "scatter",
-            emphasis: {
-              focus: "series",
-            },
-
-            data: this.streamData.success,
-            markArea: {
-              silent: true,
-              itemStyle: {
-                color: "transparent",
-                borderWidth: 1,
-                borderType: "dashed",
-              },
-
-              data: [
-                [
-                  {
-                    xAxis: "min",
-                    yAxis: "min",
-                  },
-                  {
-                    xAxis: "max",
-                    yAxis: "max",
-                  },
-                ],
-              ],
-            },
-
-            markLine: {
-              lineStyle: {
-                type: "solid",
-              },
-
-              data: [{ type: "average", name: "Average" }],
-            },
-          },
-        ],
-      };
-      myChart.setOption(option, {
-        lazyUpdate: true,
-      });
-      myChart.hideLoading();
-    },
-
-    loadData() {
-      let dom = this.$refs.streamChart;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      let interval = getSteamTimeline(this.date);
-      let pidFilter = "";
-      console.log(this.pid);
-      if (this.pid) {
-        if (this.apply == "openapi") {
-          pidFilter += ` AND x_parameters.aid = '${this.pid}'`;
-        } else if (this.apply == "project") {
-          pidFilter += ` AND x_parameters.pid = '${this.pid}'`;
-        } else if (this.apply == "mesh") {
-          pidFilter += ` AND meshName = '${this.params.name}'`;
-        } else if (this.apply == "service") {
-          pidFilter += getServiceWhere(
-            "and",
-            this.params.name,
-            this.params.namespace,
-            this.params.domain,
-          );
-        }
-      } else {
-        pidFilter += ` AND timestamp > subtractWeeks(now(),1)`;
-      }
-      let SQL = `select ${interval} as x,avg(resTime - reqTime) as latency,res.status as status from log where resTime > 0 AND bondType != 'outbound' ${this.where} ${pidFilter} group by x,status order by x;`;
-      this.categories = [];
-
-      this.links = [];
-      this.$request(this.$REST.CLICKHOUSE.QUERY(SQL), this.$METHOD.GET)
-        .then((res) => {
-          this.streamData = {
-            day: "",
-            error: [],
-            success: [],
-          };
-          let nodes = res.data.split("\n");
-          let index = 0;
-          nodes.map((nodeStr) => {
-            let node = nodeStr.split("\t");
-            index++;
-            if (node[2]) {
-              let dateAry = new Date(node[0]);
-              let _ts = dateAry.getTime();
-              if (node[2] < 400) {
-                this.streamData.success.push([_ts, node[1] * 1]);
-              } else if (node[2] >= 400) {
-                this.streamData.error.push([_ts, node[1] * 1]);
-              }
-              if (index == 1) {
-                this.streamData.day = getTimeLabel(_ts, this.date);
-              } else if (
-                index + 1 == nodes.length &&
-                this.streamData.day != getTimeLabel(_ts, this.date)
-              ) {
-                this.streamData.day += " ~ " + getTimeLabel(_ts, this.date);
-              }
-            }
-            return nodeStr;
-          });
-
-          if (this.streamData.success.length == 0) {
-            this.streamData.success.push([new Date().getTime(), 0]);
-          }
-          if (this.streamData.error.length == 0) {
-            this.streamData.error.push([new Date().getTime(), 0]);
-          }
-          this.renderChart();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
diff --git a/packages/gui/src/components/chart/openapi/StatusChart.vue b/packages/gui/src/components/chart/openapi/StatusChart.vue
deleted file mode 100644
index 18278af..0000000
--- a/packages/gui/src/components/chart/openapi/StatusChart.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="statusChart"
-      class="full height-240"
-    />
-  </div>
-</template>
-
-<script>
-import { getServiceWhere } from "@/services/clickhouse";
-export default {
-  name: "StatusChart",
-  props: {
-    pid: {
-      type: String,
-      default: ""
-    },
-
-    apply: {
-      type: String,
-      default: ""
-    },
-
-    params: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-
-    where: {
-      type: String,
-      default: ""
-    },
-  },
-
-  i18n: require("@/i18n"),
-  data() {
-    return {
-      name: "",
-      type: "",
-      maxCnt: 0,
-      statusData: {
-        data: [],
-        xaxis: [],
-      },
-    };
-  },
-
-  watch: {
-    where: {
-      handler() {
-        this.loadData();
-      },
-
-      deep: true,
-    },
-  },
-
-  mounted() {
-    this.loadData();
-  },
-
-  methods: {
-    renderChart() {
-      let dom = this.$refs.statusChart;
-      this.$echarts.dispose(dom);
-      let myChart = this.$echarts.init(dom);
-
-      let option = {
-        title: {},
-        xAxis: {
-          data: this.statusData.xaxis,
-          axisLabel: {
-            backgroundColor: "rgba(240,240,240,0.7)",
-            padding: [2, 3, 2, 3],
-            textStyle: {
-              color: "#6a7985",
-            },
-
-            inside: true,
-            borderRadius: 2,
-            minInterval: 20,
-          },
-
-          axisTick: {
-            show: false,
-          },
-
-          axisLine: {
-            show: false,
-          },
-
-          z: 10,
-        },
-
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
-            },
-          },
-        },
-
-        grid: {
-          bottom: "0px",
-          right: "10px",
-          top: "0px",
-          left: "40px",
-        },
-
-        yAxis: {
-          splitLine: {
-            show: false,
-          },
-
-          axisTick: {
-            show: false,
-          },
-
-          axisLine: {
-            show: false,
-          },
-
-          axisLabel: {
-            showMinLabel: false,
-            showMaxLabel: false,
-            inside: true,
-            margin: -40,
-            backgroundColor: "rgba(240,240,240,0.7)",
-            padding: [2, 3, 2, 3],
-            textStyle: {
-              color: "#6a7985",
-            },
-
-            formatter: "{value} "+(this.maxCnt>1000?'k':''),
-          },
-        },
-
-        dataZoom: [
-          {
-            type: "inside",
-          },
-        ],
-
-        series: [
-          {
-            type: "bar",
-            showBackground: true,
-            data: this.statusData.data,
-          },
-        ],
-      };
-
-      // Enable data zoom when user click bar.
-      let zoomSize = 6;
-      myChart.on("click", function (params) {
-        myChart.dispatchAction({
-          type: "dataZoom",
-          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
-          endValue:
-            dataAxis[
-              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
-            ],
-        });
-      });
-
-      myChart.setOption(option, {
-        lazyUpdate: true,
-      });
-      myChart.hideLoading();
-    },
-
-    loadData() {
-      let dom = this.$refs.statusChart;
-      let myChart = this.$echarts.init(dom);
-      myChart.showLoading();
-      let pidFilter = "";
-      if (this.pid) {
-        if (this.apply == "openapi") {
-          pidFilter += ` AND x_parameters.aid = '${this.pid}'`;
-        } else if (this.apply == "project") {
-          pidFilter += ` AND x_parameters.pid = '${this.pid}'`;
-        } else if (this.apply == "mesh") {
-          pidFilter += ` AND meshName = '${this.params.name}'`;
-        } else if (this.apply == "service") {
-          pidFilter += getServiceWhere(
-            "and",
-            this.params.name,
-            this.params.namespace,
-            this.params.domain,
-          );
-        }
-      }
-      let SQL = `select count() as count,res.status from log where res.status>'0' AND bondType != 'outbound' ${this.where} ${pidFilter} group by res.status order by res.status`;
-      this.categories = [];
-      this.maxCnt = 0;
-      this.links = [];
-      this.$request(this.$REST.CLICKHOUSE.QUERY(SQL), this.$METHOD.GET)
-        .then((res) => {
-          this.statusData = {
-            data: [],
-            xaxis: [],
-          };
-          let nodes = res.data.split("\n");
-          nodes.map((nodeStr) => {
-            let node = nodeStr.split("\t");
-            if (node[1]) {
-              let _color = "";
-              if (node[1] < 300) {
-                _color = "#8bd4a1";
-              } else if (node[1] < 400) {
-                _color = "#fac858";
-              } else {
-                _color = "#fb9690";
-              }
-              this.maxCnt = node[0]*1 > this.maxCnt ? node[0]*1 : this.maxCnt;
-              this.statusData.data.push({
-                value: node[0]*1,
-                itemStyle: {
-                  color: _color,
-                },
-              });
-              this.statusData.xaxis.push(node[1]);
-            }
-            return nodeStr;
-          });
-          if (this.statusData.data.length == 0) {
-            this.statusData.data.push({ value: 0 });
-          } else {
-            if(this.maxCnt>1000){
-              this.statusData.data.forEach((item)=>{
-                item.value = item.value/1000;
-              })
-            }
-          }
-          if (this.statusData.xaxis.length == 0) {
-            this.statusData.xaxis.push("-");
-          }
-          this.renderChart();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-  h3 {
-    margin: 40px 0 0;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
diff --git a/packages/gui/src/components/chart/openapi/TopologyChart.vue b/packages/gui/src/components/chart/topo/ApiTopologyChart.vue
similarity index 98%
rename from packages/gui/src/components/chart/openapi/TopologyChart.vue
rename to packages/gui/src/components/chart/topo/ApiTopologyChart.vue
index ac9bd2b..f44d5a7 100644
--- a/packages/gui/src/components/chart/openapi/TopologyChart.vue
+++ b/packages/gui/src/components/chart/topo/ApiTopologyChart.vue
@@ -280,8 +280,12 @@ export default {
             edgeSymbol: ["circle", "arrow"],
             draggabled: true,
             label: {
-              position: "right",
+              position: "inside",
               formatter: "{b}",
+              borderRadius: [10,10,10,10],
+              textStyle: {
+                color: "#6a7985",
+              },
             },
 
             itemStyle: {
diff --git a/packages/gui/src/components/chart/fsm/AreaChart.vue b/packages/gui/src/components/chart/topo/AreaChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/AreaChart.vue
rename to packages/gui/src/components/chart/topo/AreaChart.vue
diff --git a/packages/gui/src/components/chart/fsm/BpsChart.vue b/packages/gui/src/components/chart/topo/BpsChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/BpsChart.vue
rename to packages/gui/src/components/chart/topo/BpsChart.vue
diff --git a/packages/gui/src/components/chart/fsm/DelayChart.vue b/packages/gui/src/components/chart/topo/DelayChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/DelayChart.vue
rename to packages/gui/src/components/chart/topo/DelayChart.vue
diff --git a/packages/gui/src/components/chart/fsm/McsTopologyChart.vue b/packages/gui/src/components/chart/topo/McsTopologyChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/McsTopologyChart.vue
rename to packages/gui/src/components/chart/topo/McsTopologyChart.vue
diff --git a/packages/gui/src/components/chart/fsm/QoSSummaryChart.vue b/packages/gui/src/components/chart/topo/QoSSummaryChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/QoSSummaryChart.vue
rename to packages/gui/src/components/chart/topo/QoSSummaryChart.vue
diff --git a/packages/gui/src/components/chart/fsm/StatusChart.vue b/packages/gui/src/components/chart/topo/StatusChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/StatusChart.vue
rename to packages/gui/src/components/chart/topo/StatusChart.vue
diff --git a/packages/gui/src/components/chart/fsm/TopologyChart.vue b/packages/gui/src/components/chart/topo/TopologyChart.vue
similarity index 100%
rename from packages/gui/src/components/chart/fsm/TopologyChart.vue
rename to packages/gui/src/components/chart/topo/TopologyChart.vue
diff --git a/packages/gui/src/config/default/setting.config.js b/packages/gui/src/config/default/setting.config.js
index 793925b..bc5fe1e 100644
--- a/packages/gui/src/config/default/setting.config.js
+++ b/packages/gui/src/config/default/setting.config.js
@@ -17,7 +17,7 @@ module.exports = {
   cachePage: true,
   hideSetting: false,
   systemName: "Flomesh",
-  copyright: "2021 Flomesh",
+  copyright: "2023 Flomesh",
   asyncRoutes: false,
   showPageTitle: true,
   filterMenu: true,
diff --git a/packages/gui/src/pages/fsm/topology/RightBar.vue b/packages/gui/src/pages/fsm/topology/RightBar.vue
index 5808375..ed66441 100644
--- a/packages/gui/src/pages/fsm/topology/RightBar.vue
+++ b/packages/gui/src/pages/fsm/topology/RightBar.vue
@@ -52,11 +52,11 @@
 </template>
 
 <script>
-import AreaChart from "@/components/chart/fsm/AreaChart";
-import BpsChart from "@/components/chart/fsm/BpsChart";
-import DelayChart from "@/components/chart/fsm/DelayChart";
-import QoSSummaryChart from "@/components/chart/fsm/QoSSummaryChart";
-import StatusChart from "@/components/chart/fsm/StatusChart";
+import AreaChart from "@/components/chart/topo/AreaChart";
+import BpsChart from "@/components/chart/topo/BpsChart";
+import DelayChart from "@/components/chart/topo/DelayChart";
+import QoSSummaryChart from "@/components/chart/topo/QoSSummaryChart";
+import StatusChart from "@/components/chart/topo/StatusChart";
 export default {
   name: "RightBar",
   i18n: require("@/i18n"),
diff --git a/packages/gui/src/pages/fsm/topology/Topology.vue b/packages/gui/src/pages/fsm/topology/Topology.vue
index ac21d05..e09d1c5 100644
--- a/packages/gui/src/pages/fsm/topology/Topology.vue
+++ b/packages/gui/src/pages/fsm/topology/Topology.vue
@@ -42,7 +42,7 @@
 
 <script>
 import Timeline from "@/components/tool/Timeline";
-import TopologyChart from "@/components/chart/fsm/TopologyChart";
+import TopologyChart from "@/components/chart/topo/TopologyChart";
 import RightBar from "./RightBar.vue";
 import { getSQLWhere, getTopoWhere } from "@/services/clickhouse";
 import clickhouse_svc from "@/services/clickhouse.js";
diff --git a/packages/gui/src/pages/login/Login.vue b/packages/gui/src/pages/login/Login.vue
index d5d794e..e830790 100644
--- a/packages/gui/src/pages/login/Login.vue
+++ b/packages/gui/src/pages/login/Login.vue
@@ -17,7 +17,7 @@
             class="logo-tag"
             color="#00adef"
           >
-            {{ version }}
+            {{ version == "free" ? "Community" : version }}
           </a-tag>
         </div>
       </div>
diff --git a/packages/gui/src/services/clickhouse.js b/packages/gui/src/services/clickhouse.js
index 3e3d8b1..cf72f17 100644
--- a/packages/gui/src/services/clickhouse.js
+++ b/packages/gui/src/services/clickhouse.js
@@ -1,5 +1,5 @@
 import api from "@/services/api";
-import { request, merge, spread, METHOD } from "@/utils/request";
+import { request, merge, spread, METHOD, mock } from "@/utils/request";
 
 export const select_keys = [
   "service.name",
@@ -61,6 +61,142 @@ export async function getTopoData(params) {
   return merge([getServices(params), getPods(params), getPaths(params)]);
 }
 
+export async function getAPITopoData(params,nocurrent) {
+	console.log(params)
+  return mock({
+		services:[
+			{
+				id: 'svc001',
+				type:'service',
+				name:'svc1',
+			},
+			{
+				id: 'svc002',
+				type:'service',
+				name:'svc2',
+			},
+		],
+		apis:[
+			{
+				id: 'api001',
+				service:'svc001',
+				type:'api',
+				name:'/api1',
+				error:false,
+				weight:3,
+				current:!nocurrent
+			},
+			{
+				id: 'api002',
+				service:'svc001',
+				type:'api',
+				name:'/api2',
+				error:true,
+				weight:3,
+			},
+			{
+				id: 'api003',
+				service:'svc001',
+				type:'api',
+				name:'/api3',
+				error:false,
+				weight:3,
+			},
+			{
+				id: 'api004',
+				service:'svc001',
+				type:'api',
+				name:'/api4',
+				error:false,
+				weight:3,
+			},
+			{
+				id: 'api005',
+				service:'svc001',
+				type:'api',
+				name:'/api5',
+				error:false,
+				weight:3,
+			},
+			{
+				id: 'api006',
+				service:'svc001',
+				type:'api',
+				name:'/api6',
+				error:false,
+				weight:3,
+			},
+			{
+				id: 'api007',
+				service:'svc002',
+				type:'api',
+				name:'/api7',
+				error:false,
+				weight:3,
+			},
+			{
+				id: 'api008',
+				service:'svc002',
+				type:'api',
+				name:'/api8',
+				error:false,
+				weight:10,
+			},
+			{
+				id: 'api009',
+				service:'svc002',
+				type:'api',
+				name:'/api9',
+				error:false,
+				weight:10,
+			},
+		],
+		links:[
+			{
+				source:"api001",
+				target:"api002",
+				weight:30,
+				error:true,
+			},
+			{
+				source:"api003",
+				target:"api004",
+				weight:3,
+				error:false,
+			},
+			{
+				source:"api001",
+				target:"api003",
+				weight:20,
+				error:false,
+			},
+			{
+				source:"api005",
+				target:"api006",
+				weight:20,
+				error:false,
+			},
+			{
+				source:"api007",
+				target:"api008",
+				weight:20,
+				error:false,
+			},
+			{
+				source:"api008",
+				target:"api009",
+				weight:20,
+				error:false,
+			},
+			{
+				source:"api001",
+				target:"api008",
+				weight:20,
+				error:false,
+			},
+		]
+	});
+}
 export function checkPodRepeat(nodes, id) {
   for (let i = 0; i < nodes.length; i++) {
     if (nodes[i].id == id) {
@@ -104,7 +240,7 @@ const apiIcon =
 const apiErrorIcon =
   "image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjc4NzY0MzE0Njg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0ODgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMi44NCA2My41NkwxMjUuMzIgMjg3LjN2NDQ3LjQ3bDM4Ny41MiAyMjMuNzQgMzg3LjUzLTIyMy43NFYyODcuM3oiIGZpbGw9IiNmY2UyZTIiIHAtaWQ9IjI0ODkiPjwvcGF0aD48cGF0aCBkPSJNMzYzLjg2IDcwOC45NmMwIDY2LjQxIDE0LjMzIDEyOS4zNyAzOS42MiAxODYuNDFsMTA5LjM3IDYzLjE0IDM4Ny41Mi0yMjMuNzRWMjg3LjNsLTY2Ljc3LTM4LjU1Yy0zLjA1LTAuMDYtNi0wLjQ2LTkuMDctMC40Ni0yNTQuNDIgMC00NjAuNjcgMjA2LjI1LTQ2MC42NyA0NjAuNjd6IiBmaWxsPSIjZjJjZGNkIiBwLWlkPSIyNDkwIj48L3BhdGg+PHBhdGggZD0iTTg3NS4zNSAyNzIuODZjMS4yIDEzLjUyIDIuMDcgMjcuMTMgMi4wNyA0MC45NiAwIDI1My4zMi0yMDUuMzYgNDU4LjY4LTQ1OC42OCA0NTguNjgtMTExLjYzIDAtMjEzLjg4LTM5Ljk1LTI5My40MS0xMDYuMjR2NjguNTFsMzg3LjUyIDIyMy43NCAzODcuNTItMjIzLjc0VjI4Ny4zbC0yNS4wMi0xNC40NHoiIGZpbGw9IiNmMmNkY2QiIHAtaWQ9IjI0OTEiPjwvcGF0aD48cGF0aCBkPSJNNTEyLjYyIDk1OC41MUwxMjQuODcgNzM0LjY2VjI4Ni45Mkw1MTIuNjIgNjMuMDNsMzg3Ljc1IDIyMy44OXY0NDcuNzRMNTEyLjYyIDk1OC41MXpNMTYwLjY5IDcxMy45OGwzNTEuOTMgMjAzLjE3IDM1MS45My0yMDMuMTdWMzA3LjZMNTEyLjYyIDEwNC4zOSAxNjAuNjkgMzA3LjZ2NDA2LjM4eiIgZmlsbD0iIzhhOGE4YSIgcC1pZD0iMjQ5MiI+PC9wYXRoPjxwYXRoIGQ9Ik03NDcuODUgMzA2Ljg5bC00NC4zIDQzLjkzYzMwLjc5IDQ1LjQzIDI1LjkxIDEwNy4wMS0xMy44OSAxNDcuMThsLTU4Ljk1IDU4Ljk1Yy0xLjEzIDAuNzUtMi4yNSAxLjUtMy4zOCAxLjVzLTIuNjMtMC4zOC0zLjM4LTEuNWwtOTkuNS05OS41LTU4LjItNTcuODJjLTEuNS0xLjg4LTEuNS00Ljg4IDAtNi43Nmw1OS4zMi01OC45NWM5LjM5LTkuMzkgMTkuOS0xNi44OSAzMS4xNi0yMi4xNSAxNS43Ny04LjI2IDMzLjQxLTEyLjAyIDUwLjY5LTEyLjAyIDIzLjI4IDAgNDUuODEgNy4xMyA2NC45NiAxOS45bDQ0LjMtNDMuOTNjMC43NS0xLjEzIDEuODgtMS41IDMuMzgtMS41IDEuMTMgMCAyLjI1IDAuMzggMyAxLjVsMjQuNzggMjQuNDFhNC43NjUgNC43NjUgMCAwIDEgMC4wMSA2Ljc2eiIgZmlsbD0iI2UwNzA3OSIgcC1pZD0iMjQ5MyI+PC9wYXRoPjxwYXRoIGQ9Ik01NzIuNSA1NTguNDVsLTM4LjY3IDM4LjY3IDI1LjE2IDI0Ljc4YzEuNSAxLjg4IDEuNSA0Ljg4IDAgNi43NmwtNTkuMzIgNTguOTVjLTIyLjUzIDIyLjktNTIuMTkgMzQuMTctODEuODUgMzQuMTctNy41MSAwLTE0LjY0LTAuNzUtMjEuNzgtMi4yNS0xNS4zOS0yLjYzLTMwLjA0LTguNjQtNDMuMTgtMTcuNjVsLTQ0LjMxIDQzLjkzYy0wLjc1IDEuMTMtMS44OCAxLjUtMy4zOCAxLjUtMS4xMyAwLTIuMjUtMC4zOC0zLTEuNWwtMjQuNzgtMjQuNDFhNC43NTYgNC43NTYgMCAwIDEgMC02Ljc2bDQ0LjMtNDMuOTNjLTMwLjc5LTQ1LjA2LTI1LjkxLTEwNy4wMSAxMy44OS0xNDcuMThsNTguOTUtNTguOTVjMS4xMy0wLjc1IDIuMjUtMS41IDMuMzgtMS41czIuNjMgMC43NSAzLjM4IDEuNWwyNC43OCAyNC43OCAzOC42Ny0zOC42N2MxLjg4LTEuNSA0Ljg4LTEuNSA2Ljc2IDBsMjEuMDMgMjEuNGMxLjg4IDEuNSAxLjg4IDQuNTEgMCA2LjM4bC0zOC42NyAzOC42NyA1Mi41NyA1Mi41NyAzOC4zLTM4LjY3YTQuNzU2IDQuNzU2IDAgMCAxIDYuNzYgMGwyMS4wMyAyMS4wM2MxLjg2IDEuNSAxLjg2IDQuNTEtMC4wMiA2LjM4eiIgZmlsbD0iI2UwNzA3OSIgcC1pZD0iMjQ5NCI+PC9wYXRoPjxwYXRoIGQ9Ik01NzIuNSA1NTguNDVsLTM4LjY3IDM4LjY3IDI1LjE2IDI0Ljc4YzEuNSAxLjg4IDEuNSA0Ljg4IDAgNi43NmwtNTkuMzIgNTguOTVjLTIyLjUzIDIyLjktNTIuMTkgMzQuMTctODEuODUgMzQuMTctNy41MSAwLTE0LjY0LTAuNzUtMjEuNzgtMi4yNS0xMi4wMi0yOS42Ni0xOC40LTYxLjk1LTE4LjQtOTYuMTIgMC01MS44MSAxNS4wMi0xMDAuMjUgNDEuNjgtMTQwLjhsNi43NiA2Ljc2IDM4LjY3LTM4LjY3YzEuODgtMS41IDQuODgtMS41IDYuNzYgMGwyMS4wMyAyMS40YzEuODggMS41IDEuODggNC41MSAwIDYuMzhsLTM4LjY3IDM4LjY3IDUyLjU3IDUyLjU3IDM4LjMtMzguNjdhNC43NTYgNC43NTYgMCAwIDEgNi43NiAwbDIxLjAzIDIxLjAzYzEuODUgMS40OSAxLjg1IDQuNS0wLjAzIDYuMzd6TTc0Ny44NSAzMDYuODlsLTQ0LjMgNDMuOTNjMzAuNzkgNDUuNDMgMjUuOTEgMTA3LjAxLTEzLjg5IDE0Ny4xOGwtNTguOTUgNTguOTVjLTEuMTMgMC43NS0yLjI1IDEuNS0zLjM4IDEuNXMtMi42My0wLjM4LTMuMzgtMS41bC05OS41LTk5LjVjLTMtMTIuMzktNC41MS0yNS41My00LjUxLTM5LjA1IDAtNDAuMTcgMTMuNTItNzcuMzUgMzYuOC0xMDYuNjMgMTUuNzctOC4yNiAzMy40MS0xMi4wMiA1MC42OS0xMi4wMiAyMy4yOCAwIDQ1LjgxIDcuMTMgNjQuOTYgMTkuOWw0NC4zLTQzLjkzYzAuNzUtMS4xMyAxLjg4LTEuNSAzLjM4LTEuNSAxLjEzIDAgMi4yNSAwLjM4IDMgMS41bDI0Ljc4IDI0LjQxYTQuNzc0IDQuNzc0IDAgMCAxIDAgNi43NnoiIGZpbGw9IiNlYTRlNWEiIHAtaWQ9IjI0OTUiPjwvcGF0aD48L3N2Zz4=";
 
-//const apiSuccessIcon = "image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjc4NzY0MzIyODU4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NDgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMi44NCA2My41NkwxMjUuMzIgMjg3LjN2NDQ3LjQ3bDM4Ny41MiAyMjMuNzQgMzg3LjUzLTIyMy43NFYyODcuM3oiIGZpbGw9IiNkN2ZkZTAiIHAtaWQ9IjI2NDkiPjwvcGF0aD48cGF0aCBkPSJNMzYzLjg2IDcwOC45NmMwIDY2LjQxIDE0LjMzIDEyOS4zNyAzOS42MiAxODYuNDFsMTA5LjM3IDYzLjE0IDM4Ny41Mi0yMjMuNzRWMjg3LjNsLTY2Ljc3LTM4LjU1Yy0zLjA1LTAuMDYtNi0wLjQ2LTkuMDctMC40Ni0yNTQuNDIgMC00NjAuNjcgMjA2LjI1LTQ2MC42NyA0NjAuNjd6IiBmaWxsPSIjYjNmMmMyIiBwLWlkPSIyNjUwIj48L3BhdGg+PHBhdGggZD0iTTg3NS4zNSAyNzIuODZjMS4yIDEzLjUyIDIuMDcgMjcuMTMgMi4wNyA0MC45NiAwIDI1My4zMi0yMDUuMzYgNDU4LjY4LTQ1OC42OCA0NTguNjgtMTExLjYzIDAtMjEzLjg4LTM5Ljk1LTI5My40MS0xMDYuMjR2NjguNTFsMzg3LjUyIDIyMy43NCAzODcuNTItMjIzLjc0VjI4Ny4zbC0yNS4wMi0xNC40NHoiIGZpbGw9IiNiM2YyYzIiIHAtaWQ9IjI2NTEiPjwvcGF0aD48cGF0aCBkPSJNNTEyLjYyIDk1OC41MUwxMjQuODcgNzM0LjY2VjI4Ni45Mkw1MTIuNjIgNjMuMDNsMzg3Ljc1IDIyMy44OXY0NDcuNzRMNTEyLjYyIDk1OC41MXpNMTYwLjY5IDcxMy45OGwzNTEuOTMgMjAzLjE3IDM1MS45My0yMDMuMTdWMzA3LjZMNTEyLjYyIDEwNC4zOSAxNjAuNjkgMzA3LjZ2NDA2LjM4eiIgZmlsbD0iIzhhOGE4YSIgcC1pZD0iMjY1MiI+PC9wYXRoPjxwYXRoIGQ9Ik03NDcuODUgMzA2Ljg5bC00NC4zIDQzLjkzYzMwLjc5IDQ1LjQzIDI1LjkxIDEwNy4wMS0xMy44OSAxNDcuMThsLTU4Ljk1IDU4Ljk1Yy0xLjEzIDAuNzUtMi4yNSAxLjUtMy4zOCAxLjVzLTIuNjMtMC4zOC0zLjM4LTEuNWwtOTkuNS05OS41LTU4LjItNTcuODJjLTEuNS0xLjg4LTEuNS00Ljg4IDAtNi43Nmw1OS4zMi01OC45NWM5LjM5LTkuMzkgMTkuOS0xNi44OSAzMS4xNi0yMi4xNSAxNS43Ny04LjI2IDMzLjQxLTEyLjAyIDUwLjY5LTEyLjAyIDIzLjI4IDAgNDUuODEgNy4xMyA2NC45NiAxOS45bDQ0LjMtNDMuOTNjMC43NS0xLjEzIDEuODgtMS41IDMuMzgtMS41IDEuMTMgMCAyLjI1IDAuMzggMyAxLjVsMjQuNzggMjQuNDFhNC43NjUgNC43NjUgMCAwIDEgMC4wMSA2Ljc2eiIgZmlsbD0iIzg3YzM4ZiIgcC1pZD0iMjY1MyI+PC9wYXRoPjxwYXRoIGQ9Ik01NzIuNSA1NTguNDVsLTM4LjY3IDM4LjY3IDI1LjE2IDI0Ljc4YzEuNSAxLjg4IDEuNSA0Ljg4IDAgNi43NmwtNTkuMzIgNTguOTVjLTIyLjUzIDIyLjktNTIuMTkgMzQuMTctODEuODUgMzQuMTctNy41MSAwLTE0LjY0LTAuNzUtMjEuNzgtMi4yNS0xNS4zOS0yLjYzLTMwLjA0LTguNjQtNDMuMTgtMTcuNjVsLTQ0LjMxIDQzLjkzYy0wLjc1IDEuMTMtMS44OCAxLjUtMy4zOCAxLjUtMS4xMyAwLTIuMjUtMC4zOC0zLTEuNWwtMjQuNzgtMjQuNDFhNC43NTYgNC43NTYgMCAwIDEgMC02Ljc2bDQ0LjMtNDMuOTNjLTMwLjc5LTQ1LjA2LTI1LjkxLTEwNy4wMSAxMy44OS0xNDcuMThsNTguOTUtNTguOTVjMS4xMy0wLjc1IDIuMjUtMS41IDMuMzgtMS41czIuNjMgMC43NSAzLjM4IDEuNWwyNC43OCAyNC43OCAzOC42Ny0zOC42N2MxLjg4LTEuNSA0Ljg4LTEuNSA2Ljc2IDBsMjEuMDMgMjEuNGMxLjg4IDEuNSAxLjg4IDQuNTEgMCA2LjM4bC0zOC42NyAzOC42NyA1Mi41NyA1Mi41NyAzOC4zLTM4LjY3YTQuNzU2IDQuNzU2IDAgMCAxIDYuNzYgMGwyMS4wMyAyMS4wM2MxLjg2IDEuNSAxLjg2IDQuNTEtMC4wMiA2LjM4eiIgZmlsbD0iIzg3YzM4ZiIgcC1pZD0iMjY1NCI+PC9wYXRoPjxwYXRoIGQ9Ik01NzIuNSA1NTguNDVsLTM4LjY3IDM4LjY3IDI1LjE2IDI0Ljc4YzEuNSAxLjg4IDEuNSA0Ljg4IDAgNi43NmwtNTkuMzIgNTguOTVjLTIyLjUzIDIyLjktNTIuMTkgMzQuMTctODEuODUgMzQuMTctNy41MSAwLTE0LjY0LTAuNzUtMjEuNzgtMi4yNS0xMi4wMi0yOS42Ni0xOC40LTYxLjk1LTE4LjQtOTYuMTIgMC01MS44MSAxNS4wMi0xMDAuMjUgNDEuNjgtMTQwLjhsNi43NiA2Ljc2IDM4LjY3LTM4LjY3YzEuODgtMS41IDQuODgtMS41IDYuNzYgMGwyMS4wMyAyMS40YzEuODggMS41IDEuODggNC41MSAwIDYuMzhsLTM4LjY3IDM4LjY3IDUyLjU3IDUyLjU3IDM4LjMtMzguNjdhNC43NTYgNC43NTYgMCAwIDEgNi43NiAwbDIxLjAzIDIxLjAzYzEuODUgMS40OSAxLjg1IDQuNS0wLjAzIDYuMzd6TTc0Ny44NSAzMDYuODlsLTQ0LjMgNDMuOTNjMzAuNzkgNDUuNDMgMjUuOTEgMTA3LjAxLTEzLjg5IDE0Ny4xOGwtNTguOTUgNTguOTVjLTEuMTMgMC43NS0yLjI1IDEuNS0zLjM4IDEuNXMtMi42My0wLjM4LTMuMzgtMS41bC05OS41LTk5LjVjLTMtMTIuMzktNC41MS0yNS41My00LjUxLTM5LjA1IDAtNDAuMTcgMTMuNTItNzcuMzUgMzYuOC0xMDYuNjMgMTUuNzctOC4yNiAzMy40MS0xMi4wMiA1MC42OS0xMi4wMiAyMy4yOCAwIDQ1LjgxIDcuMTMgNjQuOTYgMTkuOWw0NC4zLTQzLjkzYzAuNzUtMS4xMyAxLjg4LTEuNSAzLjM4LTEuNSAxLjEzIDAgMi4yNSAwLjM4IDMgMS41bDI0Ljc4IDI0LjQxYTQuNzc0IDQuNzc0IDAgMCAxIDAgNi43NnoiIGZpbGw9IiMzNmFiNjAiIHAtaWQ9IjI2NTUiPjwvcGF0aD48L3N2Zz4=";		
+const apiSuccessIcon = "image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjc4NzY0MzIyODU4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NDgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMi44NCA2My41NkwxMjUuMzIgMjg3LjN2NDQ3LjQ3bDM4Ny41MiAyMjMuNzQgMzg3LjUzLTIyMy43NFYyODcuM3oiIGZpbGw9IiNkN2ZkZTAiIHAtaWQ9IjI2NDkiPjwvcGF0aD48cGF0aCBkPSJNMzYzLjg2IDcwOC45NmMwIDY2LjQxIDE0LjMzIDEyOS4zNyAzOS42MiAxODYuNDFsMTA5LjM3IDYzLjE0IDM4Ny41Mi0yMjMuNzRWMjg3LjNsLTY2Ljc3LTM4LjU1Yy0zLjA1LTAuMDYtNi0wLjQ2LTkuMDctMC40Ni0yNTQuNDIgMC00NjAuNjcgMjA2LjI1LTQ2MC42NyA0NjAuNjd6IiBmaWxsPSIjYjNmMmMyIiBwLWlkPSIyNjUwIj48L3BhdGg+PHBhdGggZD0iTTg3NS4zNSAyNzIuODZjMS4yIDEzLjUyIDIuMDcgMjcuMTMgMi4wNyA0MC45NiAwIDI1My4zMi0yMDUuMzYgNDU4LjY4LTQ1OC42OCA0NTguNjgtMTExLjYzIDAtMjEzLjg4LTM5Ljk1LTI5My40MS0xMDYuMjR2NjguNTFsMzg3LjUyIDIyMy43NCAzODcuNTItMjIzLjc0VjI4Ny4zbC0yNS4wMi0xNC40NHoiIGZpbGw9IiNiM2YyYzIiIHAtaWQ9IjI2NTEiPjwvcGF0aD48cGF0aCBkPSJNNTEyLjYyIDk1OC41MUwxMjQuODcgNzM0LjY2VjI4Ni45Mkw1MTIuNjIgNjMuMDNsMzg3Ljc1IDIyMy44OXY0NDcuNzRMNTEyLjYyIDk1OC41MXpNMTYwLjY5IDcxMy45OGwzNTEuOTMgMjAzLjE3IDM1MS45My0yMDMuMTdWMzA3LjZMNTEyLjYyIDEwNC4zOSAxNjAuNjkgMzA3LjZ2NDA2LjM4eiIgZmlsbD0iIzhhOGE4YSIgcC1pZD0iMjY1MiI+PC9wYXRoPjxwYXRoIGQ9Ik03NDcuODUgMzA2Ljg5bC00NC4zIDQzLjkzYzMwLjc5IDQ1LjQzIDI1LjkxIDEwNy4wMS0xMy44OSAxNDcuMThsLTU4Ljk1IDU4Ljk1Yy0xLjEzIDAuNzUtMi4yNSAxLjUtMy4zOCAxLjVzLTIuNjMtMC4zOC0zLjM4LTEuNWwtOTkuNS05OS41LTU4LjItNTcuODJjLTEuNS0xLjg4LTEuNS00Ljg4IDAtNi43Nmw1OS4zMi01OC45NWM5LjM5LTkuMzkgMTkuOS0xNi44OSAzMS4xNi0yMi4xNSAxNS43Ny04LjI2IDMzLjQxLTEyLjAyIDUwLjY5LTEyLjAyIDIzLjI4IDAgNDUuODEgNy4xMyA2NC45NiAxOS45bDQ0LjMtNDMuOTNjMC43NS0xLjEzIDEuODgtMS41IDMuMzgtMS41IDEuMTMgMCAyLjI1IDAuMzggMyAxLjVsMjQuNzggMjQuNDFhNC43NjUgNC43NjUgMCAwIDEgMC4wMSA2Ljc2eiIgZmlsbD0iIzg3YzM4ZiIgcC1pZD0iMjY1MyI+PC9wYXRoPjxwYXRoIGQ9Ik01NzIuNSA1NTguNDVsLTM4LjY3IDM4LjY3IDI1LjE2IDI0Ljc4YzEuNSAxLjg4IDEuNSA0Ljg4IDAgNi43NmwtNTkuMzIgNTguOTVjLTIyLjUzIDIyLjktNTIuMTkgMzQuMTctODEuODUgMzQuMTctNy41MSAwLTE0LjY0LTAuNzUtMjEuNzgtMi4yNS0xNS4zOS0yLjYzLTMwLjA0LTguNjQtNDMuMTgtMTcuNjVsLTQ0LjMxIDQzLjkzYy0wLjc1IDEuMTMtMS44OCAxLjUtMy4zOCAxLjUtMS4xMyAwLTIuMjUtMC4zOC0zLTEuNWwtMjQuNzgtMjQuNDFhNC43NTYgNC43NTYgMCAwIDEgMC02Ljc2bDQ0LjMtNDMuOTNjLTMwLjc5LTQ1LjA2LTI1LjkxLTEwNy4wMSAxMy44OS0xNDcuMThsNTguOTUtNTguOTVjMS4xMy0wLjc1IDIuMjUtMS41IDMuMzgtMS41czIuNjMgMC43NSAzLjM4IDEuNWwyNC43OCAyNC43OCAzOC42Ny0zOC42N2MxLjg4LTEuNSA0Ljg4LTEuNSA2Ljc2IDBsMjEuMDMgMjEuNGMxLjg4IDEuNSAxLjg4IDQuNTEgMCA2LjM4bC0zOC42NyAzOC42NyA1Mi41NyA1Mi41NyAzOC4zLTM4LjY3YTQuNzU2IDQuNzU2IDAgMCAxIDYuNzYgMGwyMS4wMyAyMS4wM2MxLjg2IDEuNSAxLjg2IDQuNTEtMC4wMiA2LjM4eiIgZmlsbD0iIzg3YzM4ZiIgcC1pZD0iMjY1NCI+PC9wYXRoPjxwYXRoIGQ9Ik01NzIuNSA1NTguNDVsLTM4LjY3IDM4LjY3IDI1LjE2IDI0Ljc4YzEuNSAxLjg4IDEuNSA0Ljg4IDAgNi43NmwtNTkuMzIgNTguOTVjLTIyLjUzIDIyLjktNTIuMTkgMzQuMTctODEuODUgMzQuMTctNy41MSAwLTE0LjY0LTAuNzUtMjEuNzgtMi4yNS0xMi4wMi0yOS42Ni0xOC40LTYxLjk1LTE4LjQtOTYuMTIgMC01MS44MSAxNS4wMi0xMDAuMjUgNDEuNjgtMTQwLjhsNi43NiA2Ljc2IDM4LjY3LTM4LjY3YzEuODgtMS41IDQuODgtMS41IDYuNzYgMGwyMS4wMyAyMS40YzEuODggMS41IDEuODggNC41MSAwIDYuMzhsLTM4LjY3IDM4LjY3IDUyLjU3IDUyLjU3IDM4LjMtMzguNjdhNC43NTYgNC43NTYgMCAwIDEgNi43NiAwbDIxLjAzIDIxLjAzYzEuODUgMS40OSAxLjg1IDQuNS0wLjAzIDYuMzd6TTc0Ny44NSAzMDYuODlsLTQ0LjMgNDMuOTNjMzAuNzkgNDUuNDMgMjUuOTEgMTA3LjAxLTEzLjg5IDE0Ny4xOGwtNTguOTUgNTguOTVjLTEuMTMgMC43NS0yLjI1IDEuNS0zLjM4IDEuNXMtMi42My0wLjM4LTMuMzgtMS41bC05OS41LTk5LjVjLTMtMTIuMzktNC41MS0yNS41My00LjUxLTM5LjA1IDAtNDAuMTcgMTMuNTItNzcuMzUgMzYuOC0xMDYuNjMgMTUuNzctOC4yNiAzMy40MS0xMi4wMiA1MC42OS0xMi4wMiAyMy4yOCAwIDQ1LjgxIDcuMTMgNjQuOTYgMTkuOWw0NC4zLTQzLjkzYzAuNzUtMS4xMyAxLjg4LTEuNSAzLjM4LTEuNSAxLjEzIDAgMi4yNSAwLjM4IDMgMS41bDI0Ljc4IDI0LjQxYTQuNzc0IDQuNzc0IDAgMCAxIDAgNi43NnoiIGZpbGw9IiMzNmFiNjAiIHAtaWQ9IjI2NTUiPjwvcGF0aD48L3N2Zz4=";		
 		
 export function setTopoData() {
   return spread((serviceRes, podRes, pathRes) => {
@@ -237,7 +373,10 @@ export function setTopoData() {
 
 
 export function setAPITopoData() {
-  return (serviceNodes, apiNodes, pathNodes) => {
+  return (res) => {
+		let serviceNodes = res.services || [];
+		let apiNodes = res.apis || [];
+		let pathNodes = res.links || [];
     let categories = [];
     let categoryMap = {};
     let nodes = [];
@@ -295,20 +434,11 @@ export function setAPITopoData() {
           id: node.id,
           name: node.name,
           value: node.weight,
-          symbolSize: calcPodSymbolSize(node.weight) * 3,
-          symbol: node.error?apiErrorIcon:apiIcon,
+          symbolSize: calcPodSymbolSize(node.weight) * 3 + (node.current?10:0),
+          symbol: node.error?apiErrorIcon:(node.current?apiSuccessIcon:apiIcon),
           category: categoryMap[node.service].index,
           isSvc: false,
           parent: node.service,
-					label:{
-						show:true,
-						backgroundColor: "rgba(240,240,240,0.7)",
-						padding: [2, 3, 2, 3],
-						borderRadius: [0,3,3,0],
-						textStyle: {
-						  color: "#6a7985",
-						},
-					}
         };
         nodePos[node.id] = {
           type: "api",
@@ -346,7 +476,7 @@ export function setAPITopoData() {
         let link = {
           source,
           target,
-          value: node[2],
+          value: node.weight,
           label: {
             show: true,
             position: "middle",
@@ -357,6 +487,10 @@ export function setAPITopoData() {
             color: "#000000",
             formatter: "{@value}",
           },
+          lineStyle: {
+            color: node.error ? "red":null,
+						width: 1 + node.weight/10
+          },
         };
         if (nodePos[source] && nodePos[target]) {
           if (nodePos[source].service == nodePos[target].service) {
@@ -698,5 +832,6 @@ export default {
   getTopoData,
   setTopoData,
 	setAPITopoData,
+	getAPITopoData,
   getServiceWhere,
 };
diff --git a/packages/gui/src/services/dashboard.js b/packages/gui/src/services/dashboard.js
index bb172d8..e3afea7 100644
--- a/packages/gui/src/services/dashboard.js
+++ b/packages/gui/src/services/dashboard.js
@@ -27,7 +27,7 @@ export const DEFAULT_PROJECT =
   "openapi.dashboard.API_TOTAL,openapi.dashboard.APP_TOTAL,system.common.Space,system.common.Space,fsm.dashboard.QOS,fsm.dashboard.LATENCY,fsm.dashboard.LOAD_STATUS,fsm.dashboard.TPS_ERROR,fsm.dashboard.BPS,openapi.dashboard.API_STATUS,openapi.dashboard.API_METRIC_WEEK,openapi.dashboard.API_METRIC_MONTH";
 
 export const DEFAULT_API_DETAIL =
-  "fsm.dashboard.QOS,fsm.dashboard.LATENCY,fsm.dashboard.LOAD_STATUS,fsm.dashboard.TPS_ERROR,fsm.dashboard.BPS,openapi.dashboard.API_METRIC_WEEK,openapi.dashboard.API_METRIC_MONTH";
+  "fsm.dashboard.TPS_ERROR,fsm.dashboard.BPS,fsm.dashboard.LATENCY,fsm.dashboard.LOAD_STATUS,openapi.dashboard.TOPOLOGY,fsm.dashboard.QOS,openapi.dashboard.API_METRIC_WEEK,openapi.dashboard.API_METRIC_MONTH";
 
 export async function getDashboardById(id) {
   return query(`dashboard(id:${id}){data{id,attributes{name,content,apply}}}`);
diff --git a/packages/gui/src/subscribe/baseComponents.js b/packages/gui/src/subscribe/baseComponents.js
index e88e5cc..bf05553 100644
--- a/packages/gui/src/subscribe/baseComponents.js
+++ b/packages/gui/src/subscribe/baseComponents.js
@@ -11,13 +11,14 @@ import BarChart from "@/components/chart/BarChart";
 import BarGroupChart from "@/components/chart/BarGroupChart";
 
 //fsm
-import TopologyChart from "@/components/chart/fsm/TopologyChart";
-import McsTopologyChart from "@/components/chart/fsm/McsTopologyChart";
-import AreaChart from "@/components/chart/fsm/AreaChart";
-import BpsChart from "@/components/chart/fsm/BpsChart";
-import DelayChart from "@/components/chart/fsm/DelayChart";
-import QoSSummaryChart from "@/components/chart/fsm/QoSSummaryChart";
-import StatusChart from "@/components/chart/fsm/StatusChart";
+import TopologyChart from "@/components/chart/topo/TopologyChart";
+import McsTopologyChart from "@/components/chart/topo/McsTopologyChart";
+import ApiTopologyChart from "@/components/chart/topo/ApiTopologyChart";
+import AreaChart from "@/components/chart/topo/AreaChart";
+import BpsChart from "@/components/chart/topo/BpsChart";
+import DelayChart from "@/components/chart/topo/DelayChart";
+import QoSSummaryChart from "@/components/chart/topo/QoSSummaryChart";
+import StatusChart from "@/components/chart/topo/StatusChart";
 import Sankey from "@/components/chart/Sankey";
 
 const baseComponents = {
@@ -43,6 +44,18 @@ const baseComponents = {
     return {
 			where:''
     }
+}`,
+  },
+  ApiTopologyChart: {
+    icon: "icon-component",
+    component: ApiTopologyChart,
+    provide: "custom",
+    isOpen: false,
+    callback: `res => {
+    /*TODO*/
+    return {
+			where:''
+    }
 }`,
   },
   AreaChart: {
diff --git a/packages/gui/src/subscribe/fsm.js b/packages/gui/src/subscribe/fsm.js
index 1fe7014..0bc3b5e 100644
--- a/packages/gui/src/subscribe/fsm.js
+++ b/packages/gui/src/subscribe/fsm.js
@@ -3,13 +3,13 @@ import RingStatus from "@/components/chart/RingStatus";
 import TotalChart from "@/components/chart/TotalChart";
 
 //fsm
-import TopologyChart from "@/components/chart/fsm/TopologyChart";
-import McsTopologyChart from "@/components/chart/fsm/McsTopologyChart";
-import AreaChart from "@/components/chart/fsm/AreaChart";
-import BpsChart from "@/components/chart/fsm/BpsChart";
-import DelayChart from "@/components/chart/fsm/DelayChart";
-import QoSSummaryChart from "@/components/chart/fsm/QoSSummaryChart";
-import StatusChart from "@/components/chart/fsm/StatusChart";
+import TopologyChart from "@/components/chart/topo/TopologyChart";
+import McsTopologyChart from "@/components/chart/topo/McsTopologyChart";
+import AreaChart from "@/components/chart/topo/AreaChart";
+import BpsChart from "@/components/chart/topo/BpsChart";
+import DelayChart from "@/components/chart/topo/DelayChart";
+import QoSSummaryChart from "@/components/chart/topo/QoSSummaryChart";
+import StatusChart from "@/components/chart/topo/StatusChart";
 
 import fsm_svc from "@/services/fsm.js";
 import com_svc from "@/services/common.js";
diff --git a/packages/gui/src/subscribe/openapi.js b/packages/gui/src/subscribe/openapi.js
index 91d1a8b..b10e56e 100644
--- a/packages/gui/src/subscribe/openapi.js
+++ b/packages/gui/src/subscribe/openapi.js
@@ -2,7 +2,8 @@ import MiniArea from "@/components/chart/MiniArea";
 import RingStatus from "@/components/chart/RingStatus";
 import TotalChart from "@/components/chart/TotalChart";
 import openapi_svc from "@/services/openapi.js";
-import TopologyChart from "@/components/chart/openapi/TopologyChart";
+import clickhouse_svc from "@/services/clickhouse.js";
+import ApiTopologyChart from "@/components/chart/topo/ApiTopologyChart";
 
 const openapi = {
   dashboard: {
@@ -105,12 +106,13 @@ const openapi = {
     },
     TOPOLOGY: {
       title: "Topology",
-      tag: TopologyChart,
+      tag: ApiTopologyChart,
       col: 18,
       timer: 10000,
+      service: clickhouse_svc.getAPITopoData,
       provide: "clickhouse",
       className: "card nopd",
-      data: ()=>{},
+      data: clickhouse_svc.setAPITopoData(),
     },
   },
 };
diff --git a/packages/gui/src/utils/request.js b/packages/gui/src/utils/request.js
index af61c11..88eb1e7 100644
--- a/packages/gui/src/utils/request.js
+++ b/packages/gui/src/utils/request.js
@@ -35,6 +35,12 @@ async function request(url, method, params, config) {
   }
 }
 
+async function mock(d) {
+  return new Promise((resolve) => {
+		resolve(d);
+	});
+}
+
 async function merge(ary) {
   return axios.all(ary).then();
 }
@@ -176,6 +182,7 @@ export {
   request,
   merge,
   spread,
+	mock,
   setAuthorization,
   removeAuthorization,
   checkAuthorization,