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 31b7af4 fix: update drawer (#234)
31b7af4 is described below
commit 31b7af42bc9897a3a8bcc841466f65aba777e164
Author: Qiuxia Fan <[email protected]>
AuthorDate: Fri Dec 20 11:23:55 2019 +0800
fix: update drawer (#234)
* fix: update drawer
* fix: sankey chart
---
.../components/topology/dependency-sankey.vue | 6 +-
.../components/topology/topo-detect-point.vue | 26 +++---
.../topology/topo-instance-dependency.vue | 103 +++++++++++----------
3 files changed, 74 insertions(+), 61 deletions(-)
diff --git a/src/views/components/topology/dependency-sankey.vue
b/src/views/components/topology/dependency-sankey.vue
index 239853d..f171607 100644
--- a/src/views/components/topology/dependency-sankey.vue
+++ b/src/views/components/topology/dependency-sankey.vue
@@ -35,6 +35,10 @@ export default class DependencySankey extends Vue {
return {
series: {
type: 'sankey',
+ left: 40,
+ top: 20,
+ right: 300,
+ bottom: 40,
focusNodeAdjacency: 'allEdges',
data: this.data.nodes,
links: this.data.calls,
@@ -43,7 +47,6 @@ export default class DependencySankey extends Vue {
formatter: ((param: any) => param.data.name),
},
color: [
- '#bf99f8',
'#3fe1da',
'#6be6c1',
'#3fcfdc',
@@ -52,6 +55,7 @@ export default class DependencySankey extends Vue {
'#a0a7e6',
'#3fa9e1',
'#96dee8',
+ '#bf99f8',
],
itemStyle: {
normal: {
diff --git a/src/views/components/topology/topo-detect-point.vue
b/src/views/components/topology/topo-detect-point.vue
index ab0ac40..15a1168 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -99,9 +99,9 @@
</div>
<div class="show-dependency" v-if="stateTopo.selectedServiceCall">
<a class="rk-btn lg"
@click="openInstanceModal">{{$t('ShowInstanceDependency')}}</a>
- <el-dialog
- class="instance-dependency"
- :width="'90%'"
+ <el-drawer
+ custom-class="instance-dependency"
+ size="1200px"
:title="`${stateTopo.selectedServiceCall.source.name} ->
${stateTopo.selectedServiceCall.target.name} Instance Dependency`"
:visible.sync="dialogTopoVisible"
:modal-append-to-body="false"
@@ -109,8 +109,9 @@
:destroy-on-close="true"
:before-close="clearInstance"
>
+ <div
class="title-name">{{stateTopo.selectedServiceCall.source.name}} ->
{{stateTopo.selectedServiceCall.target.name}} Instance Dependency</div>
<TopoInstanceDependency />
- </el-dialog>
+ </el-drawer>
</div>
</div>
</template>
@@ -232,17 +233,18 @@
display: block;
text-align: center;
}
- .el-dialog__header{
+ .instance-dependency{
background: #333;
- .el-dialog__title{
- color: #efeff1;
+ outline: none;
+ .el-drawer__header{
+ color: #fff;
+ padding: 0;
}
}
- .el-dialog__body{
- background: #333;
- color: #efeff1;
- height: 650px;
- padding: 10px 20px;
+ .title-name {
+ width: 100%;
+ padding-left: 40px;
+ font-size: 16px;
}
}
.link-topo-aside-box {
diff --git a/src/views/components/topology/topo-instance-dependency.vue
b/src/views/components/topology/topo-instance-dependency.vue
index dc455dd..d61e0aa 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -20,52 +20,54 @@
<div class="rk-dependency-chart">
<DependencySankey :data="stateTopo.instanceDependency" />
</div>
- <div v-if="!stateTopo.instanceDependency.nodes.length">No Instance
Dependency</div>
- <div v-if="stateTopo.selectedInstanceCall"
class="rk-instance-dependency-metrics">
- <div class="mb-5 clear">
- <span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
- <span
-
v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
- class="link-topo-aside-box-btn tc r sm cp b"
- :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
- @click="setMode('CLIENT')"
- >{{ this.$t('client') }}</span>
- <span
-
v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
- class="link-topo-aside-box-btn tc r sm cp b"
- :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER' }"
- @click="setMode('SERVER')"
- >{{ this.$t('server') }}</span>
- </div>
- <div v-if="stateTopo.selectedInstanceCall">
- <TopoChart
- v-if="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
- :data="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
- :intervalTime="intervalTime"
- :title="$t('avgResponseTime')"
- unit="ms"
- />
- <TopoChart
- v-if="stateTopo.instanceDependencyMetrics.getThroughputTrend"
- :data="stateTopo.instanceDependencyMetrics.getThroughputTrend"
- :intervalTime="intervalTime"
- :title="$t('avgThroughput')"
- unit="cpm"
- />
- <TopoChart
- v-if="stateTopo.instanceDependencyMetrics.getSLATrend"
- :data="stateTopo.instanceDependencyMetrics.getSLATrend"
- :intervalTime="intervalTime"
- :precent="true"
- :title="$t('avgSLA')"
- unit="%"
- />
- <ChartResponse
- v-if="stateTopo.instanceDependencyMetrics.p50"
- :data="stateTopo.instanceDependencyMetrics"
- :intervalTime="intervalTime"
- :title="$t('percentResponse')"
- />
+ <div class="rk-instance-metric-box">
+ <div v-if="!stateTopo.instanceDependency.nodes.length">No Instance
Dependency</div>
+ <div v-if="stateTopo.selectedInstanceCall"
class="rk-instance-dependency-metrics">
+ <div class="mb-5 clear">
+ <span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
+ <span
+
v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
+ @click="setMode('CLIENT')"
+ >{{ this.$t('client') }}</span>
+ <span
+
v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
+ class="link-topo-aside-box-btn tc r sm cp b"
+ :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER'
}"
+ @click="setMode('SERVER')"
+ >{{ this.$t('server') }}</span>
+ </div>
+ <div v-if="stateTopo.selectedInstanceCall">
+ <TopoChart
+ v-if="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
+ :data="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgResponseTime')"
+ unit="ms"
+ />
+ <TopoChart
+ v-if="stateTopo.instanceDependencyMetrics.getThroughputTrend"
+ :data="stateTopo.instanceDependencyMetrics.getThroughputTrend"
+ :intervalTime="intervalTime"
+ :title="$t('avgThroughput')"
+ unit="cpm"
+ />
+ <TopoChart
+ v-if="stateTopo.instanceDependencyMetrics.getSLATrend"
+ :data="stateTopo.instanceDependencyMetrics.getSLATrend"
+ :intervalTime="intervalTime"
+ :precent="true"
+ :title="$t('avgSLA')"
+ unit="%"
+ />
+ <ChartResponse
+ v-if="stateTopo.instanceDependencyMetrics.p50"
+ :data="stateTopo.instanceDependencyMetrics"
+ :intervalTime="intervalTime"
+ :title="$t('percentResponse')"
+ />
+ </div>
</div>
</div>
</div>
@@ -115,11 +117,16 @@ export default class TopoInstanceDependency extends Vue {
text-align: center;
width: 100%;
}
+ .rk-instance-metric-box {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
.rk-instance-dependency-metrics {
width: 320px;
- height: 100%;
+ height: 650px;
background: #111;
- padding: 10px 20px;
+ padding: 20px;
}
.rk-dependency-chart {
width: 850px;
