Mesh Legend (#7378)

- Restyling the graph legend
- I18n support of GraphTour
- Remove legend assets folder
- Change istio icon color to align with the rest of link icons

frontend/package.json

@@ -123,6 +123,7 @@
     "@types/cypress-cucumber-preprocessor": "^4.0.5",
     "@types/cytoscape": "3.14.0",
     "@types/enzyme": "3.10.5",
+    "@types/deep-freeze": "^0.1.5",
     "@types/jest": "23.3.10",
     "@types/js-yaml": "^4.0.5",
     "@types/jsdom": "^21.1.6",

frontend/public/locales/zh/translation.json

@@ -6,15 +6,24 @@
   "{{count}} workload_other": "{{count}} 工作负载",
   "and": "and",
   "API Endpoint": "API Endpoint",
+  "App": "App",
   "Applications": "应用",
   "Apps": "应用",
+  "Back": "Back",
   "Canary": "Canary",
+  "Choose the traffic rates used to generate the graph. Each supported protocol offers one or more options. Unused protocols can be omitted.": "Choose the traffic rates used to generate the graph. Each supported protocol offers one or more options. Unused protocols can be omitted.",
+  "Circuit Breaker": "Circuit Breaker",
   "Click + Drag": "Click + Drag",
+  "Click kebab menu on a node label for links to details, traffic, inbound/outbound metrics and node graph.": "Click kebab menu on a node label for links to details, traffic, inbound/outbound metrics and node graph.",
+  "Click kebab menu on a node label to see the contextual menu options for the node.": "Click kebab menu on a node label to see the contextual menu options for the node.",
+  "Click on a node or edge to see its summary and emphasize its end-to-end paths.": "Click on a node or edge to see its summary and emphasize its end-to-end paths.",
+  "Close Legend": "Close Legend",
   "Close Replay": "关闭重放",
   "Cluster": "集群",
   "Compact view": "紧凑视图",
   "Concentric": "Concentric",
   "Configuration": "Configuration",
+  "Contextual Menu": "Contextual Menu",
   "Contextual menu on nodes": "Contextual menu on nodes",
   "Control plane": "控制平面",
   "Control plane metrics": "控制平面指标",
@@ -25,12 +34,17 @@
   "custom": "自定义",
   "Custom": "自定义",
   "Dagre": "Dagre",
+  "Data Plane": "Data Plane",
   "Degraded": "Degraded",
   "Details in side panel on nodes": "Details in side panel on nodes",
   "Direction": "方向",
   "Direction type is not valid.": "Direction type is not valid.",
   "Disabled": "禁用",
+  "Display": "Display",
+  "Display the legend to learn about what the different shapes, colors and backgrounds mean.": "Display the legend to learn about what the different shapes, colors and backgrounds mean.",
   "Distributed Tracing": "分布式跟踪",
+  "Done": "Done",
+  "Edges": "Edges",
   "Enabled": "启用",
   "Error fetching Istio deployment status.": "Error fetching Istio deployment status.",
   "Every 10s": "每 10s",
@@ -40,19 +54,32 @@
   "Every 30s": "每 30s",
   "Every 5m": "每 5m",
   "Expand view": "展开视图",
+  "Failed Request": "Failed Request",
   "Failure": "Failure",
+  "Fault Injection": "Fault Injection",
   "Filter by Application Health": "Filter by Application Health",
   "Filter by mTLS": "Filter by mTLS",
   "Filter by Namespace": "Filter by Namespace",
   "Filter by Namespace Label": "Filter by Namespace Label",
+  "Find and Hide": "Find and Hide",
   "FQDN": "完全限定域名",
+  "Gateway": "Gateway",
+  "Graph": "Graph",
+  "Graph Traffic": "Graph Traffic",
+  "Graph Type": "Graph Type",
+  "GraphTour": "GraphTour",
   "Grid": "Grid",
   "Health": "正常状态",
   "Health for": "正常状态",
   "Health status": "Health status",
   "Healthy": "Healthy",
+  "Healthy Request": "Healthy Request",
+  "Highlight or Hide graph elements via typed expressions. Click the dropdown for preset Find or Hide expressions. Click the Find/Hide help icon for details on the expression language.": "Highlight or Hide graph elements via typed expressions. Click the dropdown for preset Find or Hide expressions. Click the Find/Hide help icon for details on the expression language.",
+  "Highlight or Hide mesh elements via typed expressions. Click the dropdown for preset Find or Hide expressions. Click the Find/Hide help icon for details on the expression language.": "Highlight or Hide mesh elements via typed expressions. Click the dropdown for preset Find or Hide expressions. Click the Find/Hide help icon for details on the expression language.",
+  "Idle": "Idle",
   "inbound": "入站",
   "Inbound": "入站",
+  "Infra node": "Infra node",
   "Issuer:": "发行人:",
   "Istio Ambient ztunnel detected in the Control plane": "在Istio的控制平面中检测到环境ztunnel",
   "Istio Component List": "Istio Component List",
@@ -65,8 +92,9 @@
   "Kiali home cluster": "Kiali home cluster",
   "Kiali home cluster: {{name}}": "Kiali主集群: {{name}}",
   "Kiali on GitHub": "Kiali on GitHub",
-  "Kubernetes": "Kubernetes",
   "Last": "最近的",
+  "Layout selection": "Layout selection",
+  "Legend": "Legend",
   "List view": "列表视图",
   "Loading...": "Loading...",
   "mb": "mb",
@@ -77,25 +105,37 @@
   "Mesh page": "Mesh page",
   "mesh settings": "mesh settings",
   "Min TLS version": "最低TLS版本",
+  "Mirroring": "Mirroring",
+  "Missing Sidecar": "Missing Sidecar",
   "More info at": "More info at",
   "Mouse wheel": "Mouse wheel",
   "mTLS": "mTLS",
+  "mTLS (badge)": "mTLS (badge)",
   "n/a": "n/a",
   "Name": "名称",
   "Namespace": "命名空间",
   "Namespace Label": "命名空间标签",
+  "Namespaces": "Namespaces",
   "Network": "Network",
+  "Next": "Next",
   "No": "没有",
   "No cert info": "没有集群",
   "No health information": "无正常信息",
   "No labels": "没有标签",
   "No results found": "没有结果找到",
+  "Node Background": "Node Background",
+  "Node Badges": "Node Badges",
+  "Node Colors": "Node Colors",
+  "Node Shapes": "Node Shapes",
   "none": "无",
+  "Normal": "Normal",
+  "Normal Request": "Normal Request",
   "Not found": "Not found",
   "Not healthy": "Not healthy",
   "Not ready": "Not ready",
   "Not Ready": "未读",
   "now": "now",
+  "Operation": "Operation",
   "or": "or",
   "outbound": "出站",
   "Outbound": "出站",
@@ -110,37 +150,67 @@
   "Proxy push time": "代理推送时间",
   "Replay": "重放",
   "Replay...": "重放...",
+  "Request Timeout": "Request Timeout",
   "Reset": "Reset",
+  "Restricted / External": "Restricted / External",
   "Revision": "Revision",
   "Right click": "Right click",
+  "Right-click a node or an edge to see the contextual menu with links to details, traffic and inbound/outbound metrics for the node or edge.": "Right-click a node or an edge to see the contextual menu with links to details, traffic and inbound/outbound metrics for the node or edge.",
   "Secret Name": "Secret Name",
+  "Select a workload, service or application graph view. An application view can optionally be versioned and relies on app and version labeling. Workload and service graphs provide physical and logical views, respectively.": "Select a workload, service or application graph view. An application view can optionally be versioned and relies on app and version labeling. Workload and service graphs provide physical and logical views, respectively.",
+  "Select how often to refresh the graph and how much historical metric data is used to build the graph, per refresh. For example \"Last 5m\" means use the most recent 5 minutes of request metric data.  To replay a historical time window click the replay icon.  This replaces the current time range controls with the replay toolbar.": "Select how often to refresh the graph and how much historical metric data is used to build the graph, per refresh. For example \"Last 5m\" means use the most recent 5 minutes of request metric data.  To replay a historical time window click the replay icon.  This replaces the current time range controls with the replay toolbar.",
+  "Select how often to refresh the mesh and how much historical metric data is used for metric charts. For example \"Last 5m\" means use the most recent 5 minutes of request metric data.": "Select how often to refresh the mesh and how much historical metric data is used for metric charts. For example \"Last 5m\" means use the most recent 5 minutes of request metric data.",
+  "Select the graph layout for the mesh. Different layouts work best with different meshes. Find the layout that works best. Other buttons here provide zoom and fit-to-screen options.": "Select the graph layout for the mesh. Different layouts work best with different meshes. Find the layout that works best. Other buttons here provide zoom and fit-to-screen options.",
+  "Select the layout for the mesh. Different layouts work best with different meshes. Find the layout that works best. Other buttons here provide zoom and fit-to-screen options.": "Select the layout for the mesh. Different layouts work best with different meshes. Find the layout that works best. Other buttons here provide zoom and fit-to-screen options.",
+  "Select the namespaces you want to see in the graph.": "Select the namespaces you want to see in the graph.",
   "Select zoom area": "Select zoom area",
+  "Service": "Service",
+  "Service Entry": "Service Entry",
   "Services": "服务",
+  "Set display options for the mesh.": "Set display options for the mesh.",
+  "Set edge labeling, node badging, and various display options. Response-time edge labeling, security badging, and traffic animation may affect performance. Response-times reflect the 95th percentile.": "Set edge labeling, node badging, and various display options. Response-time edge labeling, security badging, and traffic animation may affect performance. Response-times reflect the 95th percentile.",
   "Shift + Drag": "Shift + Drag",
+  "Shortcuts": "Shortcuts",
   "Shortcuts and tips...": "Shortcuts and tips...",
+  "Side Panel": "Side Panel",
   "Single click": "Single click",
   "Subset": "子集",
   "Switch language": "Switch language",
+  "TCP Connection": "TCP Connection",
+  "TCP Traffic": "TCP Traffic",
   "The meshConfig.meshMTLS.minProtocolVersion field specifies the minimum TLS version for the TLS                   connections among Istio workloads. N/A if it was not set.": "The meshConfig.meshMTLS.minProtocolVersion field specifies the minimum TLS version for the TLS                   connections among Istio workloads. N/A if it was not set.",
+  "The Side Panel shows details about the currently selected node or edge, otherwise the whole graph.": "The Side Panel shows details about the currently selected node or edge, otherwise the whole graph.",
+  "The Side Panel shows details about the currently selected node or edge, otherwise the whole mesh.": "The Side Panel shows details about the currently selected node or edge, otherwise the whole mesh.",
   "This chart shows cpu consumption for the istiod {{cpuMetricSource}}": "This chart shows cpu consumption for the istiod {{cpuMetricSource}}",
   "This chart shows memory consumption for the istiod {{memoryMetricSource}}": "This chart shows memory consumption for the istiod {{memoryMetricSource}}",
   "This value represents the delay in seconds between config change and a proxy receiving all required                 configuration.": "This value represents the delay in seconds between config change and a proxy receiving all required                 configuration.",
   "This value represents the meshConfig.outboundTrafficPolicy.mode, that configures the sidecar handling of                 external services, that is, those services that are not defined in Istio’s internal service registry. If                 this option is set to ALLOW_ANY, the Istio proxy lets calls to unknown services pass through. If the                 option is set to REGISTRY_ONLY, then the Istio proxy blocks any host without an HTTP service or service                 entry defined within the mesh": "This value represents the meshConfig.outboundTrafficPolicy.mode, that configures the sidecar handling of                 external services, that is, those services that are not defined in Istio’s internal service registry. If                 this option is set to ALLOW_ANY, the Istio proxy lets calls to unknown services pass through. If the                 option is set to REGISTRY_ONLY, then the Istio proxy blocks any host without an HTTP service or service                 entry defined within the mesh",
+  "Time Range": "Time Range",
+  "Time Range & Replay": "Time Range & Replay",
   "to": "到",
   "traffic": "流量",
   "Traffic": "流量",
+  "Traffic Animation": "Traffic Animation",
   "Traffic Graph": "图",
   "Traffic Graph [Cy]": "有向图",
   "Traffic Graph [PF]": "无向图",
   "Traffic metrics per frame": "每个数据帧的流量指标",
   "Traffic metrics per refresh": "每次刷新时的流量指标",
+  "Traffic Shifting / TCP Traffic Shifting": "Traffic Shifting / TCP Traffic Shifting",
+  "Traffic Source": "Traffic Source",
   "Traffic Status": "流量状态",
+  "Unhealthy": "Unhealthy",
   "unknown": "unknown",
   "Unreachable": "Unreachable",
+  "Unselected Namespace": "Unselected Namespace",
   "Valid From:": "有效开始时间:",
   "Valid To:": "有效结束时间:",
   "Version": "Version",
+  "Virtual Service / Request Routing": "Virtual Service / Request Routing",
   "Visit the Mesh page": "Visit the Mesh page",
+  "Warn": "Warn",
+  "Workload": "Workload",
+  "Workload Entry": "Workload Entry",
   "Workloads": "工作负载",
   "Zoom": "Zoom"
 }