feat: Implement independent mode for widgets (#221)

src/views/dashboard/Edit.vue

@@ -30,6 +30,13 @@ limitations under the License. -->
     >
       <component :is="dashboardStore.selectedGrid.type" />
     </el-dialog>
+    <el-dialog
+      v-model="dashboardStore.showLinkConfig"
+      :destroy-on-close="true"
+      @closed="dashboardStore.setWidgetLink(false)"
+    >
+      <WidgetLink />
+    </el-dialog>
   </div>
 </template>
 <script lang="ts">
@@ -42,16 +49,18 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import Configuration from "./configuration";
   import type { LayoutConfig } from "@/types/dashboard";
+  import WidgetLink from "./components/WidgetLink.vue";
 
   export default defineComponent({
     name: "Dashboard",
-    components: { ...Configuration, GridLayout, Tool },
+    components: { ...Configuration, GridLayout, Tool, WidgetLink },
     setup() {
       const dashboardStore = useDashboardStore();
       const appStore = useAppStoreWithOut();
       const { t } = useI18n();
       const p = useRoute().params;
       const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
+
       setTemplate();
       async function setTemplate() {
         await dashboardStore.setDashboards();

src/views/dashboard/List.vue

@@ -226,6 +226,7 @@ limitations under the License. -->
       standard?: unknown;
       label?: string;
       value?: string;
+      filters?: unknown;
     })[],
   ) {
     for (const child of children || []) {
@@ -235,6 +236,7 @@ limitations under the License. -->
       delete child.id;
       delete child.label;
       delete child.value;
+      delete child.filters;
       if (isEmptyObject(child.graph)) {
         delete child.graph;
       }

src/views/dashboard/Widget.vue

@@ -0,0 +1,188 @@
+<!-- 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="content">
+    <div class="header">
+      <span>{{ decodeURIComponent(title) }}</span>
+      <div class="tips" v-show="tips">
+        <el-tooltip :content="decodeURIComponent(tips) || ''">
+          <span>
+            <Icon iconName="info_outline" size="sm" />
+          </span>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="widget-chart" :style="{ height: config.height - 60 + 'px' }">
+      <component
+        :is="graph.type"
+        :intervalTime="appStoreWithOut.intervalTime"
+        :data="source"
+        :config="{
+          i: 0,
+          ...graph,
+          metrics: config.metrics,
+          metricTypes: config.metricTypes,
+          metricConfig: config.metricConfig,
+        }"
+        :needQuery="true"
+      />
+      <div v-show="!config.type" class="no-data">
+        {{ t("noData") }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, ref, defineComponent, watch } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useRoute } from "vue-router";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
+  import graphs from "./graphs";
+  import { EntityType } from "./data";
+
+  export default defineComponent({
+    name: "WidgetPage",
+    components: {
+      ...graphs,
+    },
+    setup() {
+      const { t } = useI18n();
+      const appStoreWithOut = useAppStoreWithOut();
+      const selectorStore = useSelectorStore();
+      const route = useRoute();
+      const config = computed<any>(() => JSON.parse(decodeURIComponent(route.params.config as string) as string));
+      const graph = computed(() => config.value.graph || {});
+      const source = ref<unknown>({});
+      const loading = ref<boolean>(false);
+      const dashboardStore = useDashboardStore();
+      const title = computed(() => (config.value.widget && config.value.widget.title) || "");
+      const tips = computed(() => (config.value.widget && config.value.widget.tips) || "");
+
+      init();
+      async function init() {
+        dashboardStore.setLayer(route.params.layer);
+        dashboardStore.setEntity(route.params.entity);
+        await setSelector();
+        await queryMetrics();
+      }
+      async function setSelector() {
+        const { serviceId, podId, processId, destServiceId, destPodId, destProcessId, entity } = route.params;
+        if (serviceId) {
+          await selectorStore.getService(serviceId);
+        }
+        if (
+          [EntityType[4].value, EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(
+            entity as string,
+          )
+        ) {
+          await selectorStore.getService(destServiceId, true);
+        }
+        if ([EntityType[3].value, EntityType[5].value, EntityType[7].value].includes(entity as string)) {
+          await selectorStore.getInstance(podId);
+        }
+        if ([EntityType[2].value, EntityType[6].value].includes(entity as string)) {
+          await selectorStore.getEndpoint(podId);
+        }
+        if (EntityType[6].value === entity) {
+          await selectorStore.getEndpoint(destPodId, true);
+        }
+        if ([EntityType[5].value, EntityType[7].value].includes(entity as string)) {
+          await selectorStore.getInstance(destPodId, true);
+        }
+        if (EntityType[7].value === entity) {
+          selectorStore.getProcess(processId);
+          selectorStore.getProcess(destProcessId, true);
+        }
+      }
+      async function queryMetrics() {
+        const metricTypes = config.value.metricTypes || [];
+        const metrics = config.value.metrics || [];
+        const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
+        const params = await useQueryProcessor({ ...config.value, catalog });
+        if (!params) {
+          source.value = {};
+          return;
+        }
+        loading.value = true;
+        const json = await dashboardStore.fetchMetricValue(params);
+        loading.value = false;
+        if (!json) {
+          return;
+        }
+        const d = {
+          metrics: config.value.metrics || [],
+          metricTypes: config.value.metricTypes || [],
+          metricConfig: config.value.metricConfig || [],
+        };
+        source.value = useSourceProcessor(json, d);
+      }
+      watch(
+        () => appStoreWithOut.durationTime,
+        () => {
+          queryMetrics();
+        },
+      );
+      return {
+        t,
+        graph,
+        source,
+        appStoreWithOut,
+        config,
+        title,
+        tips,
+      };
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .content {
+    min-width: 100px;
+    border: 1px solid #eee;
+    background-color: #fff;
+    position: relative;
+  }
+
+  .widget-chart {
+    background: #fff;
+    box-shadow: 0px 1px 4px 0px #00000029;
+    border-radius: 3px;
+    padding: 5px;
+    width: 100%;
+  }
+
+  .no-data {
+    font-size: 14px;
+    text-align: center;
+    line-height: 400px;
+  }
+
+  .header {
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    background-color: aliceblue;
+    font-size: 12px;
+    position: relative;
+  }
+
+  .tips {
+    position: absolute;
+    right: 5px;
+    top: 0;
+  }
+</style>

src/views/dashboard/components/WidgetLink.vue

@@ -0,0 +1,125 @@
+<!-- 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="link-content">
+    <div>
+      <label class="mr-5">{{ t("setDuration") }}</label>
+      <el-switch v-model="hasDuration" />
+    </div>
+    <div v-if="hasDuration">
+      <label class="mr-20">{{ t("duration") }}</label>
+      <TimePicker
+        :value="[appStore.durationRow.start, appStore.durationRow.end]"
+        position="bottom"
+        format="YYYY-MM-DD HH:mm"
+        @input="changeTimeRange"
+      />
+    </div>
+    <el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
+    <div v-show="widgetLink" class="mt-10">
+      <span @click="viewPage" class="link">
+        {{ host + widgetLink }}
+      </span>
+      <span>
+        <Icon class="cp ml-10" iconName="copy" @click="copyLink" />
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import router from "@/router";
+  import copy from "@/utils/copy";
+
+  const { t } = useI18n();
+  const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
+  const selectorStore = useSelectorStore();
+  const hasDuration = ref<boolean>(true);
+  const widgetLink = ref<string>("");
+  const dates = ref<Date[]>([]);
+  const host = window.location.host;
+
+  function changeTimeRange(val: Date[] | any) {
+    dates.value = val;
+  }
+  function getLink() {
+    if (!dashboardStore.selectedGrid) {
+      return;
+    }
+    const serviceId = selectorStore.currentService ? selectorStore.currentService.id : null;
+    const podId = selectorStore.currentPod ? selectorStore.currentPod.id : null;
+    const processId = selectorStore.currentProcess ? selectorStore.currentProcess.id : null;
+    const destServiceId = selectorStore.currentDestService ? selectorStore.currentDestService.id : null;
+    const destPodId = selectorStore.currentDestPod ? selectorStore.currentDestPod.id : null;
+    const destProcessId = selectorStore.currentDestProcess ? selectorStore.currentDestProcess.id : null;
+    const duration = JSON.stringify({
+      start: dates.value[0] ? new Date(dates.value[0]).getTime() : appStore.durationRow.start.getTime(),
+      end: dates.value[1] ? new Date(dates.value[1]).getTime() : appStore.durationRow.end.getTime(),
+      step: appStore.durationRow.step,
+      utc: appStore.utc,
+    });
+    const w = {
+      title: encodeURIComponent(dashboardStore.selectedGrid.widget.title || ""),
+      tips: encodeURIComponent(dashboardStore.selectedGrid.widget.tips || ""),
+    };
+    const metricConfig = (dashboardStore.selectedGrid.metricConfig || []).map((d: any) => {
+      if (d.label) {
+        d.label = encodeURIComponent(d.label);
+      }
+      if (d.unit) {
+        d.unit = encodeURIComponent(d.unit);
+      }
+      return d;
+    });
+    const config = JSON.stringify({
+      type: dashboardStore.selectedGrid.type,
+      widget: w,
+      graph: dashboardStore.selectedGrid.graph,
+      metrics: dashboardStore.selectedGrid.metrics,
+      metricTypes: dashboardStore.selectedGrid.metricTypes,
+      metricConfig: metricConfig,
+      height: dashboardStore.selectedGrid.h * 20 + 60,
+    });
+    const path = `/page/${dashboardStore.layerId}/${
+      dashboardStore.entity
+    }/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${encodeURIComponent(config)}`;
+    widgetLink.value = hasDuration.value ? `${path}/${encodeURIComponent(duration)}` : path;
+  }
+  function viewPage() {
+    const routeUrl = router.resolve({ path: widgetLink.value });
+    window.open(routeUrl.href, "_blank");
+  }
+  function copyLink() {
+    copy(host + widgetLink.value);
+  }
+</script>
+<style lang="scss" scoped>
+  .link {
+    color: #409eff;
+    cursor: pointer;
+  }
+
+  .link-content {
+    height: 300px;
+    font-size: 12px;
+    overflow: auto;
+    padding-bottom: 10px;
+  }
+</style>

src/views/dashboard/controls/Widget.vue

@@ -26,18 +26,21 @@ limitations under the License. -->
             <Icon iconName="info_outline" size="sm" class="operation" v-show="widget.tips" />
           </span>
         </el-tooltip>
-        <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
+        <el-popover placement="bottom" trigger="click" :width="100">
           <template #reference>
             <span>
               <Icon iconName="ellipsis_v" size="middle" class="operation" />
             </span>
           </template>
-          <div class="tools" @click="editConfig">
+          <div class="tools" @click="editConfig" v-if="dashboardStore.editMode">
             <span>{{ t("edit") }}</span>
           </div>
-          <div class="tools" @click="removeWidget">
+          <div class="tools" @click="removeWidget" v-if="dashboardStore.editMode">
             <span>{{ t("delete") }}</span>
           </div>
+          <div class="tools" @click="generateLink">
+            <span>{{ t("generateLink") }}</span>
+          </div>
         </el-popover>
       </div>
     </div>
@@ -161,6 +164,10 @@ limitations under the License. -->
           }
         }
       }
+      function generateLink() {
+        dashboardStore.setWidgetLink(true);
+        dashboardStore.selectWidget(props.data);
+      }
       watch(
         () => [props.data.metricTypes, props.data.metrics],
         () => {
@@ -227,6 +234,7 @@ limitations under the License. -->
         state,
         appStore,
         removeWidget,
+        generateLink,
         editConfig,
         data,
         loading,