refactor: change router components (#349)

New columns of the Log View
1. Timestamp + Raw log(content) as column one, 70% of the initial table width. No separate timestamp column. The first column should be timestamp - content
2. Level tag(key=level)'s value. This could be missed from tags, if so, keep the column empty.
3. Trace link. If trace ID exists, generate a link to trace. Don't need to put the relative trace ID in the text.
4. Still keep details pop-up style.

.github/workflows/nodejs.yml

@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js ${{ matrix.node-version }}

README.md

@@ -37,11 +37,11 @@ npm run dev
 The default UI address is `http://localhost:8080`.
 
 # Contact Us
-
-- Submit an [issue](https://github.com/apache/skywalking/issues) if you face some issues. Submit a [discussion](https://github.com/apache/skywalking/discussions) if you want to propose new feature or have any question.
-- Mailing list: **dev@skywalking.apache.org**. Mail to `dev-subscribe@skywalking.apache.org`, follow the reply to subscribe the mailing list.
-- Join Slack. Send `Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
-- QQ Group: 392443393, 901167865
+* Mail list: **dev@skywalking.apache.org**. Mail to `dev-subscribe@skywalking.apache.org`, follow the reply to subscribe to the mail list.
+* Send `Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
+* For Chinese speaker, send `[CN] Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
+* Twitter, [ASFSkyWalking](https://twitter.com/AsfSkyWalking)
+* [bilibili B站 视频](https://space.bilibili.com/390683219)
 
 # License
 

package.json

@@ -18,12 +18,12 @@
     "check-components-types": "if (! git diff --quiet -U0 ./src/types); then echo 'type files are not updated correctly'; git diff -U0 ./src/types; exit 1; fi"
   },
   "dependencies": {
-    "axios": "^0.24.0",
+    "axios": "^1.6.0",
     "d3": "^7.3.0",
     "d3-flame-graph": "^4.1.3",
     "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
-    "element-plus": "^2.1.0",
+    "element-plus": "^2.2.5",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
@@ -52,7 +52,7 @@
     "@vue/test-utils": "^2.2.6",
     "@vue/tsconfig": "^0.1.3",
     "@vueuse/core": "^9.6.0",
-    "cypress": "^12.0.2",
+    "cypress": "^13.3.2",
     "eslint": "^8.22.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^9.3.0",

src/App.vue

@@ -27,10 +27,11 @@ limitations under the License. -->
     }
   }, 500);
 </script>
-<style>
+<style lang="scss">
   #app {
-    color: #2c3e50;
+    color: $font-color;
     height: 100%;
     overflow: hidden;
+    background-color: $layout-background;
   }
 </style>

src/assets/icons/add_fill.svg

@@ -12,4 +12,4 @@ 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. -->
-<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" fill="#707070" p-id="9287"></path></svg>
+<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" p-id="9287"></path></svg>

src/components/Graph.vue

@@ -252,11 +252,11 @@ limitations under the License. -->
     display: block;
     white-space: nowrap;
     z-index: 9999999;
-    box-shadow: #ddd 1px 2px 10px;
+    box-shadow: var(--sw-topology-box-shadow);
     transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
-    background-color: rgb(255 255 255);
+    background-color: var(--sw-bg-color-overlay);
     border-radius: 4px;
-    color: rgb(51 51 51);
+    color: $font-color;
     padding: 5px;
   }
 
@@ -267,7 +267,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/components/SelectSingle.vue

@@ -88,7 +88,7 @@ limitations under the License. -->
     border: 1px solid #ddd;
     background: $theme-background;
     border-radius: 3px;
-    color: #000;
+    color: $font-color;
     font-size: $font-size-smaller;
     height: 24px;
 
@@ -112,7 +112,7 @@ limitations under the License. -->
     width: 100%;
     padding: 2px 10px;
     overflow: auto;
-    color: #606266;
+    color: var(--sw-setting-color);
     position: relative;
 
     &:hover {
@@ -133,7 +133,7 @@ limitations under the License. -->
   }
 
   .opt-wrapper {
-    color: #606266;
+    color: var(--sw-setting-color);
     position: absolute;
     top: 26px;
     left: 0;

src/constants/data.ts

@@ -26,3 +26,8 @@ export const Languages = [
   { label: "Chinese", value: "zh" },
   { label: "Spanish", value: "es" },
 ];
+
+export enum Themes {
+  Dark = "dark",
+  Light = "light",
+}

src/graphql/fragments/selector.ts

@@ -24,6 +24,7 @@ export const Services = {
     group
     layers
     normal
+    shortName
   }
   `,
 };

src/hooks/data.ts

@@ -130,3 +130,43 @@ export const RespFields: Indexable = {
     error
   }`,
 };
+
+export const DarkChartColors = [
+  "#79bbff",
+  "#a0a7e6",
+  "#30A4EB",
+  "#45BFC0",
+  "#ebbf93",
+  "#884dde",
+  "#1bbf93",
+  "#7289ab",
+  "#f56c6c",
+  "#81feb7",
+  "#4094fa",
+  "#ff894d",
+  "#884dde",
+  "#ebbf93",
+  "#fedc6d",
+  "#da7cfa",
+  "#b88230",
+  "#a0cfff",
+];
+
+export const LightChartColors = [
+  "#3f96e3",
+  "#a0a7e6",
+  "#45BFC0",
+  "#FFCC55",
+  "#FF6A84",
+  "#c23531",
+  "#2f4554",
+  "#61a0a8",
+  "#d48265",
+  "#91c7ae",
+  "#749f83",
+  "#ca8622",
+  "#bda29a",
+  "#6e7074",
+  "#546570",
+  "#c4ccd3",
+];

src/hooks/useEcharts.ts

@@ -30,6 +30,8 @@ import { useDebounceFn } from "@vueuse/core";
 import { useEventListener } from "./useEventListener";
 import { useBreakpoint } from "./useBreakpoint";
 import echarts from "@/utils/echarts";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
@@ -44,8 +46,9 @@ export type ECOption = echarts.ComposeOption<
 >;
 
 export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
+  const appStore = useAppStoreWithOut();
   const getDarkMode = computed(() => {
-    return theme === "default" ? "light" : theme;
+    return appStore.theme === "default" ? Themes.Light : theme;
   });
   let chartInstance: Nullable<echarts.ECharts> = null;
   let resizeFn: Fn = resize;
@@ -55,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
   resizeFn = useDebounceFn(resize, 200);
 
   const getOptions = computed(() => {
-    if (getDarkMode.value !== "dark") {
+    if (getDarkMode.value !== Themes.Dark) {
       return cacheOptions.value as ECOption;
     }
     return {

src/hooks/useExpressionsProcessor.ts

@@ -389,7 +389,10 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], instance
               values: [],
             };
           }
-          obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: instances[idx].id });
+          obj[metrics[index]].values.push({
+            value: resp[k].results[0] && resp[k].results[0].values[0].value,
+            id: instances[idx].id,
+          });
         }
       }
     }

src/hooks/useLegendProcessor.ts

@@ -16,6 +16,9 @@
  */
 import type { LegendOptions } from "@/types/dashboard";
 import { isDef } from "@/utils/is";
+import { DarkChartColors, LightChartColors } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export default function useLegendProcess(legend?: LegendOptions) {
   let isRight = false;
@@ -96,37 +99,11 @@ export default function useLegendProcess(legend?: LegendOptions) {
 
     return { source, headers };
   }
-  function chartColors(keys: string[]) {
-    let color: string[] = [];
-    switch (keys.length) {
-      case 2:
-        color = ["#FF6A84", "#a0b1e6"];
-        break;
-      case 1:
-        color = ["#3f96e3"];
-        break;
-      default:
-        color = [
-          "#30A4EB",
-          "#45BFC0",
-          "#FFCC55",
-          "#FF6A84",
-          "#a0a7e6",
-          "#c23531",
-          "#2f4554",
-          "#61a0a8",
-          "#d48265",
-          "#91c7ae",
-          "#749f83",
-          "#ca8622",
-          "#bda29a",
-          "#6e7074",
-          "#546570",
-          "#c4ccd3",
-        ];
-        break;
-    }
-    return color;
+  function chartColors() {
+    const appStore = useAppStoreWithOut();
+    const list = appStore.theme === Themes.Dark ? DarkChartColors : LightChartColors;
+
+    return list;
   }
   return { showEchartsLegend, isRight, aggregations, chartColors };
 }

src/layout/components/AppMain.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .app-main {
     height: calc(100% - 40px);
-    background: #f7f9fa;
+    background: $layout-background;
     overflow: auto;
   }
 </style>

src/layout/components/NavBar.vue

@@ -48,11 +48,14 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
       <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
+      <span class="ml-5">
+        <el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
+      </span>
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="version ml-5 cp">
-        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
+        <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />
@@ -74,7 +77,8 @@ limitations under the License. -->
   import { MetricCatalog } from "@/views/dashboard/data";
   import type { DashboardItem } from "@/types/dashboard";
   import router from "@/router";
-  import { ArrowRight } from "@element-plus/icons-vue";
+  import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
+  import { Themes } from "@/constants/data";
 
   /*global Indexable */
   const { t, te } = useI18n();
@@ -84,11 +88,36 @@ limitations under the License. -->
   const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
   const timeRange = ref<number>(0);
   const pageTitle = ref<string>("");
+  const theme = ref<boolean>(true);
 
+  const savedTheme = window.localStorage.getItem("theme-is-dark");
+  if (savedTheme === "false") {
+    theme.value = false;
+  } else if (savedTheme === "") {
+    // read the theme preference from system setting if there is no user setting
+    theme.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  changeTheme();
   resetDuration();
   getVersion();
   getNavPaths();
 
+  function changeTheme() {
+    const root = document.documentElement;
+
+    if (theme.value) {
+      root.classList.add(Themes.Dark);
+      root.classList.remove(Themes.Light);
+      appStore.setTheme(Themes.Dark);
+    } else {
+      root.classList.add(Themes.Light);
+      root.classList.remove(Themes.Dark);
+      appStore.setTheme(Themes.Light);
+    }
+    window.localStorage.setItem("theme-is-dark", String(theme.value));
+  }
+
   function getName(list: any[]) {
     return list.find((d: any) => d.selected) || {};
   }
@@ -287,21 +316,16 @@ limitations under the License. -->
     padding: 5px;
     text-align: left;
     justify-content: space-between;
-    background-color: #fafbfc;
-    border-bottom: 1px solid #dfe4e8;
-    color: #222;
+    background-color: $theme-background;
+    border-bottom: 1px solid $border-color;
+    color: $font-color;
     font-size: $font-size-smaller;
   }
 
-  .nav-bar.dark {
-    background-color: #333840;
-    border-bottom: 1px solid #252a2f;
-    color: #fafbfc;
-  }
-
   .title {
     font-size: $font-size-normal;
     font-weight: 500;
+    padding-top: 5px;
   }
 
   .nav-tabs {

src/locales/lang/en.ts

@@ -165,7 +165,6 @@ const msg = {
   iframeSrc: "Iframe Link",
   generateLink: "Generate Link",
   setDuration: "Lock Query Duration",
-  openFunction: "OpenFunction",
   period: "Period",
   windows: "Windows",
   seconds: "Seconds",
@@ -297,7 +296,8 @@ const msg = {
   return: "Return",
   isError: "Error",
   contentType: "Content Type",
-  content: "Content",
+  content: "Timestamp - Content",
+  level: "Level",
   viewLogs: "View Logs",
   logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
   Check more details on the Configuration Vocabulary page`,
@@ -382,5 +382,7 @@ const msg = {
   addExpressions: "Add Expressions",
   expressions: "Expression",
   unhealthyExpression: "Unhealthy Expression",
+  traceDesc:
+    "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
 };
 export default msg;

src/locales/lang/es.ts

@@ -149,7 +149,6 @@ const msg = {
   iframeSrc: "Enlace Iframe",
   generateLink: "Generar enlaces",
   setDuration: "Duración de la consulta de bloqueo",
-  openFunction: "OpenFunction",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
@@ -297,6 +296,7 @@ const msg = {
   isError: "Error",
   contentType: "Tipo de Contenido",
   content: "Contenido",
+  level: "Level",
   viewLogs: "Ver Registro de Datos",
   logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
   Más información en la página de Vocabulario de Configuración`,
@@ -382,5 +382,7 @@ const msg = {
   addExpressions: "Add Expressions",
   expressions: "Expression",
   unhealthyExpression: "Unhealthy Expression",
+  traceDesc:
+    "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
 };
 export default msg;

src/locales/lang/menus/en.ts

@@ -41,13 +41,6 @@ const titles = {
   service_mesh_control_plane_desc: "Provide monitoring of the behavior of Istio through its self-monitoring metrics.",
   service_mesh_data_plane: "Data Plane",
   service_mesh_data_plane_desc: "Observe Envoy Proxy through Envoy Metrics Service.",
-  // Functions
-  functions: "Functions",
-  functions_desc:
-    "FaaS (Function-as-a-Service) is a type of cloud-computing service that allows you to execute code in response to events without the complex infrastructure typically associated with building and launching microservices applications.",
-  functions_openfunction: "OpenFunction",
-  functions_openfunction_desc:
-    "OpenFunction as a FaaS platform, provides out-of-box observability with SkyWalking integration.",
   // Kubernetes
   kubernetes: "Kubernetes",
   kubernetes_desc:
@@ -82,6 +75,8 @@ const titles = {
   gateway: "Gateway",
   gateway_desc:
     "API gateway is an API management tool that sits between a client and a collection of backend services.",
+  gateway_nginx: "Nginx",
+  gateway_nginx_desc: "Provide Nginx monitoring through OpenTelemetry's Prometheus Receiver.",
   gateway_apisix: "APISIX",
   gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
   gateway_aws_api_gateway: "AWS API Gateway",
@@ -109,6 +104,10 @@ const titles = {
     "A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.",
   mq_rabbitmq: "RabbitMQ",
   mq_rabbitmq_desc: "Provide RabbitMQ monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_kafka: "Kafka",
+  mq_kafka_desc: "Provide Kafka monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_pulsar: "Pulsar",
+  mq_pulsar_desc: "Provide Pulsar monitoring through OpenTelemetry's Prometheus Receiver.",
   // self observability
   self_observability: "Self Observability",
   self_observability_desc:

src/locales/lang/menus/es.ts

@@ -41,13 +41,6 @@ const titles = {
   service_mesh_control_plane_desc: "Provide monitoring of the behavior of Istio through its self-monitoring metrics.",
   service_mesh_data_plane: "Plano de Datos",
   service_mesh_data_plane_desc: "Observe Envoy Proxy through Envoy Metrics Service.",
-  // Functions
-  functions: "Funciones",
-  functions_desc:
-    "FaaS (Function-as-a-Service) is a type of cloud-computing service that allows you to execute code in response to events without the complex infrastructure typically associated with building and launching microservices applications.",
-  functions_openfunction: "OpenFunction",
-  functions_openfunction_desc:
-    "OpenFunction as a FaaS platform, provides out-of-box observability with SkyWalking integration.",
   // Kubernetes
   kubernetes: "Kubernetes",
   kubernetes_desc:
@@ -82,6 +75,8 @@ const titles = {
   gateway: "Puerta",
   gateway_desc:
     "API gateway is an API management tool that sits between a client and a collection of backend services.",
+  gateway_nginx: "Nginx",
+  gateway_nginx_desc: "Provide Nginx monitoring through OpenTelemetry's Prometheus Receiver.",
   gateway_apisix: "APISIX",
   gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
   gateway_aws_api_gateway: "AWS API Gateway",
@@ -109,6 +104,10 @@ const titles = {
     "A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.",
   mq_rabbitmq: "RabbitMQ",
   mq_rabbitmq_desc: "Provide RabbitMQ monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_kafka: "Kafka",
+  mq_kafka_desc: "Provide Kafka monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_pulsar: "Pulsar",
+  mq_pulsar_desc: "Provide Pulsar monitoring through OpenTelemetry's Prometheus Receiver.",
   // self observability
   self_observability: "Self Observability",
   self_observability_desc:

src/locales/lang/menus/zh.ts

@@ -35,12 +35,6 @@ const titles = {
   service_mesh_control_plane_desc: "通过Istio的自我监控指标提供对其行为的监控。",
   service_mesh_data_plane: "数据平面",
   service_mesh_data_plane_desc: "通过Envoy Metrics Service观察Envoy Proxy。",
-  // Functions
-  functions: "Functions",
-  functions_desc:
-    "FaaS（功能即服务）是一种云计算服务，允许您在没有通常与构建和启动微服务应用程序相关的复杂基础设施的情况下执行代码以响应事件。",
-  functions_openfunction: "OpenFunction",
-  functions_openfunction_desc: "OpenFunction作为一个FaaS平台，通过SkyWalking集成提供开箱即用的可观察性。",
   // Kubernetes
   kubernetes: "Kubernetes",
   kubernetes_desc: "Kubernetes是一个开源的容器编排系统，用于自动化软件部署、扩展和管理。",
@@ -72,6 +66,8 @@ const titles = {
   // Gateway
   gateway: "网关",
   gateway_desc: "API网关是位于客户端和后端服务集合之间的API管理工具。",
+  gateway_nginx: "Nginx",
+  gateway_nginx_desc: "通过OpenTelemetry的Prometheus接收器提供Nginx监控。",
   gateway_apisix: "APISIX",
   gateway_apisix_desc: "通过OpenTelemetry的Prometheus接收器提供APISIX监控。",
   gateway_aws_api_gateway: "AWS API Gateway",
@@ -96,6 +92,10 @@ const titles = {
   mq_desc: "消息队列是无服务器和微服务架构中使用的异步服务对服务通信的一种形式。",
   mq_rabbitmq: "RabbitMQ",
   mq_rabbitmq_desc: "通过OpenTelemetry的Prometheus接收器提供RabbitMQ监控。",
+  mq_kafka: "Kafka",
+  mq_Kafka_desc: "通过OpenTelemetry的Prometheus接收器提供Kafka监控。",
+  mq_pulsar: "Pulsar",
+  mq_Pulsar_desc: "通过OpenTelemetry的Prometheus接收器提供Pulsar监控。",
   // self observability
   self_observability: "自监控",
   self_observability_desc: "自观察性为运行SkyWalking生态系统中的组件和服务器提供了可观察性。",

src/locales/lang/zh.ts

@@ -163,7 +163,6 @@ const msg = {
   iframeSrc: "Iframe链接",
   generateLink: "生成链接",
   setDuration: "锁定查询持续时间",
-  openFunction: "OpenFunction",
   period: "周期",
   windows: "Windows",
   seconds: "秒",
@@ -294,7 +293,8 @@ const msg = {
   return: "返回",
   isError: "错误",
   contentType: "内容类型",
-  content: "内容",
+  content: "时间戳 - 内容",
+  level: "Level",
   viewLogs: "查看日志",
   logsTagsTip: "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
@@ -380,5 +380,7 @@ const msg = {
   addExpressions: "添加表达式",
   expressions: "表达式",
   unhealthyExpression: "非健康表达式",
+  traceDesc:
+    "Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
 };
 export default msg;

src/router/alarm.ts

@@ -16,6 +16,7 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import Alarm from "@/views/Alarm.vue";
 
 export const routesAlarm: Array<RouteRecordRaw> = [
   {
@@ -33,7 +34,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
       {
         path: "/alerting",
         name: "Alarm",
-        component: () => import("@/views/Alarm.vue"),
+        component: Alarm,
       },
     ],
   },

src/router/dashboard.ts

@@ -16,6 +16,10 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import List from "@/views/dashboard/List.vue";
+import New from "@/views/dashboard/New.vue";
+import Edit from "@/views/dashboard/Edit.vue";
+import Widget from "@/views/dashboard/Widget.vue";
 
 export const routesDashboard: Array<RouteRecordRaw> = [
   {
@@ -32,7 +36,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
     children: [
       {
         path: "/dashboard/list",
-        component: () => import("@/views/dashboard/List.vue"),
+        component: List,
         name: "List",
         meta: {
           i18nKey: "dashboardList",
@@ -42,7 +46,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       },
       {
         path: "/dashboard/new",
-        component: () => import("@/views/dashboard/New.vue"),
+        component: New,
         name: "New",
         meta: {
           i18nKey: "dashboardNew",
@@ -54,26 +58,26 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect: "/dashboard/:layerId/:entity/:name",
         name: "Create",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         meta: {
           notShow: true,
         },
         children: [
           {
             path: "/dashboard/:layerId/:entity/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "CreateChild",
           },
           {
             path: "/dashboard/:layerId/:entity/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "CreateActiveTabIndex",
           },
         ],
       },
       {
         path: "",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "View",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:name",
         meta: {
@@ -82,12 +86,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewChild",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewActiveTabIndex",
           },
         ],
@@ -95,7 +99,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ViewServiceRelation",
         meta: {
           notShow: true,
@@ -103,12 +107,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewServiceRelation",
           },
           {
             path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewServiceRelationActiveTabIndex",
           },
         ],
@@ -116,7 +120,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ViewPod",
         meta: {
           notShow: true,
@@ -124,12 +128,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPod",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPodActiveTabIndex",
           },
         ],
@@ -137,7 +141,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ViewProcess",
         meta: {
           notShow: true,
@@ -145,12 +149,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcess",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessActiveTabIndex",
           },
         ],
@@ -158,7 +162,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "PodRelation",
         meta: {
           notShow: true,
@@ -166,12 +170,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPodRelation",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPodRelationActiveTabIndex",
           },
         ],
@@ -180,7 +184,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect:
           "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ProcessRelation",
         meta: {
           notShow: true,
@@ -188,17 +192,17 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessRelation",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessRelationActiveTabIndex",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/duration/:duration",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessRelationDuration",
           },
         ],
@@ -206,14 +210,14 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         name: "Widget",
-        component: () => import("@/views/dashboard/Widget.vue"),
+        component: Widget,
         meta: {
           notShow: true,
         },
         children: [
           {
             path: "/page/:layer/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:config/:duration?",
-            component: () => import("@/views/dashboard/Widget.vue"),
+            component: Widget,
             name: "ViewWidget",
           },
         ],

src/router/layer.ts

@@ -17,6 +17,7 @@
 import Layout from "@/layout/Index.vue";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import type { MenuOptions } from "@/types/app";
+import Layer from "@/views/Layer.vue";
 
 function layerDashboards() {
   const appStore = useAppStoreWithOut();
@@ -47,13 +48,13 @@ function layerDashboards() {
           descKey: child.descKey,
           i18nKey: child.i18nKey,
         },
-        component: () => import("@/views/Layer.vue"),
+        component: Layer,
       };
       route.children.push(d);
       const tab = {
         name: `${child.name}ActiveTabIndex`,
-        path: `/${child.name}/tab/:activeTabIndex`,
-        component: () => import("@/views/Layer.vue"),
+        path: `/${child.path}/tab/:activeTabIndex`,
+        component: Layer,
         meta: {
           notShow: true,
           layer: child.layer,
@@ -74,7 +75,7 @@ function layerDashboards() {
             descKey: item.descKey,
             i18nKey: item.i18nKey,
           },
-          component: () => import("@/views/Layer.vue"),
+          component: Layer,
         },
       ];
     }

src/router/marketplace.ts

@@ -16,6 +16,7 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import Marketplace from "@/views/Marketplace.vue";
 
 export const routesMarketplace: Array<RouteRecordRaw> = [
   {
@@ -33,7 +34,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
       {
         path: "/marketplace",
         name: "MenusManagement",
-        component: () => import("@/views/Marketplace.vue"),
+        component: Marketplace,
       },
     ],
   },

src/router/settings.ts

@@ -16,6 +16,7 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import Settings from "@/views/Settings.vue";
 
 export const routesSettings: Array<RouteRecordRaw> = [
   {
@@ -33,7 +34,7 @@ export const routesSettings: Array<RouteRecordRaw> = [
       {
         path: "/settings",
         name: "Settings",
-        component: () => import("@/views/Settings.vue"),
+        component: Settings,
       },
     ],
   },

src/store/modules/app.ts

@@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
 import type { MenuOptions, SubItem } from "@/types/app";
+import { Themes } from "@/constants/data";
 /*global Nullable*/
 interface AppState {
   durationRow: Recordable;
@@ -36,6 +37,7 @@ interface AppState {
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
   allMenus: MenuOptions[];
+  theme: string;
 }
 
 export const appStore = defineStore({
@@ -56,6 +58,7 @@ export const appStore = defineStore({
     isMobile: false,
     reloadTimer: null,
     allMenus: [],
+    theme: Themes.Dark,
   }),
   getters: {
     duration(): Duration {
@@ -126,6 +129,9 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
+    setTheme(data: string) {
+      this.theme = data;
+    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;

src/store/modules/dashboard.ts

@@ -179,6 +179,7 @@ export const dashboardStore = defineStore({
         newItem.graph = {
           showDepth: true,
         };
+        newItem.metricMode = MetricModes.Expression;
       }
       if (ControlsTypes.includes(type)) {
         newItem.h = 32;

src/store/modules/profile.ts

@@ -163,7 +163,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getSegmentSpans(params: { segmentId: string }) {
-      if (!params.segmentId) {
+      if (!(params && params.segmentId)) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);

src/store/modules/topology.ts

@@ -191,6 +191,9 @@ export const topologyStore = defineStore({
       }
     },
     async getServicesTopology(serviceIds: string[]) {
+      if (!serviceIds.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const duration = useAppStoreWithOut().durationTime;
       const res: AxiosResponse = await graphql.query("getServicesTopology").params({
         serviceIds,
@@ -207,7 +210,7 @@ export const topologyStore = defineStore({
       const clientServiceId = (currentDestService && currentDestService.id) || "";
       const duration = useAppStoreWithOut().durationTime;
       if (!(serverServiceId && clientServiceId)) {
-        return;
+        return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("getInstanceTopology").params({
         clientServiceId,
@@ -220,6 +223,9 @@ export const topologyStore = defineStore({
       return res.data;
     },
     async updateEndpointTopology(endpointIds: string[], depth: number) {
+      if (!endpointIds.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res = await this.getEndpointTopology(endpointIds);
       if (depth > 1) {
         const ids = res.nodes.map((item: Node) => item.id).filter((d: string) => !endpointIds.includes(d));
@@ -285,6 +291,9 @@ export const topologyStore = defineStore({
       }
     },
     async getEndpointTopology(endpointIds: string[]) {
+      if (!endpointIds.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const duration = useAppStoreWithOut().durationTime;
       const variables = ["$duration: Duration!"];
       const fragment = endpointIds.map((id: string, index: number) => {

src/styles/light.scss

@@ -1,25 +0,0 @@
-/**
- * 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.
- */
-
-$font-color: #3d444f;
-$text-color: #fff;
-$disabled-color: #ccc;
-$active-color: #409eff;
-$theme-background: #fff;
-$active-background: #409eff;
-$font-size-smaller: 12px;
-$font-size-normal: 14px;

src/styles/reset.scss

@@ -123,96 +123,3 @@ code,
 pre {
   font-family: Consolas, Menlo, Courier, monospace;
 }
-
-.el-menu {
-  --el-menu-item-height: 50px;
-}
-
-.el-menu-item-group__title {
-  display: none;
-}
-
-.el-sub-menu .el-menu-item {
-  height: 40px;
-  line-height: 40px;
-  padding: 0 0 0 56px !important;
-}
-
-.el-sub-menu__title {
-  .el-icon.menu-icons {
-    margin-top: -5px !important;
-  }
-}
-
-.el-switch__label--left {
-  margin-right: 5px;
-}
-
-.el-switch__label--right {
-  margin-left: 5px;
-}
-
-.el-switch__label * {
-  font-size: $font-size-smaller;
-}
-
-.el-drawer__header {
-  margin-bottom: 0;
-  padding-left: 10px;
-  font-size: 16px;
-}
-
-.el-drawer__body {
-  padding: 0;
-}
-
-.switch {
-  margin: 0 5px;
-}
-
-div.vis-tooltip {
-  max-width: 600px;
-  overflow: hidden;
-  background-color: $theme-background !important;
-  white-space: normal !important;
-  font-size: $font-size-smaller !important;
-}
-
-.vis-item {
-  cursor: pointer;
-  height: 20px;
-}
-
-.vis-item.Error {
-  background-color: #e66;
-  opacity: 0.8;
-  border-color: #e66;
-  color: $text-color !important;
-}
-
-.vis-item.Normal {
-  background-color: #fac858;
-  border-color: #fac858;
-  color: #666 !important;
-}
-
-.vis-item .vis-item-content {
-  padding: 0 3px !important;
-}
-
-.vis-item.vis-selected.Error,
-.vis-item.vis-selected.Normal {
-  color: #1a1a1a !important;
-}
-
-.el-menu--vertical.sub-list {
-  display: none;
-}
-
-div:has(> a.menu-title) {
-  display: none;
-}
-
-.el-input-number .el-input__inner {
-  text-align: left !important;
-}

src/styles/theme.scss

@@ -0,0 +1,252 @@
+/**
+ * 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.
+ */
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+:root {
+  --sw-green: #70c877;
+  --sw-orange: #e6a23c;
+}
+
+html {
+  --el-color-primary: #409eff;
+  --theme-background: #fff;
+  --font-color: #3d444f;
+  --disabled-color: #ccc;
+  --dashboard-tool-bg: rgb(240 242 245);
+  --text-color-placeholder: #666;
+  --border-color: #dcdfe6;
+  --border-color-primary: #eee;
+  --layout-background: #f7f9fa;
+  --box-shadow-color: #ccc;
+  --sw-bg-color-overlay: #fff;
+  --sw-border-color-light: #e4e7ed;
+  --popper-hover-bg: #eee;
+  --sw-icon-btn-bg: #eee;
+  --sw-icon-btn-color: #666;
+  --sw-icon-btn-border: #ccc;
+  --sw-table-col: #fff;
+  --sw-config-header: aliceblue;
+  --sw-topology-color: #666;
+  --vis-tooltip-bg: #fff;
+  --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
+  --sw-topology-box-shadow: #eee 1px 2px 10px;
+  --sw-topology-setting-bg: #fff;
+  --sw-topology-border: 1px solid #999;
+  --sw-trace-success: rgb(46 47 51 / 10%);
+  --sw-trace-list-border: rgb(0 0 0 / 10%);
+  --sw-list-selected: #ededed;
+  --sw-table-header: #f3f4f9;
+  --sw-list-hover: rgb(0 0 0 / 4%);
+  --sw-setting-color: #606266;
+  --sw-alarm-tool: #f0f2f5;
+  --sw-alarm-tool-border: #c1c5ca41;
+  --sw-table-color: #000;
+  --sw-event-vis-selected: #1a1a1a;
+  --sw-time-axis-text: #4d4d4d;
+  --sw-drawer-header: #72767b;
+  --sw-marketplace-border: #dedfe0;
+  --sw-grid-item-active: #79bbff;
+}
+
+html.dark {
+  --el-color-primary: #409eff;
+  --theme-background: #212224;
+  --font-color: #fafbfc;
+  --disabled-color: #ccc;
+  --dashboard-tool-bg: #000;
+  --text-color-placeholder: #ccc;
+  --border-color: #262629;
+  --border-color-primary: #4b4b52;
+  --layout-background: #000;
+  --box-shadow-color: #606266;
+  --sw-bg-color-overlay: #1d1e1f;
+  --sw-border-color-light: #414243;
+  --popper-hover-bg: rgb(64, 158, 255, 0.1);
+  --sw-icon-btn-bg: #222;
+  --sw-icon-btn-color: #ccc;
+  --sw-icon-btn-border: #999;
+  --sw-table-col: none;
+  --sw-config-header: #303133;
+  --sw-topology-color: #ccc;
+  --vis-tooltip-bg: #414243;
+  --sw-topology-switch-icon: #aaa;
+  --sw-topology-box-shadow: 0 0 2px 0 #444;
+  --sw-topology-setting-bg: #333;
+  --sw-topology-border: 1px solid #666;
+  --sw-trace-success: #aaa;
+  --sw-trace-list-border: #333133;
+  --sw-list-hover: #262629;
+  --sw-table-header: #303133;
+  --sw-list-selected: #3d444f;
+  --sw-setting-color: #eee;
+  --sw-alarm-tool: #303133;
+  --sw-alarm-tool-border: #444;
+  --sw-table-color: #fff;
+  --sw-event-vis-selected: #fff;
+  --sw-time-axis-text: #aaa;
+  --sw-drawer-header: #e9e9eb;
+  --sw-marketplace-border: #606266;
+  --sw-grid-item-active: #73767a;
+}
+
+.el-drawer__header {
+  color: var(--sw-drawer-header);
+}
+
+.el-table tr {
+  background-color: var(--el-table-tr-bg-color);
+}
+
+.el-popper.is-light {
+  background: var(--sw-bg-color-overlay);
+  border: 1px solid var(--sw-border-color-light);
+}
+
+.el-switch {
+  --el-switch-off-color: #aaa;
+}
+
+.el-table__body-wrapper tr td.el-table-fixed-column--left,
+.el-table__body-wrapper tr td.el-table-fixed-column--right,
+.el-table__body-wrapper tr th.el-table-fixed-column--left,
+.el-table__body-wrapper tr th.el-table-fixed-column--right,
+.el-table__footer-wrapper tr td.el-table-fixed-column--left,
+.el-table__footer-wrapper tr td.el-table-fixed-column--right,
+.el-table__footer-wrapper tr th.el-table-fixed-column--left,
+.el-table__footer-wrapper tr th.el-table-fixed-column--right,
+.el-table__header-wrapper tr td.el-table-fixed-column--left,
+.el-table__header-wrapper tr td.el-table-fixed-column--right,
+.el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table__header-wrapper tr th.el-table-fixed-column--right {
+  background-color: var(--sw-table-col);
+}
+
+.el-table.is-scrolling-none th.el-table-fixed-column--left,
+.el-table.is-scrolling-none th.el-table-fixed-column--right,
+.el-table th.el-table__cell {
+  background-color: var(--sw-table-col);
+}
+
+$tool-icon-btn-bg: var(--sw-icon-btn-bg);
+$tool-icon-btn-color: var(--sw-icon-btn-color);
+$popper-hover-bg-color: var(--popper-hover-bg);
+$box-shadow-color: var(--box-shadow-color);
+$border-color-primary: var(--border-color-primary);
+$layout-background: var(--layout-background);
+$border-color: var(--border-color);
+$dashboard-tool-bg-color: var(--dashboard-tool-bg);
+$font-color: var(--font-color);
+$text-color: var(--theme-background);
+$disabled-color: var(--disabled-color);
+$active-color: var(--el-color-primary);
+$theme-background: var(--theme-background);
+$active-background: var(--el-color-primary);
+$font-size-smaller: 12px;
+$font-size-normal: 14px;
+
+.opt:hover {
+  background-color: var(--sw-list-hover) !important;
+}
+
+.el-loading-mask {
+  background-color: var(--theme-background);
+}
+
+.el-menu {
+  --el-menu-item-height: 50px;
+}
+
+.el-menu-item-group__title {
+  display: none;
+}
+
+.el-sub-menu .el-menu-item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 0 0 56px !important;
+}
+
+.el-sub-menu__title {
+  .el-icon.menu-icons {
+    margin-top: -5px !important;
+  }
+}
+
+.el-drawer__header {
+  margin-bottom: 0;
+  padding-left: 10px;
+  font-size: 16px;
+}
+
+.el-drawer__body {
+  padding: 0;
+}
+
+.switch {
+  margin: 0 5px;
+}
+
+div.vis-tooltip {
+  max-width: 600px;
+  overflow: hidden;
+  background-color: var(--vis-tooltip-bg) !important;
+  white-space: normal !important;
+  font-size: $font-size-smaller !important;
+  color: var(--font-color) !important;
+}
+
+.vis-item {
+  cursor: pointer;
+  height: 20px;
+}
+
+.vis-item.Error {
+  background-color: #e66;
+  opacity: 0.8;
+  border-color: #e66;
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-item.Normal {
+  background-color: #fac858;
+  border-color: #fac858;
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-item .vis-item-content {
+  padding: 0 3px !important;
+}
+
+.vis-item.vis-selected.Error,
+.vis-item.vis-selected.Normal {
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-time-axis .vis-text {
+  color: var(--sw-time-axis-text) !important;
+}
+
+.el-menu--vertical.sub-list {
+  display: none;
+}
+
+div:has(> a.menu-title) {
+  display: none;
+}
+
+.el-input-number .el-input__inner {
+  text-align: left !important;
+}

src/types/selector.d.ts

@@ -22,6 +22,7 @@ export type Service = {
   normal?: boolean;
   group?: string;
   merge?: string;
+  shortName?: string;
 };
 
 export type Instance = {

src/views/Marketplace.vue

@@ -113,7 +113,7 @@ limitations under the License. -->
 
   .category {
     flex-wrap: wrap;
-    border-right: 1px solid #ddd;
+    border-right: 1px solid var(--sw-marketplace-border);
     align-content: flex-start;
     height: 100%;
     overflow: auto;

src/views/Settings.vue

@@ -156,7 +156,7 @@ limitations under the License. -->
   }
 
   .settings {
-    color: #606266;
+    color: var(--sw-setting-color);
     font-size: 13px;
     padding: 20px;
 
@@ -177,7 +177,7 @@ limitations under the License. -->
       width: 180px;
       display: inline-block;
       font-weight: 500;
-      color: #000;
+      color: $font-color;
       line-height: 25px;
     }
   }

src/views/alarm/Content.vue

@@ -157,7 +157,7 @@ limitations under the License. -->
 
   .timeline-table-i {
     padding: 10px 15px;
-    border-left: 4px solid #eee;
+    border-left: 4px solid var(--border-color-primary);
     position: relative;
 
     &::after {

src/views/alarm/Header.vue

@@ -39,7 +39,11 @@ limitations under the License. -->
           @current-change="changePage"
           :pager-count="5"
           small
-          :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+          :style="
+            appStore.theme === Themes.Light
+              ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`
+              : ''
+          "
         />
       </div>
     </div>
@@ -54,6 +58,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useAlarmStore } from "@/store/modules/alarm";
   import { ElMessage } from "element-plus";
+  import { Themes } from "@/constants/data";
 
   const appStore = useAppStoreWithOut();
   const alarmStore = useAlarmStore();
@@ -99,8 +104,8 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .alarm-tool {
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #c1c5ca41;
-    background-color: #f0f2f5;
+    border-bottom: 1px solid var(--sw-alarm-tool-border);
+    background-color: var(--sw-alarm-tool);
     padding: 10px;
     position: relative;
   }

src/views/dashboard/List.vue

@@ -116,8 +116,6 @@ limitations under the License. -->
         </el-button>
         <el-pagination
           class="pagination"
-          background
-          small
           layout="prev, pager, next"
           :page-size="pageSize"
           :total="total"

src/views/dashboard/Widget.vue

@@ -87,10 +87,12 @@ limitations under the License. -->
         dashboardStore.setLayer(route.params.layer);
         dashboardStore.setEntity(route.params.entity);
         const { auto, autoPeriod } = config.value;
-
         if (auto) {
           await setDuration();
           appStoreWithOut.setReloadTimer(setInterval(setDuration, autoPeriod * 1000));
+        } else {
+          const duration = JSON.parse(route.params.duration as string);
+          appStoreWithOut.setDuration(duration);
         }
         await setSelector();
         await queryMetrics();
@@ -184,7 +186,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .content {
     min-width: 100px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
     position: relative;
   }

src/views/dashboard/components/WidgetLink.vue

@@ -20,14 +20,9 @@ limitations under the License. -->
     </div>
     <div v-if="hasDuration">
       <label>{{ t("duration") }}</label>
-      <TimePicker
-        :value="[appStore.durationRow.start, appStore.durationRow.end]"
-        position="right"
-        format="YYYY-MM-DD HH:mm"
-        @input="changeTimeRange"
-      />
+      <TimePicker :value="duration" position="right" format="YYYY-MM-DD HH:mm" @input="changeTimeRange" />
     </div>
-    <div v-if="!hasDuration">
+    <div v-else>
       <label>{{ t("auto") }}</label>
       <el-switch class="mr-5" v-model="auto" style="height: 25px" />
       <Selector v-model="freshOpt" :options="RefreshOptions" size="small" />
@@ -72,6 +67,7 @@ limitations under the License. -->
   const auto = ref<boolean>(true);
   const period = ref<number>(6);
   const freshOpt = ref<string>(RefreshOptions[0].value);
+  const duration = ref<string>(JSON.parse(JSON.stringify([appStore.durationRow.start, appStore.durationRow.end])));
 
   function changeTimeRange(val: Date[] | any) {
     dates.value = val;
@@ -127,7 +123,10 @@ limitations under the License. -->
         tips: encodeURIComponent(widget.tips || ""),
       };
     }
-    if (auto.value) {
+    if (hasDuration.value) {
+      opt.auto = 0;
+      opt.autoPeriod = 0;
+    } else {
       const f = RefreshOptions.filter((d: { value: string }) => d.value === freshOpt.value)[0] || {};
       opt.auto = Number(f.value) * 60 * 1000;
       opt.autoPeriod = period.value;

src/views/dashboard/configuration/ContinuousProfiling.vue

@@ -91,7 +91,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Event.vue

@@ -68,7 +68,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Text.vue

@@ -89,6 +89,7 @@ limitations under the License. -->
   const fontSize = ref<number>(graph.fontSize || 12);
   const textAlign = ref(graph.textAlign || "left");
   const Colors = [
+    { label: "Theme", value: "theme" },
     {
       label: "Green",
       value: "green",
@@ -151,7 +152,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/ThirdPartyApp.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/TimeRange.vue

@@ -147,7 +147,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Topology.vue

@@ -63,7 +63,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Widget.vue

@@ -201,7 +201,7 @@ limitations under the License. -->
   .graph {
     position: relative;
     min-width: 1280px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
   }
 
@@ -209,7 +209,7 @@ limitations under the License. -->
     height: 25px;
     line-height: 25px;
     text-align: center;
-    background-color: aliceblue;
+    background-color: var(--sw-config-header);
     font-size: $font-size-smaller;
     position: relative;
   }
@@ -249,7 +249,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -630,11 +630,10 @@ limitations under the License. -->
   .expression-param {
     display: inline-block;
     width: 400px;
-    border: 1px solid #dcdfe6;
+    border: 1px solid $border-color;
     cursor: text;
     padding: 0 5px;
     border-radius: 3px;
-    color: #606266;
     outline: none;
     margin-right: 5px;
     min-height: 26px;

src/views/dashboard/controls/ContinuousProfiling.vue

@@ -75,7 +75,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -87,7 +87,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
@@ -95,6 +95,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>

src/views/dashboard/controls/DemandLog.vue

@@ -69,7 +69,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1024px;
   }
 
@@ -82,7 +82,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/views/dashboard/controls/Ebpf.vue

@@ -68,7 +68,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/controls/Event.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1024px;
   }
 
@@ -93,7 +93,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/controls/Log.vue

@@ -77,7 +77,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1024px;
   }
 
@@ -90,7 +90,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/controls/NetworkProfiling.vue

@@ -67,7 +67,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
@@ -87,6 +87,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>

src/views/dashboard/controls/Profile.vue

@@ -68,7 +68,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/controls/Tab.vue

@@ -282,7 +282,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .tabs {
     height: 40px;
-    color: $disabled-color;
+    color: var(--sw-icon-btn-color);
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
@@ -302,16 +302,15 @@ limitations under the License. -->
       height: 20px;
       line-height: 20px;
       outline: none;
-      color: #333;
+      color: $font-color;
       font-style: normal;
       overflow: hidden;
       text-overflow: ellipsis;
       margin-right: 20px;
+      background-color: $theme-background;
     }
 
     .tab-icons {
-      color: #333;
-
       i {
         margin-right: 3px;
       }
@@ -350,17 +349,17 @@ limitations under the License. -->
   .tab-header {
     justify-content: space-between;
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
   }
 
   .vue-grid-layout {
-    background: #f7f9fa;
+    background: $layout-background;
     height: auto !important;
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: $theme-background;
-    box-shadow: 0 1px 4px 0 #00000029;
+    box-shadow: 0 0 3px 0 $box-shadow-color;
     border-radius: 3px;
   }
 
@@ -370,11 +369,11 @@ limitations under the License. -->
   }
 
   .tab-icon {
-    color: #666;
+    color: var(--sw-icon-btn-color);
   }
 
   .vue-grid-item.active {
-    border: 1px solid $active-color;
+    border: 1px solid var(--sw-grid-item-active);
   }
 
   .no-data-tips {

src/views/dashboard/controls/TaskTimeline.vue

@@ -67,7 +67,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
@@ -87,6 +87,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>

src/views/dashboard/controls/Text.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <div
       class="body"
       :style="{
-        backgroundColor: TextColors[graph.backgroundColor],
+        backgroundColor,
         justifyContent: graph.textAlign,
       }"
     >
@@ -40,8 +40,9 @@ limitations under the License. -->
         :href="graph.url"
         target="_blank"
         :style="{
-          color: TextColors[graph.fontColor],
+          color: fontColor,
           fontSize: graph.fontSize + 'px',
+          textDecoration: 'underline',
         }"
       >
         {{ graph.content }}
@@ -55,6 +56,8 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { TextColors } from "@/views/dashboard/data";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps */
   const props = defineProps({
@@ -65,9 +68,17 @@ limitations under the License. -->
     activeIndex: { type: String, default: "" },
   });
   const { t } = useI18n();
+  const appStore = useAppStoreWithOut();
   const graph = computed(() => props.data.graph || {});
   const dashboardStore = useDashboardStore();
 
+  const backgroundColor = computed(
+    () => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
+  );
+  const fontColor = computed(
+    () => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
+  );
+
   function removeTopo() {
     dashboardStore.removeControls(props.data);
   }
@@ -112,7 +123,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/views/dashboard/controls/ThirdPartyApp.vue

@@ -103,7 +103,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/controls/TimeRange.vue

@@ -176,7 +176,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/views/dashboard/controls/Topology.vue

@@ -59,7 +59,6 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .topology {
-    // background-color: #333840;
     width: 100%;
     height: 100%;
     font-size: $font-size-smaller;
@@ -82,7 +81,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/controls/Trace.vue

@@ -76,7 +76,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1200px;
   }
 
@@ -89,11 +89,12 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
   .trace {
+    min-height: calc(100% - 150px);
     width: 100%;
     overflow: auto;
     min-width: 1200px;

src/views/dashboard/controls/Widget.vue

@@ -277,7 +277,7 @@ limitations under the License. -->
     height: 30px;
     padding: 5px;
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
     justify-content: space-between;
   }
 
@@ -294,7 +294,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 

src/views/dashboard/data.ts

@@ -306,9 +306,9 @@ export const TextColors: { [key: string]: string } = {
   green: "#67C23A",
   blue: "#409EFF",
   red: "#F56C6C",
-  grey: "#909399",
+  grey: "#809399",
   white: "#fff",
-  black: "#000",
+  black: "#303133",
   orange: "#E6A23C",
   purple: "#bf99f8",
 };
@@ -345,3 +345,7 @@ export enum MetricModes {
   Expression = "Expression",
   General = "General",
 }
+export enum CallTypes {
+  Server = "SERVER",
+  Client = "CLIENT",
+}

src/views/dashboard/graphs/Bar.vue

@@ -24,6 +24,8 @@ limitations under the License. -->
   import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import Legend from "./components/Legend.vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -46,6 +48,7 @@ limitations under the License. -->
       default: () => ({}),
     },
   });
