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

refactor: update dashboard tool

Browse Source
This commit is contained in:
Qiuxia Fan
2021-12-28 10:18:18 +08:00
parent 6ee2e0dd9a
commit fde5baa42e
2 changed files with 73 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/dashboard/Edit.vue
View File

@@ -13,33 +13,7 @@ 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="dashboard-tool">
<el-tooltip class="item" effect="dark" content="Add Widget" placement="top">
<span class="icon-btn" @click="dashboardStore.addWidget">
<Icon size="sm" iconName="playlist_add" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Settings" placement="top">
<span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
<Icon size="sm" iconName="settings" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Import" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="folder_open" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Export" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="save_alt" />
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Apply" placement="top">
<span class="icon-btn">
<Icon size="sm" iconName="save" />
</span>
</el-tooltip>
</div>
<Tool />
<div class="ds-main">
<GridLayout />
<el-dialog
@@ -53,10 +27,11 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { ElDialog } from "element-plus";
import GridLayout from "./panel/Layout.vue";
import { LayoutConfig } from "@/types/dashboard";
import Tool from "./panel/Tool.vue";
import { useDashboardStore } from "@/store/modules/dashboard";
import { ElDialog, ElTooltip } from "element-plus";
const dashboardStore = useDashboardStore();
// fetch layout data from serve side
@@ -80,13 +55,6 @@ const layout: LayoutConfig[] = [
dashboardStore.setLayout(layout);
</script>
<style lang="scss" scoped>
.dashboard-tool {
text-align: right;
padding: 5px 10px;
background: rgb(240, 242, 245);
border-bottom: 1px solid #dfe4e8;
}
.ds-main {
height: calc(100% - 40px);
}
@@ -110,18 +78,6 @@ dashboardStore.setLayout(layout);
border-left: 1px solid #eee;
}
.icon-btn {
display: inline-block;
padding: 0 5px;
text-align: center;
border: 1px solid #ccc;
border-radius: 3px;
margin-left: 8px;
cursor: pointer;
background-color: #eee;
color: #666;
}
.configuration {
height: 600px;
}