setup config for timerange widget

src/assets/icons/control.svg

@@ -12,4 +12,4 @@ 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. -->
-<svg t="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452" fill="#515151"></path></svg>
+<svg t="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452"></path></svg>

src/assets/icons/time_range.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1660294515307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020" width="48" height="48"><path d="M240 512h64c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16h-64c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m160 0h384c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H400c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m384 256h-64c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16h64c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16z" p-id="1021"></path><path d="M896 128H768V96c0-16-12.8-32-32-32s-32 12.8-32 32v32H320V96c0-16-12.8-32-32-32s-32 12.8-32 32v32H128c-35.2 0-64 28.8-64 64v704c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64z m0 736c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V384h768v480z m0-544H128v-96c0-19.2 12.8-32 32-32h96v32c0 16 12.8 32 32 32s32-12.8 32-32v-32h384v32c0 16 12.8 32 32 32s32-12.8 32-32v-32h96c19.2 0 32 12.8 32 32v96z" p-id="1022"></path><path d="M240 832h384c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H240c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z m0-160h544c9.6 0 16-6.4 16-16v-32c0-9.6-6.4-16-16-16H240c-9.6 0-16 6.4-16 16v32c0 9.6 6.4 16 16 16z" p-id="1023"></path></svg>

src/store/data.ts

@@ -29,3 +29,10 @@ export const TextConfig = {
   fontSize: 14,
   textAlign: "left",
 };
+
+export const TimeRangeConfig = {
+  fontColor: "black",
+  backgroundColor: "white",
+  fontSize: 14,
+  textAlign: "center",
+};

src/store/modules/dashboard.ts

@@ -21,7 +21,7 @@ import graphql from "@/graphql";
 import query from "@/graphql/fetch";
 import { DashboardItem } from "@/types/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
-import { NewControl, TextConfig } from "../data";
+import { NewControl, TextConfig, TimeRangeConfig } from "../data";
 import { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
@@ -129,6 +129,11 @@ export const dashboardStore = defineStore({
         newItem.h = 6;
         newItem.graph = TextConfig;
       }
+      if (type === "TimeRange") {
+        newItem.w = 8;
+        newItem.h = 6;
+        newItem.graph = TimeRangeConfig;
+      }
       this.activedGridItem = newItem.i;
       this.selectedGrid = newItem;
       this.layout = this.layout.map((d: LayoutConfig) => {
@@ -195,6 +200,11 @@ export const dashboardStore = defineStore({
         newItem.h = 6;
         newItem.graph = TextConfig;
       }
+      if (type === "TimeRange") {
+        newItem.w = 8;
+        newItem.h = 6;
+        newItem.graph = TextConfig;
+      }
       if (this.layout[idx].children) {
         const items = children.map((d: LayoutConfig) => {
           d.y = d.y + newItem.h;

src/views/dashboard/controls/TimeRange.vue

@@ -13,7 +13,7 @@ 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="topology">
+  <div class="time-range">
     <div class="header">
       <el-popover
         placement="bottom"
@@ -41,16 +41,20 @@ limitations under the License. -->
         justifyContent: graph.textAlign,
       }"
     >
-      <a
+      <Icon
-        :href="graph.url"
+        iconName="time_range"
-        target="_blank"
+        size="lg"
+        :style="{ color: TextColors[graph.fontColor] }"
+      />
+      <span
+        class="ml-10"
         :style="{
           color: TextColors[graph.fontColor],
           fontSize: graph.fontSize + 'px',
         }"
       >
         {{ content }}
-      </a>
+      </span>
     </div>
   </div>
 </template>
@@ -75,7 +79,9 @@ const graph = computed(() => props.data.graph || {});
 const dashboardStore = useDashboardStore();
 const appStore = useAppStoreWithOut();
 const content = computed(() => {
-  const text = appStore.duration.map((date: Date) => tf(date)).join(` ~ `);
+  const text = [appStore.duration.start, appStore.duration.end]
+    .map((date: Date) => tf(date, "YYYY-MM-DD HH:mm"))
+    .join(` ~ `);
   return text;
 });
 
@@ -86,7 +92,7 @@ function editConfig() {
   dashboardStore.setConfigPanel(true);
   dashboardStore.selectWidget(props.data);
 }
-function tf(time: Date, format?: any): string {
+function tf(time: Date, format: any): string {
   const local = {
     dow: 1, // Monday is the first day of the week
     hourTip: t("hourTip"), // tip of select hour
@@ -136,7 +142,7 @@ function tf(time: Date, format?: any): string {
 }
 </script>
 <style lang="scss" scoped>
-.topology {
+.time-range {
   font-size: 12px;
   height: 100%;
   position: relative;
@@ -160,6 +166,7 @@ function tf(time: Date, format?: any): string {
   display: flex;
   align-items: center;
   overflow: auto;
+  font-weight: bold;
 }
 
 .tools {

src/views/dashboard/data.ts

@@ -212,6 +212,7 @@ export const ProcessTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
+  { name: "time_range", content: "Add Time Range Text", id: "addTimeRange" },
 ];
 export const ServiceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },

src/views/dashboard/panel/Tool.vue

@@ -560,6 +560,9 @@ function setTabControls(id: string) {
     case "addEvent":
       dashboardStore.addTabControls("Event");
       break;
+    case "addTimeRange":
+      dashboardStore.addTabControls("TimeRange");
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -598,6 +601,9 @@ function setControls(id: string) {
     case "addEvent":
       dashboardStore.addControl("Event");
       break;
+    case "addTimeRange":
+      dashboardStore.addControl("TimeRange");
+      break;
     default:
       dashboardStore.addControl("Widget");
   }