github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add config

Browse Source
This commit is contained in:
Fine 2023-01-03 12:11:27 +08:00
parent c902d93160
commit 1d4fce9632
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/dashboard/configuration/ThirdPartyApp.vue
View File

@ -13,7 +13,7 @@ limitations under the License. -->
<template> <template>
<div class="item"> <div class="item">
<span class="label">{{ t("textUrl") }}</span> <span class="label">{{ t("textUrl") }}</span>
<el-input class="input" v-model="url" size="small" @change="changeConfig({ url })" /> <el-input class="input" v-model="url" size="small" @change="changeConfig({ url: encodeURIComponent(url) })" />
</div> </div>
<div class="footer"> <div class="footer">
<el-button size="small" @click="cancelConfig"> <el-button size="small" @click="cancelConfig">
@ -31,15 +31,19 @@ limitations under the License. -->
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const originConfig = dashboardStore.selectedGrid; const originConfig = dashboardStore.selectedGrid;
const graph = originConfig.graph || {}; const widget = originConfig.widget || {};
const url = ref(graph.url || ""); const url = ref(widget.url || "");
function changeConfig(param: { [key: string]: unknown }) { function changeConfig(param: { [key: string]: string }) {
const key = Object.keys(param)[0];
if (!key) {
return;
}
const { selectedGrid } = dashboardStore; const { selectedGrid } = dashboardStore;
const graph = { const widget = {
...selectedGrid.graph, ...dashboardStore.selectedGrid.widget,
...param, [key]: decodeURIComponent(param[key]),
}; };
dashboardStore.selectWidget({ ...selectedGrid, graph }); dashboardStore.selectWidget({ ...selectedGrid, widget });
} }
function applyConfig() { function applyConfig() {
dashboardStore.setConfigPanel(false); dashboardStore.setConfigPanel(false);

4
src/views/dashboard/controls/ThirdPartyApp.vue
View File

@ -30,11 +30,12 @@ limitations under the License. -->
</el-popover> </el-popover>
</div> </div>
<div class="body"> <div class="body">
<iframe src="/general" width="100%" height="100%" scrolling="no"></iframe> <iframe :src="widget.url" width="100%" height="100%" scrolling="no" style="border: none"></iframe>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
@ -49,6 +50,7 @@ limitations under the License. -->
}); });
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const widget = computed(() => props.data.widget || {});
function removeTopo() { function removeTopo() {
dashboardStore.removeControls(props.data); dashboardStore.removeControls(props.data);