create timeRang widget

src/views/dashboard/configuration/TimeRange.vue

@@ -0,0 +1,151 @@
+<!-- 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. -->
+<template>
+  <div class="item">
+    <span class="label">{{ t("textAlign") }}</span>
+    <Selector
+      :value="textAlign"
+      :options="AlignStyle"
+      size="small"
+      placeholder="Select a color"
+      class="input"
+      @change="changeConfig({ textAlign: $event[0].value })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("backgroundColors") }}</span>
+    <Selector
+      :value="backgroundColor"
+      :options="Colors"
+      size="small"
+      placeholder="Select a color"
+      class="input"
+      @change="changeConfig({ backgroundColor: $event[0].value })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("fontSize") }}</span>
+    <el-slider
+      class="slider"
+      v-model="fontSize"
+      show-input
+      input-size="small"
+      :min="12"
+      :max="30"
+      :step="1"
+      @change="changeConfig({ fontSize })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("fontColors") }}</span>
+    <Selector
+      :value="fontColor"
+      :options="Colors"
+      size="small"
+      placeholder="Select a color"
+      class="input"
+      @change="changeConfig({ fontColor: $event[0].value })"
+    />
+  </div>
+  <div class="footer">
+    <el-button size="small" @click="cancelConfig">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const originConfig = dashboardStore.selectedGrid;
+const graph = originConfig.graph || {};
+const backgroundColor = ref(graph.backgroundColor || "green");
+const fontColor = ref(graph.fontColor || "white");
+const fontSize = ref<number>(graph.fontSize || 12);
+const textAlign = ref(graph.textAlign || "left");
+const Colors = [
+  {
+    label: "Green",
+    value: "green",
+  },
+  { label: "Blue", value: "blue" },
+  { label: "Red", value: "red" },
+  { label: "Grey", value: "grey" },
+  { label: "White", value: "white" },
+  { label: "Black", value: "black" },
+  { label: "Orange", value: "orange" },
+];
+const AlignStyle = [
+  {
+    label: "Left",
+    value: "left",
+  },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" },
+];
+function changeConfig(param: { [key: string]: unknown }) {
+  const { selectedGrid } = dashboardStore;
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
+}
+function applyConfig() {
+  dashboardStore.setConfigPanel(false);
+  dashboardStore.setConfigs(dashboardStore.selectedGrid);
+}
+
+function cancelConfig() {
+  dashboardStore.selectWidget(originConfig);
+  dashboardStore.setConfigPanel(false);
+}
+</script>
+<style lang="scss" scoped>
+.slider {
+  width: 500px;
+  margin-top: -3px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.input {
+  width: 500px;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  border-top: 1px solid #eee;
+  padding: 10px;
+  text-align: right;
+  width: 100%;
+  background-color: #fff;
+}
+</style>

src/views/dashboard/configuration/index.ts

@@ -19,10 +19,12 @@ import Text from "./Text.vue";
 import Widget from "./Widget.vue";
 import Topology from "./Topology.vue";
 import Event from "./Event.vue";
+import TimeRange from "./TimeRange.vue";
 
 export default {
   Text,
   Widget,
   Topology,
   Event,
+  TimeRange,
 };

src/views/dashboard/controls/TimeRange.vue

@@ -0,0 +1,177 @@
+<!-- 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. -->
+<template>
+  <div class="topology">
+    <div class="header">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="dashboardStore.editMode"
+      >
+        <template #reference>
+          <span>
+            <Icon iconName="ellipsis_v" size="middle" class="operation" />
+          </span>
+        </template>
+        <div class="tools" @click="editConfig">
+          <span>{{ t("edit") }}</span>
+        </div>
+        <div class="tools" @click="removeTopo">
+          <span>{{ t("delete") }}</span>
+        </div>
+      </el-popover>
+    </div>
+    <div
+      class="body"
+      :style="{
+        backgroundColor: TextColors[graph.backgroundColor],
+        justifyContent: graph.textAlign,
+      }"
+    >
+      <a
+        :href="graph.url"
+        target="_blank"
+        :style="{
+          color: TextColors[graph.fontColor],
+          fontSize: graph.fontSize + 'px',
+        }"
+      >
+        {{ content }}
+      </a>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { TextColors } from "@/views/dashboard/data";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+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(` ~ `);
+  return text;
+});
+
+function removeTopo() {
+  dashboardStore.removeControls(props.data);
+}
+function editConfig() {
+  dashboardStore.setConfigPanel(true);
+  dashboardStore.selectWidget(props.data);
+}
+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
+    minuteTip: t("minuteTip"), // tip of select minute
+    secondTip: t("secondTip"), // tip of select second
+    yearSuffix: t("yearSuffix"), // format of head
+    monthsHead: t("monthsHead").split("_"), // months of head
+    months: t("months").split("_"), // months of panel
+    weeks: t("weeks").split("_"), // weeks
+    cancelTip: t("cancel"), // default text for cancel button
+    submitTip: t("confirm"), // default text for submit button
+    quarterHourCutTip: t("quarterHourCutTip"),
+    halfHourCutTip: t("halfHourCutTip"),
+    hourCutTip: t("hourCutTip"),
+    dayCutTip: t("dayCutTip"),
+    weekCutTip: t("weekCutTip"),
+    monthCutTip: t("monthCutTip"),
+  };
+  const year = time.getFullYear();
+  const month = time.getMonth();
+  const day = time.getDate();
+  const hours24 = time.getHours();
+  const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
+  const minutes = time.getMinutes();
+  const seconds = time.getSeconds();
+  const milliseconds = time.getMilliseconds();
+  const dd = (t: number) => `0${t}`.slice(-2);
+  const map: { [key: string]: string | number } = {
+    YYYY: year,
+    MM: dd(month + 1),
+    MMM: local.months[month],
+    MMMM: local.monthsHead[month],
+    M: month + 1,
+    DD: dd(day),
+    D: day,
+    HH: dd(hours24),
+    H: hours24,
+    hh: dd(hours),
+    h: hours,
+    mm: dd(minutes),
+    m: minutes,
+    ss: dd(seconds),
+    s: seconds,
+    S: milliseconds,
+  };
+  return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]);
+}
+</script>
+<style lang="scss" scoped>
+.topology {
+  font-size: 12px;
+  height: 100%;
+  position: relative;
+}
+
+.operation {
+  cursor: pointer;
+}
+
+.header {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.body {
+  padding: 0 20px 0 10px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  overflow: auto;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+</style>

src/views/dashboard/controls/index.ts

@@ -24,6 +24,7 @@ import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import DemandLog from "./DemandLog.vue";
 import Event from "./Event.vue";
+import TimeRange from "./TimeRange.vue";
 
 export default {
   Tab,
@@ -36,4 +37,5 @@ export default {
   Ebpf,
   DemandLog,
   Event,
+  TimeRange,
 };

src/views/dashboard/controls/tab.ts

@@ -23,6 +23,7 @@ import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import DemandLog from "./DemandLog.vue";
 import Event from "./Event.vue";
+import TimeRange from "./TimeRange.vue";
 
 export default {
   Widget,
@@ -34,4 +35,5 @@ export default {
   Ebpf,
   DemandLog,
   Event,
+  TimeRange,
 };