Feat: time format month (#278)
* feat: time format month
* feat: add time range with 60 days
* fix: type
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index dab595b..ff64a54 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -124,6 +124,7 @@
includeChildren: 'Include Children',
excludeChildren: 'Exclude Children',
view: 'View',
+ timeTips: 'Time interval cannot exceed 60 days',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 529b226..02e9be9 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -124,6 +124,7 @@
includeChildren: '包含子部分',
excludeChildren: '不包含子部分',
view: '查看',
+ timeTips: '时间区间不能超过60天',
};
export default m;
diff --git a/src/components/rk-footer-time.vue b/src/components/rk-footer-time.vue
index e2057ea..cf4ad1a 100644
--- a/src/components/rk-footer-time.vue
+++ b/src/components/rk-footer-time.vue
@@ -13,26 +13,43 @@
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
- <RkDate class="mr-10" v-model="time" position="top" format="YYYY-MM-DD HH:mm:ss" />
+ <div>
+ <span class="rk-time-tips" v-show="timeRange">{{ $t('timeTips') }}</span>
+ <RkDate class="mr-10" v-model="time" position="top" format="YYYY-MM-DD HH:mm:ss" />
+ </div>
</template>
<script lang="ts">
import timeFormat from '@/utils/timeFormat';
export default {
+ data() {
+ return {
+ timeRange: 0,
+ };
+ },
computed: {
time: {
get() {
- const that: any = this;
- return [that.$store.state.rocketbot.durationRow.start, that.$store.state.rocketbot.durationRow.end];
+ return [
+ (this as any).$store.state.rocketbot.durationRow.start,
+ (this as any).$store.state.rocketbot.durationRow.end,
+ ];
},
set(val: Date[]) {
- const that: any = this;
- that.$store.dispatch('SET_DURATION', timeFormat(val));
+ (this as any).timeRange = val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
+ if ((this as any).timeRange) {
+ return;
+ }
+ (this as any).$store.dispatch('SET_DURATION', timeFormat(val));
},
},
},
};
</script>
-<style scoped></style>
+<style scoped>
+ .rk-time-tips {
+ color: red;
+ }
+</style>
diff --git a/src/components/rk-footer.vue b/src/components/rk-footer.vue
index c56ef4a..5a87f12 100644
--- a/src/components/rk-footer.vue
+++ b/src/components/rk-footer.vue
@@ -30,7 +30,6 @@
import { Duration } from '@/types/global';
import { Vue, Component, Watch } from 'vue-property-decorator';
import { State, Action, Mutation } from 'vuex-class';
- import timeFormat from '@/utils/timeFormat';
@Component
export default class Footerssd extends Vue {
diff --git a/src/utils/timeFormat.ts b/src/utils/timeFormat.ts
index af44ff6..1cdd566 100644
--- a/src/utils/timeFormat.ts
+++ b/src/utils/timeFormat.ts
@@ -24,10 +24,8 @@
step = 'MINUTE';
} else if (unix <= 24 * 60 * 60 * 1000) {
step = 'HOUR';
- } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
- step = 'DAY';
} else {
- step = 'MONTH';
+ step = 'DAY';
}
return { start: time[0], end: time[1], step };
};
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 6323484..e1b6a29 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -116,15 +116,13 @@
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') {
+ if (step === 'DAY' || step === 'MONTH') {
return `${year}-${month}-${day}`;
}
const hourTemp = date.getHours();
@@ -152,10 +150,8 @@
step = 'MINUTE';
} else if (unix <= 24 * 60 * 60 * 1000) {
step = 'HOUR';
- } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
- step = 'DAY';
} else {
- step = 'MONTH';
+ step = 'DAY';
}
return {
start: this.dateFormat(time[0], step),
diff --git a/src/views/containers/topology/trace/trace-search.vue b/src/views/containers/topology/trace/trace-search.vue
index e72c1bc..7525d5e 100644
--- a/src/views/containers/topology/trace/trace-search.vue
+++ b/src/views/containers/topology/trace/trace-search.vue
@@ -108,15 +108,12 @@
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') {
+ if (step === 'DAY' || step === 'MONTH') {
return `${year}-${month}-${day}`;
}
const hourTemp = date.getHours();
@@ -144,10 +141,8 @@
step = 'MINUTE';
} else if (unix <= 24 * 60 * 60 * 1000) {
step = 'HOUR';
- } else if (unix <= 30 * 24 * 60 * 60 * 1000) {
- step = 'DAY';
} else {
- step = 'MONTH';
+ step = 'DAY';
}
return {
start: this.dateFormat(time[0], step),
