feat: menus support for multiple languages (#299)

src/graphql/fragments/app.ts

@@ -36,6 +36,7 @@ export const MenuItems = {
         activate
         description
         documentLink
+        i18nKey
         subItems {
           title
           icon
@@ -43,6 +44,7 @@ export const MenuItems = {
           activate
           description
           documentLink
+          i18nKey
         }
       }
     `,

src/layout/components/SideBar.vue

@@ -36,14 +36,14 @@ limitations under the License. -->
                   <Icon size="lg" :iconName="menu.meta.icon" />
                 </el-icon>
                 <span class="title" :class="isCollapse ? 'collapse' : ''">
-                  {{ menu.meta.title }}
+                  {{ t(menu.meta.i18nKey) }}
                 </span>
               </router-link>
             </template>
             <el-menu-item-group>
               <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
                 <router-link class="items" :to="m.path">
-                  <span class="title">{{ m.meta && m.meta.title }}</span>
+                  <span class="title">{{ t(m.meta && m.meta.i18nKey) }}</span>
                 </router-link>
               </el-menu-item>
             </el-menu-item-group>
@@ -56,7 +56,7 @@ limitations under the License. -->
             </el-icon>
             <template #title>
               <router-link class="items menu-title" :to="menu.children[0].path">
-                <span class="title">{{ menu.meta.title }}</span>
+                <span class="title">{{ t(menu.meta.i18nKey) }}</span>
               </router-link>
             </template>
           </el-menu-item>
@@ -70,10 +70,12 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import type { RouteRecordRaw } from "vue-router";
   import { useRouter, useRoute } from "vue-router";
+  import { useI18n } from "vue-i18n";
   import Icon from "@/components/Icon.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global Recordable*/
+  const { t } = useI18n();
   const appStore = useAppStoreWithOut();
   const router = useRouter();
   const name = ref<string>(String(router.currentRoute.value.name));

src/locales/lang/en.ts

@@ -14,15 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import enTitles from "./menus/en";
 const msg = {
-  general: "General Service",
+  ...enTitles,
   services: "Services",
   service: "Service",
   traces: "Traces",
   metrics: "Metrics",
-  serviceMesh: "Service Mesh",
-  infrastructure: "Infrastructure",
-  virtualMachine: "Virtual Machine",
   dashboardNew: "New Dashboard",
   dashboardList: "Dashboard List",
   logs: "Logs",
@@ -35,12 +33,9 @@ const msg = {
   mySQL: "MySQL/MariaDB",
   serviceName: "Service Name",
   technologies: "Technologies",
-  generalServicePanel: "General Service Panel",
   health: "Health",
   groupName: "Group Name",
   topologies: "Topologies",
-  dataPanel: "Data Plane",
-  controlPanel: "Control Plane",
   eventList: "Event List",
   newDashboard: "Create a new dashboard",
   dashboardEdit: "Edit the dashboard",
@@ -117,20 +112,9 @@ const msg = {
   rename: "Rename",
   deleteTitle: "Are you sure you want to delete this?",
   rootTitle: "Are you sure you want to set this?",
-  selfObservability: "Self Observability",
-  satellite: "Satellite",
-  skyWalkingServer: "SkyWalking Server",
-  functions: "Functions",
-  browser: "Browser",
-  linux: "Linux",
   editWarning: "You are entering edit mode",
   viewWarning: "You are entering view mode",
-  virtualDatabase: "Virtual Database",
-  virtualCache: "Virtual Cache",
   reloadDashboards: "Reload dashboards",
-  kubernetesService: "Service",
-  kubernetesCluster: "Cluster",
-  kubernetes: "Kubernetes",
   textUrl: "Text Hyperlink",
   textAlign: "Text Align",
   metricLabel: "Metric Label",
@@ -156,9 +140,7 @@ const msg = {
   enableAssociate: "Enable association",
   text: "Text",
   query: "Query",
-  postgreSQL: "PostgreSQL",
   endpointTips: "The table shows up to 20 pieces of endpoints.",
-  apisix: "APISIX",
   viewTrace: "View Related Traces",
   relatedTraceOptions: "Related Trace Options",
   setLatencyDuration: "Latency Related Metrics",
@@ -282,7 +264,6 @@ const msg = {
   aggregation: "Calculation",
   unit: "Unit",
   labelsIndex: "Label Subscript",
-  group: "Service Group",
   browserView: "Browser",
   sortOrder: "Sort Order",
   chartType: "Chart Type",
@@ -377,18 +358,6 @@ const msg = {
   noticeTag: "Please press Enter after inputting a tag(key=value).",
   conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
-  gateway: "Gateway",
-  virtualMQ: "Virtual MQ",
-  AWSCloud: "AWS Cloud",
-  AWSCloudEKS: "EKS",
-  AWSCloudS3: "S3",
-  AWSCloudDynamoDB: "DynamoDB",
-  AWSGateway: "AWS API Gateway",
-  APIGateway: "API Gateway",
-  redis: "Redis",
-  elasticsearch: "Elasticsearch",
-  mq: "MQ",
-  rabbitMQ: "RabbitMQ",
   save: "Save",
   editStrategy: "Edit Policies",
   policyList: "Policy List",

src/locales/lang/es.ts

@@ -14,15 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import esTitles from "./menus/es";
 const msg = {
+  ...esTitles,
   general: "Servicio General",
   services: "Servicios",
   service: "Servicio",
   traces: "Trazas",
   metrics: "Métricas",
-  serviceMesh: "Malla de Servicios",
-  infrastructure: "Infraestructura",
-  virtualMachine: "Máquina Virtual",
   dashboardNew: "Nuevo Panel",
   dashboardList: "Listado Paneles",
   logs: "Logs",
@@ -35,12 +34,9 @@ const msg = {
   mySQL: "MySQL/MariaDB",
   serviceName: "Nombre Servicio",
   technologies: "Tecnologías",
-  generalServicePanel: "Panel Servicio General",
   health: "Salud",
   groupName: "Nombre Grupo",
   topologies: "Topologías",
-  dataPanel: "Plano de Datos",
-  controlPanel: "Plano de Control",
   eventList: "Listado Eventos",
   newDashboard: "Crear panel nuevo",
   dashboardEdit: "Editar el panel",
@@ -117,20 +113,9 @@ const msg = {
   rename: "Renombrar",
   deleteTitle: "¿Está seguro que quiere eliminarlo?",
   rootTitle: "¿Está seguro que quiere establecerlo?",
-  selfObservability: "Autoobservabilidad",
-  satellite: "Satéllite",
-  skyWalkingServer: "Servidor SkyWalking",
-  functions: "Funciones",
-  browser: "Navegador",
-  linux: "Linux",
   editWarning: "Estás entrando en modo edición",
   viewWarning: "Estás entrando en modo visualización",
-  virtualDatabase: "Base de Datos Virtual",
-  virtualCache: "Caché virtual",
   reloadDashboards: "Recargar Panel",
-  kubernetesService: "Servicio",
-  kubernetesCluster: "Cluster",
-  kubernetes: "Kubernetes",
   textUrl: "Hipervínculo de Texto",
   textAlign: "Alineación de Texto",
   metricLabel: "Etiqueta de Métrica",
@@ -154,9 +139,7 @@ const msg = {
     "El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres",
   enableAssociate: "Activar asociación",
   query: "Consulta",
-  postgreSQL: "PostgreSQL",
   endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
-  apisix: "APISIX",
   queryOrder: "Consulta por duración",
   setOrder: "Orden de consulta",
   latency: "Retraso",
@@ -280,7 +263,6 @@ const msg = {
   aggregation: "Cálculo",
   unit: "Unidad",
   labelsIndex: "Subíndice Etiqueta",
-  group: "Grupo Servicio",
   browserView: "Navegador",
   sortOrder: "Orden de clasificación",
   chartType: "Tipo Gráfico",
@@ -375,18 +357,6 @@ const msg = {
   conditionNotice:
     "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
   language: "Lenguaje",
-  gateway: "Puerta",
-  virtualMQ: "MQ virtual",
-  AWSCloud: "AWS Cloud",
-  AWSCloudEKS: "EKS",
-  AWSCloudS3: "S3",
-  AWSCloudDynamoDB: "DynamoDB",
-  AWSGateway: "AWS API Gateway",
-  APIGateway: "API Gateway",
-  redis: "Redis",
-  elasticsearch: "Elasticsearch",
-  mq: "MQ",
-  rabbitMQ: "RabbitMQ",
   save: "Salvar",
   editStrategy: "Estrategia editorial",
   policyList: "Lista de políticas",

src/locales/lang/menus/en.ts

@@ -0,0 +1,122 @@
+/**
+ * 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.
+ */
+const titles = {
+  // General Service
+  general_service: "General Service",
+  general_service_desc:
+    "Observe services and relative direct dependencies through telemetry data collected from SkyWalking Agents.",
+  general_service_services: "Services",
+  general_service_services_desc: "Observe services through telemetry data collected from SkyWalking Agent.",
+  general_service_virtual_database: "Visual Database",
+  general_service_virtual_database_desc:
+    "Observe the virtual databases which are conjectured by language agents through various plugins.",
+  general_service_virtual_cache: "Visual Cache",
+  general_service_virtual_cache_desc:
+    "Observe the virtual cache servers which are conjectured by language agents through various plugins.",
+  general_service_virtual_mq: "Visual MQ",
+  general_service_virtual_mq_desc:
+    "Observe the virtual message queue servers which are conjectured by language agents through various plugins.",
+  // Service Mesh
+  service_mesh: "Service Mesh",
+  service_mesh_desc:
+    "Service Mesh(Istio) addresses the challenges developers and operators face with a distributed or microservices architecture.",
+  service_mesh_service: "Services",
+  service_mesh_service_desc:
+    "Observe Service Mesh through telemetry data collected from Envoy Access Log Service (ALS).",
+  service_mesh_control_plane: "Control Plane",
+  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:
+    "Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.",
+  kubernetes_cluster: "Cluster",
+  kubernetes_cluster_desc: "Provide monitoring of the status and resources of the K8S Cluster.",
+  kubernetes_service: "Service",
+  kubernetes_service_desc: "Observe Service status and resources from Kubernetes.",
+  // Infrastructure
+  infrastructure: "Infrastructure",
+  infrastructure_desc:
+    "Operation Systems act as the infrastructure of the whole IT system. Its observabilities provide the fundamentals for all distributed and modern complex systems running.",
+  infrastructure_linux: "Linux",
+  infrastructure_linux_desc: "Provide Linux Operation System(OS) monitoring.",
+  infrastructure_windows: "Windows",
+  infrastructure_windows_desc: "Provide Windows Operation System(OS) monitoring.",
+  // AWS Cloud
+  aws_cloud: "AWS Cloud",
+  aws_cloud_desc: "Amazon Web Services(AWS) offers reliable, scalable, and inexpensive cloud computing services.",
+  aws_cloud_eks: "EKS",
+  aws_cloud_eks_desc: "Provide AWS Cloud EKS monitoring through AWS Container Insights Receiver.",
+  aws_cloud_s3: "S3",
+  aws_cloud_s3_desc: "Provide AWS Cloud S3 monitoring through AWS FireHose Receiver.",
+  aws_cloud_dynamodb: "DynamoDB",
+  aws_cloud_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  aws_cloud_api_gateway: "API Gateway",
+  aws_cloud_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Browser
+  browser: "Browser",
+  browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
+  // Gateway
+  gateway: "Gateway",
+  gateway_desc:
+    "API gateway is an API management tool that sits between a client and a collection of backend services.",
+  gateway_apisix: "APISIX",
+  gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
+  gateway_aws_api_gateway: "AWS API Gateway",
+  gateway_aws_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Database
+  database: "Database",
+  database_desc:
+    "The database is the organized collection of structured information, or data, typically stored electronically in a computer system.",
+  database_mysql_mariadb: "MySQL/MariaDB",
+  database_mysql_mariadb_desc:
+    "Provide MySQL and MariaDB Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_postgresql: "PostgreSQL",
+  database_postgresql_desc: "Provide PostgreSQL monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_dynamodb: "DynamoDB",
+  database_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  database_redis: "Redis",
+  database_redis_desc: "Provide Redis monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_elasticsearch: "Elasticsearch",
+  database_elasticsearch_desc: "Provide Elasticsearch Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  // Message Queue
+  mq: "Message Queue",
+  mq_desc:
+    "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.",
+  // self observability
+  self_observability: "Self Observability",
+  self_observability_desc:
+    "Self Observability provides the observabilities for running components and servers from the SkyWalking ecosystem.",
+  self_observability_oap: "SkyWalking Server",
+  self_observability_oap_desc:
+    "The OAP backend cluster itself is a distributed streaming process system, this is the monitoring for the OAP backend itself.",
+  self_observability_satellite: "Satellite",
+  self_observability_satellite_desc:
+    "Satellite: an open-source agent designed for the cloud-native infrastructures, which provides a low-cost, high-efficient, and more secure way to collect telemetry data. It is the recommended load balancer for telemetry collecting.",
+};
+
+export default titles;

src/locales/lang/menus/es.ts

@@ -0,0 +1,122 @@
+/**
+ * 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.
+ */
+const titles = {
+  // General Service
+  general_service: "Servicio General",
+  general_service_desc:
+    "Observar el servicio y las dependencias relativamente directas a través de los datos de telemetría recopilados del agente skywalking.",
+  general_service_services: "Servicios",
+  general_service_services_desc: "Observe services through telemetry data collected from SkyWalking Agent.",
+  general_service_virtual_database: "Base de Datos Virtual",
+  general_service_virtual_database_desc:
+    "Observe the virtual databases which are conjectured by language agents through various plugins.",
+  general_service_virtual_cache: "Caché virtual",
+  general_service_virtual_cache_desc:
+    "Observe the virtual cache servers which are conjectured by language agents through various plugins.",
+  general_service_virtual_mq: "MQ virtual",
+  general_service_virtual_mq_desc:
+    "Observe the virtual message queue servers which are conjectured by language agents through various plugins.",
+  // Service Mesh
+  service_mesh: "Malla de Servicios",
+  service_mesh_desc:
+    "La red de servicios (istio) resuelve los desafíos que enfrentan los desarrolladores y operadores a través de una arquitectura distribuida o de microservicio.",
+  service_mesh_service: "Servicios",
+  service_mesh_service_desc:
+    "Observe Service Mesh through telemetry data collected from Envoy Access Log Service (ALS).",
+  service_mesh_control_plane: "Plano de Control",
+  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:
+    "Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.",
+  kubernetes_cluster: "Cluster",
+  kubernetes_cluster_desc: "Provide monitoring of the status and resources of the K8S Cluster.",
+  kubernetes_service: "Servicio",
+  kubernetes_service_desc: "Observe Service status and resources from Kubernetes.",
+  // Infrastructure
+  infrastructure: "Infraestructura",
+  infrastructure_desc:
+    "Operation Systems act as the infrastructure of the whole IT system. Its observabilities provide the fundamentals for all distributed and modern complex systems running.",
+  infrastructure_linux: "Linux",
+  infrastructure_linux_desc: "Provide Linux Operation System(OS) monitoring.",
+  infrastructure_windows: "Windows",
+  infrastructure_windows_desc: "Provide Windows Operation System(OS) monitoring.",
+  // AWS Cloud
+  aws_cloud: "AWS Cloud",
+  aws_cloud_desc: "Amazon Web Services(AWS) offers reliable, scalable, and inexpensive cloud computing services.",
+  aws_cloud_eks: "EKS",
+  aws_cloud_eks_desc: "Provide AWS Cloud EKS monitoring through AWS Container Insights Receiver.",
+  aws_cloud_s3: "S3",
+  aws_cloud_s3_desc: "Provide AWS Cloud S3 monitoring through AWS FireHose Receiver.",
+  aws_cloud_dynamodb: "DynamoDB",
+  aws_cloud_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  aws_cloud_api_gateway: "API Gateway",
+  aws_cloud_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Browser
+  browser: "Navegador",
+  browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
+  // Gateway
+  gateway: "Puerta",
+  gateway_desc:
+    "API gateway is an API management tool that sits between a client and a collection of backend services.",
+  gateway_apisix: "APISIX",
+  gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
+  gateway_aws_api_gateway: "AWS API Gateway",
+  gateway_aws_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Database
+  database: "Base de Datos",
+  database_desc:
+    "The database is the organized collection of structured information, or data, typically stored electronically in a computer system.",
+  database_mysql_mariadb: "MySQL/MariaDB",
+  database_mysql_mariadb_desc:
+    "Provide MySQL and MariaDB Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_postgresql: "PostgreSQL",
+  database_postgresql_desc: "Provide PostgreSQL monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_dynamodb: "DynamoDB",
+  database_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  database_redis: "Redis",
+  database_redis_desc: "Provide Redis monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_elasticsearch: "Elasticsearch",
+  database_elasticsearch_desc: "Provide Elasticsearch Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  // Message Queue
+  mq: "Message Queue",
+  mq_desc:
+    "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.",
+  // self observability
+  self_observability: "Self Observability",
+  self_observability_desc:
+    "Self Observability provides the observabilities for running components and servers from the SkyWalking ecosystem.",
+  self_observability_oap: "SkyWalking Server",
+  self_observability_oap_desc:
+    "The OAP backend cluster itself is a distributed streaming process system, this is the monitoring for the OAP backend itself.",
+  self_observability_satellite: "Satellite",
+  self_observability_satellite_desc:
+    "Satellite: an open-source agent designed for the cloud-native infrastructures, which provides a low-cost, high-efficient, and more secure way to collect telemetry data. It is the recommended load balancer for telemetry collecting.",
+};
+
+export default titles;

src/locales/lang/menus/zh.ts

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+const titles = {
+  // General Service
+  general_service: "常规服务",
+  general_service_desc: "通过从SkyWalking代理收集的遥测数据来观察服务和相对直接的依赖关系。",
+  general_service_services: "服务",
+  general_service_services_desc: "通过SkyWalking Agent收集的遥测数据观察服务。",
+  general_service_virtual_database: "虚拟数据库",
+  general_service_virtual_database_desc: "观察语言代理通过各种插件推测的虚拟数据库。",
+  general_service_virtual_cache: "虚拟缓存",
+  general_service_virtual_cache_desc: "观察语言代理通过各种插件推测的虚拟缓存服务器。",
+  general_service_virtual_mq: "虚拟消息队列",
+  general_service_virtual_mq_desc: "观察语言代理通过各种插件推测的虚拟消息队列服务器。",
+  // Service Mesh
+  service_mesh: "服务网格",
+  service_mesh_desc: "服务网格（Istio）通过分布式或微服务架构解决了开发人员和运营商面临的挑战。",
+  service_mesh_service: "服务",
+  service_mesh_service_desc: "通过从Envoy访问日志服务（ALS）收集的遥测数据观察服务网格。",
+  service_mesh_control_plane: "控制平面",
+  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是一个开源的容器编排系统，用于自动化软件部署、扩展和管理。",
+  kubernetes_cluster: "集群",
+  kubernetes_cluster_desc: "提供对K8S集群的状态和资源的监控。",
+  kubernetes_service: "服务",
+  kubernetes_service_desc: "从Kubernetes中观察服务状态和资源。",
+  // Infrastructure
+  infrastructure: "基础设施",
+  infrastructure_desc: "操作系统是整个IT系统的基础设施。它的可观察性为所有分布式和现代复杂系统的运行提供了基础。",
+  infrastructure_linux: "Linux",
+  infrastructure_linux_desc: "提供Linux操作系统（OS）监控。",
+  infrastructure_windows: "Windows",
+  infrastructure_windows_desc: "提供Windows操作系统（OS）监控。",
+  // AWS Cloud
+  aws_cloud: "AWS云服务",
+  aws_cloud_desc: "亚马逊网络服务（AWS）提供可靠、可扩展且价格低廉的云计算服务。",
+  aws_cloud_eks: "EKS",
+  aws_cloud_eks_desc: "通过AWS Container Insights Receiver提供AWS Cloud EKS监控。",
+  aws_cloud_s3: "S3",
+  aws_cloud_s3_desc: "通过AWS消防软管接收器提供AWS Cloud S3监控",
+  aws_cloud_dynamodb: "DynamoDB",
+  aws_cloud_dynamodb_desc: "通过Amazon CloudWatch提供DynamoDB监控。",
+  aws_cloud_api_gateway: "API Gateway",
+  aws_cloud_api_gateway_desc: "通过AWS消防水带接收器提供AWS云API网关监控。",
+  // Browser
+  browser: "Browser",
+  browser_desc: "通过Apache SkyWalking Client JS提供Web应用程序、版本和页面的浏览器端监控。",
+  // Gateway
+  gateway: "网关",
+  gateway_desc: "API网关是位于客户端和后端服务集合之间的API管理工具。",
+  gateway_apisix: "APISIX",
+  gateway_apisix_desc: "通过OpenTelemetry的普罗米修斯接收器提供APISIX监控。",
+  gateway_aws_api_gateway: "AWS API Gateway",
+  gateway_aws_api_gateway_desc: "通过AWS消防水带接收器提供AWS云API网关监控。",
+  // Database
+  database: "数据库",
+  database_desc: "数据库是结构化信息或数据的有组织的集合，通常以电子方式存储在计算机系统中。",
+  database_mysql_mariadb: "MySQL/MariaDB",
+  database_mysql_mariadb_desc: "通过OpenTelemetry的Prometheus接收器提供MySQL和MariaDB服务器监控。",
+  database_postgresql: "PostgreSQL",
+  database_postgresql_desc: "通过OpenTelemetry的普罗米修斯接收器提供PostgreSQL监控。",
+  database_dynamodb: "DynamoDB",
+  database_dynamodb_desc: "通过Amazon CloudWatch提供DynamoDB监控。",
+  database_redis: "Redis",
+  database_redis_desc: "通过OpenTelemetry的普罗米修斯接收器提供Redis监控。",
+  database_elasticsearch: "Elasticsearch",
+  database_elasticsearch_desc: "通过OpenTelemetry的Prometheus接收器提供Elasticsearch服务器监控。",
+  // Message Queue
+  mq: "消息队列",
+  mq_desc: "消息队列是无服务器和微服务架构中使用的异步服务对服务通信的一种形式。",
+  mq_rabbitmq: "RabbitMQ",
+  mq_rabbitmq_desc: "通过OpenTelemetry的Prometheus接收器提供RabbitMQ监控。",
+  // self observability
+  self_observability: "自监控",
+  self_observability_desc: "自观察性为运行SkyWalking生态系统中的组件和服务器提供了可观察性。",
+  self_observability_oap: "SkyWalking服务",
+  self_observability_oap_desc: "OAP后端集群本身是一个分布式流处理系统，这是对OAP后端本身的监控。",
+  self_observability_satellite: "Satellite",
+  self_observability_satellite_desc:
+    "Satellite：为云原生基础设施设计的开源代理，提供了一种低成本、高效、更安全的遥测数据收集方式。它是遥测采集的推荐负载均衡器。",
+};
+
+export default titles;

src/locales/lang/zh.ts

@@ -14,14 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import zhTitles from "./menus/zh";
 const msg = {
-  general: "普通服务",
+  ...zhTitles,
   services: "服务",
   traces: "跟踪",
   metrics: "指标",
-  serviceMesh: "服务网格",
-  infrastructure: "基础设施",
-  virtualMachine: "虚拟机",
   dashboardNew: "新建仪表板",
   dashboardHome: "仪表盘首页",
   dashboardList: "仪表盘列表",
@@ -38,8 +36,6 @@ const msg = {
   health: "健康",
   groupName: "群名称",
   topologies: "拓扑图",
-  dataPanel: "数据平面",
-  controlPanel: "控制平面",
   eventList: "事件列表",
   newDashboard: "新增仪表盘",
   dashboardEdit: "编辑仪表盘",
@@ -115,20 +111,9 @@ const msg = {
   rename: "重命名",
   deleteTitle: "确定删除吗？",
   rootTitle: "确定设置为Root吗？",
-  selfObservability: "自监控",
-  satellite: "Satellite",
-  skyWalkingServer: "SkyWalking服务",
-  functions: "Functions",
-  linux: "Linux",
-  browser: "浏览器",
   editWarning: "你正在进入编辑模式",
   viewWarning: "你正在进入预览模式",
-  virtualDatabase: "虚拟数据库",
-  virtualCache: "虚拟缓存",
   reloadDashboards: "重新加载仪表盘",
-  kubernetesService: "服务",
-  kubernetesCluster: "集群",
-  kubernetes: "Kubernetes",
   textUrl: "文本超链接",
   textAlign: "文本对齐",
   metricLabel: "指标标签",
@@ -153,9 +138,7 @@ const msg = {
   duplicateName: "重复的名称",
   text: "文本",
   query: "查询",
-  postgreSQL: "PostgreSQL",
   endpointTips: "这里最多展示20条endpoints。",
-  apisix: "APISIX",
   viewTrace: "查看相关Trace",
   relatedTraceOptions: "相关的Trace选项",
   setLatencyDuration: "延迟相关指标",
@@ -283,7 +266,6 @@ const msg = {
   aggregation: "计算",
   unit: "单位",
   labelsIndex: "标签下标",
-  group: "服务组",
   browserView: "浏览器视图",
   sortOrder: "排序方式",
   chartType: "图表类型",
@@ -373,18 +355,6 @@ const msg = {
   noticeTag: "请输入一个标签(key=value)之后回车",
   conditionNotice: "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
   language: "语言",
-  gateway: "网关",
-  virtualMQ: "虚拟消息队列",
-  AWSCloud: "AWS云服务",
-  AWSCloudEKS: "EKS",
-  AWSCloudS3: "S3",
-  AWSCloudDynamoDB: "DynamoDB",
-  AWSGateway: "AWS API Gateway",
-  APIGateway: "API Gateway",
-  redis: "Redis",
-  elasticsearch: "Elasticsearch",
-  mq: "消息队列",
-  rabbitMQ: "RabbitMQ",
   save: "保存",
   editStrategy: "编辑策略",
   policyList: "策略列表",

src/router/alarm.ts

@@ -22,7 +22,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
     path: "",
     name: "Alarm",
     meta: {
-      title: "Alerting",
+      i18nKey: "alarm",
       icon: "spam",
       hasGroup: false,
       activate: true,

src/router/dashboard.ts

@@ -23,7 +23,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
     component: Layout,
     name: "Dashboard",
     meta: {
-      title: "Dashboards",
+      i18nKey: "dashboards",
       icon: "dashboard_customize",
       hasGroup: true,
       activate: true,
@@ -34,7 +34,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         component: () => import("@/views/dashboard/List.vue"),
         name: "List",
         meta: {
-          title: "Dashboard List",
+          i18nKey: "dashboardList",
           activate: true,
         },
       },
@@ -43,7 +43,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         component: () => import("@/views/dashboard/New.vue"),
         name: "New",
         meta: {
-          title: "New Dashboard",
+          i18nKey: "dashboardNew",
           activate: true,
         },
       },

src/router/layer.ts

@@ -31,6 +31,8 @@ async function layerDashboards() {
         title: item.title,
         hasGroup: item.hasGroup,
         activate: item.activate,
+        descKey: item.descKey,
+        i18nKey: item.i18nKey,
       },
       children: item.subItems && item.subItems.length ? [] : undefined,
     };
@@ -43,6 +45,8 @@ async function layerDashboards() {
           layer: child.layer,
           icon: child.icon || "cloud_queue",
           activate: child.activate,
+          descKey: child.descKey,
+          i18nKey: child.i18nKey,
         },
         component: () => import("@/views/Layer.vue"),
       };
@@ -68,6 +72,8 @@ async function layerDashboards() {
             layer: item.layer,
             icon: item.icon,
             activate: item.activate,
+            descKey: item.descKey,
+            i18nKey: item.i18nKey,
           },
           component: () => import("@/views/Layer.vue"),
         },

src/router/marketplace.ts

@@ -22,7 +22,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
     path: "",
     name: "Marketplace",
     meta: {
-      title: "Marketplace",
+      i18nKey: "marketplace",
       icon: "marketplace",
       hasGroup: false,
       activate: true,
@@ -32,7 +32,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
       {
         path: "/marketplace",
         name: "MenusManagement",
-        component: () => import("@/views/marketplace/Menus.vue"),
+        component: () => import("@/views/Marketplace.vue"),
       },
     ],
   },

src/router/settings.ts

@@ -22,7 +22,7 @@ export const routesSettings: Array<RouteRecordRaw> = [
     path: "",
     name: "Settings",
     meta: {
-      title: "Settings",
+      i18nKey: "settings",
       icon: "settings",
       hasGroup: false,
       activate: true,
@@ -32,7 +32,7 @@ export const routesSettings: Array<RouteRecordRaw> = [
       {
         path: "/settings",
         name: "Settings",
-        component: () => import("@/views/marketplace/Settings.vue"),
+        component: () => import("@/views/Settings.vue"),
       },
     ],
   },

src/store/modules/app.ts

@@ -168,12 +168,14 @@ export const appStore = defineStore({
         const t = `${d.title.replace(/\s+/g, "-")}`;
         d.name = `${t}-${index}`;
         d.path = `/${t}`;
+        d.descKey = `${d.i18nKey}_desc`;
         if (d.subItems && d.subItems.length) {
           d.hasGroup = true;
           d.subItems = d.subItems.map((item: SubItem, sub: number) => {
             const id = `${item.title.replace(/\s+/g, "-")}`;
             item.name = `${id}-${index}${sub}`;
             item.path = `/${t}/${id}`;
+            item.descKey = `${item.i18nKey}_desc`;
             return item;
           });
         }

src/types/app.d.ts

@@ -63,4 +63,6 @@ export interface SubItem {
   id?: string;
   description: string;
   documentLink: string;
+  descKey: string;
+  i18nKey: string;
 }

src/views/Marketplace.vue

@@ -25,10 +25,10 @@ limitations under the License. -->
         >
           <router-link :to="menu.hasGroup ? '' : menu.path || ''">
             <div class="title" :class="menu.activate ? (menu.hasGroup ? '' : 'actived-font') : 'disabled'">
-              {{ menu.title }}</div
+              {{ t(menu.i18nKey) }}
-            >
+            </div>
           </router-link>
-          <div class="mt-10"> {{ menu.description }} </div>
+          <div class="mt-10"> {{ t(menu.descKey) }} </div>
           <el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink">
             <el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
           </el-link>
@@ -37,9 +37,9 @@ limitations under the License. -->
       <div class="mt-10 cards">
         <el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
           <router-link :to="item.path || ''">
-            <div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ item.title }}</div>
+            <div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ t(item.i18nKey) }}</div>
           </router-link>
-          <div class="mt-10"> {{ item.description }} </div>
+          <div class="mt-10"> {{ t(item.descKey) }} </div>
           <el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink">
             <el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
           </el-link>

src/views/alarm/Header.vue

@@ -32,8 +32,8 @@ limitations under the License. -->
       </div>
       <div class="pagination">
         <el-pagination
-          v-model:currentPage="pageNum"
+          v-model="pageNum"
-          v-model:page-size="pageSize"
+          :page-size="pageSize"
           layout="prev, pager, next"
           :total="total"
           @current-change="changePage"

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

@@ -48,8 +48,8 @@ limitations under the License. -->
       />
     </div>
     <el-pagination
-      v-model:currentPage="pageNum"
+      v-model="pageNum"
-      v-model:page-size="pageSize"
+      :page-size="pageSize"
       layout="prev, pager, next"
       :total="total"
       @current-change="updatePage"

src/views/dashboard/related/log/List.vue

@@ -19,8 +19,8 @@ limitations under the License. -->
     </LogTable>
     <div class="mt-5 mb-5">
       <el-pagination
-        v-model:currentPage="logStore.conditions.paging.pageNum"
+        v-model="logStore.conditions.paging.pageNum"
-        v-model:page-size="pageSize"
+        :page-size="pageSize"
         :small="true"
         layout="prev, pager, next"
         :pager-count="5"

src/views/dashboard/related/trace/TraceList.vue

@@ -14,8 +14,8 @@ limitations under the License. -->
   <div class="trace-t flex-v">
     <div class="trace-t-tool flex-h">
       <el-pagination
-        v-model:currentPage="traceStore.conditions.paging.pageNum"
+        v-model="traceStore.conditions.paging.pageNum"
-        v-model:page-size="pageSize"
+        :page-size="pageSize"
         :small="true"
         layout="prev, pager, next"
         :pager-count="5"
@@ -128,7 +128,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .trace-t-tool {
-    background-color: rgba(196, 200, 225, 0.2);
+    background-color: rgb(196 200 225 / 20%);
     justify-content: space-between;
     border-bottom: 1px solid #c1c5ca41;
     border-right: 1px solid #c1c5ca41;
@@ -141,7 +141,7 @@ limitations under the License. -->
 
   .trace-t-wrapper {
     overflow: auto;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .trace-t-loading {
@@ -169,13 +169,13 @@ limitations under the License. -->
 
   .trace-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .trace-td {
     padding: 5px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -183,7 +183,7 @@ limitations under the License. -->
   }
 
   .trace-success {
-    border-left: 4px solid rgba(46, 47, 51, 0.1);
+    border-left: 4px solid rgb(46 47 51 / 10%);
   }
 
   .trace-warning {

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -111,8 +111,8 @@ limitations under the License. -->
   </el-dialog>
   <el-dialog v-model="showRelatedLogs" :destroy-on-close="true" fullscreen @closed="showRelatedLogs = false">
     <el-pagination
-      v-model:currentPage="pageNum"
+      v-model="pageNum"
-      v-model:page-size="pageSize"
+      :page-size="pageSize"
       :small="true"
       layout="prev, pager, next"
       :pager-count="5"

vite.config.ts

@@ -80,7 +80,6 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     },
     build: {
       target: "esnext",
-      cssTarget: "chrome80",
       outDir: OUTPUT_DIR,
       manifest: false,
       sourcemap: false,