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

setup config for timerange widget

Browse Source
This commit is contained in:
Fine 2022-08-12 17:10:44 +08:00
parent cc69e0bb1d
commit 4b420f1e2d
7 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,4 +12,4 @@ 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 t="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452" fill="#515151"></path></svg>
<svg t="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

15
src/assets/icons/time_range.svg Normal file
View File

@ -0,0 +1,15 @@
<!-- 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. -->
<svg t="1660294515307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020" width="48" height="48"><path d="M240 512h64c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16h-64c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m160 0h384c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H400c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m384 256h-64c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16h64c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16z" p-id="1021"></path><path d="M896 128H768V96c0-16-12.8-32-32-32s-32 12.8-32 32v32H320V96c0-16-12.8-32-32-32s-32 12.8-32 32v32H128c-35.2 0-64 28.8-64 64v704c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64z m0 736c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V384h768v480z m0-544H128v-96c0-19.2 12.8-32 32-32h96v32c0 16 12.8 32 32 32s32-12.8 32-32v-32h384v32c0 16 12.8 32 32 32s32-12.8 32-32v-32h96c19.2 0 32 12.8 32 32v96z" p-id="1022"></path><path d="M240 832h384c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H240c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m0-160h544c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H240c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z" p-id="1023"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

7
src/store/data.ts
View File

@ -29,3 +29,10 @@ export const TextConfig = {
fontSize: 14,
textAlign: "left",
};
export const TimeRangeConfig = {
fontColor: "black",
backgroundColor: "white",
fontSize: 14,
textAlign: "center",
};

12
src/store/modules/dashboard.ts
View File

@ -21,7 +21,7 @@ import graphql from "@/graphql";
import query from "@/graphql/fetch";
import { DashboardItem } from "@/types/dashboard";
import { useSelectorStore } from "@/store/modules/selectors";
import { NewControl, TextConfig } from "../data";
import { NewControl, TextConfig, TimeRangeConfig } from "../data";
import { AxiosResponse } from "axios";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
@ -129,6 +129,11 @@ export const dashboardStore = defineStore({
newItem.h = 6;
newItem.graph = TextConfig;
}
if (type === "TimeRange") {
newItem.w = 8;
newItem.h = 6;
newItem.graph = TimeRangeConfig;
}
this.activedGridItem = newItem.i;
this.selectedGrid = newItem;
this.layout = this.layout.map((d: LayoutConfig) => {
@ -195,6 +200,11 @@ export const dashboardStore = defineStore({
newItem.h = 6;
newItem.graph = TextConfig;
}
if (type === "TimeRange") {
newItem.w = 8;
newItem.h = 6;
newItem.graph = TextConfig;
}
if (this.layout[idx].children) {
const items = children.map((d: LayoutConfig) => {
d.y = d.y + newItem.h;

23
src/views/dashboard/controls/TimeRange.vue
View File

@ -13,7 +13,7 @@ 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="topology">
<div class="time-range">
<div class="header">
<el-popover
placement="bottom"
@ -41,16 +41,20 @@ limitations under the License. -->
justifyContent: graph.textAlign,
}"
>
<a
:href="graph.url"
target="_blank"
<Icon
iconName="time_range"
size="lg"
:style="{ color: TextColors[graph.fontColor] }"
/>
<span
class="ml-10"
:style="{
color: TextColors[graph.fontColor],
fontSize: graph.fontSize + 'px',
}"
>
{{ content }}
</a>
</span>
</div>
</div>
</template>
@ -75,7 +79,9 @@ const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
const appStore = useAppStoreWithOut();
const content = computed(() => {
const text = appStore.duration.map((date: Date) => tf(date)).join(` ~ `);
const text = [appStore.duration.start, appStore.duration.end]
.map((date: Date) => tf(date, "YYYY-MM-DD HH:mm"))
.join(` ~ `);
return text;
});
@ -86,7 +92,7 @@ function editConfig() {
dashboardStore.setConfigPanel(true);
dashboardStore.selectWidget(props.data);
}
function tf(time: Date, format?: any): string {
function tf(time: Date, format: any): string {
const local = {
dow: 1, // Monday is the first day of the week
hourTip: t("hourTip"), // tip of select hour
@ -136,7 +142,7 @@ function tf(time: Date, format?: any): string {
}
</script>
<style lang="scss" scoped>
.topology {
.time-range {
font-size: 12px;
height: 100%;
position: relative;
@ -160,6 +166,7 @@ function tf(time: Date, format?: any): string {
display: flex;
align-items: center;
overflow: auto;
font-weight: bold;
}
.tools {

1
src/views/dashboard/data.ts
View File

@ -212,6 +212,7 @@ export const ProcessTools = [
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
{ name: "all_inbox", content: "Add Tab", id: "addTab" },
{ name: "library_books", content: "Add Text", id: "addText" },
{ name: "time_range", content: "Add Time Range Text", id: "addTimeRange" },
];
export const ServiceRelationTools = [
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },

6
src/views/dashboard/panel/Tool.vue
View File

@ -560,6 +560,9 @@ function setTabControls(id: string) {
case "addEvent":
dashboardStore.addTabControls("Event");
break;
case "addTimeRange":
dashboardStore.addTabControls("TimeRange");
break;
default:
ElMessage.info("Don't support this control");
break;
@ -598,6 +601,9 @@ function setControls(id: string) {
case "addEvent":
dashboardStore.addControl("Event");
break;
case "addTimeRange":
dashboardStore.addControl("TimeRange");
break;
default:
dashboardStore.addControl("Widget");
}