mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 19:13:58 +00:00
feat: add config panel
This commit is contained in:
Qiuxia Fan
parent
b39109eae6
commit
fea4c202b3
@ -19,6 +19,7 @@ import { store } from "@/store";
|
||||
import { GridItemData } from "@/types/dashboard";
|
||||
|
||||
interface DashboardState {
|
||||
showConfig: boolean;
|
||||
layout: GridItemData[];
|
||||
}
|
||||
|
||||
@ -26,6 +27,7 @@ export const dashboardStore = defineStore({
|
||||
id: "dashboard",
|
||||
state: (): DashboardState => ({
|
||||
layout: [],
|
||||
showConfig: false,
|
||||
}),
|
||||
actions: {
|
||||
setLayout(data: GridItemData[]) {
|
||||
@ -36,11 +38,11 @@ export const dashboardStore = defineStore({
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 12,
|
||||
h: 3,
|
||||
h: 12,
|
||||
i: String(this.layout.length),
|
||||
};
|
||||
this.layout = this.layout.map((d: GridItemData) => {
|
||||
d.y = d.y + 3;
|
||||
d.y = d.y + newWidget.h;
|
||||
return d;
|
||||
});
|
||||
this.layout.push(newWidget);
|
||||
@ -48,6 +50,9 @@ export const dashboardStore = defineStore({
|
||||
removeWidget(item: GridItemData) {
|
||||
this.layout = this.layout.filter((d: GridItemData) => d.i !== item.i);
|
||||
},
|
||||
setConfigPanel(show: boolean) {
|
||||
this.showConfig = show;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -24,39 +24,48 @@ limitations under the License. -->
|
||||
</div>
|
||||
<div class="flex-h ds-main">
|
||||
<GridLayout />
|
||||
<div class="ds-config">Configurations</div>
|
||||
<div
|
||||
class="ds-config"
|
||||
v-show="dashboardStore.showConfig"
|
||||
@click="dashboardStore.setConfigPanel(true)"
|
||||
>
|
||||
Configurations
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ElButton } from "element-plus";
|
||||
import GridLayout from "./panel/Layout.vue";
|
||||
import { GridItemData } from "@/types/dashboard";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const dashboardStore = useDashboardStore();
|
||||
// fetch layout data from serve side
|
||||
const layout: GridItemData[] = [
|
||||
{ x: 0, y: 0, w: 2, h: 2, i: "0" },
|
||||
{ x: 2, y: 0, w: 2, h: 4, i: "1" },
|
||||
{ x: 4, y: 0, w: 2, h: 5, i: "2" },
|
||||
{ x: 6, y: 0, w: 2, h: 3, i: "3" },
|
||||
{ x: 8, y: 0, w: 2, h: 3, i: "4" },
|
||||
{ x: 10, y: 0, w: 2, h: 3, i: "5" },
|
||||
{ x: 0, y: 5, w: 2, h: 5, i: "6" },
|
||||
{ x: 2, y: 5, w: 2, h: 5, i: "7" },
|
||||
{ x: 4, y: 5, w: 2, h: 5, i: "8" },
|
||||
{ x: 6, y: 3, w: 2, h: 4, i: "9" },
|
||||
{ x: 8, y: 4, w: 2, h: 4, i: "10" },
|
||||
{ x: 10, y: 4, w: 2, h: 4, i: "11" },
|
||||
{ x: 0, y: 10, w: 2, h: 5, i: "12" },
|
||||
{ x: 2, y: 10, w: 2, h: 5, i: "13" },
|
||||
{ x: 4, y: 8, w: 2, h: 4, i: "14" },
|
||||
{ x: 6, y: 8, w: 2, h: 4, i: "15" },
|
||||
{ x: 8, y: 10, w: 2, h: 5, i: "16" },
|
||||
{ x: 10, y: 4, w: 2, h: 2, i: "17" },
|
||||
{ x: 0, y: 9, w: 2, h: 3, i: "18" },
|
||||
{ x: 2, y: 6, w: 2, h: 2, i: "19" },
|
||||
{ x: 0, y: 0, w: 2, h: 12, i: "0" },
|
||||
{ x: 2, y: 0, w: 2, h: 12, i: "1" },
|
||||
{ x: 4, y: 0, w: 2, h: 15, i: "2" },
|
||||
{ x: 6, y: 0, w: 2, h: 9, i: "3" },
|
||||
{ x: 8, y: 0, w: 2, h: 9, i: "4" },
|
||||
{ x: 10, y: 0, w: 2, h: 9, i: "5" },
|
||||
{ x: 0, y: 5, w: 2, h: 15, i: "6" },
|
||||
{ x: 2, y: 5, w: 2, h: 15, i: "7" },
|
||||
{ x: 4, y: 5, w: 2, h: 15, i: "8" },
|
||||
{ x: 6, y: 3, w: 2, h: 12, i: "9" },
|
||||
{ x: 8, y: 4, w: 2, h: 12, i: "10" },
|
||||
{ x: 10, y: 4, w: 2, h: 12, i: "11" },
|
||||
{ x: 0, y: 10, w: 2, h: 15, i: "12" },
|
||||
{ x: 2, y: 10, w: 2, h: 15, i: "13" },
|
||||
{ x: 4, y: 8, w: 2, h: 12, i: "14" },
|
||||
{ x: 6, y: 8, w: 2, h: 12, i: "15" },
|
||||
{ x: 8, y: 10, w: 2, h: 15, i: "16" },
|
||||
];
|
||||
dashboardStore.setLayout(layout);
|
||||
document.addEventListener("click", setConfig, true);
|
||||
function setConfig() {
|
||||
dashboardStore.setConfigPanel(false);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-tool {
|
||||
@ -68,22 +77,15 @@ dashboardStore.setLayout(layout);
|
||||
|
||||
.ds-main {
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ds-config {
|
||||
width: 360px;
|
||||
margin: 5px 0;
|
||||
width: 340px;
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 0 2px 0 #ccc;
|
||||
text-align: center;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: #fff;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,12 +16,9 @@ limitations under the License. -->
|
||||
<grid-layout
|
||||
v-model:layout="dashboardStore.layout"
|
||||
:col-num="12"
|
||||
:row-height="30"
|
||||
:row-height="10"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:use-css-transforms="true"
|
||||
@layout-updated="layoutUpdatedEvent"
|
||||
>
|
||||
<grid-item
|
||||
@ -51,7 +48,7 @@ function layoutUpdatedEvent(newLayout: GridItemData) {
|
||||
.vue-grid-layout {
|
||||
background: #f7f9fa;
|
||||
flex-grow: 2;
|
||||
overflow: auto;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vue-grid-item:not(.vue-grid-placeholder) {
|
||||
@ -59,54 +56,4 @@ function layoutUpdatedEvent(newLayout: GridItemData) {
|
||||
box-shadow: 0px 1px 4px 0px #00000029;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.vue-grid-item .resizing {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.vue-grid-item .static {
|
||||
background: #cce;
|
||||
}
|
||||
|
||||
.vue-grid-item .text {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .no-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vue-grid-item .minMax {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vue-grid-item .add {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vue-draggable-handle {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
|
||||
no-repeat;
|
||||
background-position: bottom right;
|
||||
padding: 0 8px 8px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,7 +17,12 @@ limitations under the License. -->
|
||||
<div class="header flex-h">
|
||||
<div>title</div>
|
||||
<div class="operations">
|
||||
<Icon class="mr-5" size="sm" iconName="createmode_editedit" />
|
||||
<Icon
|
||||
class="mr-5"
|
||||
size="sm"
|
||||
iconName="createmode_editedit"
|
||||
@click="setConfig"
|
||||
/>
|
||||
<Icon size="sm" iconName="clearclose" @click="removeWidget" />
|
||||
</div>
|
||||
</div>
|
||||
@ -37,6 +42,9 @@ const dashboardStore = useDashboardStore();
|
||||
function removeWidget() {
|
||||
dashboardStore.removeWidget(props.item);
|
||||
}
|
||||
function setConfig() {
|
||||
dashboardStore.setConfigPanel(true);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.widget {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user