mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-14 09:00:50 +00:00
backup Edit component
This commit is contained in:
Peter Olu
parent
6641336938
commit
09b3b324f1
107
src/views/dashboard/JbEdit.vue
Normal file
107
src/views/dashboard/JbEdit.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<!-- 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>
|
||||
<Tool v-if="dashboardStore.currentDashboard" />
|
||||
<div
|
||||
class="ds-main"
|
||||
v-if="dashboardStore.currentDashboard"
|
||||
@click="handleClick"
|
||||
:style="{ height: dashboardStore.editMode ? 'calc(100% - 45px)' : '100%' }"
|
||||
>
|
||||
<grid-layout />
|
||||
<el-dialog
|
||||
v-model="dashboardStore.showConfig"
|
||||
:title="t('editGraph')"
|
||||
fullscreen
|
||||
:destroy-on-close="true"
|
||||
@closed="dashboardStore.setConfigPanel(false)"
|
||||
>
|
||||
<component :is="dashboardStore.selectedGrid.type" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute } from "vue-router";
|
||||
import GridLayout from "./panel/Layout.vue";
|
||||
import Tool from "./panel/JbTool.vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Configuration from "./configuration";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Dashboard",
|
||||
components: { ...Configuration, GridLayout, Tool },
|
||||
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();
|
||||
|
||||
if (!p.entity) {
|
||||
if (!dashboardStore.currentDashboard) {
|
||||
return;
|
||||
}
|
||||
const { layer, entity, name } = dashboardStore.currentDashboard;
|
||||
layoutKey.value = `${layer}_${entity}_${name}`;
|
||||
}
|
||||
const c: { configuration: string; id: string } = JSON.parse(
|
||||
sessionStorage.getItem(layoutKey.value) || "{}"
|
||||
);
|
||||
const layout: any = c.configuration || {};
|
||||
dashboardStore.setLayout(layout.children || []);
|
||||
appStore.setPageTitle(layout.name);
|
||||
if (p.entity) {
|
||||
dashboardStore.setCurrentDashboard({
|
||||
layer: p.layerId,
|
||||
entity: p.entity,
|
||||
name: p.name,
|
||||
id: c.id,
|
||||
isRoot: layout.isRoot,
|
||||
});
|
||||
}
|
||||
}
|
||||
function handleClick(e: any) {
|
||||
e.stopPropagation();
|
||||
if (e.target.className === "ds-main") {
|
||||
dashboardStore.activeGridItem("");
|
||||
dashboardStore.selectWidget(null);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
handleClick,
|
||||
dashboardStore,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ds-main {
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/views/dashboard/controls/JbTrace.vue
Normal file
115
src/views/dashboard/controls/JbTrace.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<!-- 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="trace-wrapper flex-v">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
:width="100"
|
||||
v-if="dashboardStore.editMode"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="delete cp">
|
||||
<Icon iconName="ellipsis_v" size="middle" class="operation" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="tools" @click="removeWidget">
|
||||
<span>{{ t("delete") }}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="trace flex-h">
|
||||
<TraceList @show:trace="showTraceDetails" v-if="traceListActive" />
|
||||
<TraceDetail @show:list="showTraceList" v-if="!traceListActive" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import TraceList from "../related/trace/TraceList.vue";
|
||||
import TraceDetail from "../related/trace/Detail.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useTraceStore } from "@/store/modules/trace";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => ({ graph: {} }),
|
||||
},
|
||||
activeIndex: { type: String, default: "" },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const traceStore = useTraceStore();
|
||||
const traceListActive = computed(() => {
|
||||
return traceStore.currentView === "traceList";
|
||||
});
|
||||
function removeWidget() {
|
||||
dashboardStore.removeControls(props.data);
|
||||
}
|
||||
function showTraceDetails() {
|
||||
traceStore.currentView === "traceDetails";
|
||||
}
|
||||
function showTraceList() {
|
||||
traceStore.currentView === "traceList";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
dashboardStore.setTraceTools(true);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
dashboardStore.setTraceTools(false);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trace-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 5px 0;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.trace {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user