feat: menus support for multiple languages (#299)

This commit is contained in:
Fine0830 2023-07-12 18:07:34 +08:00 committed by GitHub
parent 5367af47c4
commit 077b68ebbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 402 additions and 129 deletions

View File

@ -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
}
}
`,

View File

@ -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));

View File

@ -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",

View File

@ -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",

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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: "策略列表",

View File

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

View File

@ -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,
},
},

View File

@ -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"),
},

View File

@ -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"),
},
],
},

View File

@ -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"),
},
],
},

View File

@ -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;
});
}

2
src/types/app.d.ts vendored
View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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:page-size="pageSize"
v-model="logStore.conditions.paging.pageNum"
:page-size="pageSize"
:small="true"
layout="prev, pager, next"
:pager-count="5"

View File

@ -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:page-size="pageSize"
v-model="traceStore.conditions.paging.pageNum"
: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 {

View File

@ -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:page-size="pageSize"
v-model="pageNum"
:page-size="pageSize"
:small="true"
layout="prev, pager, next"
:pager-count="5"

View File

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