You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by wu...@apache.org on 2019/09/05 02:14:41 UTC
[skywalking-rocketbot-ui] branch master updated: #3396 can the page
of span info be expanded manually (#152)
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 108b980 #3396 can the page of span info be expanded manually (#152)
108b980 is described below
commit 108b980da21672b9a00a1bd4d2d22ea3309200cf
Author: x22x22 <ro...@gmail.com>
AuthorDate: Thu Sep 5 10:14:36 2019 +0800
#3396 can the page of span info be expanded manually (#152)
* resolve issue #3396
* resolve issue #3396
* resolve issue #3396
* resolve issue #3396
* recover package-lock.json, and add vue-js-modal lock.
* recover package-lock.json, and add vue-js-modal lock.
---
package-lock.json | 5 +++
package.json | 1 +
src/assets/index.ts | 1 +
src/assets/svg/magnify.svg | 16 ++++++++++
src/components/rk-sidebox.vue | 12 ++++++++
src/main.ts | 2 ++
.../components/trace/trace-detail-chart-list.vue | 36 ++++++++++++++++++++--
.../components/trace/trace-detail-chart-table.vue | 36 +++++++++++++++++++++-
.../components/trace/trace-detail-chart-tree.vue | 34 +++++++++++++++++++-
9 files changed, 139 insertions(+), 4 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 76d4816..2164661 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11078,6 +11078,11 @@
"resolved": "http://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.10.0.tgz",
"integrity": "sha1-6V8hW1VIvt9WEMFFBqyzQ4cXtr0="
},
+ "vue-js-modal": {
+ "version": "1.3.31",
+ "resolved": "https://registry.npm.taobao.org/vue-js-modal/download/vue-js-modal-1.3.31.tgz",
+ "integrity": "sha1-/ezoI9TygWyLEHXB/Y9mffEfWkI="
+ },
"vue-loader": {
"version": "15.6.4",
"resolved": "http://registry.npm.taobao.org/vue-loader/download/vue-loader-15.6.4.tgz",
diff --git a/package.json b/package.json
index 6c0aeb9..3aa274a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"vue": "^2.6.6",
"vue-class-component": "^6.0.0",
"vue-i18n": "^8.10.0",
+ "vue-js-modal": "^1.3.31",
"vue-property-decorator": "^7.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
diff --git a/src/assets/index.ts b/src/assets/index.ts
index c9856fd..97907ed 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -64,3 +64,4 @@ import './svg/user.svg';
import './svg/issue-close.svg';
import './svg/list-bulleted.svg';
import './svg/file-tree.svg';
+import './svg/magnify.svg';
diff --git a/src/assets/svg/magnify.svg b/src/assets/svg/magnify.svg
new file mode 100644
index 0000000..4ab3d9d
--- /dev/null
+++ b/src/assets/svg/magnify.svg
@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567575641976" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3448" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M626.41 442.15H511.24V327a38.39 38.39 0 1 0-76.78 0v115.15H319.3a38.39 38.39 0 0 0 0 76.78h115.16v96a38.39 38.39 0 [...]
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index 45eb4f2..139b4e2 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -95,4 +95,16 @@ export default {
color: #3D92FF;
}
}
+.rk-sidebox-magnify{
+ cursor: pointer;
+ color: #D8D8D8;
+ transition: color .3s;
+ .icon{
+ width: 18px;
+ height: 20px;
+ }
+ &:hover{
+ color: #3D92FF;
+ }
+}
</style>
diff --git a/src/main.ts b/src/main.ts
index 50c4ef4..585973d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -34,10 +34,12 @@ import 'echarts/lib/chart/heatmap';
import 'echarts/lib/chart/sankey';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
+import VModal from 'vue-js-modal';
import './assets';
Vue.use(VueI18n);
Vue.use(components);
+Vue.use(VModal, {dialog: true});
Vue.directive('clickout', clickout);
Vue.directive('tooltip', tooltip);
diff --git a/src/views/components/trace/trace-detail-chart-list.vue b/src/views/components/trace/trace-detail-chart-list.vue
index e36c788..f388dea 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -51,11 +51,17 @@
<div v-for="(i, index) in this.currentSpan.logs" :key="index">
<div class="mb-10 sm"><span class="mr-10">{{$t('time')}}:</span><span class="grey">{{i.time | dateformat}}</span></div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
- <div class="mb-10">{{_i.key}}:</div><pre class="pl-15 mt-0 mb-0 sm oa" >{{_i.value}}</pre>
+ <div class="mb-10">{{_i.key}}:<span v-if="_i.key==='stack'" class="r rk-sidebox-magnify"
+ @click="showCurrentSpanDetail(_i.key, _i.value)">
+ <svg class="icon">
+ <use xlink:href="#magnify"></use>
+ </svg>
+ </span></div><pre class="pl-15 mt-0 mb-0 sm oa" >{{_i.value}}</pre>
</div>
</div>
</div>
</rk-sidebox>
+ <v-dialog width="90%"/>
<div class="trace-list">
<div ref="traceList"></div>
</div>
@@ -216,7 +222,28 @@ export default {
d.dur = dur < 0 ? 0 : dur;
d.children.forEach((i) => this.collapse(i));
}
- }
+ },
+ showCurrentSpanDetail(title, text) {
+ const textLineNumber = text.split('\n').length;
+ let textHeight = textLineNumber * 20.2 + 10;
+ const tmpHeight = window.innerHeight * 0.9
+ textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
+ this.$modal.show('dialog', {
+ title,
+ text: `<div style="height:${textHeight}px">${text}</div>`,
+ buttons: [
+ {
+ title: 'Copy',
+ handler: () => {
+ this.copy(text);
+ },
+ },
+ {
+ title: 'Close',
+ },
+ ],
+ })
+ },
}
};
</script>
@@ -264,4 +291,9 @@ export default {
fill: rgba(0,0,0,0.05)
}
}
+.dialog-c-text {
+ white-space: pre;
+ overflow: auto;
+ font-family: monospace;
+}
</style>
diff --git a/src/views/components/trace/trace-detail-chart-table.vue b/src/views/components/trace/trace-detail-chart-table.vue
index 59e95fb..fe6814a 100644
--- a/src/views/components/trace/trace-detail-chart-table.vue
+++ b/src/views/components/trace/trace-detail-chart-table.vue
@@ -50,12 +50,18 @@
<span class="grey">{{i.time | dateformat}}</span>
</div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
- <div class="mb-10">{{_i.key}}:</div>
+ <div class="mb-10">{{_i.key}}:<span v-if="_i.key==='stack'" class="r rk-sidebox-magnify"
+ @click="showCurrentSpanDetail(_i.key, _i.value)">
+ <svg class="icon">
+ <use xlink:href="#magnify"></use>
+ </svg>
+ </span></div>
<pre class="pl-15 mt-0 mb-0 sm oa">{{_i.value}}</pre>
</div>
</div>
</div>
</rk-sidebox>
+ <v-dialog width="90%"/>
</div>
</template>
<style lang="scss">
@@ -230,6 +236,27 @@ export default {
this.currentSpan = data;
this.showDetail = true;
},
+ showCurrentSpanDetail(title, text) {
+ const textLineNumber = text.split('\n').length;
+ let textHeight = textLineNumber * 20.2 + 10;
+ const tmpHeight = window.innerHeight * 0.9
+ textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
+ this.$modal.show('dialog', {
+ title,
+ text: `<div style="height:${textHeight}px">${text}</div>`,
+ buttons: [
+ {
+ title: 'Copy',
+ handler: () => {
+ this.copy(text);
+ },
+ },
+ {
+ title: 'Close',
+ },
+ ],
+ })
+ },
},
created() {
this.loading = true;
@@ -243,3 +270,10 @@ export default {
},
};
</script>
+<style>
+.dialog-c-text {
+ white-space: pre;
+ overflow: auto;
+ font-family: monospace;
+}
+</style>
diff --git a/src/views/components/trace/trace-detail-chart-tree.vue b/src/views/components/trace/trace-detail-chart-tree.vue
index f4dfc6b..e6a5ece 100644
--- a/src/views/components/trace/trace-detail-chart-tree.vue
+++ b/src/views/components/trace/trace-detail-chart-tree.vue
@@ -51,11 +51,17 @@
<div v-for="(i, index) in this.currentSpan.logs" :key="index">
<div class="mb-10 sm"><span class="mr-10">{{$t('time')}}:</span><span class="grey">{{i.time | dateformat}}</span></div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
- <div class="mb-10">{{_i.key}}:</div><pre class="pl-15 mt-0 mb-0 sm oa">{{_i.value}}</pre>
+ <div class="mb-10">{{_i.key}}:<span v-if="_i.key==='stack'" class="r rk-sidebox-magnify"
+ @click="showCurrentSpanDetail(_i.key, _i.value)">
+ <svg class="icon">
+ <use xlink:href="#magnify"></use>
+ </svg>
+ </span></div><pre class="pl-15 mt-0 mb-0 sm oa">{{_i.value}}</pre>
</div>
</div>
</div>
</rk-sidebox>
+ <v-dialog width="90%"/>
<div class="trace-tree" style="height:100%">
<div class="trace-tree-inner" ref="traceTree"></div>
</div>
@@ -205,6 +211,27 @@ export default {
resize() {
this.tree.resize();
},
+ showCurrentSpanDetail(title, text) {
+ const textLineNumber = text.split('\n').length;
+ let textHeight = textLineNumber * 20.2 + 10;
+ const tmpHeight = window.innerHeight * 0.9
+ textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
+ this.$modal.show('dialog', {
+ title,
+ text: `<div style="height:${textHeight}px">${text}</div>`,
+ buttons: [
+ {
+ title: 'Copy',
+ handler: () => {
+ this.copy(text);
+ },
+ },
+ {
+ title: 'Close',
+ },
+ ],
+ })
+ },
}
};
</script>
@@ -263,4 +290,9 @@ export default {
fill: rgba(0,0,0,0.05)
}
}
+.dialog-c-text {
+ white-space: pre;
+ overflow: auto;
+ font-family: monospace;
+}
</style>