This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git
The following commit(s) were added to refs/heads/main by this push:
new 75513f14 [UI] Default Time Range for Querying Data to Last 15 Minutes.
(#397)
75513f14 is described below
commit 75513f1467f595a0fce14b5034fefedaef692f49
Author: Sylvie-Wxr <129717259+sylvie-...@users.noreply.github.com>
AuthorDate: Wed Mar 6 16:31:49 2024 -0800
[UI] Default Time Range for Querying Data to Last 15 Minutes. (#397)
* add for stream as well
* remove unnecessary refs
* update auto-refresh logic
---------
Co-authored-by: Gao Hongtao <hanahm...@gmail.com>
Co-authored-by: 吴晟 Wu Sheng <wu.sh...@foxmail.com>
---
ui/src/components/Read/index.vue | 71 ++++++++++++++++++----------------------
ui/src/views/Measure/index.vue | 2 +-
ui/src/views/Stream/index.vue | 2 +-
3 files changed, 34 insertions(+), 41 deletions(-)
diff --git a/ui/src/components/Read/index.vue b/ui/src/components/Read/index.vue
index ccff2cce..9f3d16d5 100644
--- a/ui/src/components/Read/index.vue
+++ b/ui/src/components/Read/index.vue
@@ -32,15 +32,17 @@ const route = useRoute()
const yamlRef = ref()
-const isDatePicker = ref(false)
+const last15Minutes = 900 * 1000
-const last15Minutes = ref(900 * 1000)
+const lastWeek = 3600 * 1000 * 24 * 7
-const lastWeek = ref(3600 * 1000 * 24 * 7)
+const lastMonth = 3600 * 1000 * 24 * 30
-const lastMonth = ref(3600 * 1000 * 24 * 30)
+const last3Months = 3600 * 1000 * 24 * 90
-const last3Months = ref(3600 * 1000 * 24 * 90)
+const autoRefreshTimeRangeFlag = ref(true)
+
+const pickedShortCutTimeRanges = ref(false)
// Loading
const { proxy } = getCurrentInstance()
@@ -68,7 +70,8 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - last15Minutes.value)
+ start.setTime(start.getTime() - last15Minutes)
+ pickedShortCutTimeRanges.value = true
return [start, end]
}
},
@@ -77,7 +80,8 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - lastWeek.value)
+ start.setTime(start.getTime() - lastWeek)
+ pickedShortCutTimeRanges.value = true
return [start, end]
},
},
@@ -86,7 +90,8 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - lastMonth.value)
+ start.setTime(start.getTime() - lastMonth)
+ pickedShortCutTimeRanges.value = true
return [start, end]
},
},
@@ -95,7 +100,8 @@ const shortcuts = [
value: () => {
const end = new Date()
const start = new Date()
- start.setTime(start.getTime() - last3Months.value)
+ start.setTime(start.getTime() - last3Months)
+ pickedShortCutTimeRanges.value = true
return [start, end]
},
},
@@ -197,11 +203,10 @@ function initCode() {
} else {
let timeRange = {
timeRange: {
- begin: new Date(new Date() - 15),
+ begin: new Date(new Date() - last15Minutes),
end: new Date()
}
}
- timeRange.timeRange.begin.setTime(timeRange.timeRange.begin.getTime()
- 900 * 1000)
timeRange = jsonToYaml(timeRange).data
data.code = ref(
`${timeRange}offset: 1
@@ -347,31 +352,19 @@ function handleCodeData() {
getTableData()
}
function autoRefreshTimeRange() {
- if (isDatePicker.value) {
- let json = yamlToJson(data.code)
- const begin = new Date()
- const end = new Date()
- const oldBeginDate = new Date(json.data.timeRange.begin)
- const oldEndDate = new Date(json.data.timeRange.end)
- const interval = oldEndDate.getTime() - oldBeginDate.getTime()
-
- if (interval === last15Minutes.value) {
- begin.setTime(begin.getTime() - last15Minutes.value)
- } else if (interval === lastWeek.value) {
- begin.setTime(begin.getTime() - lastWeek.value)
- } else if (interval === lastMonth.value) {
- begin.setTime(begin.getTime() - lastMonth.value)
- } else if (interval === last3Months.value) {
- begin.setTime(begin.getTime() - last3Months.value)
- }
- json.data.timeRange.begin = begin.toISOString()
- json.data.timeRange.end = end.toISOString()
- data.code = jsonToYaml(json.data).data
- }
+ let json = yamlToJson(data.code)
+ const interval = new Date(json.data.timeRange.end).getTime() - new
Date(json.data.timeRange.begin).getTime()
+ const begin = new Date(new Date() - interval)
+ const end = new Date()
+ json.data.timeRange.begin = begin.toISOString()
+ json.data.timeRange.end = end.toISOString()
+ data.code = jsonToYaml(json.data).data
}
function searchTableData() {
yamlRef.value.checkYaml(data.code).then(() => {
- autoRefreshTimeRange()
+ if (autoRefreshTimeRangeFlag.value) {
+ autoRefreshTimeRange()
+ }
handleCodeData()
})
.catch((err) => {
@@ -385,7 +378,7 @@ function searchTableData() {
})
}
function changeDatePicker() {
- isDatePicker.value = true
+ autoRefreshTimeRangeFlag.value = pickedShortCutTimeRanges.value
let json = yamlToJson(data.code)
if (!json.data.hasOwnProperty('timeRange')) {
json.data.timeRange = {
@@ -397,6 +390,9 @@ function changeDatePicker() {
json.data.timeRange.end = data.timeValue ? data.timeValue[1] : null
data.code = jsonToYaml(json.data).data
}
+function resetDatePicker() {
+ pickedShortCutTimeRanges.value = false
+}
function changeFields() {
data.tableFields = data.handleFields.map(fieldName => {
let item = data.fields.filter(field => {
@@ -407,9 +403,6 @@ function changeFields() {
})
getTableData()
}
-function changeStatus() {
- isDatePicker.value = false
-}
</script>
<template>
@@ -440,7 +433,7 @@ function changeStatus() {
<el-option v-for="item in data.fields"
:key="item.name" :label="item.name" :value="item.name">
</el-option>
</el-select>
- <el-date-picker @change="changeDatePicker"
style="margin: 0 10px 0 10px" v-model="data.timeValue"
+ <el-date-picker @change="changeDatePicker"
@visible-change="resetDatePicker" style="margin: 0 10px 0 10px"
v-model="data.timeValue"
type="datetimerange" :shortcuts="shortcuts"
range-separator="to" start-placeholder="begin"
end-placeholder="end" align="right">
</el-date-picker>
@@ -453,7 +446,7 @@ function changeStatus() {
</div>
</el-col>
</el-row>
- <CodeMirror ref="yamlRef" v-model="data.code"
@click="changeStatus" mode="yaml" style="height: 200px" :lint="true"
:readonly="false">
+ <CodeMirror ref="yamlRef" v-model="data.code" mode="yaml"
style="height: 200px" :lint="true" :readonly="false">
</CodeMirror>
</el-card>
<el-card shadow="always">
diff --git a/ui/src/views/Measure/index.vue b/ui/src/views/Measure/index.vue
index a313e6b0..752494ec 100644
--- a/ui/src/views/Measure/index.vue
+++ b/ui/src/views/Measure/index.vue
@@ -39,7 +39,7 @@ function setWidth(width) {
</el-aside>
<el-main>
<TopNav></TopNav>
- <RouterView></RouterView>
+ <RouterView :key="$route.path"></RouterView>
</el-main>
</el-container>
</div>
diff --git a/ui/src/views/Stream/index.vue b/ui/src/views/Stream/index.vue
index 4a15b385..0a1a093b 100644
--- a/ui/src/views/Stream/index.vue
+++ b/ui/src/views/Stream/index.vue
@@ -39,7 +39,7 @@ function setWidth(width) {
</el-aside>
<el-main>
<TopNav></TopNav>
- <RouterView></RouterView>
+ <RouterView :key="$route.path"></RouterView>
</el-main>
</el-container>
</div>
