From c902d9316095a897d554934b7f805a629ffa8c51 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 28 Dec 2022 18:34:57 +0800
Subject: [PATCH] fix: name

---
 src/store/modules/dashboard.ts                |  4 +-
 .../dashboard/configuration/ThirdPartyApp.vue | 85 +++++++++++++++++++
 src/views/dashboard/configuration/index.ts    |  2 +
 .../dashboard/controls/ThirdPartyApp.vue      |  2 +-
 src/views/dashboard/panel/Tool.vue            |  4 +-
 5 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 src/views/dashboard/configuration/ThirdPartyApp.vue

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index e2c068d4..4569b261 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -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", "Iframe"].includes(type)) {
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling", "ThirdPartyApp"].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", "Iframe"].includes(type)) {
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling", "ThirdPartyApp"].includes(type)) {
         newItem.h = 32;
       }
       if (type === "Text") {
diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue
new file mode 100644
index 00000000..9e09fa9f
--- /dev/null
+++ b/src/views/dashboard/configuration/ThirdPartyApp.vue
@@ -0,0 +1,85 @@
+<!-- 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("textUrl") }}</span>
+    <el-input class="input" v-model="url" size="small" @change="changeConfig({ 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 graph = originConfig.graph || {};
+  const url = ref(graph.url || "");
+  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>
diff --git a/src/views/dashboard/configuration/index.ts b/src/views/dashboard/configuration/index.ts
index 0055f828..1fb47e4f 100644
--- a/src/views/dashboard/configuration/index.ts
+++ b/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,
 };
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 73f9aab6..18fa2751 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
       </el-popover>
     </div>
     <div class="body">
-      <iframe src="/general" width="100%" height="100%"></iframe>
+      <iframe src="/general" width="100%" height="100%" scrolling="no"></iframe>
     </div>
   </div>
 </template>
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 02547c97..5c2555cc 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -449,7 +449,7 @@ limitations under the License. -->
         dashboardStore.addTabControls("TimeRange");
         break;
       case "addIframe":
-        dashboardStore.addTabControls("Iframe");
+        dashboardStore.addTabControls("ThirdPartyApp");
         break;
       default:
         ElMessage.info("Don't support this control");
@@ -496,7 +496,7 @@ limitations under the License. -->
         dashboardStore.addControl("TimeRange");
         break;
       case "addIframe":
-        dashboardStore.addControl("Iframe");
+        dashboardStore.addControl("ThirdPartyApp");
         break;
       default:
         dashboardStore.addControl("Widget");