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

update legend

Browse Source
This commit is contained in:
Qiuxia Fan 2022-04-01 17:24:12 +08:00
parent 0b726b63ac
commit 51609c9e09
1 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -20,6 +20,20 @@ limitations under the License. -->
element-loading-background="rgba(0, 0, 0, 0)" element-loading-background="rgba(0, 0, 0, 0)"
:style="`height: ${height}px`" :style="`height: ${height}px`"
> >
<div class="legend">
<div>
<img :src="icons.CUBE" />
<span>
{{ settings.description ? settings.description.healthy || "" : "" }}
</span>
</div>
<div>
<img :src="icons.CUBEERROR" />
<span>
{{ settings.description ? settings.description.unhealthy || "" : "" }}
</span>
</div>
</div>
<div class="setting" v-if="showSetting"> <div class="setting" v-if="showSetting">
<Settings @update="updateSettings" @updateNodes="freshNodes" /> <Settings @update="updateSettings" @updateNodes="freshNodes" />
</div> </div>
@ -99,6 +113,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
import getDashboard from "@/hooks/useDashboardsSession"; import getDashboard from "@/hooks/useDashboardsSession";
import { MetricConfigOpt } from "@/types/dashboard"; import { MetricConfigOpt } from "@/types/dashboard";
import { aggregation } from "@/hooks/useProcessor"; import { aggregation } from "@/hooks/useProcessor";
import icons from "@/assets/img/icons";
/*global Nullable, defineProps */ /*global Nullable, defineProps */
const props = defineProps({ const props = defineProps({
@ -563,6 +578,29 @@ watch(
overflow: auto; overflow: auto;
margin-top: 30px; margin-top: 30px;
.legend {
position: absolute;
top: 10px;
left: 15px;
color: #ccc;
div {
margin-bottom: 5px;
}
img {
width: 32px;
}
span {
display: inline-block;
height: 32px;
line-height: 32px;
float: right;
margin-left: 5px;
}
}
.setting { .setting {
position: absolute; position: absolute;
top: 80px; top: 80px;