github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 18:45:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

update components

Browse Source
This commit is contained in:
Fine 2022-08-20 14:46:19 +08:00
parent 44b4f21499
commit 3ccb605e67
7 changed files with 51 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/icons/setting_empty.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

6
src/assets/icons/time_range.svg
View File

@ -12,4 +12,8 @@ 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>
<svg t="1660976558460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="813" width="48" height="48">
<path d="M498.596 482.29H345.42v57.308h210.478V274.197h-57.301V482.29z m0 0M577.685 644.985h379.88v57.302h-379.88v-57.302z m0 0M577.685 773.765h379.88v57.307h-379.88v-57.307z m0 0M577.685 902.55h379.88v57.307h-379.88V902.55z m0 0" p-id="814"></path>
<path d="M102.523 382.29a28.668 28.668 0 0 0 23.367 2.56l190.81-61.886c15.053-4.883 23.298-21.04 18.415-36.09-4.882-15.052-21.04-23.297-36.093-18.415l-123.346 40c15.994-26.117 35.17-50.538 57.37-72.745 73.768-73.767 171.847-114.388 276.169-114.388 104.32 0 202.395 40.622 276.161 114.388S899.77 407.56 899.77 511.882c0 26.428-2.616 52.45-7.71 77.78h58.303c4.465-25.499 6.709-51.47 6.709-77.78 0-60.45-11.846-119.102-35.205-174.336-22.56-53.335-54.85-101.227-95.969-142.35-41.122-41.122-89.017-73.408-142.348-95.968-55.233-23.361-113.89-35.207-174.334-35.207-60.45 0-119.107 11.846-174.337 35.208-53.335 22.56-101.23 54.846-142.35 95.969-23.98 23.98-44.933 50.278-62.727 78.6l-20.738-105.654c-3.043-15.528-18.105-25.642-33.632-22.6-15.528 3.048-25.643 18.105-22.6 33.637l36.103 183.932a28.666 28.666 0 0 0 13.588 19.178z m0 0M126.02 587.942H67.768c5.76 33.679 15.368 66.544 28.79 98.278 22.56 53.334 54.85 101.225 95.972 142.348 41.123 41.123 89.014 73.409 142.349 95.969 54.112 22.888 111.518 34.711 170.668 35.182v-57.324c-102.95-0.941-199.595-41.446-272.5-114.349-55.501-55.502-92.237-124.77-107.027-200.104z m0 0" p-id="815">
</path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

23
src/views/dashboard/related/network-profiling/Content.vue
View File

@ -15,19 +15,13 @@ limitations under the License. -->
<template>
<div class="flex-h content">
<Tasks />
<div class="vis-graph ml-5">
<div class="schedules">
<Schedules />
</div>
<div class="item" v-show="networkProfilingStore.nodes.length">
<process-topology />
</div>
<div class="vis-graph ml-5" v-show="networkProfilingStore.nodes.length">
<process-topology />
</div>
</div>
</template>
<script lang="ts" setup>
import Tasks from "./components/Tasks.vue";
import Schedules from "./components/Schedules.vue";
import ProcessTopology from "./components/ProcessTopology.vue";
import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
@ -44,18 +38,7 @@ const networkProfilingStore = useNetworkProfilingStore();
flex-grow: 2;
min-width: 700px;
overflow: auto;
}
.item {
width: 100%;
height: calc(100% - 50px);
// background-color: #333840;
position: relative;
}
.schedules {
height: 40px;
border-bottom: 1px solid #ccc;
padding: 8px;
width: calc(100% - 300px);
}
</style>

50
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -14,17 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div ref="chart" class="process-topo"></div>
<div
class="switch-icon-edit ml-5"
title="Settings"
@click="setConfig"
v-if="dashboardStore.editMode"
>
<Icon size="middle" iconName="settings" />
</div>
<div class="process-setting" v-if="showSettings && dashboardStore.editMode">
<el-popover placement="bottom" :width="295" trigger="click">
<template #reference>
<div
class="switch-icon-edit ml-5"
title="Settings"
@click="setConfig"
v-if="dashboardStore.editMode"
>
<Icon size="middle" iconName="setting_empty" />
</div>
</template>
<Settings @update="updateSettings" />
</div>
</el-popover>
<el-popover placement="bottom" :width="600" trigger="click">
<template #reference>
<div class="range switch-icon-edit">
<Icon size="middle" iconName="time_range" />
</div>
</template>
<Schedules />
</el-popover>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";
@ -47,6 +57,7 @@ import Settings from "./Settings.vue";
import { EntityType } from "@/views/dashboard/data";
import getDashboard from "@/hooks/useDashboardsSession";
import { Layout } from "./Graph/layout";
import Schedules from "./Schedules.vue";
/*global Nullable, defineProps */
const props = defineProps({
@ -70,7 +81,6 @@ const link = ref<any>(null);
const anchor = ref<any>(null);
const arrow = ref<any>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
const showSettings = ref<boolean>(false);
const config = ref<any>({});
const diff = ref<number[]>([220, 200]);
const radius = 210;
@ -369,7 +379,6 @@ function updateSettings(param: any) {
}
function setConfig() {
showSettings.value = !showSettings.value;
dashboardStore.selectWidget(props.config);
}
@ -408,8 +417,7 @@ watch(
</script>
<style lang="scss">
.process-topo {
width: calc(100% - 10px);
margin: 0 5px 5px 0;
width: 100%;
height: 100%;
min-height: 150px;
min-width: 300px;
@ -435,18 +443,8 @@ watch(
right: 10px;
}
.process-setting {
position: absolute;
top: 45px;
right: 10px;
width: 300px;
height: 160px;
background-color: #666;
overflow: auto;
padding: 15px;
border-radius: 3px;
color: #fff;
transition: all 0.5ms linear;
.range {
right: 50px;
}
.topo-line-anchor {

12
src/views/dashboard/related/network-profiling/components/Schedules.vue
View File

@ -13,17 +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>
<!-- <el-button class="mr-10" type="primary" size="small">
{{ t("start") }}
</el-button> -->
<el-popover placement="bottom" :width="600" trigger="click">
<template #reference>
<span>
<el-button size="small"> Set time range </el-button>
</span>
</template>
<div ref="timeRange" class="time-ranges"></div>
</el-popover>
<div ref="timeRange" class="time-ranges"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";

1
src/views/dashboard/related/network-profiling/components/Settings.vue
View File

@ -83,5 +83,6 @@ function changeLinkDashboard(opt: { value: string }[]) {
.inputs {
margin-top: 8px;
width: 270px;
margin-bottom: 30px;
}
</style>

2
src/views/dashboard/related/network-profiling/components/Tasks.vue
View File

@ -200,7 +200,7 @@ async function fetchTasks() {
</script>
<style lang="scss" scoped>
.profile-task-list {
width: 280px;
width: 300px;
height: calc(100% - 10px);
overflow: auto;
border-right: 1px solid rgba(0, 0, 0, 0.1);