feat: implement searching logs with date (#428)
diff --git a/src/store/modules/global/index.ts b/src/store/modules/global/index.ts
index 06ade00..68f91a3 100644
--- a/src/store/modules/global/index.ts
+++ b/src/store/modules/global/index.ts
@@ -19,46 +19,11 @@
import { Duration, DurationTime } from '@/types/global';
import getDurationRow from '@/utils/datetime';
import getLocalTime from '@/utils/localtime';
+import dateFormatStep from '@/utils/dateFormatStep';
import { ActionTree, Commit, MutationTree } from 'vuex';
let timer: any = null;
-const dateFormat = (date: Date, step: string): string => {
- const year = date.getFullYear();
- const monthTemp = date.getMonth() + 1;
- let month: string = `${monthTemp}`;
- if (monthTemp < 10) {
- month = `0${monthTemp}`;
- }
- if (step === 'MONTH') {
- return `${year}-${month}`;
- }
- const dayTemp = date.getDate();
- let day: string = `${dayTemp}`;
- if (dayTemp < 10) {
- day = `0${dayTemp}`;
- }
- if (step === 'DAY') {
- 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}`;
- }
- return '';
-};
const dateFormatTime = (date: Date, step: string): string => {
const year = date.getFullYear();
const monthTemp = date.getMonth() + 1;
@@ -156,8 +121,8 @@
},
durationTime(_: State, getter: any): DurationTime {
return {
- start: dateFormat(getter.duration.start, getter.duration.step),
- end: dateFormat(getter.duration.end, getter.duration.step),
+ start: dateFormatStep(getter.duration.start, getter.duration.step, true),
+ end: dateFormatStep(getter.duration.end, getter.duration.step, true),
step: getter.duration.step,
};
},
diff --git a/src/utils/dateFormatStep.ts b/src/utils/dateFormatStep.ts
new file mode 100644
index 0000000..90967d9
--- /dev/null
+++ b/src/utils/dateFormatStep.ts
@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+
+export default function dateFormatStep(date: Date, step: string, monthDayDiff?: boolean): string {
+ const year = date.getFullYear();
+ const monthTemp = date.getMonth() + 1;
+ let month: string = `${monthTemp}`;
+ if (monthTemp < 10) {
+ month = `0${monthTemp}`;
+ }
+ if (step === 'MONTH' && monthDayDiff) {
+ return `${year}-${month}`;
+ }
+ 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}`;
+ }
+ return '';
+}
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index 88ac3a6..31834d1 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -53,11 +53,7 @@
/>
</div>
<span class="flex-h rk-right">
- <a
- class="rk-log-search-btn bg-blue mr-10"
- v-if="logState.type.key !== cateGoryBrowser"
- @click="openConditionsBox"
- >
+ <a class="rk-log-search-btn bg-blue mr-10" @click="openConditionsBox">
<rk-icon icon="settings" class="mr-5" />
<span class="vm">{{ $t('setConditions') }}</span>
</a>
@@ -73,7 +69,7 @@
<RkPage :currentSize="10" :currentPage="pageNum" @changePage="handleRefresh" :total="logState.total" />
</span>
</div>
- <div class="flex-h" v-show="showConditionsBox && logState.type.key !== cateGoryBrowser">
+ <div class="flex-h" v-show="showConditionsBox">
<LogConditions />
</div>
</div>
@@ -87,13 +83,15 @@
import ToolBarSelect from '../dashboard/tool-bar-select.vue';
import ToolBarEndpointSelect from '../dashboard/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';
@Component({
components: { TraceSelect, ToolBarSelect, ToolBarEndpointSelect, LogConditions },
})
export default class Bar extends Vue {
- @State('rocketLog') private logState: any;
- @State('rocketOption') private rocketOption: any;
+ @State('rocketLog') private logState!: logState;
+ @State('rocketOption') private rocketOption!: optionState;
@Mutation('SELECT_LOG_TYPE') private SELECT_LOG_TYPE: any;
@Mutation('SELECT_ERROR_CATALOG') private SELECT_ERROR_CATALOG: any;
@Mutation('SET_EVENTS') private SET_EVENTS: any;
@@ -123,15 +121,6 @@
.then(() => {
this.queryLogs();
});
- this.SET_EVENTS([
- () => {
- this.queryLogs();
- },
- ]);
- }
-
- private beforeDestroy() {
- this.SET_EVENTS([]);
}
private handleRefresh(pageNum: number) {
@@ -182,7 +171,7 @@
pagePathId: currentEndpoint.key,
category: category.key,
paging: { pageNum: this.pageNum, pageSize: 35, needTotal: true },
- queryDuration: this.durationTime,
+ queryDuration: conditions.date,
}
: {
serviceId: currentService.key || undefined,
@@ -197,7 +186,7 @@
relatedTrace: conditions.traceId ? { traceId: conditions.traceId } : undefined,
tags: conditions.tags,
paging: { pageNum: this.pageNum, pageSize: 35, needTotal: true },
- queryDuration: conditions.traceId ? undefined : this.durationTime,
+ queryDuration: conditions.traceId ? undefined : conditions.date,
},
});
}
diff --git a/src/views/components/log/log-conditions.vue b/src/views/components/log/log-conditions.vue
index 8c51bea..31af058 100644
--- a/src/views/components/log/log-conditions.vue
+++ b/src/views/components/log/log-conditions.vue
@@ -14,7 +14,7 @@
<template>
<div class="rk-search-conditions flex-v">
<div class="flex-h">
- <div class="mr-15">
+ <div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
<span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
<input
type="text"
@@ -22,7 +22,11 @@
@change="changeConditions($event, LogConditionsOpt.TraceID)"
/>
</div>
- <div class="mr-15">
+ <div class="search-time">
+ <span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
+ <RkDate class="sm" v-model="searchTime" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
+ </div>
+ <div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
<span class="sm b grey mr-10">{{ this.$t('keywordsOfContent') }}:</span>
<span class="rk-trace-tags" v-show="rocketLog.supportQueryLogsByKeywords">
<span
@@ -49,7 +53,7 @@
<rk-icon icon="help" class="mr-5" />
</span>
</div>
- <div class="mr-15">
+ <div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
<span class="sm b grey mr-10">{{ this.$t('excludingKeywordsOfContent') }}:</span>
<span class="rk-trace-tags" v-show="rocketLog.supportQueryLogsByKeywords">
<span
@@ -77,7 +81,7 @@
</span>
</div>
</div>
- <div class="mr-10" style="padding-top: 10px">
+ <div class="mr-10" style="padding-top: 10px" v-show="rocketLog.type.key === cateGoryService">
<span class="sm grey">{{ this.$t('tags') }}: </span>
<span class="rk-trace-tags">
<span class="selected" v-for="(item, index) in tagsList" :key="index">
@@ -109,12 +113,16 @@
import { Duration, Option } from '@/types/global';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Mutation, State } from 'vuex-class';
+ import { State as globalState } from '@/store/modules/global/index';
+ import { State as logState } from '@/store/modules/log/index';
+ import dateFormatStep from '@/utils/dateFormatStep';
@Component({
components: {},
})
export default class LogConditions extends Vue {
- @State('rocketLog') private rocketLog: any;
+ @State('rocketbot') private rocketbotGlobal!: globalState;
+ @State('rocketLog') private rocketLog!: logState;
@Mutation('SET_LOG_CONDITIONS') private SET_LOG_CONDITIONS: any;
@Mutation('SET_TAG_LIST') private SET_TAG_LIST: any;
@Mutation('SET_KEYWORDS_CONTENT') private SET_KEYWORDS_CONTENT: any;
@@ -123,13 +131,17 @@
private excludingKeywordsOfContent: string = '';
private tagsList: string[] = [];
private tags: string = '';
+ private searchTime: Date[] = [];
private LogConditionsOpt = {
TraceID: 'traceId',
Tags: 'tags',
KeywordsOfContent: 'keywordsOfContent',
ExcludingKeywordsOfContent: 'excludingKeywordsOfContent',
+ Date: 'date',
};
+ private cateGoryService = 'service';
private created() {
+ this.searchTime = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
(this.tagsList = localStorage.getItem('logTags') ? JSON.parse(localStorage.getItem('logTags') || '') : []),
this.updateTags();
}
@@ -229,12 +241,44 @@
localStorage.setItem(storageContent, JSON.stringify(list));
}
+ 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: dateFormatStep(time[0], step, true),
+ end: dateFormatStep(time[1], step, true),
+ step,
+ };
+ }
@Watch('rocketLog.conditions.tags')
private clearTags() {
if (!this.rocketLog.conditions.tags) {
this.tagsList = [];
}
}
+ @Watch('searchTime')
+ private updateDate() {
+ 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,
+ ),
+ ]),
+ });
+ }
}
</script>
@@ -291,5 +335,8 @@
.log-tips {
color: #eee;
}
+ .search-time {
+ color: #eee;
+ }
}
</style>
diff --git a/src/views/components/log/log-service-detail.vue b/src/views/components/log/log-service-detail.vue
index b323bf8..08c1515 100644
--- a/src/views/components/log/log-service-detail.vue
+++ b/src/views/components/log/log-service-detail.vue
@@ -69,8 +69,6 @@
});
if (this.currentLog.contentType === 'JSON') {
this.logContent = formatJson(JSON.parse(this.currentLog.content));
- } else if (this.currentLog.contentType === 'TEXT') {
- this.logContent = this.currentLog.content;
} else {
this.logContent = this.currentLog.content;
}
diff --git a/src/views/components/profile/profile-header.vue b/src/views/components/profile/profile-header.vue
index d91b9be..dd9c46c 100644
--- a/src/views/components/profile/profile-header.vue
+++ b/src/views/components/profile/profile-header.vue
@@ -63,49 +63,6 @@
private dialogVisible = false;
private serviceOpt: any;
- 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}`;
- }
- if (step === 'MONTH') {
- return `${year}-${month}`;
- }
- const dayTemp = date.getDate();
- let day: string = `${dayTemp}`;
- if (dayTemp < 10) {
- day = `0${dayTemp}`;
- }
- if (step === 'DAY') {
- 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[]) {
- return {
- start: time[0].getTime(),
- end: time[1].getTime(),
- };
- }
-
private chooseService(item: { key: string; label: string }) {
this.SET_HEADER_SOURCE({ currentService: item });
}
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index f0d0d12..2c624e8 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -116,6 +116,7 @@
import TraceSelect from '../common/trace-select.vue';
import { State as traceState } from '@/store/modules/trace/index';
import { State as globalState } from '@/store/modules/global/index';
+ import dateFormatStep from '@/utils/dateFormatStep';
@Component({ components: { TraceSelect } })
export default class TraceSearch extends Vue {
@@ -161,40 +162,6 @@
}
}
- 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());
@@ -206,8 +173,8 @@
step = 'DAY';
}
return {
- start: this.dateFormat(time[0], step),
- end: this.dateFormat(time[1], step),
+ start: dateFormatStep(time[0], step, false),
+ end: dateFormatStep(time[1], step, false),
step,
};
}