+  const appStore = useAppStoreWithOut();
   const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
   const option = computed(() => getOption());
 
@@ -71,7 +74,7 @@ limitations under the License. -->
         },
       };
     });
-    const color: string[] = chartColors(keys);
+    const color: string[] = chartColors();
     return {
       color,
       tooltip: {
@@ -82,7 +85,7 @@ limitations under the License. -->
         },
         enterable: true,
         confine: true,
-        extraCssText: "max-height: 300px; overflow: auto; border: none;",
+        extraCssText: "max-height:85%; overflow: auto;",
       },
       legend: {
         type: "scroll",
@@ -91,8 +94,11 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
+        backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+        borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
         textStyle: {
-          color: "#333",
+          fontSize: 12,
+          color: appStore.theme === Themes.Dark ? "#eee" : "#333",
         },
       },
       grid: {

src/views/dashboard/graphs/Card.vue

@@ -61,7 +61,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .chart-card {
-    color: #333;
+    color: $font-color;
     width: 100%;
     height: 100%;
     display: flex;

src/views/dashboard/graphs/InstanceList.vue

@@ -66,9 +66,7 @@ limitations under the License. -->
       </el-table>
     </div>
     <el-pagination
-      class="pagination"
-      background
-      small
+      class="pagination flex-h"
       layout="prev, pager, next"
       :page-size="pageSize"
       :total="pods.length"

src/views/dashboard/graphs/Line.vue

@@ -31,6 +31,8 @@ limitations under the License. -->
   import Legend from "./components/Legend.vue";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import { isDef } from "@/utils/is";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -40,7 +42,6 @@ limitations under the License. -->
       default: () => ({}),
     },
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-    theme: { type: String, default: "light" },
     config: {
       type: Object as PropType<
         LineConfig & {
@@ -62,6 +63,7 @@ limitations under the License. -->
       }),
     },
   });
