版本
Skywalking 8.1.0
背景
所在项目需要将skywalking 8.1.0 的ui页面 本地化改造，方便方便集成到公司的监控平台
1、要去除仪表盘、拓扑图等模块，只留追踪模块；
2、需要对页面样式做调整，保证风格一致
3、项目中有对端口做规划，需要修改默认端口
端口修改
1、原配置 skywalking/config/application.yml
core:
selector: ${SW_CORE:default}
default:
# Mixed: Receive agent data, Level 1 aggregate, Level 2 aggregate
# Receiver: Receive agent data, Level 1 aggregate
# Aggregator: Level 2 aggregate
role: ${SW_CORE_ROLE:Mixed} # Mixed/Receiver/Aggregator
restHost: ${SW_CORE_REST_HOST:0.0.0.0}
restPort: ${SW_CORE_REST_PORT:12800}
restContextPath: ${SW_CORE_REST_CONTEXT_PATH:/}
restMinThreads: ${SW_CORE_REST_JETTY_MIN_THREADS:1}
restMaxThreads: ${SW_CORE_REST_JETTY_MAX_THREADS:200}
restIdleTimeOut: ${SW_CORE_REST_JETTY_IDLE_TIMEOUT:30000}
restAcceptorPriorityDelta: ${SW_CORE_REST_JETTY_DELTA:0}
restAcceptQueueSize: ${SW_CORE_REST_JETTY_QUEUE_SIZE:0}
gRPCHost: ${SW_CORE_GRPC_HOST:0.0.0.0}
gRPCPort: ${SW_CORE_GRPC_PORT:11800}
gRPCSslEnabled: ${SW_CORE_GRPC_SSL_ENABLED:false}
gRPCSslKeyPath: ${SW_CORE_GRPC_SSL_KEY_PATH:""}
gRPCSslCertChainPath: ${SW_CORE_GRPC_SSL_CERT_CHAIN_PATH:""}
gRPCSslTrustedCAPath: ${SW_CORE_GRPC_SSL_TRUSTED_CA_PATH:""}
修改restPort: 12800 为 12002 ； 修改gRPCPort: 11800 为 12001；
2、原配置
server:
port: 8080
collector:
path: /graphql
ribbon:
ReadTimeout: 10000
# Point to all backend's restHost:restPort, split by ,
listOfServers: 127.0.0.1:12800
修改 server.port 8080 为12000
修改 127.0.0.1:12800 为 127.0.0.1:12002
下载skywalking 源码
https://github.com/apache/skywalking-rocketbot-ui/tree/v8.1.0
skywalking UI 项目为
skywalking-rocketbot-ui
下载后运行
npm install
npm run serve
页面修改
rk-header.vue
修改前
<!-- 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. -->
<template>
<header class="rk-header flex-h" >
<div class="flex-h">
<svg class="svg-logo icon" style="margin-right:35px;margin-top:-5px">
<use xlink:href="#logo-sw"></use>
</svg>
<span class="grey rocketbot">Rocketbot</span>
<router-link class="nav-link mr-20" to="/" exact>
<svg class="icon sm vm">
<use xlink:href="#chart"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/topology">
<svg class="icon sm vm">
<use xlink:href="#issues"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('topology') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/trace">
<svg class="icon sm vm">
<use xlink:href="#merge"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/profile">
<svg class="icon sm vm">
<use xlink:href="#timeline"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
</router-link>
<router-link class="nav-link mr-20" to="/alarm">
<svg class="icon sm vm">
<use xlink:href="#spam"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
</router-link>
</div>
<div class="flex-h">
<a class="rk-btn mr-5 sm" :class="auto ? 'blue' : 'ghost'" @click="handleAuto">
<span class="vm">{{ this.$t('auto') }}</span>
</a>
<div class="auto-time">
<span class="rk-auto-select">
<input v-model="autoTime" type="number" @change="changeAutoTime" min="1" />
</span>
{{ this.$t('second') }}
</div>
<a class="rk-btn sm ghost" @click="handleReload">
<svg class="icon mr-5 vm" :class="{ loading: auto }">
<use xlink:href="#retry"></use>
</svg>
<span class="vm">{{ this.$t('reload') }}</span>
</a>
</div>
</header>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Action, State, Getter } from 'vuex-class';
import timeFormat from '@/utils/timeFormat';
@Component
export default class Header extends Vue {
@Getter('duration') private duration: any;
@Action('SET_DURATION') private SET_DURATION: any;
private show: boolean = false;
private auto: boolean = false;
private autoTime: number = 6;
private timer: any = null;
private handleReload() {
const gap = this.duration.end.getTime() - this.duration.start.getTime();
const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
this.SET_DURATION(timeFormat(time));
}
private handleAuto() {
this.auto = !this.auto;
if (this.auto) {
this.handleReload();
this.timer = setInterval(this.handleReload, this.autoTime * 1000);
} else {
clearInterval(this.timer);
}
}
private handleHide() {
this.show = false;
}
private handleShow() {
this.show = !this.show;
}
private handleSignout() {
localStorage.removeItem('skywalking-authority');
this.$router.push('/login');
}
private changeAutoTime() {
clearInterval(this.timer);
if (this.auto) {
this.handleReload();
this.timer = setInterval(this.handleReload, this.autoTime * 1000);
}
}
}
</script>
<style lang="scss" scoped>
.rk-header {
flex-shrink: 0;
justify-content: space-between;
height: 48px;
padding-right: 15px;
padding-left: 15px;
font-size: 13px;
color: #efefef;
z-index: 9;
background-color: #252a2f;
box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
.svg-logo {
width: 90px;
height: 22px;
}
.rocketbot {
padding-top: 27px;
position: absolute;
font-size: 11px;
}
.logo {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-size: 18px;
padding-top: 2px;
margin-right: 50px;
}
.nav-link {
padding: 4px 10px;
border-radius: 4px;
opacity: 0.8;
color: #efeff1;
will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s;
}
.nav-link:hover,
.nav-link.active {
opacity: 1;
background-color: #333844;
}
}
.rk-header-user {
display: none;
position: relative;
}
.rk-header-user-menu {
position: absolute;
top: 35px;
right: 0;
background-color: #fff;
overflow: hidden;
border-radius: 4px;
padding: 3px 0;
color: #333844;
width: 100px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.15);
}
.rk-header-user-menu-i {
padding: 6px 10px;
will-change: background-color;
transition: background-color 0.3s;
&:hover {
background-color: #dededf;
}
}
</style>
修改后
<!-- 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. -->
<template>
<header class="rk-header flex-h" >
<div class="flex-h">
<svg class="svg-logo icon" style="margin-right:35px;margin-top:-5px">
<use xlink:href="#merge"></use>
</svg>
<span class="grey rocketbot"></span>
<router-link class="nav-link mr-20" style="display:none" to="/" exact>
<svg class="icon sm vm">
<use xlink:href="#chart"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
</router-link>
<router-link class="nav-link mr-20" style="display:none" to="/topology">
<svg class="icon sm vm">
<use xlink:href="#issues"></use>
</svg>
<span class="vm hide-xs ml-5" >{{ this.$t('topology') }}</span>
</router-link>
<router-link class="nav-link mr-20" style="display:none" to="/trace">
<svg class="icon sm vm">
<use xlink:href="#merge"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
</router-link>
<router-link class="nav-link mr-20" style="display:none" to="/profile">
<svg class="icon sm vm">
<use xlink:href="#timeline"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
</router-link>
<router-link class="nav-link mr-20" style="display:none" to="/alarm">
<svg class="icon sm vm">
<use xlink:href="#spam"></use>
</svg>
<span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
</router-link>
</div>
<div class="flex-h">
<a class="rk-btn mr-5 sm" :class="auto ? 'blue' : 'ghost'" @click="handleAuto">
<span class="vm">{{ this.$t('auto') }}</span>
</a>
<div class="auto-time">
<span class="rk-auto-select">
<input v-model="autoTime" type="number" @change="changeAutoTime" min="1" />
</span>
{{ this.$t('second') }}
</div>
<a class="rk-btn sm ghost" @click="handleReload">
<svg class="icon mr-5 vm" :class="{ loading: auto }">
<use xlink:href="#retry"></use>
</svg>
<span class="vm">{{ this.$t('reload') }}</span>
</a>
</div>
</header>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Action, State, Getter } from 'vuex-class';
import timeFormat from '@/utils/timeFormat';
@Component
export default class Header extends Vue {
@Getter('duration') private duration: any;
@Action('SET_DURATION') private SET_DURATION: any;
private show: boolean = false;
private auto: boolean = false;
private autoTime: number = 6;
private timer: any = null;
private handleReload() {
const gap = this.duration.end.getTime() - this.duration.start.getTime();
const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
this.SET_DURATION(timeFormat(time));
}
private handleAuto() {
this.auto = !this.auto;
if (this.auto) {
this.handleReload();
this.timer = setInterval(this.handleReload, this.autoTime * 1000);
} else {
clearInterval(this.timer);
}
}
private handleHide() {
this.show = false;
}
private handleShow() {
this.show = !this.show;
}
private handleSignout() {
localStorage.removeItem('skywalking-authority');
this.$router.push('/login');
}
private changeAutoTime() {
clearInterval(this.timer);
if (this.auto) {
this.handleReload();
this.timer = setInterval(this.handleReload, this.autoTime * 1000);
}
}
}
</script>
<style lang="scss" scoped>
.rk-header {
flex-shrink: 0;
justify-content: space-between;
height: 48px;
padding-right: 15px;
padding-left: 15px;
font-size: 13px;
color: #666;
z-index: 9;
background-color: #d8e6fc;
box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
.svg-logo {
width: 90px;
height: 22px;
}
.rocketbot {
padding-top: 27px;
position: absolute;
font-size: 11px;
}
.logo {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-size: 18px;
padding-top: 2px;
margin-right: 50px;
}
.nav-link {
padding: 4px 10px;
border-radius: 4px;
opacity: 0.8;
color: #efeff1;
will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s;
}
.nav-link:hover,
.nav-link.active {
opacity: 1;
background-color: #333844;
}
}
.rk-header-user {
display: none;
position: relative;
}
.rk-header-user-menu {
position: absolute;
top: 35px;
right: 0;
background-color: #fff;
overflow: hidden;
border-radius: 4px;
padding: 3px 0;
color: #333844;
width: 100px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.15);
}
.rk-header-user-menu-i {
padding: 6px 10px;
will-change: background-color;
transition: background-color 0.3s;
&:hover {
background-color: #dededf;
}
}
</style>
rk-button.vue
修改前
<!-- 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. -->
<template>
<a class="rk-btn" :class="{ size, ghost: ghost }" @click.stop="$emit('click')">
<svg v-if="icon" class="icon"><use :xlink:href="`#${icon}`"></use></svg>
<slot />
</a>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
@Component
export default class RkBtn extends Vue {
@Prop({ default: '' }) private size!: string;
@Prop({ default: '' }) private icon!: string;
@Prop({ default: false }) private ghost!: boolean;
}
</script>
<style lang="scss">
.rk-btn {
display: inline-block;
line-height: 26px;
padding: 0 7px;
background-color: #448dfe;
border-radius: 4px;
color: #fff;
transition: background-color 0.3s;
.icon {
margin-top: -2px;
}
&.sm {
line-height: 24px;
}
&.lg {
line-height: 30px;
}
&.ghost {
background-color: transparent;
}
&:hover {
background-color: #357de9;
}
}
</style>
修改后
<!-- 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. -->
<template>
<a class="rk-btn" :class="{ size, ghost: ghost }" @click.stop="$emit('click')">
<svg v-if="icon" class="icon"><use :xlink:href="`#${icon}`"></use></svg>
<slot />
</a>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
@Component
export default class RkBtn extends Vue {
@Prop({ default: '' }) private size!: string;
@Prop({ default: '' }) private icon!: string;
@Prop({ default: false }) private ghost!: boolean;
}
</script>
<style lang="scss">
.rk-btn {
display: inline-block;
line-height: 26px;
padding: 0 7px;
background-color: #6fdcfe !important;
border-radius: 4px;
color: #fff;
transition: background-color 0.3s;
.icon {
margin-top: -2px;
}
&.sm {
line-height: 24px;
}
&.lg {
line-height: 30px;
}
&.ghost {
background-color: transparent;
}
&:hover {
background-color: #357de9 !important;
}
}
</style>
trace-search.vue
<!-- 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. -->
<template>
<div class="rk-trace-search">
<div>
<a class="rk-trace-clear-btn r" @click="status = !status">
<span class="mr-5 vm">{{ this.$t('more') }}</span>
<svg class="icon trans vm" :style="`transform: rotate(${status ? 180 : 0}deg);`">
<use xlink:href="#arrow-down"></use>
</svg>
</a>
<a class="rk-trace-search-btn bg-blue r mr-10" @click="getTraceList">
<svg class="icon mr-5 vm">
<use xlink:href="#search"></use>
</svg>
<span class="vm">{{ this.$t('search') }}</span>
</a>
<a class="rk-trace-clear-btn r mr-10" @click="clearSearch">
<svg class="icon mr-5 vm">
<use xlink:href="#clear"></use>
</svg>
<span class="vm">{{ this.$t('clear') }}</span>
</a>
<div class="flex-h">
<TraceSelect
:hasSearch="true"
:title="this.$t('service')"
:value="service"
@input="chooseService"
:data="rocketTrace.services"
/>
<TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances" />
<TraceSelect
:title="this.$t('status')"
:value="traceState"
@input="chooseStatus"
:data="[
{ label: 'All', key: 'ALL' },
{ label: 'Success', key: 'SUCCESS' },
{ label: 'Error', key: 'ERROR' },
]"
/>
<div class="mr-10" style="padding: 3px 15px 0">
<div class="sm grey">{{ this.$t('endpointName') }}</div>
<input type="text" v-model="endpointName" class="rk-trace-search-input" />
</div>
</div>
</div>
<div class="rk-trace-search-more flex-h" v-show="status">
<div class="mr-15">
<span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
<input type="text" v-model="traceId" class="rk-trace-search-input dib" />
</div>
<div class="mr-15">
<span class="sm b grey mr-10">{{ this.$t('duration') }}:</span>
<div class="rk-trace-search-range dib">
<input class="vm tc" v-model="minTraceDuration" />
<span class="grey vm">-</span>
<input class="vm tc" v-model="maxTraceDuration" />
</div>
</div>
<div>
<span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
<RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Duration, Option } from '@/types/global';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import TraceSelect from '../common/trace-select.vue';
@Component({ components: { TraceSelect } })
export default class TraceSearch extends Vue {
@State('rocketbot') private rocketbotGlobal: any;
@State('rocketTrace') private rocketTrace: any;
@Getter('durationTime') private durationTime: any;
@Getter('duration') private duration: any;
@Action('RESET_DURATION') private RESET_DURATION: any;
@Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
@Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
@Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
@Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
@Mutation('rocketTrace/SET_TRACE_FORM_ITEM')
private SET_TRACE_FORM_ITEM: any;
private service: Option = { label: 'All', key: '' };
private time!: Date[];
private status: boolean = true;
private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || '';
private minTraceDuration: string = localStorage.getItem('minTraceDuration') || '';
private instance: Option = { label: 'All', key: '' };
private endpointName: string = localStorage.getItem('endpointName') || '';
private traceId: string = localStorage.getItem('traceId') || '';
private traceState: Option = { label: 'All', key: 'ALL' };
private dateFormat(date: Date, step: string) {
const year = date.getFullYear();
const monthTemp = date.getMonth() + 1;
let month: string = `${monthTemp}`;
if (monthTemp < 10) {
month = `0${monthTemp}`;
}
const dayTemp = date.getDate();
let day: string = `${dayTemp}`;
if (dayTemp < 10) {
day = `0${dayTemp}`;
}
if (step === 'DAY' || step === 'MONTH') {
return `${year}-${month}-${day}`;
}
const hourTemp = date.getHours();
let hour: string = `${hourTemp}`;
if (hourTemp < 10) {
hour = `0${hourTemp}`;
}
if (step === 'HOUR') {
return `${year}-${month}-${day} ${hour}`;
}
const minuteTemp = date.getMinutes();
let minute: string = `${minuteTemp}`;
if (minuteTemp < 10) {
minute = `0${minuteTemp}`;
}
if (step === 'MINUTE') {
return `${year}-${month}-${day} ${hour}${minute}`;
}
}
private globalTimeFormat(time: Date[]) {
let step = 'MINUTE';
const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
if (unix <= 60 * 60 * 1000) {
step = 'MINUTE';
} else if (unix <= 24 * 60 * 60 * 1000) {
step = 'HOUR';
} else {
step = 'DAY';
}
return {
start: this.dateFormat(time[0], step),
end: this.dateFormat(time[1], step),
step,
};
}
private chooseService(i: any) {
if (this.service.key === i.key) {
return;
}
this.instance = { label: 'All', key: '' };
this.service = i;
if (i.key === '') {
return;
}
this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
}
private chooseStatus(i: any) {
this.traceState = i;
}
private getTraceList() {
this.GET_SERVICES({ duration: this.durationTime });
const temp: any = {
queryDuration: this.globalTimeFormat([
new Date(
this.time[0].getTime() +
(parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
),
new Date(
this.time[1].getTime() +
(parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
),
]),
traceState: this.traceState.key,
paging: { pageNum: 1, pageSize: 15, needTotal: true },
queryOrder: this.rocketTrace.traceForm.queryOrder,
};
if (this.service.key) {
temp.serviceId = this.service.key;
}
if (this.instance.key) {
temp.serviceInstanceId = this.instance.key;
}
if (this.maxTraceDuration) {
temp.maxTraceDuration = this.maxTraceDuration;
localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
}
if (this.minTraceDuration) {
temp.minTraceDuration = this.minTraceDuration;
localStorage.setItem('minTraceDuration', this.minTraceDuration);
}
if (this.endpointName) {
temp.endpointName = this.endpointName;
localStorage.setItem('endpointName', this.endpointName);
}
if (this.traceId) {
temp.traceId = this.traceId;
localStorage.setItem('traceId', this.traceId);
}
this.SET_TRACE_FORM(temp);
this.$eventBus.$emit('SET_LOADING_TRUE', () => {
this.GET_TRACELIST().then(() => {
this.$eventBus.$emit('SET_LOADING_FALSE');
});
});
}
private clearSearch() {
this.RESET_DURATION();
this.status = true;
this.maxTraceDuration = '';
localStorage.removeItem('maxTraceDuration');
this.minTraceDuration = '';
localStorage.removeItem('minTraceDuration');
this.service = { label: 'All', key: '' };
this.instance = { label: 'All', key: '' };
this.endpointName = '';
localStorage.removeItem('endpointName');
this.traceId = '';
localStorage.removeItem('traceId');
this.traceState = { label: 'All', key: 'ALL' };
this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
this.getTraceList();
}
@Watch('rocketbotGlobal.durationRow')
private durationRowWatch(value: Duration) {
this.time = [value.start, value.end];
}
private created() {
this.endpointName = this.$route.query.endpointname
? this.$route.query.endpointname.toString()
: this.endpointName;
this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
}
private mounted() {
this.getTraceList();
if (this.service && this.service.key) {
this.GET_INSTANCES({
duration: this.durationTime,
serviceId: this.service.key,
});
}
}
}
</script>
<style lang="scss">
.rk-trace-search {
flex-shrink: 0;
background-color: #333840;
color: #eee;
width: 100%;
padding: 3px 15px 8px;
}
.rk-trace-search-input {
border-style: unset;
outline: 0;
padding: 2px 5px;
border-radius: 3px;
}
.rk-trace-search-range,
.rk-auto-select {
border-radius: 3px;
background-color: #fff;
padding: 1px;
border-radius: 3px;
input {
width: 38px;
border-style: unset;
outline: 0;
}
}
.rk-trace-search-btn {
padding: 3px 9px;
background-color: #484b55;
border-radius: 4px;
margin-top: 12px;
&.bg-blue {
background-color: #448dfe;
}
}
.rk-trace-clear-btn {
padding: 3px 9px;
background-color: #484b55;
border-radius: 4px;
margin-top: 12px;
&.bg-warning {
background-color: #fbb03b;
}
}
.rk-trace-search-more {
background-color: #484b55;
padding: 4px 10px;
border-radius: 3px;
margin-top: 8px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
&:after {
bottom: 100%;
right: 30px;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #484b55;
border-width: 8px;
margin-right: 0px;
}
}
</style>
修改后
<!-- 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. -->
<template>
<div class="rk-trace-search">
<div>
<a class="rk-trace-clear-btn r" @click="status = !status">
<span class="mr-5 vm">{{ this.$t('more') }}</span>
<svg class="icon trans vm" :style="`transform: rotate(${status ? 180 : 0}deg);`">
<use xlink:href="#arrow-down"></use>
</svg>
</a>
<a class="rk-trace-search-btn bg-blue r mr-10" @click="getTraceList">
<svg class="icon mr-5 vm">
<use xlink:href="#search"></use>
</svg>
<span class="vm">{{ this.$t('search') }}</span>
</a>
<a class="rk-trace-clear-btn r mr-10" @click="clearSearch">
<svg class="icon mr-5 vm">
<use xlink:href="#clear"></use>
</svg>
<span class="vm">{{ this.$t('clear') }}</span>
</a>
<div class="flex-h">
<TraceSelect
:hasSearch="true"
:title="this.$t('service')"
:value="service"
@input="chooseService"
:data="rocketTrace.services"
/>
<TraceSelect :hasSearch="true" :title="this.$t('instance')" v-model="instance" :data="rocketTrace.instances" />
<TraceSelect
:title="this.$t('status')"
:value="traceState"
@input="chooseStatus"
:data="[
{ label: 'All', key: 'ALL' },
{ label: 'Success', key: 'SUCCESS' },
{ label: 'Error', key: 'ERROR' },
]"
/>
<div class="mr-10" style="padding: 3px 15px 0">
<div class="sm grey" style="color: #333333">{{ this.$t('endpointName') }}</div>
<input type="text" v-model="endpointName" class="rk-trace-search-input" />
</div>
</div>
</div>
<div class="rk-trace-search-more flex-h" v-show="status">
<div class="mr-15">
<span class="sm b mr-10">{{ this.$t('traceID') }}:</span>
<input type="text" v-model="traceId" class="rk-trace-search-input dib" />
</div>
<div class="mr-15">
<span class="sm b mr-10">{{ this.$t('duration') }}:</span>
<div class="rk-trace-search-range dib">
<input class="vm tc" v-model="minTraceDuration" />
<span class=" vm">-</span>
<input class="vm tc" v-model="maxTraceDuration" />
</div>
</div>
<div>
<span class="sm b mr-5">{{ this.$t('timeRange') }}:</span>
<RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Duration, Option } from '@/types/global';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Action, Getter, Mutation, State } from 'vuex-class';
import TraceSelect from '../common/trace-select.vue';
@Component({ components: { TraceSelect } })
export default class TraceSearch extends Vue {
@State('rocketbot') private rocketbotGlobal: any;
@State('rocketTrace') private rocketTrace: any;
@Getter('durationTime') private durationTime: any;
@Getter('duration') private duration: any;
@Action('RESET_DURATION') private RESET_DURATION: any;
@Action('rocketTrace/GET_SERVICES') private GET_SERVICES: any;
@Action('rocketTrace/GET_INSTANCES') private GET_INSTANCES: any;
@Action('rocketTrace/GET_TRACELIST') private GET_TRACELIST: any;
@Action('rocketTrace/SET_TRACE_FORM') private SET_TRACE_FORM: any;
@Mutation('rocketTrace/SET_TRACE_FORM_ITEM')
private SET_TRACE_FORM_ITEM: any;
private service: Option = { label: 'All', key: '' };
private time!: Date[];
private status: boolean = true;
private maxTraceDuration: string = localStorage.getItem('maxTraceDuration') || '';
private minTraceDuration: string = localStorage.getItem('minTraceDuration') || '';
private instance: Option = { label: 'All', key: '' };
private endpointName: string = localStorage.getItem('endpointName') || '';
private traceId: string = localStorage.getItem('traceId') || '';
private traceState: Option = { label: 'All', key: 'ALL' };
private dateFormat(date: Date, step: string) {
const year = date.getFullYear();
const monthTemp = date.getMonth() + 1;
let month: string = `${monthTemp}`;
if (monthTemp < 10) {
month = `0${monthTemp}`;
}
const dayTemp = date.getDate();
let day: string = `${dayTemp}`;
if (dayTemp < 10) {
day = `0${dayTemp}`;
}
if (step === 'DAY' || step === 'MONTH') {
return `${year}-${month}-${day}`;
}
const hourTemp = date.getHours();
let hour: string = `${hourTemp}`;
if (hourTemp < 10) {
hour = `0${hourTemp}`;
}
if (step === 'HOUR') {
return `${year}-${month}-${day} ${hour}`;
}
const minuteTemp = date.getMinutes();
let minute: string = `${minuteTemp}`;
if (minuteTemp < 10) {
minute = `0${minuteTemp}`;
}
if (step === 'MINUTE') {
return `${year}-${month}-${day} ${hour}${minute}`;
}
}
private globalTimeFormat(time: Date[]) {
let step = 'MINUTE';
const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
if (unix <= 60 * 60 * 1000) {
step = 'MINUTE';
} else if (unix <= 24 * 60 * 60 * 1000) {
step = 'HOUR';
} else {
step = 'DAY';
}
return {
start: this.dateFormat(time[0], step),
end: this.dateFormat(time[1], step),
step,
};
}
private chooseService(i: any) {
if (this.service.key === i.key) {
return;
}
this.instance = { label: 'All', key: '' };
this.service = i;
if (i.key === '') {
return;
}
this.GET_INSTANCES({ duration: this.durationTime, serviceId: i.key });
}
private chooseStatus(i: any) {
this.traceState = i;
}
private getTraceList() {
this.GET_SERVICES({ duration: this.durationTime });
const temp: any = {
queryDuration: this.globalTimeFormat([
new Date(
this.time[0].getTime() +
(parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
),
new Date(
this.time[1].getTime() +
(parseInt(this.rocketbotGlobal.utc, 10) + new Date().getTimezoneOffset() / 60) * 3600000,
),
]),
traceState: this.traceState.key,
paging: { pageNum: 1, pageSize: 15, needTotal: true },
queryOrder: this.rocketTrace.traceForm.queryOrder,
};
if (this.service.key) {
temp.serviceId = this.service.key;
}
if (this.instance.key) {
temp.serviceInstanceId = this.instance.key;
}
if (this.maxTraceDuration) {
temp.maxTraceDuration = this.maxTraceDuration;
localStorage.setItem('maxTraceDuration', this.maxTraceDuration);
}
if (this.minTraceDuration) {
temp.minTraceDuration = this.minTraceDuration;
localStorage.setItem('minTraceDuration', this.minTraceDuration);
}
if (this.endpointName) {
temp.endpointName = this.endpointName;
localStorage.setItem('endpointName', this.endpointName);
}
if (this.traceId) {
temp.traceId = this.traceId;
localStorage.setItem('traceId', this.traceId);
}
this.SET_TRACE_FORM(temp);
this.$eventBus.$emit('SET_LOADING_TRUE', () => {
this.GET_TRACELIST().then(() => {
this.$eventBus.$emit('SET_LOADING_FALSE');
});
});
}
private clearSearch() {
this.RESET_DURATION();
this.status = true;
this.maxTraceDuration = '';
localStorage.removeItem('maxTraceDuration');
this.minTraceDuration = '';
localStorage.removeItem('minTraceDuration');
this.service = { label: 'All', key: '' };
this.instance = { label: 'All', key: '' };
this.endpointName = '';
localStorage.removeItem('endpointName');
this.traceId = '';
localStorage.removeItem('traceId');
this.traceState = { label: 'All', key: 'ALL' };
this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
this.getTraceList();
}
@Watch('rocketbotGlobal.durationRow')
private durationRowWatch(value: Duration) {
this.time = [value.start, value.end];
}
private created() {
this.endpointName = this.$route.query.endpointname
? this.$route.query.endpointname.toString()
: this.endpointName;
this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
}
private mounted() {
this.getTraceList();
if (this.service && this.service.key) {
this.GET_INSTANCES({
duration: this.durationTime,
serviceId: this.service.key,
});
}
}
}
</script>
<style lang="scss">
.rk-trace-search {
flex-shrink: 0;
background-color: #d8e6fc;
color: #eee;
width: 100%;
padding: 3px 15px 8px;
}
.rk-trace-search-input {
border-style: unset;
outline: 0;
padding: 2px 5px;
border-radius: 3px;
}
.rk-trace-search-range,
.rk-auto-select {
border-radius: 3px;
background-color: #fff;
padding: 1px;
border-radius: 3px;
input {
width: 38px;
border-style: unset;
outline: 0;
}
}
.rk-trace-search-btn {
padding: 3px 9px;
background-color: #484b55;
/*border-radius: 4px;
margin-top: 12px;
&.bg-blue {
background-color: #448dfe;
}*/
}
.rk-trace-clear-btn {
padding: 3px 9px;
background-color: #484b55;
/*border-radius: 4px;*/
/*margin-top: 12px;*/
/*&.bg-warning {*/
/* background-color: #fbb03b;*/
/*}*/
}
.rk-trace-search-more {
background-color: #d8e6fc;
padding: 4px 10px;
border-radius: 3px;
margin-top: 8px;
position: relative;
color: #333333;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
&:after {
bottom: 100%;
right: 30px;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #9eb8f1;
border-width: 8px;
margin-right: 0px;
}
}
</style>
trace-select.vue
修改前
<!-- 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. -->
<template>
<div
class="rk-trace-sel-wrapper flex-h"
v-clickout="
() => {
visible = false;
search = '';
}
"
:class="{ cp: !readonly, active: visible }"
>
<div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
<div class="mr-15 rk-trace-bar-i-text">
<div class="sm grey">{{ title }}</div>
<div class="ell" v-tooltip:right.ellipsis="value.label || ''">
{{ value.label || '' }}
</div>
</div>
<svg v-if="!readonly" class="icon lg trans" :style="`transform: rotate(${visible ? 180 : 0}deg)`">
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-trace-sel" v-if="visible">
<div v-if="hasSearch">
<input type="text" class="rk-trace-sel-search" v-model="search" :placeholder="`${this.$t('search')}...`" />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-trace-opt-wrapper scroll_hide">
<div
class="rk-trace-opt ell"
@click="handleSelect(i)"
:class="{ active: i.key === value.key }"
v-for="i in filterData"
:key="i.key"
>
{{ i.label }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class TraceSelect extends Vue {
@Prop() public data!: any;
@Prop() public value!: any;
@Prop() public title!: string;
@Prop({ default: false }) public hasSearch!: boolean;
@Prop({ default: false })
public readonly!: boolean;
public search: string = '';
public visible: boolean = false;
get filterData() {
return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
}
public handleSelect(i: any) {
this.$emit('input', i);
this.visible = false;
}
}
</script>
<style lang="scss" scoped>
.rk-trace-sel-wrapper {
position: relative;
z-index: 2;
height: 100%;
justify-content: space-between;
.sm {
line-height: 13px;
}
.icon {
flex-shrink: 0;
}
}
.rk-trace-bar-i-text {
max-width: 150px;
min-width: 80px;
}
.rk-trace-bar-i {
height: 100%;
padding: 0 15px;
border-right: 2px solid #252a2f;
}
.rk-trace-sel {
position: absolute;
top: 44px;
box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
background-color: #252a2f;
width: 100%;
border-radius: 3px;
overflow: hidden;
.close {
position: absolute;
right: 10px;
top: 12px;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
.rk-trace-opt {
padding: 7px 15px;
&.active,
&:hover {
background-color: #40454e;
}
}
.rk-trace-sel-search {
width: calc(100% - 4px);
border: 0;
background-color: #333840;
color: #eee;
outline: 0;
padding: 7px 25px 7px 10px;
margin: 2px;
}
.rk-trace-opt-wrapper {
overflow: auto;
max-height: 200px;
padding-bottom: 2px;
}
</style>
修改后
<!-- 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. -->
<template>
<div
class="rk-trace-sel-wrapper flex-h"
v-clickout="
() => {
visible = false;
search = '';
}
"
:class="{ cp: !readonly, active: visible }"
>
<div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
<div class="mr-15 rk-trace-bar-i-text">
<div class="sm grey">{{ title }}</div>
<div class="ell" v-tooltip:right.ellipsis="value.label || ''">
{{ value.label || '' }}
</div>
</div>
<svg v-if="!readonly" class="icon lg trans" :style="`transform: rotate(${visible ? 180 : 0}deg)`">
<use xlink:href="#arrow-down"></use>
</svg>
</div>
<div class="rk-trace-sel" v-if="visible">
<div v-if="hasSearch">
<input type="text" class="rk-trace-sel-search" v-model="search" :placeholder="`${this.$t('search')}...`" />
<svg class="icon sm close" @click="search = ''" v-if="search">
<use xlink:href="#clear"></use>
</svg>
</div>
<div class="rk-trace-opt-wrapper scroll_hide">
<div
class="rk-trace-opt ell"
@click="handleSelect(i)"
:class="{ active: i.key === value.key }"
v-for="i in filterData"
:key="i.key"
>
{{ i.label }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class TraceSelect extends Vue {
@Prop() public data!: any;
@Prop() public value!: any;
@Prop() public title!: string;
@Prop({ default: false }) public hasSearch!: boolean;
@Prop({ default: false })
public readonly!: boolean;
public search: string = '';
public visible: boolean = false;
get filterData() {
return this.data.filter((i: any) => i.label.toUpperCase().indexOf(this.search.toUpperCase()) !== -1);
}
public handleSelect(i: any) {
this.$emit('input', i);
this.visible = false;
}
}
</script>
<style lang="scss" scoped>
.rk-trace-sel-wrapper {
position: relative;
z-index: 2;
height: 100%;
color: #666;
justify-content: space-between;
.sm{
line-height: 13px;
color: #333;
}
.icon {
flex-shrink: 0;
}
}
.rk-trace-bar-i-text {
max-width: 150px;
min-width: 80px;
}
.rk-trace-bar-i {
height: 100%;
padding: 0 15px;
border-right: 2px solid #aaaaaa;
}
.rk-trace-sel {
position: absolute;
top: 44px;
box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
background-color: #e8effC;
width: 100%;
border-radius: 3px;
overflow: hidden;
.close {
position: absolute;
right: 10px;
top: 12px;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
.rk-trace-opt {
padding: 7px 15px;
&.active,
&:hover {
background-color: #91B0F0;
}
}
.rk-trace-sel-search {
width: calc(100% - 4px);
border: 0;
background-color: #ffffff;
color: #666;
outline: 0;
padding: 7px 25px 7px 10px;
margin: 2px;
}
.rk-trace-opt-wrapper {
overflow: auto;
max-height: 200px;
padding-bottom: 2px;
}
</style>
构建替换
npm run build
将生成的内容替换skywalking-webapp.jar 中的内容
skywalking-webapp.jar\BOOT-INF\classes\public
版权声明：本文为qq_27384769原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。