mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 21:04:25 +00:00
feat: set root entity for dashboards and set lang (#48)
This commit is contained in:
Fine0830
GitHub
parent
ee06546c20
commit
13b508e896
@ -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: {
|
||||
|
||||
@ -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",
|
||||
};
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -36,13 +36,10 @@ const msg = {
|
||||
technologies: "技术",
|
||||
health: "健康",
|
||||
groupName: "群名称",
|
||||
generalServicePanel: "普通服务面板",
|
||||
topologies: "拓扑图",
|
||||
dataPanel: "数据面板",
|
||||
controlPanel: "控制面板",
|
||||
dataPanel: "数据平面",
|
||||
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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
inactive-text="Zh"
|
||||
style="height: 25px"
|
||||
size="small"
|
||||
style="font-size: 14px"
|
||||
/>
|
||||
</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 = "en";
|
||||
window.localStorage.setItem("lang", "en");
|
||||
} else {
|
||||
locale.value = "zh";
|
||||
window.localStorage.setItem("lang", "zh");
|
||||
}
|
||||
locale.value = lang.value;
|
||||
window.localStorage.setItem("language", lang.value);
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
if (utcHour.value < -12) {
|
||||
@ -184,7 +178,6 @@ const setUTCMin = () => {
|
||||
|
||||
.settings {
|
||||
color: #222;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 20px;
|
||||
|
||||
|
||||
@ -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
|
||||
) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user