+  const appStore = useAppStoreWithOut();
   const setRight = ref<boolean>(false);
   const option = computed(() => getOption());
   function getOption() {
@@ -90,16 +92,18 @@ limitations under the License. -->
       }
       return serie;
     });
-    const color: string[] = chartColors(keys);
+    const color: string[] = chartColors();
     const tooltip = {
       trigger: "axis",
+      backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+      borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
       enterable: true,
       confine: true,
-      extraCssText: "max-height: 300px; overflow: auto; border: none;",
+      extraCssText: "max-height:85%; overflow: auto;",
     };
     const tips = {
       formatter(params: any) {
@@ -108,9 +112,11 @@ limitations under the License. -->
       confine: true,
       extraCssText: `height: 20px; padding:0 2px;`,
       trigger: "axis",
+      backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
+      borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
     };
 
@@ -125,7 +131,7 @@ limitations under the License. -->
         left: 0,
         itemWidth: 12,
         textStyle: {
-          color: props.theme === "dark" ? "#fff" : "#333",
+          color: appStore.theme === Themes.Dark ? "#fff" : "#333",
         },
       },
       grid: {

src/views/dashboard/graphs/ServiceList.vue

@@ -40,7 +40,7 @@ limitations under the License. -->
         <el-table-column fixed label="Service Names" min-width="220">
           <template #default="scope">
             <span class="link" :style="{ fontSize: `${config.fontSize}px` }" @click="clickService(scope)">
-              {{ scope.row.label }}
+              {{ scope.row.shortName }}
             </span>
           </template>
         </el-table-column>
@@ -59,9 +59,7 @@ limitations under the License. -->
       </el-table>
     </div>
     <el-pagination
-      class="pagination"
-      background
-      small
+      class="pagination flex-h"
       layout="prev, pager, next"
       :page-size="pageSize"
       :total="selectorStore.services.length"
@@ -210,6 +208,7 @@ limitations under the License. -->
         group: d.group,
         normal: d.normal,
         merge: d.merge,
+        shortName: d.shortName,
       };
     });
     if (props.config.metricMode === MetricModes.Expression) {

src/views/dashboard/graphs/Table.vue

@@ -106,12 +106,12 @@ limitations under the License. -->
     .row:first-child {
       div {
         border-top: 1px solid $disabled-color;
-        background: #eee;
+        background-color: var(--border-color-primary);
       }
     }
 
     .header {
-      color: #000;
+      color: var(--sw-table-color);
       font-weight: bold;
     }
 

src/views/dashboard/graphs/TopList.vue

@@ -141,7 +141,7 @@ limitations under the License. -->
 
   .progress-bar {
     font-size: $font-size-smaller;
-    color: #333;
+    color: $font-color;
   }
 
   .chart-slow-i {
@@ -171,7 +171,7 @@ limitations under the License. -->
     padding: 4px 10px 7px;
     border-radius: 4px;
     border: 1px solid #ddd;
-    color: #333;
+    color: $font-color;
     background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
@@ -188,12 +188,12 @@ limitations under the License. -->
   }
 
   .operation-icon {
-    color: #333;
+    color: $font-color;
   }
 
   .operation {
     padding: 5px 0;
-    color: #333;
+    color: $font-color;
     cursor: pointer;
     position: relative;
     text-align: center;
@@ -201,7 +201,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/views/dashboard/graphs/components/Legend.vue

@@ -111,9 +111,8 @@ limitations under the License. -->
   const isRight = computed(() => useLegendProcess(props.config).isRight);
   const width = computed(() => (props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%"));
   const colors = computed(() => {
-    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
     const { chartColors } = useLegendProcess(props.config);
-    return chartColors(keys);
+    return chartColors();
   });
 </script>
 <style lang="scss" scoped>

src/views/dashboard/graphs/style.scss

@@ -23,7 +23,6 @@
 .list {
   margin-top: 10px;
   margin-bottom: 10px;
-  height: calc(100% - 90px);
 }
 
 .pagination {
@@ -31,6 +30,7 @@
   text-align: center;
   height: 30px;
   padding: 8px 0;
+  justify-content: flex-end;
 }
 
 .link {

src/views/dashboard/panel/Layout.vue

@@ -80,18 +80,18 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .vue-grid-layout {
-    background: #f7f9fa;
+    background: $layout-background;
     height: auto !important;
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background-color: $theme-background;
-    box-shadow: 0 1px 4px 0 #00000029;
+    box-shadow: 0 0 3px 0 $box-shadow-color;
     border-radius: 3px;
   }
 
   .vue-grid-item.active {
-    border: 1px solid $active-color;
+    border: 1px solid var(--sw-grid-item-active);
   }
 
   .no-data-tips {

src/views/dashboard/panel/Tool.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
-    <div :class="isRelation ? 'flex-v' : 'flex-h'">
+    <div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
       <div class="flex-h">
         <div class="selectors-item" v-if="key !== 10">
           <span class="label">$Service</span>
@@ -103,27 +103,24 @@ limitations under the License. -->
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
-                <Icon class="mr-5" size="middle" :iconName="t.name" />
+                <Icon class="mr-5" size="sm" :iconName="t.name" />
                 <span>{{ t.content }}</span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <el-tooltip content="Apply" placement="bottom" effect="light">
+        <el-tooltip content="Apply" placement="bottom">
           <i @click="applyDashboard">
             <Icon class="icon-btn" size="sm" iconName="save" />
           </i>
         </el-tooltip>
       </div>
-      <div class="switch">
+      <div class="ml-5">
         <el-switch
           v-model="dashboardStore.editMode"
           active-text="E"
           inactive-text="V"
-          size="small"
           inline-prompt
-          active-color="#409eff"
-          inactive-color="#999"
           @change="changeMode"
         />
       </div>
@@ -738,15 +735,15 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .dashboard-tool {
     text-align: right;
-    padding: 3px 5px 5px;
-    background: rgb(240 242 245);
-    border-bottom: 1px solid #dfe4e8;
+    padding: 5px;
+    background: $dashboard-tool-bg-color;
+    border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }
 
-  .switch {
-    padding-top: 2px;
-    margin: 0 10px;
+  .tool-selectors {
+    align-items: center;
+    height: auto;
   }
 
   .label {
@@ -761,6 +758,7 @@ limitations under the License. -->
 
   .tools {
     justify-content: space-between;
+    align-items: center;
     height: auto;
   }
 
@@ -768,12 +766,12 @@ limitations under the License. -->
     display: inline-block;
     padding: 3px;
     text-align: center;
-    border: 1px solid $disabled-color;
+    border: 1px solid var(--sw-icon-btn-border);
     border-radius: 3px;
     margin-left: 6px;
     cursor: pointer;
-    background-color: #eee;
-    color: #666;
+    background-color: var(--sw-icon-btn-bg);
+    color: var(--sw-icon-btn-color);
     font-size: $font-size-smaller;
   }
 

src/views/dashboard/related/continuous-profiling/components/InstanceList.vue

@@ -65,7 +65,6 @@ limitations under the License. -->
   <el-pagination
     class="mt-10"
     small
-    background
     layout="prev, pager, next"
     :page-size="pageSize"
     :total="continousProfilingStore.instances.length"
@@ -150,14 +149,14 @@ limitations under the License. -->
     font-weight: bold;
     border-bottom: 1px solid rgb(0 0 0 / 7%);
     padding: 10px 20px;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
   }
 
   .settings {
     padding: 1px 0;
     border: 1px solid #666;
     border-radius: 3px;
-    color: #666;
+    color: var(--text-color-placeholder);
     cursor: pointer;
   }
 

src/views/dashboard/related/continuous-profiling/components/Policy.vue

@@ -212,11 +212,11 @@ limitations under the License. -->
   }
 
   #uri-param {
-    border: 1px solid #dcdfe6;
+    border: 1px solid $border-color;
     cursor: text;
     padding: 0 5px;
     border-radius: 4px;
-    color: #606266;
+    color: var(--sw-setting-color);
     outline: none;
     height: 100px;
 

src/views/dashboard/related/continuous-profiling/components/PolicyList.vue

@@ -147,7 +147,7 @@ limitations under the License. -->
     width: 300px;
     height: 98%;
     overflow: auto;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
   }
 
   .item span {
@@ -159,7 +159,7 @@ limitations under the License. -->
     border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
     }
   }
 
@@ -184,20 +184,21 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
     }
   }
 
   .profile-t-tool {
     padding: 10px 5px 10px 10px;
     border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    background-color: var(--sw-table-header);
     width: 100%;
     font-weight: bold;
   }
 
   .new-task {
     float: right;
+    color: $font-color;
   }
 
   .reload {

src/views/dashboard/related/ebpf/Header.vue

@@ -90,7 +90,7 @@ limitations under the License. -->
   .header {
     padding: 5px 20px 5px 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }
 

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -76,7 +76,6 @@ limitations under the License. -->
         </el-table>
         <el-pagination
           class="pagination"
-          background
           small
           layout="prev, pager, next"
           :page-size="pageSize"

src/views/dashboard/related/ebpf/components/TaskList.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
     width: 300px;
     height: calc(100% - 10px);
     overflow: auto;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
   }
 
   .item span {
@@ -92,7 +92,7 @@ limitations under the License. -->
     border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
     }
   }
 
