add senior options

src/locales/lang/en.ts

@@ -142,6 +142,7 @@ const msg = {
   interval: "Refresh Interval",
   pause: "Pause",
   begin: "Start",
+  seniorOptions: "Senior Options",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -142,6 +142,7 @@ const msg = {
   interval: "Intervalo de actualización",
   pause: "Pausa",
   begin: "Inicio",
+  seniorOptions: "Opciones avanzadas",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -140,6 +140,7 @@ const msg = {
   interval: "刷新间隔时间",
   pause: "暂停",
   begin: "开始",
+  seniorOptions: "高级选项",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/configuration/Widget.vue

@@ -58,6 +58,9 @@ limitations under the License. -->
         <el-collapse-item :title="t('widgetOptions')" name="3">
           <WidgetOptions />
         </el-collapse-item>
+        <el-collapse-item :title="t('seniorOptions')" name="4">
+          <SeniorOptions />
+        </el-collapse-item>
       </el-collapse>
     </div>
     <div class="footer">
@@ -77,17 +80,13 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { Option } from "@/types/app";
 import graphs from "../graphs";
-import configs from "./widget/graph-styles";
-import WidgetOptions from "./widget/WidgetOptions.vue";
-import MetricOptions from "./widget/metric/Index.vue";
+import CustomOptions from "./widget/index";
 
 export default defineComponent({
   name: "WidgetEdit",
   components: {
     ...graphs,
-    ...configs,
-    WidgetOptions,
-    MetricOptions,
+    ...CustomOptions,
   },
   setup() {
     const configHeight = document.documentElement.clientHeight - 520;

src/views/dashboard/configuration/widget/SeniorOptions.vue

@@ -0,0 +1,65 @@
+<!-- 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("title") }}</span>
+    <el-input
+      class="input"
+      v-model="title"
+      size="small"
+      placeholder="Please input title"
+      @change="updateWidgetConfig({ title: encodeURIComponent(title) })"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const widget = dashboardStore.selectedGrid.widget || {};
+const title = ref<string>(widget.title || "");
+
+function updateWidgetConfig(param: { [key: string]: string }) {
+  const key = Object.keys(param)[0];
+  if (!key) {
+    return;
+  }
+  const { selectedGrid } = dashboardStore;
+  const widget = {
+    ...dashboardStore.selectedGrid.widget,
+    [key]: decodeURIComponent(param[key]),
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, widget });
+}
+</script>
+<style lang="scss" scoped>
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.input {
+  width: 500px;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+</style>

src/views/dashboard/configuration/widget/index.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+import StyleOptions from "./graph-styles";
+import WidgetOptions from "./WidgetOptions.vue";
+import MetricOptions from "./metric/Index.vue";
+import SeniorOptions from "./SeniorOptions.vue";
+
+export default {
+  ...StyleOptions,
+  WidgetOptions,
+  MetricOptions,
+  SeniorOptions,
+};