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

add menus

Browse Source
This commit is contained in:
Fine 2022-09-27 16:45:31 +08:00
parent 1e2963950c
commit 16aecdba49
8 changed files with 72 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/icons/copy.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="1664265269855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4109" width="48" height="48"><path d="M866.461538 39.384615H354.461538c-43.323077 0-78.769231 35.446154-78.76923 78.769231v39.384616h472.615384c43.323077 0 78.769231 35.446154 78.769231 78.76923v551.384616h39.384615c43.323077 0 78.769231-35.446154 78.769231-78.769231V118.153846c0-43.323077-35.446154-78.769231-78.769231-78.769231z m-118.153846 275.692308c0-43.323077-35.446154-78.769231-78.76923-78.769231H157.538462c-43.323077 0-78.769231 35.446154-78.769231 78.769231v590.769231c0 43.323077 35.446154 78.769231 78.769231 78.769231h512c43.323077 0 78.769231-35.446154 78.76923-78.769231V315.076923z m-354.461538 137.846154c0 11.815385-7.876923 19.692308-19.692308 19.692308h-157.538461c-11.815385 0-19.692308-7.876923-19.692308-19.692308v-39.384615c0-11.815385 7.876923-19.692308 19.692308-19.692308h157.538461c11.815385 0 19.692308 7.876923 19.692308 19.692308v39.384615z m157.538461 315.076923c0 11.815385-7.876923 19.692308-19.692307 19.692308H216.615385c-11.815385 0-19.692308-7.876923-19.692308-19.692308v-39.384615c0-11.815385 7.876923-19.692308 19.692308-19.692308h315.076923c11.815385 0 19.692308 7.876923 19.692307 19.692308v39.384615z m78.769231-157.538462c0 11.815385-7.876923 19.692308-19.692308 19.692308H216.615385c-11.815385 0-19.692308-7.876923-19.692308-19.692308v-39.384615c0-11.815385 7.876923-19.692308 19.692308-19.692308h393.846153c11.815385 0 19.692308 7.876923 19.692308 19.692308v39.384615z" p-id="4110"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

15
src/assets/icons/operation.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="1664266918236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5378" width="48" height="48"><path d="M571.178667 643.328a144 144 0 0 1-189.098667-193.450667l77.781333 77.866667a48 48 0 1 0 67.882667-67.84l-77.824-77.909333a144 144 0 0 1 193.450667 189.141333l226.517333 207.061333a64.896 64.896 0 1 1-91.690667 91.690667l-207.018666-226.56z m51.498666 134.656a288.298667 288.298667 0 0 1-38.656 12.928v95.488c0 5.290667-4.309333 9.6-9.642666 9.6h-124.757334a9.6 9.6 0 0 1-9.6-9.6v-95.488a286.293333 286.293333 0 0 1-74.325333-30.805333l-67.541333 67.541333a9.6 9.6 0 0 1-13.568 0L196.352 739.413333a9.6 9.6 0 0 1 0-13.568l67.541333-67.541333a286.293333 286.293333 0 0 1-30.805333-74.325333H137.6A9.6 9.6 0 0 1 128 574.378667v-124.757334c0-5.290667 4.309333-9.6 9.6-9.6h95.488c6.826667-26.453333 17.28-51.370667 30.805333-74.325333L196.352 298.154667a9.6 9.6 0 0 1 0-13.568L284.586667 196.352a9.6 9.6 0 0 1 13.568 0l67.541333 67.498667a287.146667 287.146667 0 0 1 74.325333-30.848V137.6c0-5.290667 4.266667-9.6 9.6-9.6h124.8c5.248 0 9.6 4.309333 9.6 9.6v95.488c26.368 6.826667 51.328 17.28 74.282667 30.805333l67.541333-67.541333a9.6 9.6 0 0 1 13.568 0l88.234667 88.234667a9.6 9.6 0 0 1 0 13.568l-67.498667 67.541333a287.146667 287.146667 0 0 1 30.848 74.282667h95.402667c5.290667 0 9.6 4.352 9.6 9.642666v124.757334c0 5.333333-4.266667 9.6-9.6 9.6h-95.488c-4.693333 18.133333-11.178667 35.754667-19.328 52.650666a9.6 9.6 0 0 1-15.018667 2.986667l-10.112-9.173333-38.314666-34.261334-12.16-10.88a9.6 9.6 0 0 1-2.688-10.24A192.298667 192.298667 0 0 0 512 320a192 192 0 1 0 63.018667 373.333333 9.6 9.6 0 0 1 10.24 2.645334l10.837333 12.074666 35.285333 39.338667 8.149334 9.130667a9.6 9.6 0 0 1-2.901334 15.061333 283.306667 283.306667 0 0 1-13.952 6.4z" p-id="5379"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

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

