You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/10/19 02:54:59 UTC
[skywalking-rocketbot-ui] branch master updated: Feat: Support +/-
hh:mm in TimeZone setting (#552)
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 3d9e734 Feat: Support +/- hh:mm in TimeZone setting (#552)
3d9e734 is described below
commit 3d9e7348372ff5a6ac8a0d38f433f9e596873feb
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Tue Oct 19 10:54:52 2021 +0800
Feat: Support +/- hh:mm in TimeZone setting (#552)
---
src/components/rk-date.vue | 1 -
src/store/modules/global/index.ts | 18 ++++----
src/utils/localtime.ts | 16 +++----
src/views/components/common/rk-footer.vue | 71 +++++++++++++++++++++--------
src/views/components/common/rk-header.vue | 1 -
src/views/components/log/log-conditions.vue | 11 ++---
src/views/components/trace/trace-search.vue | 11 ++---
7 files changed, 76 insertions(+), 53 deletions(-)
diff --git a/src/components/rk-date.vue b/src/components/rk-date.vue
index ff9ca94..b4f5a79 100755
--- a/src/components/rk-date.vue
+++ b/src/components/rk-date.vue
@@ -85,7 +85,6 @@ limitations under the License. -->
<script lang="js">
import RkCalendar from './rk-date-calendar.vue';
- import getLocalTime from '@/utils/localtime';
/* eslint-disable */
/* tslint:disable */
export default {
diff --git a/src/store/modules/global/index.ts b/src/store/modules/global/index.ts
index 0d7cf44..c787323 100644
--- a/src/store/modules/global/index.ts
+++ b/src/store/modules/global/index.ts
@@ -29,24 +29,23 @@ export interface State {
chartStack: any;
edit: boolean;
lock: boolean;
- utc: string | number;
+ utc: string;
}
-
const initState: State = {
durationRow: getDurationRow(),
eventStack: [],
chartStack: [],
edit: false,
lock: true,
- utc: window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60),
+ utc: '',
};
// getters
const getters = {
duration(state: State): Duration {
return {
- start: getLocalTime(parseInt(state.utc + '', 10), state.durationRow.start),
- end: getLocalTime(parseInt(state.utc + '', 10), state.durationRow.end),
+ start: getLocalTime(state.utc, state.durationRow.start),
+ end: getLocalTime(state.utc, state.durationRow.end),
step: state.durationRow.step,
};
},
@@ -71,7 +70,10 @@ const getters = {
getter.duration.start.getMonth());
break;
}
- const utcSpace = (parseInt(state.utc + '', 10) + new Date().getTimezoneOffset() / 60) * 3600000;
+ const utcArr = state.utc.split(':');
+ const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
+ const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
+ const utcSpace = (utcHour + new Date().getTimezoneOffset() / 60) * 3600000 + utcMin * 60000;
const startUnix: number = getter.duration.start.getTime();
const endUnix: number = getter.duration.end.getTime();
const timeIntervals: string[] = [];
@@ -100,7 +102,7 @@ const mutations: MutationTree<State> = {
localStorage.removeItem('durationRow');
state.durationRow = getDurationRow();
},
- [types.SET_UTC](state: State, data: number): void {
+ [types.SET_UTC](state: State, data: string): void {
state.utc = data;
},
[types.SET_EVENTS](state: State, data: any[]): void {
@@ -126,7 +128,7 @@ const mutations: MutationTree<State> = {
// actions
const actions: ActionTree<State, any> = {
- SET_UTC(context: { commit: Commit }, data: number): void {
+ SET_UTC(context: { commit: Commit }, data: string): void {
context.commit(types.SET_UTC, data);
context.commit(types.RUN_EVENTS);
},
diff --git a/src/utils/localtime.ts b/src/utils/localtime.ts
index 7cb9ded..6ae3e6a 100644
--- a/src/utils/localtime.ts
+++ b/src/utils/localtime.ts
@@ -18,19 +18,19 @@
import graph from '@/graph';
import { AxiosResponse } from 'axios';
-const getLocalTime = (i: number, t: Date | number) => {
- const d = new Date(t);
+const getLocalTime = (utc: string, time: Date | number) => {
+ const utcArr = utc.split(':');
+ const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
+ const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
+ const d = new Date(time);
const len = d.getTime();
const offset = d.getTimezoneOffset() * 60000;
const utcTime = len + offset;
- return new Date(utcTime + 3600000 * i);
+ return new Date(utcTime + 3600000 * utcHour + utcMin * 60000);
};
const setTimezoneOffset = () => {
- window.localStorage.setItem(
- 'utc',
- -(new Date().getTimezoneOffset() / 60) + '',
- );
+ window.localStorage.setItem('utc', -(new Date().getTimezoneOffset() / 60) + ':0');
};
export const queryOAPTimeInfo = async () => {
@@ -41,7 +41,7 @@ export const queryOAPTimeInfo = async () => {
setTimezoneOffset();
return;
}
- utc = res.data.data.getTimeInfo.timezone / 100 + '';
+ utc = res.data.data.getTimeInfo.timezone / 100 + ':0';
window.localStorage.setItem('utc', utc);
}
};
diff --git a/src/views/components/common/rk-footer.vue b/src/views/components/common/rk-footer.vue
index 8a4074c..6448b51 100644
--- a/src/views/components/common/rk-footer.vue
+++ b/src/views/components/common/rk-footer.vue
@@ -19,8 +19,11 @@ limitations under the License. -->
<div class="sm flex-h">
<RkFooterTime />
<span class="mr-15 cp" @click="setLang">{{ lang === 'zh' ? 'δΈ' : 'En' }}</span>
- <span>{{ $t('serverZone') }} UTC {{ utc >= 0 ? '+' : '' }}</span
- ><input v-model="utc" min="-12" max="14" class="rk-footer-utc" type="number" />
+ <span>{{ $t('serverZone') }} UTC {{ utcHour >= 0 ? '+' : '' }}</span>
+ <input v-model="utcHour" min="-12" max="14" class="rk-footer-utc" type="number" />
+ <span>: </span>
+ <span class="utc-min">{{ utcMin > 9 ? null : 0 }}</span>
+ <input v-model="utcMin" min="0" max="59" class="rk-footer-utc" type="number" />
</div>
</div>
</footer>
@@ -36,21 +39,21 @@ limitations under the License. -->
@Action('SET_DURATION') private SET_DURATION: any;
@Action('SET_UTC') private SET_UTC: any;
private lang: string | null = '';
- private utc: number = 0;
- @Watch('utc')
- private onUtcUpdate() {
- if (this.utc < -12) {
- this.utc = -12;
- }
- if (this.utc > 14) {
- this.utc = 14;
- }
- if (!this.utc) {
- this.utc = 0;
+ private utcHour: number = 0;
+ private utcMin: number = 0;
+
+ private beforeMount() {
+ let utc = localStorage.getItem('utc') || '';
+ if (!utc.includes(':')) {
+ utc = (localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60)) + ':0';
}
- this.SET_UTC(this.utc);
- window.localStorage.setItem('utc', this.utc.toString());
+ const utcArr = (utc || '').split(':');
+ this.utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
+ this.utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
+ this.SET_UTC(`${this.utcHour}:${this.utcMin}`);
+ this.lang = window.localStorage.getItem('lang');
}
+
private setLang() {
if (this.lang === 'zh') {
this.$i18n.locale = 'en';
@@ -62,9 +65,35 @@ limitations under the License. -->
this.lang = 'zh';
}
}
- private beforeMount() {
- this.utc = Number(window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60));
- this.lang = window.localStorage.getItem('lang');
+
+ @Watch('utcHour')
+ private onUtcUpdate() {
+ if (this.utcHour < -12) {
+ this.utcHour = -12;
+ }
+ if (this.utcHour > 14) {
+ this.utcHour = 14;
+ }
+ if (isNaN(this.utcHour)) {
+ this.utcHour = 0;
+ }
+ this.SET_UTC(`${this.utcHour}:${this.utcMin}`);
+ localStorage.setItem('utc', `${this.utcHour}:${this.utcMin}`);
+ }
+
+ @Watch('utcMin')
+ private onUtcMinUpdate() {
+ if (this.utcMin < 0) {
+ this.utcMin = 0;
+ }
+ if (this.utcMin > 59) {
+ this.utcMin = 59;
+ }
+ if (isNaN(this.utcMin)) {
+ this.utcMin = 0;
+ }
+ this.SET_UTC(`${this.utcHour}:${this.utcMin}`);
+ localStorage.setItem('utc', `${this.utcHour}:${this.utcMin}`);
}
}
</script>
@@ -94,11 +123,15 @@ limitations under the License. -->
background: 0;
border: 0;
outline: none;
- width: auto;
+ width: 40px;
padding-bottom: 0;
}
.rk-footer-inner {
justify-content: space-between;
display: flex;
}
+ .utc-min {
+ display: inline-block;
+ padding-top: 2px;
+ }
</style>
diff --git a/src/views/components/common/rk-header.vue b/src/views/components/common/rk-header.vue
index 842e876..1b784fe 100644
--- a/src/views/components/common/rk-header.vue
+++ b/src/views/components/common/rk-header.vue
@@ -74,7 +74,6 @@ limitations under the License. -->
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));
}
diff --git a/src/views/components/log/log-conditions.vue b/src/views/components/log/log-conditions.vue
index 53a8fe4..341101b 100644
--- a/src/views/components/log/log-conditions.vue
+++ b/src/views/components/log/log-conditions.vue
@@ -101,6 +101,7 @@ limitations under the License. -->
import { State as logState } from '@/store/modules/log/index';
import dateFormatStep from '@/utils/dateFormat';
import { ConditionTags } from '../common/index';
+ import getLocalTime from '@/utils/localtime';
@Component({
components: { ConditionTags },
@@ -231,14 +232,8 @@ limitations under the License. -->
this.SET_LOG_CONDITIONS({
label: this.LogConditionsOpt.Date,
key: this.globalTimeFormat([
- new Date(
- this.searchTime[0].getTime() +
- (parseInt(String(this.rocketbotGlobal.utc), 10) + new Date().getTimezoneOffset() / 60) * 3600000,
- ),
- new Date(
- this.searchTime[1].getTime() +
- (parseInt(String(this.rocketbotGlobal.utc), 10) + new Date().getTimezoneOffset() / 60) * 3600000,
- ),
+ getLocalTime(this.rocketbotGlobal.utc, this.searchTime[0]),
+ getLocalTime(this.rocketbotGlobal.utc, this.searchTime[1]),
]),
});
}
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 5514353..0189553 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -104,6 +104,7 @@ limitations under the License. -->
import { State as traceState } from '@/store/modules/trace/index';
import { State as globalState } from '@/store/modules/global/index';
import dateFormatStep from '@/utils/dateFormat';
+ import getLocalTime from '@/utils/localtime';
@Component({ components: { CommonSelector, ConditionTags } })
export default class TraceSearch extends Vue {
@State('rocketbot') private rocketbotGlobal!: globalState;
@@ -209,14 +210,8 @@ limitations under the License. -->
private getTraceList() {
const temp: any = {
queryDuration: this.globalTimeFormat([
- new Date(
- this.time[0].getTime() +
- (parseInt(String(this.rocketbotGlobal.utc), 10) + new Date().getTimezoneOffset() / 60) * 3600000,
- ),
- new Date(
- this.time[1].getTime() +
- (parseInt(String(this.rocketbotGlobal.utc), 10) + new Date().getTimezoneOffset() / 60) * 3600000,
- ),
+ getLocalTime(this.rocketbotGlobal.utc, this.time[0]),
+ getLocalTime(this.rocketbotGlobal.utc, this.time[1]),
]),
traceState: this.traceState.key,
paging: { pageNum: 1, pageSize: 15, needTotal: true },