feat: set root entity for dashboards and set lang (#48)

src/components/Selector.vue

@@ -49,7 +49,7 @@ interface Option {
 const emit = defineEmits(["change", "query"]);
 const props = defineProps({
   options: {
-    type: Array as PropType<(Option & { disabled: boolean })[]>,
+    type: Array as PropType<(Option & { disabled?: boolean })[]>,
     default: () => [],
   },
   value: {

src/constants/data.ts

@@ -19,3 +19,23 @@ export enum TimeType {
   HOUR_TIME = "HOUR",
   DAY_TIME = "DAY",
 }
+
+export const Languages = [
+  { label: "English", value: "en" },
+  { label: "Chinese", value: "zh" },
+];
+
+export const RoutesMap: { [key: string]: string } = {
+  GeneralServices: "GENERAL",
+  Database: "VIRTUAL_DATABASE",
+  MeshServices: "MESH",
+  ControlPanel: "MESH_CP",
+  DataPanel: "MESH_DP",
+  Linux: "OS_LINUX",
+  SkyWalkingServer: "SO11Y_OAP",
+  Satellite: "SO11Y_SATELLITE",
+  Functions: "FAAS",
+  Browser: "BROWSER",
+  KubernetesCluster: "K8S",
+  KubernetesService: "K8S_SERVICE",
+};

src/locales/index.ts

@@ -23,13 +23,12 @@ const messages = {
   zh,
 };
 
-const savedLanguage = window.localStorage.getItem("lang");
+const savedLanguage = window.localStorage.getItem("language");
 let language = navigator.language.split("-")[0];
 if (!savedLanguage) {
-  window.localStorage.setItem("lang", language);
+  window.localStorage.setItem("language", language);
 }
 language = savedLanguage ? savedLanguage : language;
-
 const i18n = createI18n({
   locale: language,
   messages,

src/locales/lang/en.ts

@@ -41,12 +41,11 @@ const msg = {
   dataPanel: "Data Plane",
   controlPanel: "Control Plane",
   eventList: "Event List",
-  databasePanel: "Database Panel",
-  meshServicePanel: "Service Panel",
   newDashboard: "Create a new dashboard",
   dashboardEdit: "Edit the dashboard",
   edit: "Edit",
   delete: "Delete",
+  confirm: "Confirm",
   layer: "Layer",
   endpoint: "Endpoint",
   instance: "Instance",
@@ -145,56 +144,26 @@ const msg = {
   title: "Title",
   width: "Width",
   height: "Height",
-  login: "Login Now",
-  signout: "Sign Out",
   dashboard: "Dashboard",
   topology: "Topology",
   trace: "Trace",
   alarm: "Alarms",
-  event: "Event",
   auto: "Auto",
   reload: "Reload",
-  usermode: "User Mode",
-  editmode: "Edit Mode",
-  currentVersion: "Current Version",
-  currentPage: "Current Page",
   version: "Version",
-  page: "Page",
-  currentDatabase: "Current Database",
-  templateConfig: "Template Configuration",
   copy: "Copy",
   reset: "Reset",
   apply: "Apply",
-  createTemplate: "Create Template",
-  templateType: "Template Type",
-  templateName: "Template Name",
   template: "Template",
-  confirm: "Confirm",
   cancel: "Cancel",
   createTab: "Create Tab",
   tabName: "Tab Name",
-  nouse: "No Use",
-  allServices: "All Services",
-  serviceDetail: "Service Detail",
   detectPoint: "Detect Point",
-  callType: "Call Type",
-  server: "Server",
-  client: "Client",
   name: "Name",
   types: "Types",
-  cpm: "Cpm",
-  sla: "SLA",
-  latency: "Latency",
-  avgResponseTime: "Avg Response Time ( ms )",
-  avgThroughput: "Load (CPM - calls per minute)",
-  avgSLA: "Successful Rate ( % )",
   all: "All",
-  success: "Success",
-  error: "Error",
   endpoints: "Endpoints",
   cache: "Cache",
-  global: "Global",
-  serviceendpoint: "ServiceEndpoint",
   serviceinstance: "ServiceInstance",
   databaseaccess: "DatabaseAccess",
   servicerelation: "ServiceRelation",
@@ -229,14 +198,8 @@ const msg = {
   weekCutTip: "Last 1 week",
   monthCutTip: "Last 1 month",
   serverZone: "Server Zone",
-  percentResponse: "Response Time Percentile ( ms )",
   exportImage: "Export image",
-  queryData: "Query",
-  previousService: "Previous Service",
-  nextService: "Next Service",
   object: "Object",
-  ShowInstanceDependency: "Show Instance Dependency",
-  InstanceDependencyTitle: "Service Instance Dependency",
   profile: "Profile",
   newTask: "New Task",
   monitorTime: "Monitor Time",
@@ -256,27 +219,16 @@ const msg = {
   excludeChildren: "Exclude Children",
   view: "View",
   timeTips: "Time interval cannot exceed 60 days",
-  standardAPM: "Standard",
   entityType: "Entity Type",
   maxItemNum: "Max number of Item",
-  independentSelector: "Selectors",
   unknownMetrics: "Unknown Metrics",
   labels: "Labels",
   aggregation: "Calculation",
   unit: "Unit",
   labelsIndex: "Label Subscript",
-  parentService: "Parent Service",
-  isParentService: "Set Parent Service",
-  noneParentService: "No Parent Service",
   group: "Service Group",
-  endpointFilter: "Endpoint Filter",
-  databaseView: "Database",
   browserView: "Browser",
-  metricsView: "NOC - Network Operation Center",
   sortOrder: "Sort Order",
-  descendOrder: "Descend Order",
-  increaseOrder: "Increase Order",
-  defaultOrder: "Default Order",
   chartType: "Chart Type",
   currentDepth: "Current Depth",
   showDepth: "Show Depth Selector",
@@ -364,9 +316,6 @@ const msg = {
   noticeTag: "Please press Enter after inputting a tag(key=value).",
   conditionNotice:
     "Notice: Please press Enter after inputting a tag, key of content, exclude key of content(key=value).",
-  cacheModalTitle: "Clear cache reminder",
-  cacheReminderContent:
-    "SkyWalking detected dashboard template updates, do you want to update?",
   language: "Language",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -36,13 +36,10 @@ const msg = {
   technologies: "技术",
   health: "健康",
   groupName: "群名称",
-  generalServicePanel: "普通服务面板",
   topologies: "拓扑图",
-  dataPanel: "数据面板",
+  dataPanel: "数据平面",
-  controlPanel: "控制面板",
+  controlPanel: "控制平面",
   eventList: "事件列表",
-  databasePanel: "数据库面板",
-  meshServicePanel: "服务面板",
   newDashboard: "新增仪表盘",
   dashboardEdit: "编辑仪表盘",
   edit: "编辑",
@@ -112,7 +109,7 @@ const msg = {
   showGroup: "显示分组",
   noWidget: "请添加组件",
   rename: "重命名",
-  selfObservability: "自观测性",
+  selfObservability: "自监控",
   satellite: "Satellite",
   skyWalkingServer: "SkyWalking服务",
   functions: "Functions",
@@ -145,57 +142,29 @@ const msg = {
   title: "标题",
   width: "宽度",
   height: "高度",
-  login: "登录",
-  signout: "登出",
   topology: "拓扑图",
   trace: "追踪",
   alarm: "告警",
   event: "事件",
   auto: "自动",
   reload: "刷新",
-  usermode: "用户模式",
   editmode: "编辑模式",
-  currentVersion: "当前版本",
-  currentPage: "当前页面",
   version: "版本",
-  page: "页面",
-  currentDatabase: "当前数据库",
-  templateConfig: "模版配置",
   copy: "拷贝",
   reset: "重制",
   apply: "应用",
-  createTemplate: "创建模板",
-  templateType: "模板类型",
-  templateName: "模板名称",
-  template: "模版",
   confirm: "确定",
   cancel: "取消",
   createTab: "创建分页",
   tabName: "分页名",
-  nouse: "不使用",
-  allServices: "所有服务",
-  serviceDetail: "服务详情",
   detectPoint: "侦察端",
-  callType: "调用类型",
-  server: "服务端",
-  client: "客户端",
   name: "名称",
   types: "类型",
-  cpm: "每分钟请求量",
-  sla: "SLA",
-  latency: "延迟",
-  avgResponseTime: "平均响应时间",
-  avgThroughput: "平均吞吐量",
-  avgSLA: "平均SLA",
   all: "全部",
-  success: "成功",
-  error: "失败",
   service: "服务",
   instance: "实例",
   endpoints: "端点",
   cache: "存储器",
-  global: "全局",
-  serviceendpoint: "服务端点",
   serviceinstance: "服务实例",
   databaseaccess: "数据库存取",
   servicerelation: "服务关系",
@@ -231,14 +200,8 @@ const msg = {
   weekCutTip: "最近1周",
   monthCutTip: "最近1月",
   serverZone: "服务器时区",
-  percentResponse: "百分比响应",
   exportImage: "导出为图片",
-  queryData: "数据查询",
-  previousService: "上一个服务",
-  nextService: "下一个服务",
   object: "粒度",
-  ShowInstanceDependency: "展示实例依赖",
-  InstanceDependencyTitle: "实例依赖",
   profile: "性能剖析",
   newTask: "新建任务",
   monitorTime: "监控时间",
@@ -258,27 +221,16 @@ const msg = {
   excludeChildren: "不包含子部分",
   view: "查看",
   timeTips: "时间区间不能超过60天",
-  standardAPM: "标准APM",
   entityType: "实体类型",
   maxItemNum: "最多条目数",
-  independentSelector: "独立选择器",
   unknownMetrics: "未知指标",
   labels: "标签",
   aggregation: "计算",
   unit: "单位",
   labelsIndex: "标签下标",
-  parentService: "父级服务",
-  isParentService: "设置父服务",
-  noneParentService: "不设置父服务",
   group: "服务组",
-  endpointFilter: "端点过滤器",
-  databaseView: "数据库视图",
   browserView: "浏览器视图",
-  metricsView: "大屏视图",
   sortOrder: "排序方式",
-  descendOrder: "递减顺序",
-  increaseOrder: "递增顺序",
-  defaultOrder: "默认顺序",
   chartType: "图表类型",
   currentDepth: "当前深度",
   defaultDepth: "默认深度",
@@ -365,8 +317,6 @@ const msg = {
   noticeTag: "请输入一个标签(key=value)之后回车",
   conditionNotice:
     "请输入一个标签、内容关键词或者内容不包含的关键词(key=value)之后回车",
-  cacheModalTitle: "清除缓存提醒",
-  cacheReminderContent: "SkyWalking检测到仪表板模板更新，是否需要更新？",
   language: "语言",
 };
 export default msg;

src/views/Layer.vue

@@ -27,47 +27,34 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import Dashboard from "./dashboard/Edit.vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { RoutesMap } from "@/constants/data";
 
 const route = useRoute();
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
-const routesMap: { [key: string]: string } = {
-  GeneralServices: "GENERAL",
-  Database: "VIRTUAL_DATABASE",
-  MeshServices: "MESH",
-  ControlPanel: "MESH_CP",
-  DataPanel: "MESH_DP",
-  Linux: "OS_LINUX",
-  SkyWalkingServer: "SO11Y_OAP",
-  Satellite: "SO11Y_SATELLITE",
-  Functions: "FAAS",
-  Browser: "BROWSER",
-  KubernetesCluster: "K8S",
-  KubernetesService: "K8S_SERVICE",
-};
 const layer = ref<string>("GENERAL");
 
 getDashboard();
 
 async function getDashboard() {
-  layer.value = routesMap[String(route.name)];
+  layer.value = RoutesMap[String(route.name)];
   dashboardStore.setLayer(layer.value);
-  dashboardStore.setEntity(EntityType[1].value);
   dashboardStore.setMode(false);
   await dashboardStore.setDashboards();
-  const index = dashboardStore.dashboards.findIndex(
+  const item = dashboardStore.dashboards.find(
     (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
       d.layer === dashboardStore.layerId &&
-      d.entity === EntityType[1].value &&
+      [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
       d.isRoot
   );
-  if (index < 0) {
+  if (!item) {
     appStore.setPageTitle(dashboardStore.layer);
     dashboardStore.setCurrentDashboard(null);
+    dashboardStore.setEntity(EntityType[1].value);
     return;
   }
-  const item = dashboardStore.dashboards[index];
+  dashboardStore.setEntity(item.entity);
   dashboardStore.setCurrentDashboard(item);
 }
 </script>

src/views/Settings.vue

@@ -14,18 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="settings">
-    <!-- <div class="flex-h item">
-      <span class="label">{{ t("version") }}</span>
-      <span>{{ rocketbotGlobal.version }}</span>
-    </div> -->
     <div class="flex-h item">
       <span class="label">{{ t("language") }}</span>
-      <el-switch
+      <Selector
         v-model="lang"
+        :options="Languages"
+        placeholder="Select a language"
         @change="setLang"
-        active-text="En"
+        size="small"
-        inactive-text="Zh"
+        style="font-size: 14px"
-        style="height: 25px"
       />
     </div>
     <div class="flex-h item">
@@ -76,12 +73,14 @@ import { ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import timeFormat from "@/utils/timeFormat";
+import { Languages } from "@/constants/data";
+import Selector from "@/components/Selector.vue";
 
 const { t, locale } = useI18n();
 const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({
   timer: null,
 });
-const lang = ref<boolean>(locale.value === "zh" ? false : true);
+const lang = ref<string>(locale.value || "en");
 const autoTime = ref<number>(6);
 const auto = ref<boolean>(false);
 const appStore = useAppStoreWithOut();
@@ -123,13 +122,8 @@ const changeAutoTime = () => {
   }
 };
 const setLang = (): void => {
-  if (lang.value) {
+  locale.value = lang.value;
-    locale.value = "en";
+  window.localStorage.setItem("language", lang.value);
-    window.localStorage.setItem("lang", "en");
-  } else {
-    locale.value = "zh";
-    window.localStorage.setItem("lang", "zh");
-  }
 };
 const setUTCHour = () => {
   if (utcHour.value < -12) {
@@ -184,7 +178,6 @@ const setUTCMin = () => {
 
 .settings {
   color: #222;
-  font-family: inherit;
   font-size: 14px;
   padding: 20px;
 

src/views/dashboard/List.vue

@@ -86,7 +86,11 @@ limitations under the License. -->
             <el-popconfirm
               title="Are you sure to set this?"
               @confirm="setRoot(scope.row)"
-              v-if="scope.row.entity === EntityType[1].value"
+              v-if="
+                [EntityType[0].value, EntityType[1].value].includes(
+                  scope.row.entity
+                )
+              "
             >
               <template #reference>
                 <el-button size="small" style="width: 120px" type="danger">
@@ -269,7 +273,7 @@ async function setRoot(row: DashboardItem) {
     } else {
       if (
         d.layer === row.layer &&
-        d.entity === row.entity &&
+        [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
         row.isRoot === false &&
         d.isRoot === true
       ) {