You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2021/03/07 07:17:26 UTC
[skywalking-rocketbot-ui] branch master updated: feat: show
instance attributes (#441)
This is an automated email from the ASF dual-hosted git repository.
qiuxiafan 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 768b1c7 feat: show instance attributes (#441)
768b1c7 is described below
commit 768b1c7f34377c16a3acf8f0bfdbdd845dd33570
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Sun Mar 7 15:17:16 2021 +0800
feat: show instance attributes (#441)
* refactor: update dashboard bar
* feat: view instance attributes
* build: update tool bar
* fix:typo
---
src/assets/lang/en.ts | 1 +
src/assets/lang/zh.ts | 1 +
src/components/rk-sidebox.vue | 5 +-
.../dashboard/{ => tool-bar}/tool-bar-btns.vue | 0
.../tool-bar-endpoint-select-opt.vue | 0
.../{ => tool-bar}/tool-bar-endpoint-select.vue | 0
.../dashboard/{ => tool-bar}/tool-bar-select.vue | 0
.../dashboard/{ => tool-bar}/tool-bar.vue | 94 ++++++++++++++--------
src/views/components/log/log-bar.vue | 4 +-
src/views/containers/dashboard.vue | 2 +-
.../topology/endpoint-dependency/index.vue | 4 +-
src/views/containers/topology/endpoint/index.vue | 4 +-
src/views/containers/topology/instance/index.vue | 4 +-
13 files changed, 74 insertions(+), 45 deletions(-)
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 86683f4..2db0f77 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -199,6 +199,7 @@ const m = {
logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
Check more details on the Configuration Vocabulary page`,
keywordsOfContentLogTips: 'Current storage of SkyWalking OAP server does not support this.',
+ instanceAttributes: 'Instance Attributes',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index c2d619a..eaf6922 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -197,6 +197,7 @@ const m = {
viewLogs: '查看日志',
logsTagsTip: '只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。',
keywordsOfContentLogTips: 'SkyWalking OAP服务器的当前存储不支持此操作',
+ instanceAttributes: '查看实例属性',
};
export default m;
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index c2ce741..b9f1383 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -16,7 +16,7 @@ limitations under the License. -->
<div>
<div class="rk-sidebox-backdrop" v-show="show" @click="handleHide"></div>
<aside
- class="rk-sidebox"
+ class="rk-sidebox flex-v"
:style="
show ? `width:${width};${right ? 'right:0' : 'left:0'}` : `width:${width};${right ? 'right' : 'left'}:-${width}`
"
@@ -84,7 +84,7 @@ limitations under the License. -->
background-color: #fff;
}
.rk-sidebox-inner {
- padding: 35px 20px 20px;
+ padding: 20px;
}
.rk-sidebox-inner-fixed {
height: 100%;
@@ -93,7 +93,6 @@ limitations under the License. -->
}
.rk-sidebox-title {
font-size: 16px;
- position: absolute;
width: 100%;
padding-left: 20px;
line-height: 35px;
diff --git a/src/views/components/dashboard/tool-bar-btns.vue b/src/views/components/dashboard/tool-bar/tool-bar-btns.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-btns.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-btns.vue
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select-opt.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-endpoint-select-opt.vue
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-endpoint-select.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
diff --git a/src/views/components/dashboard/tool-bar-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-select.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-select.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-select.vue
diff --git a/src/views/components/dashboard/tool-bar.vue b/src/views/components/dashboard/tool-bar/tool-bar.vue
similarity index 70%
rename from src/views/components/dashboard/tool-bar.vue
rename to src/views/components/dashboard/tool-bar/tool-bar.vue
index fc6707a..ade76dc 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar/tool-bar.vue
@@ -21,9 +21,9 @@ limitations under the License. -->
:dashboardType="dashboardType"
:durationTime="durationTime"
:rocketOption="rocketOption"
- ></ToolBarBtns>
- <div class="rk-dashboard-bar flex-h" v-if="compType !== dashboardType.DATABASE">
- <div class="sm grey service-search" v-if="compType === dashboardType.SERVICE">
+ />
+ <div class="flex-h" v-if="compType === dashboardType.SERVICE">
+ <div class="sm grey service-search">
<div>{{ this.$t('serviceGroup') }}</div>
<input
type="text"
@@ -32,7 +32,6 @@ limitations under the License. -->
/>
</div>
<ToolBarSelect
- v-if="compType === dashboardType.SERVICE"
@onChoose="selectService"
:title="this.$t('currentService')"
:current="stateDashboard.currentService"
@@ -40,7 +39,6 @@ limitations under the License. -->
icon="package"
/>
<ToolBarEndpointSelect
- v-if="compType === dashboardType.SERVICE"
@onChoose="selectEndpoint"
:title="this.$t('currentEndpoint')"
:current="stateDashboard.currentEndpoint"
@@ -49,40 +47,56 @@ limitations under the License. -->
icon="code"
/>
<ToolBarSelect
- v-if="compType === dashboardType.SERVICE"
@onChoose="selectInstance"
:title="this.$t('currentInstance')"
:current="stateDashboard.currentInstance"
:data="stateDashboard.instances"
icon="disk"
/>
-
- <template v-if="compType === dashboardType.BROWSER">
- <ToolBarSelect
- @onChoose="selectService"
- :title="this.$t('currentService')"
- :current="stateDashboard.currentService"
- :data="stateDashboard.services"
- icon="package"
- />
- <ToolBarSelect
- @onChoose="selectInstance"
- :title="this.$t('currentVersion')"
- :current="stateDashboard.currentInstance"
- :data="stateDashboard.instances"
- icon="disk"
- />
- <ToolBarEndpointSelect
- @onChoose="selectEndpoint"
- :title="this.$t('currentPage')"
- :current="stateDashboard.currentEndpoint"
- :data="stateDashboard.endpoints"
- :currentService="stateDashboard.currentService"
- icon="code"
- />
- </template>
+ <a class="rk-view-instance-attributes r" @click="() => (dialogAttributesVisible = true)">
+ <span class="vm">{{ this.$t('instanceAttributes') }}</span>
+ </a>
+ <rk-sidebox
+ width="50%"
+ :fixed="true"
+ :title="`${$t('instanceAttributes')} of ${stateDashboard.currentInstance.label}`"
+ :show.sync="dialogAttributesVisible"
+ class="instance-attributes-box"
+ >
+ <div
+ class="instance-attr"
+ v-for="(attr, index) in stateDashboard.currentInstance.attributes"
+ :key="attr.name + index"
+ >
+ {{ attr.name + ' : ' + attr.value }}
+ </div>
+ </rk-sidebox>
+ </div>
+ <div class="flex-h" v-else-if="compType === dashboardType.BROWSER">
+ <ToolBarSelect
+ @onChoose="selectService"
+ :title="this.$t('currentService')"
+ :current="stateDashboard.currentService"
+ :data="stateDashboard.services"
+ icon="package"
+ />
+ <ToolBarSelect
+ @onChoose="selectInstance"
+ :title="this.$t('currentVersion')"
+ :current="stateDashboard.currentInstance"
+ :data="stateDashboard.instances"
+ icon="disk"
+ />
+ <ToolBarEndpointSelect
+ @onChoose="selectEndpoint"
+ :title="this.$t('currentPage')"
+ :current="stateDashboard.currentEndpoint"
+ :data="stateDashboard.endpoints"
+ :currentService="stateDashboard.currentService"
+ icon="code"
+ />
</div>
- <div class="rk-dashboard-bar flex-h" v-else>
+ <div class="flex-h" v-else-if="compType === dashboardType.DATABASE">
<ToolBarSelect
@onChoose="SELECT_DATABASE"
:title="this.$t('currentDatabase')"
@@ -100,7 +114,7 @@ limitations under the License. -->
import ToolBarEndpointSelect from './tool-bar-endpoint-select.vue';
import ToolBarBtns from './tool-bar-btns.vue';
import { State, Action, Mutation } from 'vuex-class';
- import { DASHBOARDTYPE } from './constant';
+ import { DASHBOARDTYPE } from '../constant';
@Component({ components: { ToolBarSelect, ToolBarBtns, ToolBarEndpointSelect } })
export default class ToolBar extends Vue {
@@ -119,6 +133,7 @@ limitations under the License. -->
@Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
@Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
private dashboardType = DASHBOARDTYPE;
+ private dialogAttributesVisible = false;
get lastKey() {
const current = this.rocketComps.tree[this.rocketComps.group].children[this.rocketComps.current].children;
if (!current.length) {
@@ -153,6 +168,13 @@ limitations under the License. -->
flex-shrink: 0;
color: #efefef;
background-color: #333840;
+ .instance-attributes-box {
+ color: #252a2f;
+ }
+ .instance-attr {
+ padding: 20px 0 0 20px;
+ font-size: 13px;
+ }
.service-search {
padding: 0 5px;
border-right: 2px solid #252a2f;
@@ -167,5 +189,11 @@ limitations under the License. -->
padding: 0 2px;
}
}
+ .rk-view-instance-attributes {
+ background-color: #484b55;
+ border-radius: 4px;
+ margin-left: 5px;
+ padding: 5px 10px;
+ }
}
</style>
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index a98885c..ce3217e 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -80,8 +80,8 @@ limitations under the License. -->
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import TraceSelect from '../common/trace-select.vue';
- import ToolBarSelect from '../dashboard/tool-bar-select.vue';
- import ToolBarEndpointSelect from '../dashboard/tool-bar-endpoint-select.vue';
+ import ToolBarSelect from '../dashboard/tool-bar/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '../dashboard/tool-bar/tool-bar-endpoint-select.vue';
import LogConditions from './log-conditions.vue';
import { State as logState } from '@/store/modules/log/index';
import { State as optionState } from '@/store/modules/global/selectors';
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index ecaffbb..5f6d9ab 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -46,7 +46,7 @@ limitations under the License. -->
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';
- import ToolBar from '@/views/components/dashboard/tool-bar.vue';
+ import ToolBar from '@/views/components/dashboard/tool-bar/tool-bar.vue';
import ToolGroup from '@/views/components/dashboard/tool-group.vue';
import ToolNav from '@/views/components/dashboard/tool-nav.vue';
import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
diff --git a/src/views/containers/topology/endpoint-dependency/index.vue b/src/views/containers/topology/endpoint-dependency/index.vue
index 249163a..1c38179 100644
--- a/src/views/containers/topology/endpoint-dependency/index.vue
+++ b/src/views/containers/topology/endpoint-dependency/index.vue
@@ -39,8 +39,8 @@ limitations under the License. -->
import Vue from 'vue';
import { Component, Watch, Prop } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';
- import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
- import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
import TopoEndpointDependency from '@/views/components/topology/topo-endpoint-dependency.vue';
@Component({
diff --git a/src/views/containers/topology/endpoint/index.vue b/src/views/containers/topology/endpoint/index.vue
index be3132d..bac00bf 100644
--- a/src/views/containers/topology/endpoint/index.vue
+++ b/src/views/containers/topology/endpoint/index.vue
@@ -63,8 +63,8 @@ limitations under the License. -->
import { Component, Watch, Prop } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';
import EndpointsSurvey from './endpoints-survey.vue';
- import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
- import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
import { readFile } from '@/utils/readFile';
import { saveFile } from '@/utils/saveFile';
import { ObjectsType } from '../../../../constants/constant';
diff --git a/src/views/containers/topology/instance/index.vue b/src/views/containers/topology/instance/index.vue
index e632a73..b1223f5 100644
--- a/src/views/containers/topology/instance/index.vue
+++ b/src/views/containers/topology/instance/index.vue
@@ -61,8 +61,8 @@ limitations under the License. -->
<script lang="ts">
import InstancesSurvey from './instances-survey.vue';
- import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
- import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
+ import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
import Vue from 'vue';
import { Component, PropSync, Watch, Prop } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';