github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 00:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add config

Browse Source
This commit is contained in:
Fine 2023-06-05 21:34:30 +08:00
parent 3323f3cd78
commit a97b92633f
11 changed files with 170 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/icons/settings.svg
View File

@ -12,6 +12,6 @@ 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. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.984l-2.109-1.641q-0.328-0.234-0.094-0.656l2.016-3.469q0.188-0.328 0.609-0.188l2.484 0.984q0.984-0.703 1.688-0.984l0.375-2.625q0.094-0.422 0.469-0.422h4.031q0.375 0 0.469 0.422l0.375 2.625q0.891 0.375 1.688 0.984l2.484-0.984q0.422-0.141 0.609 0.188l2.016 3.469q0.234 0.422-0.094 0.656l-2.109 1.641q0.047 0.328 0.047 0.984t-0.047 0.984z"></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/locales/lang/en.ts
View File

@ -400,5 +400,7 @@ const msg = {
uriList: "URI List",
processes: "Processes",
monitorInstances: "Monitor Instances",
processDashboards: "Process Dashboards",
instanceDashboards: "Instance Dashboards",
};
export default msg;

2
src/locales/lang/es.ts
View File

@ -399,5 +399,7 @@ const msg = {
processes: "Proceso",
attributes: "Atributos",
monitorInstances: "Ejemplo de Monitor",
processDashboards: "Tablero de proceso",
instanceDashboards: "Tablero de ejemplo",
};
export default msg;

2
src/locales/lang/zh.ts
View File

@ -397,5 +397,7 @@ const msg = {
processes: "进程",
attributes: "属性",
monitorInstances: "监视实例",
processDashboards: "进程仪表板",
instanceDashboards: "实例仪表板",
};
export default msg;

108
src/views/dashboard/configuration/ContinuousProfiling.vue Normal file
View File

@ -0,0 +1,108 @@
<!-- 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. -->
<template>
<div class="item">
<div>{{ t("instanceDashboards") }}</div>
<Selector
:value="instanceDashboardName || ''"
:options="instanceDashboards"
size="small"
placeholder="Please select a dashboard name"
@change="changeDashboard({ instanceDashboardName: $event[0].value })"
class="selectors"
:clearable="true"
/>
</div>
<div class="item">
<div>{{ t("processDashboards") }}</div>
<Selector
:value="processDashboardName || ''"
:options="processDashboards"
size="small"
placeholder="Please select a dashboard name"
@change="changeDashboard({ processDashboardName: $event[0].value })"
class="selectors"
:clearable="true"
/>
</div>
<div class="footer">
<el-button size="small">
{{ t("cancel") }}
</el-button>
<el-button size="small" type="primary" @click="applyConfig">
{{ t("apply") }}
</el-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
import { EntityType } from "../data";
import type { DashboardItem } from "@/types/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const instanceDashboardName = ref<boolean>(dashboardStore.selectedGrid.instanceDashboardName);
const processDashboardName = ref<number>(dashboardStore.selectedGrid.processDashboardName);
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
const instanceDashboards: Array<DashboardItem & { label: string; value: string }> = [];
const processDashboards: Array<DashboardItem & { label: string; value: string }> = [];
for (const item of list) {
if (item.layer === dashboardStore.layerId) {
const i = {
...item,
label: item.name,
value: item.name,
};
if (item.entity === EntityType[8].value) {
processDashboards.push(i);
}
if (item.entity === EntityType[3].value) {
instanceDashboards.push(i);
}
}
}
function applyConfig() {
dashboardStore.setConfigs(dashboardStore.selectedGrid);
dashboardStore.setConfigPanel(false);
}
function changeDashboard(param: { [key: string]: unknown }) {
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
...param,
});
}
</script>
<style lang="scss" scoped>
.footer {
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
padding: 10px;
text-align: right;
width: 100%;
background-color: #fff;
}
.item {
margin: 10px 0;
}
.selectors {
width: 500px;
}
</style>

2
src/views/dashboard/configuration/index.ts
View File

