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

fix: link

Browse Source
This commit is contained in:
Fine 2023-02-01 16:30:01 +08:00
parent 0c601ec7da
commit b982e769ee
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/dashboard/components/WidgetLink.vue
View File

@ -28,7 +28,7 @@ limitations under the License. -->
/> />
</div> </div>
<el-button size="small" type="primary" class="mt-10" @click="getLink">{{ t("generateLink") }}</el-button> <el-button size="small" type="primary" class="mt-10" @click="getLink">{{ t("generateLink") }}</el-button>
<div class="link mt-10" @click="viewPage">{{ widgetLink }}</div> <div v-show="widgetLink" class="link mt-10" @click="viewPage">{{ host + widgetLink }}</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -37,6 +37,7 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import router from "@/router";
const { t } = useI18n(); const { t } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
@ -45,41 +46,47 @@ limitations under the License. -->
const hasDuration = ref<boolean>(false); const hasDuration = ref<boolean>(false);
const widgetLink = ref<string>(""); const widgetLink = ref<string>("");
const dates = ref<Date[]>([]); const dates = ref<Date[]>([]);
const host = window.location.host;
function changeTimeRange(val: Date[] | any) { function changeTimeRange(val: Date[] | any) {
dates.value = val; dates.value = val;
} }
function getLink() { function getLink() {
if (!dashboardStore.selectedGrid) {
return;
}
const serviceId = selectorStore.currentService ? selectorStore.currentService.id : null; const serviceId = selectorStore.currentService ? selectorStore.currentService.id : null;
const podId = selectorStore.currentPod ? selectorStore.currentPod.id : null; const podId = selectorStore.currentPod ? selectorStore.currentPod.id : null;
const processId = selectorStore.currentProcess ? selectorStore.currentProcess.id : null; const processId = selectorStore.currentProcess ? selectorStore.currentProcess.id : null;
const destServiceId = selectorStore.currentDestService ? selectorStore.currentDestService.id : null; const destServiceId = selectorStore.currentDestService ? selectorStore.currentDestService.id : null;
const destPodId = selectorStore.currentDestPod ? selectorStore.currentDestPod.id : null; const destPodId = selectorStore.currentDestPod ? selectorStore.currentDestPod.id : null;
const destProcessId = selectorStore.currentDestProcess ? selectorStore.currentDestProcess.id : null; const destProcessId = selectorStore.currentDestProcess ? selectorStore.currentDestProcess.id : null;
const duration = hasDuration.value const duration = JSON.stringify({
? JSON.stringify({ start: dates.value[0] || appStore.duration.start,
start: dates.value[0], end: dates.value[1] || appStore.duration.endT,
end: dates.value[1], step: appStore.duration.step,
step: appStore.duration.step, utc: appStore.utc,
utc: appStore.utc, });
}) const config = JSON.stringify({
: undefined;
const config = {
type: dashboardStore.selectedGrid.type, type: dashboardStore.selectedGrid.type,
widget: dashboardStore.selectedGrid.widget, widget: dashboardStore.selectedGrid.widget,
graph: dashboardStore.selectedGrid.graph, graph: dashboardStore.selectedGrid.graph,
metrics: dashboardStore.selectedGrid.metrics, metrics: dashboardStore.selectedGrid.metrics,
metricTypes: dashboardStore.selectedGrid.metricTypes, metricTypes: dashboardStore.selectedGrid.metricTypes,
}; });
widgetLink.value = `${window.location.host}/page/${dashboardStore.entity}/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${config}/${duration}`; widgetLink.value = hasDuration.value
? `/page/${dashboardStore.entity}/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${config}/${duration}`
: `/page/${dashboardStore.entity}/${serviceId}/${podId}/${processId}/${destServiceId}/${destPodId}/${destProcessId}/${config}`;
} }
function viewPage() { function viewPage() {
window.open(widgetLink.value, "_blank"); const routeUrl = router.resolve({ path: widgetLink.value });
window.open(routeUrl.href, "_blank");
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.link { .link {
color: #999; color: #409eff;
cursor: pointer;
} }
.link-content { .link-content {

1
src/views/dashboard/controls/Widget.vue
View File

@ -166,6 +166,7 @@ limitations under the License. -->
} }
function generateLink() { function generateLink() {
dashboardStore.setWidgetLink(true); dashboardStore.setWidgetLink(true);
dashboardStore.selectWidget(props.data);
} }
watch( watch(
() => [props.data.metricTypes, props.data.metrics], () => [props.data.metricTypes, props.data.metrics],