@ -154,6 +154,8 @@ const msg = {
query: "Query",
postgreSQL: "PostgreSQL",
endpointTips: "The table shows up to 20 pieces of endpoints.",
viewTrace: "View related traces",
copyName: "Copy name",
seconds: "Seconds",
hourTip: "Select Hour",
minuteTip: "Select Minute",

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

@ -154,6 +154,8 @@ const msg = {
query: "Consulta",
postgreSQL: "PostgreSQL",
endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
viewTrace: "Ver trazas relacionadas",
copyName: "Nombre de la copia",
seconds: "Segundos",
hourTip: "Seleccione Hora",
minuteTip: "Seleccione Minuto",

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

@ -151,6 +151,8 @@ const msg = {
query: "查询",
postgreSQL: "PostgreSQL",
endpointTips: "这里最多展示20条endpoints。",
viewTrace: "查看相关traces",
copyName: "复制名称",
seconds: "秒",
hourTip: "选择小时",
minuteTip: "选择分钟",

2
src/views/dashboard/controls/Tab.vue
View File

@ -40,7 +40,7 @@ limitations under the License. -->
<span class="tab-icons">
<el-tooltip content="Copy Link" placement="bottom">
<i @click="copyLink">
<Icon size="middle" iconName="review-list" class="tab-icon" />
<Icon size="middle" iconName="copy" class="tab-icon" />
</i>
</el-tooltip>
</span>

53
src/views/dashboard/graphs/TopList.vue
View File

@ -15,12 +15,7 @@ limitations under the License. -->
<template>
<div class="top-list" v-if="available">
<div
class="chart-slow-i"
v-for="(i, index) in data[key]"
:key="index"
@click="viewTrace(i)"
>
<div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
<div class="ell tools flex-h">
<div class="desc">
<span class="calls mr-10">{{ i.value }}</span>
@ -28,14 +23,19 @@ limitations under the License. -->
{{ i.name }}
</span>
</div>
<div class="copy">
<Icon
iconName="review-list"
size="middle"
class="cp"
@click="handleClick($event, i.name)"
/>
</div>
<el-popover placement="bottom" trigger="click" :width="30">
<template #reference>
<div class="operation-icon cp ml-10">
<Icon iconName="ellipsis_v" size="middle" />
</div>
</template>
<div class="operation" @click="handleClick(i.name)">
<span>{{ t("copyName") }}</span>
</div>
<div class="operation" @click="viewTrace(i)">
<span>{{ t("viewTrace") }}</span>
</div>
</el-popover>
</div>
<el-progress
:stroke-width="6"
@ -97,8 +97,7 @@ const maxValue = computed(() => {
const temp: number[] = props.data[key.value].map((i: any) => i.value);
return Math.max.apply(null, temp);
});
function handleClick(event: PointerEvent, i: string) {
event.stopPropagation();
function handleClick(i: string) {
copy(i);
}
function viewTrace(item: { name: string; id: string }) {
@ -139,10 +138,6 @@ function viewTrace(item: { name: string; id: string }) {
text-overflow: ellipsis;
}
.copy {
width: 30px;
}
.calls {
font-size: 12px;
padding: 0 5px;
@ -171,4 +166,22 @@ function viewTrace(item: { name: string; id: string }) {
-webkit-box-pack: center;
-webkit-box-align: center;
}
.operation-icon {
color: #333;
}
.operation {
padding: 5px 0;
color: #333;
cursor: pointer;
position: relative;
text-align: center;
font-size: 12px;
&:hover {
color: #409eff;
background-color: #eee;
}
}
</style>

9
src/views/dashboard/related/trace/Detail.vue
View File

@ -34,7 +34,7 @@ limitations under the License. -->
</el-button>
</div>
</h5>
<div class="mb-5 blue sm">
<div class="mb-5 blue">
<Selector
size="small"
:value="
@ -46,12 +46,7 @@ limitations under the License. -->
@change="changeTraceId"
class="trace-detail-ids"
/>
<Icon
size="sm"
class="icon grey link-hover cp ml-5"
iconName="review-list"
@click="handleClick"
/>
<Icon class="cp ml-5" iconName="copy" @click="handleClick" />
</div>
<div class="flex-h item">
<div>