@ -21,6 +21,7 @@ import Topology from "./Topology.vue";
import Event from "./Event.vue";
import TimeRange from "./TimeRange.vue";
import ThirdPartyApp from "./ThirdPartyApp.vue";
import ContinuousProfiling from "./ContinuousProfiling.vue";
export default {
Text,
@ -29,4 +30,5 @@ export default {
Event,
TimeRange,
ThirdPartyApp,
ContinuousProfiling,
};

8
src/views/dashboard/controls/ContinuousProfiling.vue
View File

@ -21,6 +21,9 @@ limitations under the License. -->
<Icon iconName="ellipsis_v" size="middle" />
</span>
</template>
<div class="tools" @click="editConfig">
<span>{{ t("edit") }}</span>
</div>
<div class="tools" @click="removeWidget">
<span>{{ t("delete") }}</span>
</div>
@ -49,6 +52,11 @@ limitations under the License. -->
function removeWidget() {
dashboardStore.removeControls(props.data);
}
function editConfig() {
dashboardStore.setConfigPanel(true);
dashboardStore.selectWidget(props.data);
}
</script>
<style lang="scss" scoped>
.profile-wrapper {

1
src/views/dashboard/graphs/style.scss
View File

@ -38,6 +38,7 @@
color: #409eff;
display: inline-block;
width: 100%;
text-decoration: underline;
}
.search {

19
src/views/dashboard/related/continuous-profiling/Content.vue
View File

@ -15,13 +15,10 @@ limitations under the License. -->
<template>
<div class="flex-h content">
<policy-list />
<div class="flex-v list">
<div class="title">{{ t("monitorInstances") }}</div>
<div class="instance-list" v-loading="continousProfilingStore.instancesLoading">
<div class="flex-v list" v-loading="continousProfilingStore.instancesLoading">
<instance-list />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";
@ -53,18 +50,4 @@ limitations under the License. -->
min-width: 600px;
overflow: hidden;
}
.instance-list {
height: 100%;
width: 100%;
overflow: auto;
}
.title {
font-size: 13px;
font-weight: bold;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding: 10px 20px;
background-color: #f3f4f9;
}
</style>

43
src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
View File

@ -13,7 +13,10 @@ 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. -->
<template>
<el-table :data="currentInstances" style="width: 99%">
<div class="header">
{{ t("monitorInstances") }}
</div>
<el-table :data="currentInstances" style="width: 99%" height="440">
<el-table-column type="expand">
<template #default="props">
<div class="child">
@ -23,6 +26,13 @@ limitations under the License. -->
</div>
<div class="title mt-10">{{ t("processes") }}</div>
<el-table :data="props.row.processes" size="small" max-height="300">
<el-table-column prop="name" label="Name">
<template #default="scope">
<span class="link">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column
v-for="item in HeaderChildLabels"
:key="item.value"
@ -34,6 +44,13 @@ limitations under the License. -->
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="Name">
<template #default="scope">
<span class="link">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column
v-for="item in HeaderLabels"
:key="item.value"
@ -108,4 +125,28 @@ limitations under the License. -->
.child {
padding-left: 20px;
}
.header {
font-size: 13px;
font-weight: bold;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding: 10px 20px;
background-color: #f3f4f9;
}
.settings {
padding: 1px 0;
border: 1px solid #666;
border-radius: 3px;
color: #666;
cursor: pointer;
}
.link {
cursor: pointer;
color: #409eff;
display: inline-block;
width: 100%;
text-decoration: underline;
}
</style>

2
src/views/dashboard/related/continuous-profiling/data.ts
View File

@ -32,13 +32,11 @@ export const TargetTypes = [
export const ComponentType = "CONTINOUS_PROFILING";
export const HeaderLabels = [
{ value: "name", label: "Name" },
{ value: "triggeredCount", label: "Triggered Count", width: 150 },
{ value: "lastTriggerTime", label: "Last Trigger Time", width: 170 },
];
export const HeaderChildLabels = [
{ value: "name", label: "Name" },
{ value: "detectType", label: "Detect Type", width: 100 },
{ value: "triggeredCount", label: "Triggered Count", width: 120 },
{ value: "lastTriggerTime", label: "Last Trigger Time", width: 160 },