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/23 01:45:06 UTC
[skywalking-rocketbot-ui] branch master updated: refactor: header
menu render (#451)
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 b940222 refactor: header menu render (#451)
b940222 is described below
commit b94022221a896c29d9eb9112eb47df3c5eeca686
Author: Ryan Wang <i...@ryanc.cc>
AuthorDate: Tue Mar 23 09:44:57 2021 +0800
refactor: header menu render (#451)
* pref: header menu render.
* add header license for i18n.ts
* fix: style pollution.
* pref: sorting out css.
* pref: sorting out css.
* pref: sorting out css.
---
src/assets/styles/style.scss | 16 ++++
src/components/rk-header.vue | 50 ++++++------
src/{main.ts => i18n.ts} | 48 +----------
src/main.ts | 26 +-----
src/router.ts | 94 +++++++++++-----------
src/views/components/log/log-conditions.vue | 40 +++++++--
src/views/components/profile/profile-header.vue | 14 ----
.../components/profile/profile-trace-detail.vue | 3 +-
src/views/components/profile/task-list.vue | 30 +++++++
src/views/components/trace/trace-detail.vue | 20 ++++-
src/views/components/trace/trace-search.vue | 9 +--
src/views/components/trace/trace-table.vue | 7 +-
src/views/containers/dashboard.vue | 17 ----
.../topology/endpoint/endpoints-survey.vue | 2 -
.../topology/instance/instances-survey.vue | 2 -
15 files changed, 181 insertions(+), 197 deletions(-)
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index a805edd..2cb9595 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -68,3 +68,19 @@
.oa:hover {
overflow: auto;
}
+
+.dashboard-container {
+ overflow: auto;
+ padding: 20px 15px;
+ height: 100%;
+ flex-grow: 1;
+ .rk-add-dashboard-item {
+ height: 342px;
+ text-align: center;
+ line-height: 250px;
+ border: 1px dashed rgba(196, 200, 225, 0.5);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 16px;
+ }
+}
diff --git a/src/components/rk-header.vue b/src/components/rk-header.vue
index 596c3cd..84d9a20 100644
--- a/src/components/rk-header.vue
+++ b/src/components/rk-header.vue
@@ -19,29 +19,15 @@ limitations under the License. -->
<use xlink:href="#logo-sw"></use>
</svg>
<span class="grey rocketbot">Rocketbot</span>
- <router-link class="nav-link mr-20" to="/" exact>
- <rk-icon size="sm" icon="chart" />
- <span class="vm hide-xs ml-5">{{ $t('dashboard') }}</span>
- </router-link>
- <router-link class="nav-link mr-20" to="/topology">
- <rk-icon size="sm" icon="issues" />
- <span class="vm hide-xs ml-5">{{ $t('topology') }}</span>
- </router-link>
- <router-link class="nav-link mr-20" to="/trace">
- <rk-icon size="sm" icon="merge" />
- <span class="vm hide-xs ml-5">{{ $t('trace') }}</span>
- </router-link>
- <router-link class="nav-link mr-20" to="/profile">
- <rk-icon size="sm" icon="timeline" />
- <span class="vm hide-xs ml-5">{{ $t('profile') }}</span>
- </router-link>
- <router-link class="nav-link mr-20" to="/log">
- <rk-icon size="sm" icon="assignment" />
- <span class="vm hide-xs ml-5">{{ $t('log') }}</span>
- </router-link>
- <router-link class="nav-link mr-20" to="/alarm">
- <rk-icon size="sm" icon="spam" />
- <span class="vm hide-xs ml-5">{{ $t('alarm') }}</span>
+ <router-link
+ v-for="(menu, index) in menus"
+ :key="index"
+ :to="menu.path"
+ :exact="menu.meta.exact"
+ class="nav-link mr-20"
+ >
+ <rk-icon size="sm" :icon="menu.meta.icon" />
+ <span class="vm hide-xs ml-5">{{ $t(menu.meta.title) }}</span>
</router-link>
</div>
<div class="flex-h">
@@ -70,6 +56,7 @@ limitations under the License. -->
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Action, State, Getter } from 'vuex-class';
+ import { routes } from '@/router';
import timeFormat from '@/utils/timeFormat';
@Component
@@ -80,6 +67,11 @@ limitations under the License. -->
private auto: boolean = false;
private autoTime: number = 6;
private timer: any = null;
+
+ private get menus() {
+ return routes[0].children;
+ }
+
private handleReload() {
const gap = this.duration.end.getTime() - this.duration.start.getTime();
const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
@@ -186,4 +178,16 @@ limitations under the License. -->
background-color: #dededf;
}
}
+ .rk-auto-select {
+ border-radius: 3px;
+ background-color: #fff;
+ padding: 1px;
+ border-radius: 3px;
+
+ input {
+ width: 38px;
+ border-style: unset;
+ outline: 0;
+ }
+ }
</style>
diff --git a/src/main.ts b/src/i18n.ts
similarity index 52%
copy from src/main.ts
copy to src/i18n.ts
index 122c2ff..61d70af 100644
--- a/src/main.ts
+++ b/src/i18n.ts
@@ -16,41 +16,12 @@
*/
import Vue from 'vue';
-import moment from 'dayjs';
-import clickout from '@/utils/clickout';
-import tooltip from '@/utils/tooltip';
+import VueI18n from 'vue-i18n';
+
import zh from '@/assets/lang/zh';
import en from '@/assets/lang/en';
-import VueI18n from 'vue-i18n';
-import eventBus from './event-bus';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import components from './components';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/chart/graph';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/scatter';
-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 { queryOAPTimeInfo } from './utils/localtime';
-import './assets';
-Vue.use(eventBus);
Vue.use(VueI18n);
-Vue.use(components);
-Vue.use(VModal, { dialog: true });
-Vue.directive('clickout', clickout);
-Vue.directive('tooltip', tooltip);
-
-Vue.filter(
- 'dateformat',
- (dataStr: any, pattern: string = 'YYYY-MM-DD HH:mm:ss') =>
- moment(dataStr).format(pattern),
-);
const savedLanguage = window.localStorage.getItem('lang');
let language = navigator.language.split('-')[0];
@@ -67,17 +38,4 @@ const i18n = new VueI18n({
},
});
-if (!window.Promise) {
- window.Promise = Promise;
-}
-
-Vue.config.productionTip = false;
-
-queryOAPTimeInfo().then(() => {
- new Vue({
- i18n,
- router,
- store,
- render: (h) => h(App),
- }).$mount('#app');
-});
+export default i18n;
diff --git a/src/main.ts b/src/main.ts
index 122c2ff..1ee8746 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,13 +19,11 @@ import Vue from 'vue';
import moment from 'dayjs';
import clickout from '@/utils/clickout';
import tooltip from '@/utils/tooltip';
-import zh from '@/assets/lang/zh';
-import en from '@/assets/lang/en';
-import VueI18n from 'vue-i18n';
import eventBus from './event-bus';
import App from './App.vue';
import router from './router';
import store from './store';
+import i18n from './i18n';
import components from './components';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/graph';
@@ -40,32 +38,12 @@ import { queryOAPTimeInfo } from './utils/localtime';
import './assets';
Vue.use(eventBus);
-Vue.use(VueI18n);
Vue.use(components);
Vue.use(VModal, { dialog: true });
Vue.directive('clickout', clickout);
Vue.directive('tooltip', tooltip);
-Vue.filter(
- 'dateformat',
- (dataStr: any, pattern: string = 'YYYY-MM-DD HH:mm:ss') =>
- moment(dataStr).format(pattern),
-);
-
-const savedLanguage = window.localStorage.getItem('lang');
-let language = navigator.language.split('-')[0];
-if (!savedLanguage) {
- window.localStorage.setItem('lang', language);
-}
-language = savedLanguage ? savedLanguage : language;
-
-const i18n = new VueI18n({
- locale: language,
- messages: {
- zh,
- en,
- },
-});
+Vue.filter('dateformat', (dataStr: any, pattern: string = 'YYYY-MM-DD HH:mm:ss') => moment(dataStr).format(pattern));
if (!window.Promise) {
window.Promise = Promise;
diff --git a/src/router.ts b/src/router.ts
index 8250755..7f8a651 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -16,62 +16,64 @@
*/
import Vue from 'vue';
-import Router from 'vue-router';
+import Router, { RouteConfig } from 'vue-router';
// import Login from './views/containers/login.vue';
import Index from './views/containers/index.vue';
-import Dashboard from './views/containers/dashboard.vue';
-import Trace from './views/containers/trace.vue';
-import Topology from './views/containers/topology/topology.vue';
-import Alarm from './views/containers/alarm.vue';
-import Profile from './views/containers/profile.vue';
-import Log from './views/containers/log.vue';
Vue.use(Router);
window.axiosCancel = [];
+export const routes: RouteConfig[] = [
+ // {
+ // path: '/login',
+ // component: Login,
+ // meta: { login: true },
+ // },
+ {
+ path: '',
+ component: Index,
+ children: [
+ {
+ path: '/',
+ component: () => import('./views/containers/dashboard.vue'),
+ meta: { icon: 'chart', title: 'dashboard', exact: true },
+ },
+ {
+ path: 'topology',
+ component: () => import('./views/containers/topology/topology.vue'),
+ meta: { icon: 'issues', title: 'topology', exact: false },
+ },
+ {
+ name: 'trace',
+ path: 'trace',
+ component: () => import('./views/containers/trace.vue'),
+ props: true,
+ meta: { icon: 'merge', title: 'trace', exact: false },
+ },
+ {
+ path: 'profile',
+ component: () => import('./views/containers/profile.vue'),
+ meta: { icon: 'timeline', title: 'profile', exact: false },
+ },
+ {
+ path: 'log',
+ component: () => import('./views/containers/log.vue'),
+ meta: { icon: 'assignment', title: 'log', exact: false },
+ },
+ {
+ path: 'alarm',
+ component: () => import('./views/containers/alarm.vue'),
+ meta: { icon: 'spam', title: 'alarm', exact: false },
+ },
+ ],
+ },
+];
+
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
linkActiveClass: 'active',
- routes: [
- // {
- // path: '/login',
- // component: Login,
- // meta: { login: true },
- // },
- {
- path: '/',
- component: Index,
- children: [
- {
- path: '',
- component: Dashboard,
- },
- {
- name: 'trace',
- path: 'trace',
- component: Trace,
- props: true,
- },
- {
- path: 'topology',
- component: Topology,
- },
- {
- path: 'alarm',
- component: Alarm,
- },
- {
- path: 'profile',
- component: Profile,
- },
- {
- path: 'log',
- component: Log,
- },
- ],
- },
- ],
+ routes,
});
router.beforeEach((to, from, next) => {
diff --git a/src/views/components/log/log-conditions.vue b/src/views/components/log/log-conditions.vue
index 73951ee..5035275 100644
--- a/src/views/components/log/log-conditions.vue
+++ b/src/views/components/log/log-conditions.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
<span class="sm b grey mr-10">{{ $t('traceID') }}:</span>
<input
type="text"
- class="rk-trace-search-input dib"
+ class="rk-log-search-input dib"
v-model="traceId"
@change="changeConditions($event, LogConditionsOpt.TraceID)"
/>
@@ -29,7 +29,7 @@ limitations under the License. -->
</div>
<div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
<span class="sm b grey mr-10">{{ $t('keywordsOfContent') }}:</span>
- <span class="rk-trace-tags" v-show="rocketLog.supportQueryLogsByKeywords">
+ <span class="rk-log-tags" v-show="rocketLog.supportQueryLogsByKeywords">
<span
class="selected"
v-for="(item, index) in rocketLog.conditions.keywordsOfContent"
@@ -42,7 +42,7 @@ limitations under the License. -->
<input
type="text"
:disabled="!rocketLog.supportQueryLogsByKeywords"
- class="rk-trace-search-input dib mr-5"
+ class="rk-log-search-input dib mr-5"
v-model="keywordsOfContent"
@keyup="addLabels($event, LogConditionsOpt.KeywordsOfContent)"
/>
@@ -56,7 +56,7 @@ limitations under the License. -->
</div>
<div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
<span class="sm b grey mr-10">{{ $t('excludingKeywordsOfContent') }}:</span>
- <span class="rk-trace-tags" v-show="rocketLog.supportQueryLogsByKeywords">
+ <span class="rk-log-tags" v-show="rocketLog.supportQueryLogsByKeywords">
<span
class="selected"
v-for="(item, index) in rocketLog.conditions.excludingKeywordsOfContent"
@@ -69,7 +69,7 @@ limitations under the License. -->
<input
type="text"
:disabled="!rocketLog.supportQueryLogsByKeywords"
- class="rk-trace-search-input dib mr-5"
+ class="rk-log-search-input dib mr-5"
v-model="excludingKeywordsOfContent"
@keyup="addLabels($event, LogConditionsOpt.ExcludingKeywordsOfContent)"
/>
@@ -84,7 +84,7 @@ limitations under the License. -->
</div>
<div class="mr-10" style="padding-top: 10px" v-show="rocketLog.type.key === cateGoryService">
<span class="sm grey">{{ $t('tags') }}: </span>
- <span class="rk-trace-tags">
+ <span class="rk-log-tags">
<span class="selected" v-for="(item, index) in tagsList" :key="index">
<span>{{ item }}</span>
<span class="remove-icon" @click="removeTags(index)">×</span>
@@ -94,7 +94,7 @@ limitations under the License. -->
type="text"
:placeholder="$t('addTag')"
v-model="tags"
- class="rk-trace-new-tag"
+ class="rk-log-new-tag"
@keyup="addLabels($event, LogConditionsOpt.Tags)"
/>
<span class="log-tips" v-tooltip:bottom="{ content: $t('logsTagsTip') }">
@@ -289,7 +289,7 @@ limitations under the License. -->
}
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
.rk-search-conditions {
width: 100%;
background-color: #484b55;
@@ -345,5 +345,29 @@ limitations under the License. -->
.search-time {
color: #eee;
}
+
+ .rk-log-search-input {
+ border-style: unset;
+ outline: 0;
+ padding: 2px 5px;
+ border-radius: 3px;
+ }
+
+ .rk-log-tags {
+ padding: 1px 5px 0 0;
+ border-radius: 3px;
+ height: 24px;
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .rk-log-new-tag {
+ border-style: unset;
+ outline: 0;
+ padding: 2px 5px;
+ border-radius: 3px;
+ width: 175px;
+ margin-right: 3px;
+ }
}
</style>
diff --git a/src/views/components/profile/profile-header.vue b/src/views/components/profile/profile-header.vue
index eaa6b19..809bd8c 100644
--- a/src/views/components/profile/profile-header.vue
+++ b/src/views/components/profile/profile-header.vue
@@ -102,20 +102,6 @@ limitations under the License. -->
border-radius: 3px;
}
- .rk-profile-header-range,
- .rk-auto-select {
- border-radius: 3px;
- background-color: #fff;
- padding: 1px;
- border-radius: 3px;
-
- input {
- width: 38px;
- border-style: unset;
- outline: 0;
- }
- }
-
.rk-profile-header-btn {
padding: 3px 9px;
background-color: #484b55;
diff --git a/src/views/components/profile/profile-trace-detail.vue b/src/views/components/profile/profile-trace-detail.vue
index 5468a8f..7691780 100644
--- a/src/views/components/profile/profile-trace-detail.vue
+++ b/src/views/components/profile/profile-trace-detail.vue
@@ -147,7 +147,7 @@ limitations under the License. -->
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.profile-trace-dashboard {
padding: 20px;
width: 68%;
@@ -168,6 +168,7 @@ limitations under the License. -->
color: inherit;
border: 1px solid;
border-radius: 4px;
+ margin-right: 10px;
}
select {
margin: 0 10px;
diff --git a/src/views/components/profile/task-list.vue b/src/views/components/profile/task-list.vue
index 6f223b6..c364df0 100644
--- a/src/views/components/profile/task-list.vue
+++ b/src/views/components/profile/task-list.vue
@@ -180,6 +180,36 @@ limitations under the License. -->
text-align: center;
margin-top: 10px;
}
+ .rk-trace-t-wrapper {
+ overflow: auto;
+ flex-grow: 1;
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ .rk-trace-t-loading {
+ text-align: center;
+ position: absolute;
+ width: 100%;
+ height: 70px;
+ margin-top: 40px;
+ line-height: 88px;
+ overflow: hidden;
+ .icon {
+ width: 30px;
+ height: 30px;
+ }
+ }
+ .rk-trace-t {
+ width: 100%;
+ border-spacing: 0;
+ table-layout: fixed;
+ flex-grow: 1;
+ position: relative;
+ }
+ .rk-trace-tr {
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
+ }
.rk-trace-td {
padding: 8px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
diff --git a/src/views/components/trace/trace-detail.vue b/src/views/components/trace/trace-detail.vue
index 2843307..3318123 100644
--- a/src/views/components/trace/trace-detail.vue
+++ b/src/views/components/trace/trace-detail.vue
@@ -158,6 +158,9 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
+ .rk-log-box {
+ color: #3d444f;
+ }
.rk-trace-detail {
flex-shrink: 0;
height: 100%;
@@ -178,6 +181,19 @@ limitations under the License. -->
color: inherit;
border: 1px solid;
border-radius: 4px;
+ margin: 0 10px;
+ }
+ .rk-trace-log-btn {
+ padding: 3px 9px;
+ background-color: #484b55;
+ border-radius: 4px;
+ color: #eee;
+ font-weight: normal;
+ cursor: pointer;
+
+ &.bg-blue {
+ background-color: #448dfe;
+ }
}
.rk-tag {
display: inline-block;
@@ -192,8 +208,4 @@ limitations under the License. -->
margin: 0 auto;
fill: rgba(46, 47, 51, 0.15);
}
- .rk-trace-table_svg-icon {
- width: 11px;
- height: 11px;
- }
</style>
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 9613b56..526c1e9 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -292,9 +292,6 @@ limitations under the License. -->
</script>
<style lang="scss">
- .rk-log-box {
- color: #3d444f;
- }
.rk-trace-search {
flex-shrink: 0;
background-color: #333840;
@@ -341,8 +338,7 @@ limitations under the License. -->
vertical-align: top;
}
- .rk-trace-search-range,
- .rk-auto-select {
+ .rk-trace-search-range {
border-radius: 3px;
background-color: #fff;
padding: 1px;
@@ -355,8 +351,7 @@ limitations under the License. -->
}
}
- .rk-trace-search-btn,
- .rk-trace-log-btn {
+ .rk-trace-search-btn {
padding: 3px 9px;
background-color: #484b55;
border-radius: 4px;
diff --git a/src/views/components/trace/trace-table.vue b/src/views/components/trace/trace-table.vue
index 7815262..0730e53 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -131,10 +131,6 @@ limitations under the License. -->
}
</script>
<style lang="scss">
- .rk-trace-t {
- flex-grow: 1;
- position: relative;
- }
.rk-trace-t-tool {
flex-shrink: 0;
background-color: rgba(196, 200, 225, 0.2);
@@ -144,6 +140,7 @@ limitations under the License. -->
background-color: rgba(0, 0, 0, 0);
outline: 0;
border-style: unset;
+ margin: 0 10px;
}
padding-top: 1px;
border-bottom: 1px solid #c1c5ca41;
@@ -172,6 +169,8 @@ limitations under the License. -->
width: 100%;
border-spacing: 0;
table-layout: fixed;
+ flex-grow: 1;
+ position: relative;
}
.rk-trace-tr {
&:hover {
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index 5f6d9ab..51f2866 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -146,20 +146,3 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
- .dashboard-container {
- overflow: auto;
- padding: 20px 15px;
- height: 100%;
- flex-grow: 1;
- }
- .rk-add-dashboard-item {
- height: 342px;
- text-align: center;
- line-height: 250px;
- border: 1px dashed rgba(196, 200, 225, 0.5);
- cursor: pointer;
- display: inline-block;
- font-size: 16px;
- }
-</style>
diff --git a/src/views/containers/topology/endpoint/endpoints-survey.vue b/src/views/containers/topology/endpoint/endpoints-survey.vue
index c688f5d..2f95aad 100644
--- a/src/views/containers/topology/endpoint/endpoints-survey.vue
+++ b/src/views/containers/topology/endpoint/endpoints-survey.vue
@@ -51,5 +51,3 @@ limitations under the License. -->
@Prop() private updateObjects!: string;
}
</script>
-
-<style lang="less" scoped></style>
diff --git a/src/views/containers/topology/instance/instances-survey.vue b/src/views/containers/topology/instance/instances-survey.vue
index 029bc83..21aa2c1 100644
--- a/src/views/containers/topology/instance/instances-survey.vue
+++ b/src/views/containers/topology/instance/instances-survey.vue
@@ -51,5 +51,3 @@ limitations under the License. -->
@Prop() private updateObjects!: string;
}
</script>
-
-<style lang="less" scoped></style>