feat: add a iframe widget for zipkin ui (#215)

src/assets/icons/add_iframe.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 class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M856.32 428.064a32 32 0 0 0-32 32v163.328H372.48c-0.896 0-1.664 0.448-2.56 0.512v-177.696h244.48a32 32 0 1 0 0-64H130.56c-0.896 0-1.664 0.448-2.56 0.512V231.68h488.16a32 32 0 1 0 0-64H96a32 32 0 0 0-32 32v701.824a32 32 0 0 0 32 32h760.32a32 32 0 0 0 32-32V460.064a32 32 0 0 0-32-32zM128 445.728c0.896 0.064 1.664 0.512 2.56 0.512h175.36v423.264H128V445.728z m241.92 423.776v-182.624c0.896 0.064 1.664 0.512 2.56 0.512h451.84v182.08h-454.4zM960 174.656h-61.376V113.28a32 32 0 1 0-64 0v61.344H752.64a32 32 0 1 0 0 64h81.984v81.984a32 32 0 1 0 64 0V238.656H960a32 32 0 1 0 0-64z" fill="#2c2c2c"></path></svg>

src/locales/lang/en.ts

@@ -179,6 +179,8 @@ const msg = {
   when4xx: "Sample HTTP requests and responses with tracing when response code between 400 and 499",
   when5xx: "Sample HTTP requests and responses with tracing when response code between 500 and 599",
   taskTitle: "HTTP request and response collecting rules",
+  iframeWidgetTip: "Add a link to a widget",
+  iframeSrc: "Iframe Link",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -162,6 +162,8 @@ const msg = {
   latency: "Retraso",
   metricValues: "Valor métrico",
   legendValues: "Valor de la leyenda",
+  iframeWidgetTip: "Añadir enlaces a los gadgets",
+  iframeSrc: "Enlace Iframe",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -176,6 +176,8 @@ const msg = {
   when4xx: "当响应代码介于400和499之间时，带有跟踪的HTTP请求和响应示例",
   when5xx: "当响应代码介于500和599之间时，带有跟踪的HTTP请求和响应示例",
   taskTitle: "HTTP请求和响应收集规则",
+  iframeWidgetTip: "添加widget的链接",
+  iframeSrc: "Iframe链接",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/store/data.ts

@@ -37,3 +37,5 @@ export const TimeRangeConfig = {
   textAlign: "center",
   text: "text",
 };
+
+export const ControlsTypes = ["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling", "ThirdPartyApp"];

src/store/modules/dashboard.ts

@@ -21,7 +21,7 @@ import graphql from "@/graphql";
 import query from "@/graphql/fetch";
 import type { DashboardItem } from "@/types/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
-import { NewControl, TextConfig, TimeRangeConfig } from "../data";
+import { NewControl, TextConfig, TimeRangeConfig, ControlsTypes } from "../data";
 import type { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
@@ -108,7 +108,7 @@ export const dashboardStore = defineStore({
           depth: this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
         };
       }
-      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
+      if (ControlsTypes.includes(type)) {
         newItem.h = 36;
       }
       if (type === "Text") {
@@ -168,7 +168,7 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
+      if (ControlsTypes.includes(type)) {
         newItem.h = 32;
       }
       if (type === "Text") {

src/views/dashboard/configuration/ThirdPartyApp.vue

@@ -0,0 +1,89 @@
+<!-- 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("iframeSrc") }}</span>
+    <el-input class="input" v-model="url" size="small" @change="changeConfig({ url: encodeURIComponent(url) })" />
+  </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 widget = originConfig.widget || {};
+  const url = ref(widget.url || "");
+  function changeConfig(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 });
+  }
+  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

@@ -20,6 +20,7 @@ import Widget from "./Widget.vue";
 import Topology from "./Topology.vue";
 import Event from "./Event.vue";
 import TimeRange from "./TimeRange.vue";
+import ThirdPartyApp from "./ThirdPartyApp.vue";
 
 export default {
   Text,
@@ -27,4 +28,5 @@ export default {
   Topology,
   Event,
   TimeRange,
+  ThirdPartyApp,
 };

src/views/dashboard/controls/Text.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="text">
     <div class="header">
       <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
         <template #reference>
@@ -77,7 +77,7 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  .topology {
+  .text {
     font-size: 12px;
     height: 100%;
     position: relative;

src/views/dashboard/controls/ThirdPartyApp.vue

@@ -0,0 +1,116 @@
+<!-- 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="text">
+    <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">
+      <iframe
+        v-if="widget.url"
+        :src="widget.url"
+        width="100%"
+        height="100%"
+        scrolling="no"
+        style="border: none"
+      ></iframe>
+      <div v-else class="tips">{{ t("iframeWidgetTip") }}</div>
+    </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";
+
+  /*global defineProps */
+  const props = defineProps({
+    data: {
+      type: Object as PropType<any>,
+      default: () => ({ graph: {} }),
+    },
+    activeIndex: { type: String, default: "" },
+  });
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+  const widget = computed(() => props.data.widget || {});
+
+  function removeTopo() {
+    dashboardStore.removeControls(props.data);
+  }
+  function editConfig() {
+    dashboardStore.setConfigPanel(true);
+    dashboardStore.selectWidget(props.data);
+  }
+</script>
+<style lang="scss" scoped>
+  .text {
+    font-size: 12px;
+    height: 100%;
+    position: relative;
+  }
+
+  .operation {
+    cursor: pointer;
+  }
+
+  .header {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+
+  .body {
+    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;
+    }
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #888;
+    width: 100%;
+    text-align: center;
+  }
+</style>

src/views/dashboard/controls/index.ts

@@ -26,6 +26,7 @@ import DemandLog from "./DemandLog.vue";
 import Event from "./Event.vue";
 import NetworkProfiling from "./NetworkProfiling.vue";
 import TimeRange from "./TimeRange.vue";
+import ThirdPartyApp from "./ThirdPartyApp.vue";
 
 export default {
   Tab,
@@ -40,4 +41,5 @@ export default {
   Event,
   NetworkProfiling,
   TimeRange,
+  ThirdPartyApp,
 };

src/views/dashboard/controls/tab.ts

@@ -25,6 +25,7 @@ import DemandLog from "./DemandLog.vue";
 import Event from "./Event.vue";
 import NetworkProfiling from "./NetworkProfiling.vue";
 import TimeRange from "./TimeRange.vue";
+import ThirdPartyApp from "./ThirdPartyApp.vue";
 
 export default {
   Widget,
@@ -38,4 +39,5 @@ export default {
   Event,
   NetworkProfiling,
   TimeRange,
+  ThirdPartyApp,
 };

src/views/dashboard/data.ts

@@ -184,6 +184,7 @@ export const AllTools = [
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 export const ServiceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -196,6 +197,7 @@ export const ServiceTools = [
   { name: "assignment", content: "Add Log", id: "addLog" },
   { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
   { name: "event", content: "Add Event", id: "addEvent" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
@@ -205,6 +207,7 @@ export const InstanceTools = [
   { name: "assignment", content: "Add Log", id: "addLog" },
   { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
   { name: "event", content: "Add Event", id: "addEvent" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
   {
     name: "timeline",
     content: "Add Network Profiling",
@@ -218,31 +221,36 @@ export const EndpointTools = [
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
-  { name: "event", content: "Add Event", id: "addEvent" },
+  { name: "event", content: "Add Event", id: "c" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 export const ProcessTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "time_range", content: "Add Time Range Text", id: "addTimeRange" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 export const ServiceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 
 export const EndpointRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 export const InstanceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
 ];
 
 export const ScopeType = [

src/views/dashboard/panel/Tool.vue

@@ -448,6 +448,9 @@ limitations under the License. -->
       case "addTimeRange":
         dashboardStore.addTabControls("TimeRange");
         break;
+      case "addIframe":
+        dashboardStore.addTabControls("ThirdPartyApp");
+        break;
       default:
         ElMessage.info("Don't support this control");
         break;
@@ -492,6 +495,9 @@ limitations under the License. -->
       case "addTimeRange":
         dashboardStore.addControl("TimeRange");
         break;
+      case "addIframe":
+        dashboardStore.addControl("ThirdPartyApp");
+        break;
       default:
         dashboardStore.addControl("Widget");
     }

vite.config.ts

@@ -85,13 +85,17 @@ export default ({ mode }: ConfigEnv): UserConfig => {
             if (id.includes("node_modules")) {
               if (id.includes("lodash")) {
                 return "lodash";
-              } else if (id.includes("echarts")) {
+              }
+              if (id.includes("echarts")) {
                 return "echarts";
-              } else if (id.includes("element-plus")) {
+              }
+              if (id.includes("element-plus")) {
                 return "element-plus";
-              } else if (id.includes("monaco-editor")) {
+              }
+              if (id.includes("monaco-editor")) {
                 return "monaco-editor";
-              } else if (id.includes("d3")) {
+              }
+              if (id.includes("d3")) {
                 return "d3";
               }
             }