@@ -117,16 +117,16 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
     }
   }
 
   .profile-t-tool {
     padding: 5px 10px;
     font-weight: bold;
-    border-right: 1px solid rgb(0 0 0 / 7%);
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    border-right: 1px solid var(--sw-trace-list-border);
+    border-bottom: 1px solid var(--sw-trace-list-border);
+    background-color: var(--sw-table-header);
   }
 
   .profile-btn {

src/views/dashboard/related/log/LogTable/Index.vue

@@ -15,10 +15,10 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div class="log-header" :class="type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'">
+    <div class="log-header flex-h" :class="type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'">
       <template v-for="(item, index) in columns" :key="`col${index}`">
         <div :class="[item.label, ['message', 'stack'].includes(item.label) ? 'max-item' : '']">
-          {{ t(item.value) }}
+          {{ item.value && t(item.value) }}
         </div>
       </template>
     </div>
@@ -42,7 +42,7 @@ limitations under the License. -->
       @closed="showDetail = false"
       :title="t('logDetail')"
     >
-      <LogDetail :currentLog="currentLog" :columns="columns" />
+      <LogDetail :currentLog="currentLog" />
     </el-dialog>
   </div>
 </template>
@@ -74,41 +74,41 @@ limitations under the License. -->
   .log {
     font-size: $font-size-smaller;
     height: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
     width: 100%;
     overflow: auto;
   }
 
   .log-header {
+    width: 100%;
     white-space: nowrap;
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgb(0 0 0 / 10%);
+    border-bottom: 1px solid var(--sw-trace-list-border);
 
     .traceId {
-      width: 390px;
+      width: 20px;
+    }
+
+    .content {
+      width: 1300px;
     }
 
-    .content,
     .tags {
-      width: 300px;
+      width: 15px;
     }
 
-    .serviceInstanceName,
-    .endpointName,
     .serviceName {
       width: 200px;
     }
   }
 
   .log-header div {
-    display: inline-block;
     padding: 0 5px;
     border: 1px solid transparent;
-    border-right: 1px dotted silver;
     line-height: 30px;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

src/views/dashboard/related/log/LogTable/LogDetail.vue

@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="log-detail">
-    <div class="mb-10 clear rk-flex" v-for="(item, index) in columns" :key="index">
+    <div class="mb-10 clear rk-flex" v-for="(item, index) in ServiceLogDetail" :key="index">
       <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
       <span v-if="['timestamp', 'time'].includes(item.label)" class="g-sm-8 mb-10">
         {{ dateFormat(currentLog[item.label]) }}
       </span>
       <textarea
-        class="content mb-10"
+        class="content mb-10 g-sm-8"
         :readonly="true"
         v-else-if="item.label === 'content'"
         :value="contentFormat(item.label)"
@@ -36,14 +36,13 @@ limitations under the License. -->
   import { computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
-  import type { Option } from "@/types/app";
   import { dateFormat } from "@/utils/dateFormat";
   import { formatJson } from "@/utils/formatJson";
+  import { ServiceLogDetail } from "./data";
 
   /*global defineProps */
   const props = defineProps({
     currentLog: { type: Object as PropType<any>, default: () => ({}) },
-    columns: { type: Array as PropType<Option[]>, default: () => [] },
   });
   const { t } = useI18n();
   const logTags = computed(() => {
@@ -67,12 +66,11 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .content {
-    max-width: 700px;
-    min-width: 500px;
     min-height: 500px;
     border: none;
     outline: none;
     color: $font-color;
     overflow: auto;
+    background-color: var(--el-dialog-bg-color);
   }
 </style>

src/views/dashboard/related/log/LogTable/LogService.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="log-item">
+  <div class="log-item flex-h">
     <div
       v-for="(item, index) in columns"
       :key="index"
@@ -24,12 +24,12 @@ limitations under the License. -->
       <span v-if="item.label === 'timestamp'">
         {{ dateFormat(data.timestamp) }}
       </span>
-      <span v-else-if="item.label === 'tags'">
-        {{ tags }}
-      </span>
-      <span v-else-if="item.label === 'traceId' && !noLink" :class="noLink ? '' : 'blue'">
-        {{ data[item.label] }}
-      </span>
+      <span v-else-if="item.label === 'tags'" :class="level.toLowerCase()"> > </span>
+      <el-tooltip v-else-if="item.label === 'traceId' && !noLink" content="Trace Link">
+        <span :class="noLink ? '' : 'blue'">
+          <Icon v-if="data[item.label]" iconName="merge" />
+        </span>
+      </el-tooltip>
       <span v-else>{{ data[item.label] }}</span>
     </div>
   </div>
@@ -51,11 +51,11 @@ limitations under the License. -->
   const options: Recordable<LayoutConfig> = inject("options") || {};
   const emit = defineEmits(["select"]);
   const columns = ServiceLogConstants;
-  const tags = computed(() => {
+  const level = computed(() => {
     if (!props.data.tags) {
       return "";
     }
-    return String(props.data.tags.map((d: { key: string; value: string }) => `${d.key}=${d.value}`));
+    return (props.data.tags.find((d: { key: string; value: string }) => d.key === "level") || {}).value || "";
   });
 
   function selectLog(label: string, value: string) {
@@ -76,6 +76,7 @@ limitations under the License. -->
       {
         sourceId: options.id || "",
         traceId: id,
+        id: props.data.serviceId || "",
       },
       "Trace",
     );
@@ -83,57 +84,59 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .log-item {
-    white-space: nowrap;
-    position: relative;
     cursor: pointer;
+    align-items: center;
+    min-height: 30px;
 
     .traceId {
-      width: 390px;
       cursor: pointer;
+      width: 20px;
+      text-align: center;
+      position: relative;
 
       span {
         display: inline-block;
         width: 100%;
-        line-height: 30px;
       }
 
       .blue {
-        color: #448dfe;
+        color: var(--el-color-primary);
       }
     }
 
-    .content,
     .tags {
-      width: 300px;
+      width: 15px;
+      text-align: center;
+      color: var(--sw-green);
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    .content {
+      width: 1300px;
     }
 
-    .serviceInstanceName,
-    .endpointName,
     .serviceName {
       width: 200px;
     }
   }
 
   .log-item:hover {
-    background: rgba(0, 0, 0, 0.04);
+    background: var(--sw-list-hover);
   }
 
   .log-item > div {
-    width: 140px;
+    width: 60px;
     padding: 0 5px;
     display: inline-block;
     border: 1px solid transparent;
-    border-right: 1px dotted silver;
+    white-space: normal;
+    word-break: break-all;
     overflow: hidden;
-    height: 30px;
-    line-height: 30px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .log-item .text {
     width: 100%;
-    display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -143,4 +146,12 @@ limitations under the License. -->
     height: 100%;
     padding: 3px 8px;
   }
+
+  .error {
+    color: var(--sw-orange);
+  }
+
+  .warning {
+    color: var(--sw-orange);
+  }
 </style>

src/views/dashboard/related/log/LogTable/data.ts

@@ -16,33 +16,13 @@
  */
 
 export const ServiceLogConstants = [
-  {
-    label: "serviceName",
-    value: "service",
-  },
-  {
-    label: "serviceInstanceName",
-    value: "instance",
-  },
-  {
-    label: "endpointName",
-    value: "endpoint",
-  },
-  {
-    label: "timestamp",
-    value: "time",
-  },
-  {
-    label: "contentType",
-    value: "contentType",
-  },
   {
     label: "tags",
-    value: "tags",
+    value: "",
   },
   {
     label: "traceId",
-    value: "traceID",
+    value: "",
   },
   {
     label: "content",
@@ -58,6 +38,10 @@ export const ServiceLogDetail = [
     label: "serviceInstanceName",
     value: "instance",
   },
+  {
+    label: "endpointName",
+    value: "endpoint",
+  },
   {
     label: "timestamp",
     value: "time",

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
       <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
         <g class="hex-polygon">
           <path :d="getHexPolygonVertices()" stroke="#D5DDF6" stroke-width="2" fill="none" />
-          <text :x="0" :y="radius - 15" fill="#000" text-anchor="middle">
+          <text :x="0" :y="radius - 15" :fill="appStore.theme === Themes.Dark ? '#eee' : '#000'" text-anchor="middle">
             {{ selectorStore.currentPod && selectorStore.currentPod.label }}
           </text>
         </g>
@@ -40,7 +40,12 @@ limitations under the License. -->
               :x="(node.x || 0) - 15"
               :y="(node.y || 0) - 15"
             />
-            <text :x="node.x" :y="(node.y || 0) + 28" fill="#000" text-anchor="middle">
+            <text
+              :x="node.x"
+              :y="(node.y || 0) + 28"
+              :fill="appStore.theme === Themes.Dark ? '#eee' : '#000'"
+              text-anchor="middle"
+            >
               {{ node.name.length > 10 ? `${node.name.substring(0, 10)}...` : node.name }}
             </text>
           </g>
@@ -122,6 +127,7 @@ limitations under the License. -->
   import TimeLine from "./TimeLine.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import icons from "@/assets/img/icons";
+  import { Themes } from "@/constants/data";
 
   /*global Nullable, defineProps */
   const props = defineProps({
@@ -524,7 +530,7 @@ limitations under the License. -->
     cursor: pointer;
     transition: all 0.5ms linear;
     border: 1px solid $disabled-color;
-    color: #666;
+    color: var(--text-color-placeholder);
     display: inline-block;
     padding: 5px;
     border-radius: 3px;
@@ -568,7 +574,7 @@ limitations under the License. -->
     position: absolute;
     visibility: hidden;
     padding: 5px;
-    border: 1px solid #000;
+    border: var(--sw-topology-border);
     border-radius: 3px;
     background-color: $theme-background;
   }

src/views/dashboard/related/network-profiling/components/Settings.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="label">{{ t("linkDashboard") }}</div>
   <Selector
-    :value="dashboardStore.selectedGrid.linkDashboard || ''"
+    :value="(dashboardStore.selectedGrid && dashboardStore.selectedGrid.linkDashboard) || ''"
     :options="linkDashboards"
     size="small"
     placeholder="Please input a dashboard name for calls"

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -18,7 +18,11 @@ limitations under the License. -->
       <div class="profile-t-tool">
         <span>{{ t("taskList") }}</span>
         <span class="new-task cp" @click="createTask">
-          <Icon :style="{ color: inProcess ? '#ccc' : '#000' }" iconName="library_add" size="middle" />
+          <Icon
+            :style="{ color: inProcess ? '#ccc' : appStore.theme === Themes.Dark ? '#fff' : '#000' }"
+            iconName="library_add"
+            size="middle"
+          />
         </span>
       </div>
       <div class="profile-t-wrapper">
@@ -78,6 +82,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import NewTask from "./NewTask.vue";
   import { EBPFProfilingTriggerType } from "@/store/data";
+  import { Themes } from "@/constants/data";
 
   /*global Nullable */
   const { t } = useI18n();
@@ -216,7 +221,7 @@ limitations under the License. -->
     width: 330px;
     height: calc(100% - 10px);
     overflow: auto;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
   }
 
   .item span {
@@ -228,7 +233,7 @@ limitations under the License. -->
     border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
     }
   }
 
@@ -253,14 +258,14 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
     }
   }
 
   .profile-t-tool {
     padding: 10px 5px 10px 10px;
     border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    background-color: var(--sw-table-header);
     width: 100%;
   }
 

src/views/dashboard/related/network-profiling/components/TimeLine.vue

@@ -142,7 +142,7 @@ limitations under the License. -->
     cursor: pointer;
     transition: all 0.5ms linear;
     border: 1px solid $disabled-color;
-    color: #666;
+    color: var(--text-color-placeholder);
     display: inline-block;
     padding: 5px;
     border-radius: 3px;

src/views/dashboard/related/profile/Header.vue

@@ -119,7 +119,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .name {

src/views/dashboard/related/profile/components/SegmentList.vue

@@ -58,6 +58,7 @@ limitations under the License. -->
   const key = computed(
     () =>
       (profileStore.currentSegment &&
+        profileStore.currentSegment.spans &&
         profileStore.currentSegment.spans.length &&
         profileStore.currentSegment.spans[0].segmentId) ||
       "",
@@ -82,7 +83,7 @@ limitations under the License. -->
     .profile-t-wrapper {
       overflow: auto;
       flex-grow: 1;
-      border-right: 1px solid rgb(0 0 0 / 10%);
+      border-right: 1px solid var(--sw-trace-list-border);
     }
 
     .profile-t-loading {
@@ -110,25 +111,25 @@ limitations under the License. -->
 
     .profile-tr {
       &:hover {
-        background-color: rgb(0 0 0 / 4%);
+        background-color: var(--sw-list-hover);
       }
     }
 
     .profile-td {
       padding: 5px 10px;
-      border-bottom: 1px solid rgb(0 0 0 / 7%);
+      border-bottom: 1px solid var(--sw-trace-list-border);
 
       &.selected {
-        background-color: #ededed;
+        background-color: var(--sw-list-selected);
       }
     }
 
     .profile-t-tool {
       padding: 5px 10px;
       font-weight: bold;
-      border-right: 1px solid rgb(0 0 0 / 7%);
-      border-bottom: 1px solid rgb(0 0 0 / 7%);
-      background: #f3f4f9;
+      border-right: 1px solid var(--sw-trace-list-border);
+      border-bottom: 1px solid var(--sw-trace-list-border);
+      background-color: var(--sw-table-header);
     }
 
     .log-item {
@@ -144,6 +145,6 @@ limitations under the License. -->
   }
 
   .profile-segment {
-    border-top: 1px solid rgb(0 0 0 / 7%);
+    border-top: 1px solid var(--sw-trace-list-border);
   }
 </style>

src/views/dashboard/related/profile/components/Stack/Container.vue

@@ -107,7 +107,7 @@ limitations under the License. -->
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgb(0 0 0 / 10%);
+    border-bottom: 1px solid var(--sw-trace-list-border);
   }
 
   .profile-header div {
@@ -115,7 +115,7 @@ limitations under the License. -->
     padding: 0 4px;
     border-right: 1px dotted silver;
     line-height: 30px;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

src/views/dashboard/related/profile/components/Stack/Item.vue

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
+    <div
+      :class="['profile-item', 'level' + data.parentId]"
+      :style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
+    >
       <div
         :class="['thread', 'level' + data.parentId]"
         :style="{
@@ -47,6 +50,8 @@ limitations under the License. -->
 <script lang="ts">
   import { ref, defineComponent, toRefs } from "vue";
   import type { PropType } from "vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   const props = {
     data: { type: Object as PropType<any>, default: () => ({}) },
@@ -56,24 +61,25 @@ limitations under the License. -->
     name: "TableItem",
     props,
     setup(props) {
+      const appStore = useAppStoreWithOut();
       const displayChildren = ref<boolean>(true);
       function toggle() {
         displayChildren.value = !displayChildren.value;
       }
-      return { toggle, displayChildren, ...toRefs(props) };
+      return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
     },
   });
 </script>
 <style lang="scss" scoped>
-  @import "./profile.scss";
+  @import url("./profile.scss");
 
   .profile-item.level0 {
-    background: rgba(0, 0, 0, 0.04);
-    color: #448dfe;
+    background-color: var(--sw-list-hover);
+    color: var(--el-color-primary);
 
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
-      color: #448dfe;
+      background-color: var(--sw-list-hover);
+      color: var(--el-color-primary);
     }
 
     &::before {
@@ -81,7 +87,7 @@ limitations under the License. -->
       content: "";
       width: 5px;
       height: 100%;
-      background: #448dfe;
+      background-color: var(--el-color-primary);
       left: 0;
     }
   }
@@ -92,11 +98,11 @@ limitations under the License. -->
   }
 
   .profile-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-selected);
   }
 
   .profile-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-hover);
   }
 
   .profile-item > div {
@@ -123,7 +129,7 @@ limitations under the License. -->
       width: 100%;
       height: 6px;
       border-radius: 3px;
-      background: rgb(63, 177, 227);
+      background: var(--el-color-primary);
       position: relative;
       margin-top: 11px;
       border: none;
@@ -131,7 +137,7 @@ limitations under the License. -->
 
     .inner-progress_bar {
       position: absolute;
-      background: rgb(110, 64, 170);
+      background: rgb(110 64 170);
       height: 4px;
       border-radius: 2px;
       left: 0;

src/views/dashboard/related/profile/components/TaskList.vue

@@ -168,10 +168,10 @@ limitations under the License. -->
 
   .profile-td {
     padding: 5px 10px;
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
+    border-bottom: 1px solid var(--sw-trace-list-border);
 
     &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
     }
   }
 
@@ -183,7 +183,7 @@ limitations under the License. -->
   .profile-t-wrapper {
     overflow: auto;
     flex-grow: 1;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
   }
 
   .profile-t {
@@ -196,20 +196,20 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
     }
   }
 
   .profile-segment {
-    border-top: 1px solid rgb(0 0 0 / 7%);
+    border-top: 1px solid var(--sw-trace-list-border);
   }
 
   .profile-t-tool {
     padding: 5px 10px;
     font-weight: bold;
-    border-right: 1px solid rgb(0 0 0 / 7%);
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    border-right: 1px solid var(--sw-trace-list-border);
+    border-bottom: 1px solid var(--sw-trace-list-border);
+    background-color: var(--sw-table-header);
   }
 
   .log-item {

src/views/dashboard/related/topology/components/Graph.vue

@@ -43,6 +43,7 @@ limitations under the License. -->
             :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
           />
           <text
+            class="node-text"
             :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
             :y="n.y + n.height + 8"
             style="pointer-events: none"
@@ -139,7 +140,7 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useTopologyStore } from "@/store/modules/topology";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { EntityType, DepthList, MetricModes } from "../../../data";
+  import { EntityType, DepthList, MetricModes, CallTypes } from "../../../data";
   import router from "@/router";
   import { ElMessage } from "element-plus";
   import Settings from "./Settings.vue";
@@ -188,7 +189,9 @@ limitations under the License. -->
 
   onMounted(async () => {
     await nextTick();
-    init();
+    setTimeout(() => {
+      init();
+    }, 10);
   });
   async function init() {
     const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
@@ -223,8 +226,8 @@ limitations under the License. -->
   async function update() {
     if (settings.value.metricMode === MetricModes.Expression) {
       topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []);
-      topologyStore.getLinkExpressions(settings.value.linkClientExpressions || []);
-      topologyStore.getLinkExpressions(settings.value.linkServerExpressions || []);
+      topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client);
+      topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server);
     } else {
       topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
       topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
@@ -238,10 +241,9 @@ limitations under the License. -->
     setNodeTools(settings.value.nodeDashboard);
   }
 
-  function draw() {
-    const node = findMostFrequent(topologyStore.calls);
-    const levels = [];
-    const nodes = JSON.parse(JSON.stringify(topologyStore.nodes)).sort((a: Node, b: Node) => {
+  function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
+    const node = findMostFrequent(calls);
+    const nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => {
       if (a.name.toLowerCase() < b.name.toLowerCase()) {
         return -1;
       }
@@ -253,15 +255,14 @@ limitations under the License. -->
     const index = nodes.findIndex((n: Node) => n.type === "USER");
     let key = index;
     if (index < 0) {
-      const idx = nodes.findIndex((n: Node) => n.id === node.id);
-      key = idx;
+      key = nodes.findIndex((n: Node) => n.id === node.id);
     }
     levels.push([nodes[key]]);
     nodes.splice(key, 1);
     for (const level of levels) {
       const a = [];
       for (const l of level) {
-        for (const n of topologyStore.calls) {
+        for (const n of calls) {
           if (n.target === l.id) {
             const i = nodes.findIndex((d: Node) => d.id === n.source);
             if (i > -1) {
@@ -282,6 +283,18 @@ limitations under the License. -->
         levels.push(a);
       }
     }
+    if (nodes.length) {
+      const ids = nodes.map((d: Node) => d.id);
+      const links = calls.filter((item: Call) => ids.includes(item.source) || ids.includes(item.target));
+      const list = computeLevels(links, nodes, []);
+      levels = list.map((subArrayA, index) => subArrayA.concat(levels[index]));
+    }
+    return levels;
+  }
+
+  function draw() {
+    const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
+
     topologyLayout.value = layout(levels, topologyStore.calls, radius);
     graphWidth.value = topologyLayout.value.layout.width;
     const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
@@ -678,6 +691,12 @@ limitations under the License. -->
     overflow: auto;
     margin-top: 30px;
 
+    .node-text {
+      fill: var(--sw-topology-color);
+      font-size: 12px;
+      opacity: 0.9;
+    }
+
     .svg-topology {
       cursor: move;
       background-color: $theme-background;
@@ -687,7 +706,7 @@ limitations under the License. -->
       position: absolute;
       top: 10px;
       left: 25px;
-      color: #666;
+      color: var(--sw-topology-color);
 
       div {
         margin-bottom: 8px;
@@ -716,31 +735,26 @@ limitations under the License. -->
       padding: 0 15px;
       border-radius: 3px;
       color: $disabled-color;
-      border: 1px solid #eee;
-      background-color: $theme-background;
-      box-shadow: #eee 1px 2px 10px;
+      border: 1px solid $border-color-primary;
+      background-color: var(--sw-topology-setting-bg);
+      box-shadow: var(--sw-topology-box-shadow);
       transition: all 0.5ms linear;
-
-      &.dark {
-        background-color: #2b3037;
-      }
     }
 
     .label {
-      color: #666;
+      color: var(--sw-topology-color);
       display: inline-block;
       margin-right: 5px;
     }
 
     .operations-list {
       position: absolute;
-      color: #333;
+      color: $font-color;
       cursor: pointer;
+      border: var(--sw-topology-border);
+      border-radius: 3px;
       background-color: $theme-background;
-      border-radius: 5px;
       padding: 10px 0;
-      border: 1px solid #999;
-      box-shadow: #ddd 1px 2px 10px;
 
       span {
         display: block;
@@ -752,7 +766,7 @@ limitations under the License. -->
 
       span:hover {
         color: $active-color;
-        background-color: #eee;
+        background-color: $popper-hover-bg-color;
       }
     }
 
@@ -765,7 +779,7 @@ limitations under the License. -->
     .switch-icon {
       cursor: pointer;
       transition: all 0.5ms linear;
-      background: rgb(0 0 0 / 30%);
+      background: var(--sw-topology-switch-icon);
       color: $text-color;
       display: inline-block;
       padding: 2px 4px;
@@ -784,13 +798,6 @@ limitations under the License. -->
     .topo-node {
       cursor: pointer;
     }
-
-    .topo-text {
-      font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
-      fill: #ddd;
-      font-size: 11px;
-      opacity: 0.8;
-    }
   }
   @keyframes topo-dash {
     from {
@@ -810,7 +817,7 @@ limitations under the License. -->
     position: absolute;
     visibility: hidden;
     padding: 5px;
-    border: 1px solid #000;
+    border: var(--sw-topology-border);
     border-radius: 3px;
     background-color: $theme-background;
   }

src/views/dashboard/related/topology/components/Metrics.vue

@@ -54,7 +54,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { ref, computed, watch } from "vue";
-  import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { CalculationOpts, MetricModes } from "../../../data";
   import { useDashboardStore } from "@/store/modules/dashboard";
@@ -63,15 +62,40 @@ limitations under the License. -->
   /*global defineEmits, defineProps */
   const props = defineProps({
     type: { type: String, default: "" },
-    metrics: { type: Array as PropType<string[]>, default: () => [] },
+    isExpression: { type: Boolean, default: true },
   });
   const { t } = useI18n();
   const emit = defineEmits(["update"]);
   const dashboardStore = useDashboardStore();
-  const m = props.metrics.map((d: string) => {
-    return { label: d, value: d };
+  const getMetrics = computed(() => {
+    let metrics = [];
+    const {
+      linkServerExpressions,
+      linkServerMetrics,
+      linkClientExpressions,
+      linkClientMetrics,
+      nodeExpressions,
+      nodeMetrics,
+    } = dashboardStore.selectedGrid;
+    switch (props.type) {
+      case "linkServerMetricConfig":
+        metrics = props.isExpression ? linkServerExpressions : linkServerMetrics;
+        break;
+      case "linkClientMetricConfig":
+        metrics = props.isExpression ? linkClientExpressions : linkClientMetrics;
+        break;
+      case "nodeMetricConfig":
+        metrics = props.isExpression ? nodeExpressions : nodeMetrics;
+        break;
+    }
+    return metrics || [];
+  });
+  const metricList = computed(() => {
+    const m = getMetrics.value.map((d: string) => {
+      return { label: d, value: d };
+    });
+    return m.length ? m : [{ label: "", value: "" }];
   });
-  const metricList = ref<Option[]>(m.length ? m : [{ label: "", value: "" }]);
   const currentMetric = ref<string>(metricList.value[0].value);
   const currentConfig = ref<{ unit: string; calculation: string; label: string }>({
     unit: "",
@@ -81,6 +105,7 @@ limitations under the License. -->
   const currentIndex = ref<number>(0);
   const getMetricConfig = computed(() => {
     let config = [];
+
     switch (props.type) {
       case "linkServerMetricConfig":
         config = dashboardStore.selectedGrid.linkServerMetricConfig;
@@ -120,10 +145,6 @@ limitations under the License. -->
   watch(
     () => props.type,
     () => {
-      const m = props.metrics.map((d: string) => {
-        return { label: d, value: d };
-      });
-      metricList.value = m.length ? m : [{ label: "", value: "" }];
       currentMetric.value = metricList.value[0].value;
       const config = getMetricConfig.value || [];
       currentIndex.value = 0;