You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/04/20 08:53:04 UTC
[skywalking-rocketbot-ui] branch master updated: fix: update style
of endpoint dependency (#480)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new ca80e6e fix: update style of endpoint dependency (#480)
ca80e6e is described below
commit ca80e6ee810e3d321591eaf35477bf3037154caa
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Tue Apr 20 16:52:58 2021 +0800
fix: update style of endpoint dependency (#480)
---
src/components/rk-sidebox.vue | 13 +++++-----
src/views/components/dashboard/dashboard-item.vue | 5 +++-
.../dashboard/tool-bar/dashboard-events.vue | 7 +++++-
src/views/components/log/log-conditions.vue | 3 +--
src/views/components/topology/radial.vue | 12 ++++------
src/views/components/topology/topo-aside.vue | 4 ++--
.../components/topology/topo-detect-point.vue | 19 +++++++--------
.../topology/topo-endpoint-dependency.vue | 28 +++++++++++-----------
.../components/topology/topo-group/group-item.vue | 6 ++---
src/views/components/topology/topo-group/index.vue | 4 ++--
.../topology/topo-instance-dependency.vue | 5 ++--
src/views/components/topology/topo-services.vue | 2 +-
src/views/components/trace/trace-table.vue | 4 ++--
.../topology/endpoint-dependency/index.vue | 11 +++++----
14 files changed, 65 insertions(+), 58 deletions(-)
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index b9f1383..5720c86 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -15,12 +15,7 @@ limitations under the License. -->
<template>
<div>
<div class="rk-sidebox-backdrop" v-show="show" @click="handleHide"></div>
- <aside
- class="rk-sidebox flex-v"
- :style="
- show ? `width:${width};${right ? 'right:0' : 'left:0'}` : `width:${width};${right ? 'right' : 'left'}:-${width}`
- "
- >
+ <aside class="rk-sidebox flex-v" v-if="destroyOnClose ? destroyOnClose && show : true" :style="updateStyle()">
<div class="rk-sidebox-title">
<span class="title">{{ this.title }}</span>
<div class="r rk-sidebox-close" @click="handleHide">
@@ -53,8 +48,14 @@ limitations under the License. -->
width: {
default: '550px',
},
+ destroyOnClose: {
+ default: false,
+ }
},
methods: {
+ updateStyle() {
+ return this.show ? this.destroyOnClose ? '' : `width:${this.width};${this.right ? 'right:0' : 'left:0'}` : `width:${this.width};${this.right ? 'right' : 'left'}:-${this.width}`;
+ },
handleHide() {
this.$emit('update:show', false);
this.$emit('closeSideboxCallback');
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index 7c661da..7cc7104 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -384,7 +384,10 @@ limitations under the License. -->
@Watch('rocketOption.updateDashboard')
private watchCurrentSelectors() {
this.itemEvents = this.eventsFilter();
- if (this.rocketOption.updateDashboard.key.includes(UpdateDashboardEvents)) {
+ if (
+ this.rocketOption.updateDashboard.key &&
+ this.rocketOption.updateDashboard.key.includes(UpdateDashboardEvents)
+ ) {
return;
}
setTimeout(() => {
diff --git a/src/views/components/dashboard/tool-bar/dashboard-events.vue b/src/views/components/dashboard/tool-bar/dashboard-events.vue
index 2c271da..313c321 100644
--- a/src/views/components/dashboard/tool-bar/dashboard-events.vue
+++ b/src/views/components/dashboard/tool-bar/dashboard-events.vue
@@ -25,7 +25,12 @@ limitations under the License. -->
v-tooltip:left="{ content: enableEvents ? $t('disableEvents') : $t('enableEvents') }"
/>
</div>
- <rk-sidebox width="1000px" :fixed="true" :show.sync="dialogEventVisible" @closeSideboxCallback="updateEvents">
+ <rk-sidebox
+ width="1000px"
+ :destroyOnClose="true"
+ :show.sync="dialogEventVisible"
+ @closeSideboxCallback="updateEvents"
+ >
<div class="config-box">
<div class="series-type" v-show="type === pageEventsType.DASHBOARD_EVENTS">
<label class="title">{{ $t('eventSeries') }}</label>
diff --git a/src/views/components/log/log-conditions.vue b/src/views/components/log/log-conditions.vue
index 529743e..b497c8b 100644
--- a/src/views/components/log/log-conditions.vue
+++ b/src/views/components/log/log-conditions.vue
@@ -111,8 +111,7 @@ limitations under the License. -->
</template>
<script lang="ts">
- import { Duration, Option } from '@/types/global';
- import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
import { Mutation, State } from 'vuex-class';
import { State as globalState } from '@/store/modules/global/index';
import { State as logState } from '@/store/modules/log/index';
diff --git a/src/views/components/topology/radial.vue b/src/views/components/topology/radial.vue
index 92071de..de8ff58 100644
--- a/src/views/components/topology/radial.vue
+++ b/src/views/components/topology/radial.vue
@@ -52,9 +52,7 @@ limitations under the License. -->
id: node.id,
name: node.name,
label: {
- normal: {
- show: true,
- },
+ show: true,
},
category: node.type,
});
@@ -95,10 +93,8 @@ limitations under the License. -->
categories,
roam: true,
label: {
- normal: {
- position: 'right',
- formatter: '{b}',
- },
+ position: 'right',
+ formatter: '{b}',
},
lineStyle: {
color: 'source',
@@ -122,7 +118,7 @@ limitations under the License. -->
},
};
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.micro-radil-chart {
height: 100%;
position: fixed;
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 83c883e..7de491c 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
</template>
<script lang="ts">
import { initState } from '@/store/modules/dashboard/dashboard-data-layout';
- import topo, { State as topoState } from '@/store/modules/topology';
+ import { State as topoState } from '@/store/modules/topology';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import Radial from './radial.vue';
@@ -154,7 +154,7 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.link-topo-aside {
width: 280px;
position: absolute;
diff --git a/src/views/components/topology/topo-detect-point.vue b/src/views/components/topology/topo-detect-point.vue
index 26a05a1..3697eb3 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -253,22 +253,21 @@ limitations under the License. -->
text-align: center;
}
- .instance-dependency {
- .rk-sidebox {
- background: #2b3037;
- outline: none;
- }
- .rk-sidebox-inner {
- height: 100%;
- }
- }
-
.title-name {
width: 100%;
padding-left: 40px;
font-size: 16px;
}
}
+ .instance-dependency {
+ .rk-sidebox {
+ background: #2b3037;
+ outline: none;
+ }
+ .rk-sidebox-inner {
+ height: 100%;
+ }
+ }
.link-topo-aside-box {
border-radius: 4px;
diff --git a/src/views/components/topology/topo-endpoint-dependency.vue b/src/views/components/topology/topo-endpoint-dependency.vue
index 97db853..8cfc6b9 100644
--- a/src/views/components/topology/topo-endpoint-dependency.vue
+++ b/src/views/components/topology/topo-endpoint-dependency.vue
@@ -41,8 +41,8 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
- import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
- import { State, Action, Getter, Mutation } from 'vuex-class';
+ import { Vue, Component, Watch } from 'vue-property-decorator';
+ import { State, Action, Getter } from 'vuex-class';
import { State as topoState, EndpointDependencyConidition, Call, Duration } from '@/store/modules/topology';
import TopoChart from './topo-chart.vue';
import DependencySankey from './dependency-sankey.vue';
@@ -94,7 +94,7 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.rk-endpoint-dependency {
background: #333840;
height: 100%;
@@ -105,17 +105,6 @@ limitations under the License. -->
height: 80%;
min-height: 500px;
}
- .endpoint-dependency-metrics {
- height: 20%;
- min-height: 100px;
- display: flex;
- flex-direction: row;
- padding-left: 10px;
- > div {
- width: 25%;
- height: 100%;
- }
- }
.endpoint-dependency-empty {
color: #fff;
text-align: center;
@@ -123,4 +112,15 @@ limitations under the License. -->
line-height: 500px;
}
}
+ .endpoint-dependency-metrics {
+ height: 20%;
+ min-height: 100px;
+ display: flex;
+ flex-direction: row;
+ padding-left: 10px;
+ > div {
+ width: 25%;
+ height: 100%;
+ }
+ }
</style>
diff --git a/src/views/components/topology/topo-group/group-item.vue b/src/views/components/topology/topo-group/group-item.vue
index 866d28e..847571c 100644
--- a/src/views/components/topology/topo-group/group-item.vue
+++ b/src/views/components/topology/topo-group/group-item.vue
@@ -42,9 +42,9 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
- import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
- import { Action, Getter, Mutation, State } from 'vuex-class';
- import { State as TopoGroupState } from '@/store/modules/topology/group';
+ import { Component, Vue, Prop } from 'vue-property-decorator';
+ import { Mutation } from 'vuex-class';
+
@Component
export default class TopoGroupItem extends Vue {
@Prop() private active!: boolean;
diff --git a/src/views/components/topology/topo-group/index.vue b/src/views/components/topology/topo-group/index.vue
index abe31ce..20902eb 100644
--- a/src/views/components/topology/topo-group/index.vue
+++ b/src/views/components/topology/topo-group/index.vue
@@ -37,8 +37,8 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
- import topo, { State as topoState } from '@/store/modules/topology';
- import { Component, Vue, Watch } from 'vue-property-decorator';
+ import { State as topoState } from '@/store/modules/topology';
+ import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import { State as TopoGroupState } from '@/store/modules/topology/group';
import CreateGroup from './create-group.vue';
diff --git a/src/views/components/topology/topo-instance-dependency.vue b/src/views/components/topology/topo-instance-dependency.vue
index 630c2d2..0a8ba60 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -74,7 +74,7 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
- import { Vue, Component, Prop } from 'vue-property-decorator';
+ import { Vue, Component } from 'vue-property-decorator';
import { State, Action, Getter, Mutation } from 'vuex-class';
import { State as topoState } from '@/store/modules/topology';
import Topo from './chart/topo.vue';
@@ -117,11 +117,12 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.rk-topo-instance-dependency {
height: 100%;
display: flex;
flex-direction: row;
+ background: #2b3037;
& > :first-child {
line-height: 400px;
text-align: center;
diff --git a/src/views/components/topology/topo-services.vue b/src/views/components/topology/topo-services.vue
index f205be5..dc6191b 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -128,7 +128,7 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.topo-server.dao-select .dao-select-main .dao-select-switch {
border: 0;
}
diff --git a/src/views/components/trace/trace-table.vue b/src/views/components/trace/trace-table.vue
index 0730e53..58be73b 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -62,8 +62,8 @@ limitations under the License. -->
</template>
<script lang="ts">
- import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
- import { Action, Getter, Mutation, State } from 'vuex-class';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
+ import { Action, Mutation, State } from 'vuex-class';
import { State as traceState } from '@/store/modules/trace/index';
@Component
diff --git a/src/views/containers/topology/endpoint-dependency/index.vue b/src/views/containers/topology/endpoint-dependency/index.vue
index 7d3c2e8..6bcf0ee 100644
--- a/src/views/containers/topology/endpoint-dependency/index.vue
+++ b/src/views/containers/topology/endpoint-dependency/index.vue
@@ -99,11 +99,14 @@ limitations under the License. -->
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.endpoint-dependency-page {
height: calc(100% - 48px);
- .rk-dashboard-bar {
- border-bottom: 1px solid #252a2f;
- }
+ }
+ .rk-dashboard-bar {
+ flex-shrink: 0;
+ color: #efefef;
+ background-color: #333840;
+ border-bottom: 1px solid #252a2f;
}
</style>