You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by ha...@apache.org on 2022/10/18 02:23:48 UTC
[skywalking-banyandb] branch main updated: This PR is mainly used to solve the bugs caused by upgrading the technology stack (#192)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git
The following commit(s) were added to refs/heads/main by this push:
new 94b3b08 This PR is mainly used to solve the bugs caused by upgrading the technology stack (#192)
94b3b08 is described below
commit 94b3b08765491b20ecce663c63698e86a7d1ef97
Author: Wu ChuSheng <a1...@gmail.com>
AuthorDate: Tue Oct 18 10:23:43 2022 +0800
This PR is mainly used to solve the bugs caused by upgrading the technology stack (#192)
* Fix the bug that the DataBase page does not display content
* Fix the bug in the logic function of the side navigation bar
* Fix the bug that the icon disappears after right clicking the menu item
* Fix the bug that the database main page data is not displayed
* Cancel data query function
* change proxy url
* update license
* Fix image path
Signed-off-by: Gao Hongtao <ha...@gmail.com>
Co-authored-by: Gao Hongtao <ha...@gmail.com>
---
dist/LICENSE | 2 +-
ui/LICENSE | 2 +-
ui/package-lock.json | 13 +-
ui/package.json | 1 +
ui/src/App.vue | 10 +-
ui/src/assets/banyandb_small.jpg | Bin 0 -> 4738 bytes
.../Aside/components/DialogResources/index.vue | 53 ++---
.../RightMenu/components/right-menu-item.vue | 6 +
.../Database/Aside/components/RightMenu/index.vue | 1 -
ui/src/components/Database/Aside/index.vue | 228 +++++++++++----------
.../Database/Main/components/DataTable/index.vue | 105 ++++++----
.../Database/Main/components/DrawerRight/index.vue | 66 +++---
.../Main/components/SecondNavigation/index.vue | 51 +++--
.../Main/components/TagNavigation/index.vue | 6 +-
ui/src/components/Database/Main/index.vue | 60 +++---
ui/src/components/Header/index.vue | 33 +--
ui/src/main.js | 19 +-
ui/src/utils/axios.js | 7 +-
ui/src/views/DatabaseView.vue | 7 +-
ui/vite.config.js | 2 +-
20 files changed, 373 insertions(+), 299 deletions(-)
diff --git a/dist/LICENSE b/dist/LICENSE
index 19ffc3a..89a837d 100644
--- a/dist/LICENSE
+++ b/dist/LICENSE
@@ -396,7 +396,7 @@ MIT licenses
@babel/parser 7.19.1 MIT
@ctrl/tinycolor 3.4.1 MIT
- @element-plus/icons-vue 2.0.9 MIT
+ @element-plus/icons-vue 2.0.10 MIT
@floating-ui/core 1.0.1 MIT
@floating-ui/dom 1.0.1 MIT
@popperjs/core 2.11.7 MIT
diff --git a/ui/LICENSE b/ui/LICENSE
index 322a8fe..4ea63c0 100644
--- a/ui/LICENSE
+++ b/ui/LICENSE
@@ -42,7 +42,7 @@ MIT licenses
@babel/parser 7.19.1 MIT
@ctrl/tinycolor 3.4.1 MIT
- @element-plus/icons-vue 2.0.9 MIT
+ @element-plus/icons-vue 2.0.10 MIT
@floating-ui/core 1.0.1 MIT
@floating-ui/dom 1.0.1 MIT
@popperjs/core 2.11.7 MIT
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 646c6b7..690916e 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,6 +8,7 @@
"name": "ui",
"version": "0.1.0",
"dependencies": {
+ "@element-plus/icons-vue": "^2.0.10",
"axios": "^0.27.2",
"echarts": "^5.3.3",
"element-plus": "^2.2.17",
@@ -54,9 +55,9 @@
}
},
"node_modules/@element-plus/icons-vue": {
- "version": "2.0.9",
- "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz",
- "integrity": "sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==",
+ "version": "2.0.10",
+ "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+ "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
"peerDependencies": {
"vue": "^3.2.0"
}
@@ -1719,9 +1720,9 @@
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
},
"@element-plus/icons-vue": {
- "version": "2.0.9",
- "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz",
- "integrity": "sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==",
+ "version": "2.0.10",
+ "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+ "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
"requires": {}
},
"@esbuild/linux-loong64": {
diff --git a/ui/package.json b/ui/package.json
index cbd11d5..6258cf0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,6 +10,7 @@
"preview": "vite preview --port 4173"
},
"dependencies": {
+ "@element-plus/icons-vue": "^2.0.10",
"axios": "^0.27.2",
"echarts": "^5.3.3",
"element-plus": "^2.2.17",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index e40bf6a..6695c2b 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -19,6 +19,7 @@
<script setup>
import HeaderComponent from './components/Header/index.vue'
+import RightMenuComponent from './components/Database/Aside/components/RightMenu/index.vue'
import { computed } from '@vue/runtime-core'
import stores from './stores/index'
import { useRouter, useRoute } from 'vue-router'
@@ -27,7 +28,8 @@ import { getCurrentInstance } from "@vue/runtime-core";
const route = useRoute()
const router = useRouter()
const { menuState, header } = stores()
-const $bus = getCurrentInstance().appContext.config.globalProperties.$bus
+const { proxy } = getCurrentInstance()
+const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
const showRightMenu = computed(() => {
return menuState.showRightMenu
})
@@ -62,9 +64,8 @@ const initData = (() => {
const appMouseDown = () => {
menuState.changeShowRightMenu(false)
}
-
const handleRightItem = (index) => {
- $bus.$emit('handleRightItem', index)
+ $bus.emit('handleRightItem', index)
}
</script>
@@ -92,9 +93,12 @@ const handleRightItem = (index) => {
</template>
<style lang="scss">
+html,
body {
padding: 0;
margin: 0;
+ width: 100%;
+ height: 100%;
}
#app {
diff --git a/ui/src/assets/banyandb_small.jpg b/ui/src/assets/banyandb_small.jpg
new file mode 100644
index 0000000..eeca8f5
Binary files /dev/null and b/ui/src/assets/banyandb_small.jpg differ
diff --git a/ui/src/components/Database/Aside/components/DialogResources/index.vue b/ui/src/components/Database/Aside/components/DialogResources/index.vue
index 461fda7..01e236d 100644
--- a/ui/src/components/Database/Aside/components/DialogResources/index.vue
+++ b/ui/src/components/Database/Aside/components/DialogResources/index.vue
@@ -18,7 +18,7 @@
-->
<script setup>
-import { watch, ref } from 'vue'
+import { watch, ref, reactive } from 'vue'
const rule = {
name: [
{
@@ -31,7 +31,7 @@ const rule = {
}
]
}
-defineProps({
+const props = defineProps({
visible: {
type: Boolean,
default: false,
@@ -53,25 +53,16 @@ defineProps({
}
})
-let dialogVisible = false
+let data = reactive({
+ dialogVisible: false,
+ form: {
+ metadata: {
+ group: '',
+ name: ''
+ }
+ }
+})
let rules = rule
-let form = {
- metadata: {
- group: '',
- name: ''
- }/*,
- tagFamilies: [
- {
- name: '',
- tags: [
- {
- name: '',
- type: ''
- }
- ]
- }
- ]*/
-}
let tableData = [{
tagFamilies: 'searchable',
name: 'stream-ids',
@@ -108,17 +99,17 @@ let tableData = [{
const ruleForm = ref()
const emit = defineEmits(['confirm', 'cancel'])
-watch(() => visible, () => {
- dialogVisible = visible
+watch(() => props.visible, () => {
+ data.dialogVisible = props.visible
})
-watch(() => group, () => {
- form.metadata.group = group
+watch(() => props.group, () => {
+ data.form.metadata.group = props.group
})
function confirmForm() {
- ruleForm.validate((valid) => {
+ ruleForm.value.validate((valid) => {
if (valid) {
- emit('confirm', form)
+ emit('confirm', data.form)
}
})
}
@@ -145,15 +136,15 @@ function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
<template>
<div>
- <el-dialog width="25%" center :title="`${operation} ${type}`" @close="cancelForm" :visible.sync="dialogVisible">
- <el-form ref="ruleForm" :rules="rules" :model="form.metadata" label-position="left">
+ <el-dialog width="25%" center :title="`${operation} ${type}`" @close="cancelForm" v-model="data.dialogVisible">
+ <el-form ref="ruleForm" :rules="rules" :model="data.form.metadata" label-position="left">
<el-form-item label="group" label-width="100px" prop="group">
- <el-input disabled v-model="form.metadata.group" autocomplete="off" style="width: 300px;">
+ <el-input disabled v-model="data.form.metadata.group" style="width: 300px;">
</el-input>
</el-form-item>
<el-form-item label="name" label-width="100px" prop="name">
- <el-input :disabled="operation == 'edit'" v-model="form.metadata.name" autocomplete="off"
- style="width: 300px;"></el-input>
+ <el-input :disabled="operation == 'edit'" v-model="data.form.metadata.name" style="width: 300px;">
+ </el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
diff --git a/ui/src/components/Database/Aside/components/RightMenu/components/right-menu-item.vue b/ui/src/components/Database/Aside/components/RightMenu/components/right-menu-item.vue
index ad68f95..383626e 100644
--- a/ui/src/components/Database/Aside/components/RightMenu/components/right-menu-item.vue
+++ b/ui/src/components/Database/Aside/components/RightMenu/components/right-menu-item.vue
@@ -38,6 +38,12 @@ function handleLeave() {
<div class="flex right-menu-item align-item-center pointer" @mouseover="handleOver" @mouseleave="handleLeave"
:style="{ backgroundColor: bdColor, color: colorStr}" @click="$emit('handleRightItem')">
<i :class="icon"></i>
+ <el-icon>
+ <Folder v-if="icon === 'el-icon-folder'" />
+ <Document v-if="icon === 'el-icon-document'" />
+ <RefreshRight v-if="icon === 'el-icon-refresh-right'" />
+ <Delete v-if="icon === 'el-icon-delete'" />
+ </el-icon>
<div style="width: 70%;" class="text-overflow-hidden margin-left-small">{{ name }}</div>
</div>
</template>
diff --git a/ui/src/components/Database/Aside/components/RightMenu/index.vue b/ui/src/components/Database/Aside/components/RightMenu/index.vue
index 59d16f4..bf964e1 100644
--- a/ui/src/components/Database/Aside/components/RightMenu/index.vue
+++ b/ui/src/components/Database/Aside/components/RightMenu/index.vue
@@ -20,7 +20,6 @@
<script setup>
import RightMenuItem from './components/right-menu-item.vue'
function handle() {
- console.log(11111)
}
defineProps({
rightMenuList: Array
diff --git a/ui/src/components/Database/Aside/index.vue b/ui/src/components/Database/Aside/index.vue
index e22681c..75a73df 100644
--- a/ui/src/components/Database/Aside/index.vue
+++ b/ui/src/components/Database/Aside/index.vue
@@ -21,15 +21,17 @@
import stores from '../../../stores/index'
import { getGroupList, getStreamOrMeasureList, deleteStreamOrMeasure, deleteGroup, createGroup, editGroup, createResources } from '@/api/index'
import { ElMessage } from 'element-plus'
-import RightMenuComponent from './components/RightMenu/index.vue'
import DialogResourcesComponent from './components/DialogResources/index.vue'
import { getCurrentInstance } from "@vue/runtime-core"
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
import { computed } from '@vue/runtime-core'
-const $loading = getCurrentInstance().appContext.config.globalProperties.$loading
+
+const { proxy } = getCurrentInstance()
+const $loadingCreate = getCurrentInstance().appContext.config.globalProperties.$loadingCreate
+const $loadingClose = proxy.$loadingClose
// eventBus
-const $bus = getCurrentInstance().appContext.config.globalProperties.$bus
+const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
const { ctx: that } = getCurrentInstance()
const { aside, tags, menuState } = stores()
const ruleForm = ref()
@@ -84,35 +86,37 @@ const currentMenu = computed(() => {
})
// data
-let groupLists = []
+let data = reactive({
+ groupLists: [],
+ rightClickType: 'group', // right click group or Resources
+ dialogVisible: false, // delete dialog
+ dialogGroupVisible: false, // group dialog
+ dialogResourcesVisible: false, // Resources dialog
+ setGroup: 'create', // group dialog is create or edit
+ operation: 'create', // Resources dialog is create or edit
+ type: 'stream', // Resources dialog is stream or measure
+ group: '',
+ groupForm: { // group dialog form
+ name: null,
+ catalog: 'CATALOG_STREAM'
+ }
+})
let rightMenuListTwo = list1 // right click group menu
let rightMenuListThree = list2 // right click Resources menu
-rightGroupIndex: 0 // right click group list index
+let rightGroupIndex = 0 // right click group list index
let rightChildIndex = 0 // right click Resources list index
-let rightClickType = 'group' // right click group or Resources
-let dialogVisible = false // delete dialog
-let dialogGroupVisible = false // group dialog
-let dialogResourcesVisible = false // Resources dialog
-let setGroup = 'create' // group dialog is create or edit
-let operation = 'create' // Resources dialog is create or edit
-let type = 'stream' // Resources dialog is stream or measure
-let group = ''
-let groupForm = { // group dialog form
- name: null,
- catalog: 'CATALOG_STREAM'
-}
let rules = rule // group dialog form rules
// methods
function getGroupLists() {
- $loading.create()
+ $loadingCreate()
getGroupList()
.then(res => {
if (res.status == 200) {
let group = res.data.group
let length = group.length
- groupLists = group
- group.forEach((item, index) => {
+ data.groupLists = group
+ data.groupLists.forEach((item, index) => {
let catalog = item.catalog
let type = catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
let name = item.metadata.name
@@ -124,13 +128,16 @@ function getGroupLists() {
})
.finally(() => {
if (length - 1 == index) {
- $loading.close()
+ $loadingClose()
}
that.$forceUpdate()
})
})
}
})
+ .finally(() => {
+ $loadingClose()
+ })
}
function stopPropagation(e) {
@@ -147,14 +154,14 @@ function stopPropagation(e) {
*/
function rightClick(e, index, indexChild) {
menuState.changeRightMenuList(rightMenuListThree)
- rightClickType = 'resources'
+ data.rightClickType = 'resources'
rightGroupIndex = index
rightChildIndex = indexChild
openRightMenu(e)
}
function rightClickGroup(e, index) {
menuState.changeRightMenuList(rightMenuListTwo)
- rightClickType = 'group'
+ data.rightClickType = 'group'
rightGroupIndex = index
openRightMenu(e)
}
@@ -169,12 +176,12 @@ function openRightMenu(e) {
* open stream or measure
*/
function openResources(index, indexChildren) {
- let item = groupLists[index].children[indexChildren]
+ let item = data.groupLists[index].children[indexChildren]
/**
* Todo
* Measure or Stream?
*/
- if (groupLists[index].catalog == "CATALOG_MEASURE") {
+ if (data.groupLists[index].catalog == "CATALOG_MEASURE") {
item.metadata.type = "measure"
} else {
item.metadata.type = "stream"
@@ -186,20 +193,21 @@ function openResources(index, indexChildren) {
* click right menu item
*/
function handleRightItem(index) {
- if (rightClickType == 'group') {
+ if (data.rightClickType == 'group') {
// right click group
+
let rightName = rightMenuListTwo[index].name
switch (rightName) {
case 'new group':
- setGroup = 'create'
+ data.setGroup = 'create'
openCreateGroup()
break
case 'edit group':
- setGroup = 'edit'
+ data.setGroup = 'edit'
openEditGroup()
break
case 'new resources':
- operation = 'create'
+ data.operation = 'create'
openResourcesDialog()
break
case 'refresh':
@@ -225,12 +233,12 @@ function handleRightItem(index) {
* click right menu delete Resources
*/
function openDeleteDialog() {
- dialogVisible = true
+ data.dialogVisible = true
}
function deleteGroupOrResources() {
- let group = groupLists[rightGroupIndex].metadata.name
- let type = groupLists[rightGroupIndex].catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
- if (rightClickType == 'group') {
+ let group = data.groupLists[rightGroupIndex].metadata.name
+ let type = data.groupLists[rightGroupIndex].catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
+ if (data.rightClickType == 'group') {
// delete group
deleteGroupFunc(group, type)
} else {
@@ -239,10 +247,11 @@ function deleteGroupOrResources() {
}
}
function deleteGroupFunc(group, type) {
- let children = groupLists[rightGroupIndex].children
+ let children = data.groupLists[rightGroupIndex].children
// Check whether the Resources is open
for (let i = 0; i < children.length; i++) {
let Resources = children[i]
+ let tagsList = JSON.parse(JSON.stringify(tags.tagsList))
let index = tagsList.findIndex((item) => item.metadata.group === group && item.metadata.type === type && item.metadata.name === Resources.metadata.name)
if (index != -1) {
ElMessage({
@@ -250,12 +259,12 @@ function deleteGroupFunc(group, type) {
type: "warning",
duration: 5000
})
- dialogVisible = false
+ data.dialogVisible = false
return
}
}
// delete group
- $loading.create()
+ $loadingCreate()
deleteGroup(group)
.then((res) => {
if (res.status == 200) {
@@ -270,13 +279,14 @@ function deleteGroupFunc(group, type) {
}
})
.finally(() => {
- $loading.close()
- dialogVisible = false
+ $loadingClose()
+ data.dialogVisible = false
})
}
function deleteResources(group, type) {
- let name = groupLists[rightGroupIndex].children[rightChildIndex].metadata.name
+ let name = data.groupLists[rightGroupIndex].children[rightChildIndex].metadata.name
// Check whether the Resources is open
+ let tagsList = JSON.parse(JSON.stringify(tags.tagsList))
let index = tagsList.findIndex((item) => item.metadata.group === group && item.metadata.type === type && item.metadata.name === name)
if (index != -1) {
ElMessage({
@@ -284,11 +294,11 @@ function deleteResources(group, type) {
type: "warning",
duration: 5000
})
- dialogVisible = false
+ data.dialogVisible = false
return
}
// delete Resources
- $loading.create()
+ $loadingCreate()
deleteStreamOrMeasure(type, group, name)
.then((res) => {
if (res.status == 200) {
@@ -303,8 +313,8 @@ function deleteResources(group, type) {
}
})
.finally(() => {
- $loading.close()
- dialogVisible = false
+ $loadingClose()
+ data.dialogVisible = false
})
}
@@ -312,33 +322,33 @@ function deleteResources(group, type) {
* click right menu 'new group' or 'edit group'
*/
function openCreateGroup() {
- dialogGroupVisible = true
+ data.dialogGroupVisible = true
}
function openEditGroup() {
- let name = groupLists[rightGroupIndex].metadata.name
- let catalog = groupLists[rightGroupIndex].catalog
- groupForm.name = name
- groupForm.catalog = catalog
- dialogGroupVisible = true
+ let name = data.groupLists[rightGroupIndex].metadata.name
+ let catalog = data.groupLists[rightGroupIndex].catalog
+ data.groupForm.name = name
+ data.groupForm.catalog = catalog
+ data.dialogGroupVisible = true
}
// create group or edit group
function confirmForm() {
- setGroup == 'create' ? createGroupFunc() : editGroupFunc()
+ data.setGroup == 'create' ? createGroupFunc() : editGroupFunc()
}
function createGroupFunc() {
- ruleForm.validate((valid) => {
+ ruleForm.value.validate((valid) => {
if (valid) {
- let data = {
+ let dataList = {
group: {
metadata: {
group: "",
- name: groupForm.name
+ name: data.groupForm.name
},
- catalog: groupForm.catalog
+ catalog: data.groupForm.catalog
}
}
- $loading.create()
- createGroup(data)
+ $loadingCreate()
+ createGroup(dataList)
.then((res) => {
if (res.status == 200) {
getGroupLists()
@@ -350,27 +360,27 @@ function createGroupFunc() {
}
})
.finally(() => {
- dialogGroupVisible = false
- $loading.close()
+ data.dialogGroupVisible = false
+ $loadingClose()
})
}
})
}
function editGroupFunc() {
- let name = groupLists[rightGroupIndex].metadata.name
- ruleForm.validate((valid) => {
+ let name = data.groupLists[rightGroupIndex].metadata.name
+ ruleForm.value.validate((valid) => {
if (valid) {
- let data = {
+ let dataList = {
group: {
metadata: {
group: "",
- name: groupForm.name
+ name: data.groupForm.name
},
- catalog: groupForm.catalog
+ catalog: data.groupForm.catalog
}
}
- $loading.create()
- editGroup(name, data)
+ $loadingCreate()
+ editGroup(name, dataList)
.then((res) => {
if (res.status == 200) {
getGroupLists()
@@ -382,15 +392,15 @@ function editGroupFunc() {
}
})
.finally(() => {
- dialogGroupVisible = false
- $loading.close()
+ data.dialogGroupVisible = false
+ $loadingClose()
})
}
})
}
// init form data
function clearGroupForm() {
- groupForm = {
+ data.groupForm = {
name: null,
catalog: 'CATALOG_STREAM'
}
@@ -401,21 +411,21 @@ function clearGroupForm() {
*/
function openResourcesDialog() {
// the group is stream or measure
- let type = groupLists[rightGroupIndex].catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
- let group = groupLists[rightGroupIndex].metadata.name
- group = group
- type = type
- dialogResourcesVisible = true
+ let type = data.groupLists[rightGroupIndex].catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
+ let group = data.groupLists[rightGroupIndex].metadata.name
+ data.group = group
+ data.type = type
+ data.dialogResourcesVisible = true
}
function cancelResourcesDialog() {
- dialogResourcesVisible = false
+ data.dialogResourcesVisible = false
}
function confirmResourcesDialog(form) {
- let type = groupLists[rightGroupIndex].catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
- let data = {}
- data[type] = form
- $loading.create()
- createResources(type, data)
+ let type = data.groupLists[rightGroupIndex].catalog == 'CATALOG_MEASURE' ? 'measure' : 'stream'
+ let dataList = {}
+ dataList[type] = form
+ $loadingCreate()
+ createResources(type, dataList)
.then((res) => {
if (res.status == 200) {
getGroupLists()
@@ -427,14 +437,18 @@ function confirmResourcesDialog(form) {
}
})
.finally(() => {
- dialogResourcesVisible = false
- $loading.close()
+ data.dialogResourcesVisible = false
+ $loadingClose()
})
}
+function cancelCreateEditDialog() {
+ clearGroupForm()
+ data.dialogGroupVisible = false
+}
// get group list
getGroupLists()
// monitor click right menu item
-$bus.$on('handleRightItem', (index) => {
+$bus.on('handleRightItem', (index) => {
handleRightItem(index)
})
</script>
@@ -443,22 +457,25 @@ $bus.$on('handleRightItem', (index) => {
<div style="width:100%; height:100%">
<el-menu :default-active="currentMenu ? currentMenu.metadata.group + currentMenu.metadata.name : ''"
active-text-color="#6E38F7" style="height: 100%;" :collapse="isCollapse" :collapse-transition="false">
- <div v-for="(item, index) in groupLists" :key="item.metadata.name"
+ <div v-for="(item, index) in data.groupLists" :key="item.metadata.name"
@contextmenu.prevent="rightClickGroup($event, index)">
<el-sub-menu :index="item.metadata.name + '-' + index" :disabled="item.catalog == 'CATALOG_MEASURE'">
- <template slot="title">
- <i class="el-icon-folder"></i>
- <span slot="title" :title="item.metadata.name" style="width: 70%"
- class="text-overflow-hidden">{{
- item.metadata.name
- }}</span>
+ <template #title>
+ <el-icon>
+ <Folder />
+ </el-icon>
+ <div slot="title" :title="item.metadata.name" style="width: 70%" class="text-overflow-hidden">{{
+ item.metadata.name
+ }}</div>
</template>
<div v-for="(itemChildren, indexChildren) in item.children" :key="itemChildren.metadata.name">
<div @contextmenu.prevent="rightClick($event, index, indexChildren)">
<el-menu-item :index="itemChildren.metadata.group + itemChildren.metadata.name"
@click="openResources(index, indexChildren)">
- <template slot="title">
- <i class="el-icon-document"></i>
+ <template #title>
+ <el-icon>
+ <Document />
+ </el-icon>
<span slot="title" :title="itemChildren.metadata.name" style="width: 90%"
class="text-overflow-hidden">{{ itemChildren.metadata.name }}</span>
</template>
@@ -468,34 +485,35 @@ $bus.$on('handleRightItem', (index) => {
</el-sub-menu>
</div>
</el-menu>
- <el-dialog title="Tips" :visible.sync="dialogVisible" width="25%" center>
- <span>Are you sure to delete this {{rightClickType}}?</span>
+ <el-dialog title="Tips" v-model="data.dialogVisible" width="25%" center>
+ <span>Are you sure to delete this {{data.rightClickType}}?</span>
<span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">cancel</el-button>
+ <el-button @click="data.dialogVisible = false">cancel</el-button>
<el-button type="primary" @click="deleteGroupOrResources">delete</el-button>
</span>
</el-dialog>
- <el-dialog width="25%" center :title="`${setGroup} group`" :visible.sync="dialogGroupVisible">
- <el-form ref="ruleForm" :rules="rules" :model="groupForm" label-position="left">
- <el-form-item label="group name" label-width="100px" prop="name">
- <el-input :disabled="setGroup == 'edit'" v-model="groupForm.name" autocomplete="off"
+ <el-dialog width="25%" center :title="`${data.setGroup} group`" v-model="data.dialogGroupVisible">
+ <el-form ref="ruleForm" :rules="rules" :model="data.groupForm" label-position="left">
+ <el-form-item label="group name" label-width="120px" prop="name">
+ <el-input :disabled="data.setGroup == 'edit'" v-model="data.groupForm.name" autocomplete="off"
style="width: 300px;"></el-input>
</el-form-item>
- <el-form-item label="group type" label-width="100px" prop="catalog">
- <el-select v-model="groupForm.catalog" style="width: 300px;" placeholder="please select">
+ <el-form-item label="group type" label-width="120px" prop="catalog">
+ <el-select v-model="data.groupForm.catalog" style="width: 300px;" placeholder="please select">
<el-option label="CATALOG_STREAM" value="CATALOG_STREAM"></el-option>
<el-option label="CATALOG_MEASURE" value="CATALOG_MEASURE"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
- <el-button @click="dialogGroupVisible = false">cancel</el-button>
- <el-button type="primary" @click="confirmForm">{{setGroup}}
+ <el-button @click="cancelCreateEditDialog">cancel</el-button>
+ <el-button type="primary" @click="confirmForm">{{data.setGroup}}
</el-button>
</div>
</el-dialog>
- <dialog-resources-component :visible.sync="dialogResourcesVisible" :group="group" :operation="operation"
- :type="type" @cancel="cancelResourcesDialog" @confirm="confirmResourcesDialog"></dialog-resources-component>
+ <dialog-resources-component :visible.sync="data.dialogResourcesVisible" :group="data.group"
+ :operation="data.operation" :type="data.type" @cancel="cancelResourcesDialog"
+ @confirm="confirmResourcesDialog"></dialog-resources-component>
</div>
</template>
diff --git a/ui/src/components/Database/Main/components/DataTable/index.vue b/ui/src/components/Database/Main/components/DataTable/index.vue
index 8927d92..40ccbe7 100644
--- a/ui/src/components/Database/Main/components/DataTable/index.vue
+++ b/ui/src/components/Database/Main/components/DataTable/index.vue
@@ -20,38 +20,51 @@
<script setup>
import stores from '@/stores/index'
import { getStreamOrMeasure, getTableList } from '@/api/index'
-import { computed } from '@vue/runtime-core'
+import { computed, reactive } from '@vue/runtime-core'
import { getCurrentInstance } from "@vue/runtime-core"
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
+const { proxy } = getCurrentInstance()
+const $loadingClose = proxy.$loadingClose
+const $loadingCreate = proxy.$loadingCreate
+const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
-const $bus = getCurrentInstance().appContext.config.globalProperties.$bus
const { tags } = stores()
const currentMenu = computed(() => {
return tags.currentMenu
})
const type = computed(() => {
- return currentMenu.metadata.type
+ return tags.currentMenu && tags.currentMenu.metadata ? tags.currentMenu.metadata.type : ''
})
const group = computed(() => {
- return currentMenu.metadata.group
+ return tags.currentMenu && tags.currentMenu.metadata ? tags.currentMenu.metadata.group : ''
})
const name = computed(() => {
- return currentMenu.metadata.name
+ return tags.currentMenu && tags.currentMenu.metadata ? tags.currentMenu.metadata.name : ''
})
const multipleTable = ref()
-
//data
-let total = 25
-let queryInfo = {
+let data = reactive({
+ loading: false,
+ total: 25,
+ queryInfo: {
+ pagenum: 1,
+ pagesize: 6
+ },
+ tableTags: [],
+ tableData: [],
+})
+// let total = 25
+/* let queryInfo = {
pagenum: 1,
pagesize: 6
-}
-let tableTags = []
-let tableData = []
+} */
+// let tableTags = []
+// let tableData = []
let multipleSelection = []
let checkAllFlag = false
let fileData = {}
-let loading = false
+// let loading = false
let index = 0
let param = {
metadata: {
@@ -78,10 +91,10 @@ let param = {
}
}
-watch(() => currentMenu, () => {
+watch(() => tags.currentMenu, () => {
initData()
})
-watch(() => tableTags, () => {
+watch(() => data.tableTags, () => {
let tagFamily = fileData.tagFamilies[index]
let tagsList = []
tagFamily.tags.forEach((item) => {
@@ -92,23 +105,23 @@ watch(() => tableTags, () => {
param.criteria[0].tagFamilyName = tagFamily.name
})
-$bus.$on('checkAll', () => {
+$bus.on('checkAll', () => {
if (!checkAllFlag) {
- tableData.forEach(row => {
+ data.tableData.forEach(row => {
multipleTable.toggleRowSelection(row)
})
checkAllFlag = true
}
})
-$bus.$on('checkNone', () => {
+$bus.on('checkNone', () => {
multipleTable.clearSelection()
})
-$bus.$on('changeTagFamilies', (i) => {
+$bus.on('changeTagFamilies', (i) => {
index = i
- tableTags = fileData.tagFamilies[i].tags
+ data.tableTags = fileData.tagFamilies[i].tags
getTable()
})
-$bus.$on('refresh', () => {
+$bus.on('refresh', () => {
initData()
})
@@ -119,40 +132,43 @@ const emit = defineEmits(['drawerRight'])
* init data
*/
function initData() {
- this.$loading.create()
- getStreamOrMeasure(type, group, name)
+ if (!currentMenu.value) {
+ return
+ }
+ $loadingCreate()
+ getStreamOrMeasure(type.value, group.value, name.value)
.then((res) => {
if (res.status == 200) {
- fileData = res.data[type]
+ fileData = res.data[type.value]
index = 0
- tableTags = fileData.tagFamilies[0].tags
+ data.tableTags = fileData.tagFamilies[0].tags
emit('drawerRight', fileData)
setTagFamily()
getTable()
}
})
.finally(() => {
- this.$loading.close()
+ $loadingClose()
})
}
/**
* get table data
*/
function getTable() {
- loading = true
- let param = param
- param.offset = queryInfo.pagenum
- param.limit = queryInfo.pagesize
- param.metadata = fileData.metadata
- getTableList(param)
+ //data.loading = true
+ let paramList = param
+ paramList.offset = data.queryInfo.pagenum
+ paramList.limit = data.queryInfo.pagesize
+ paramList.metadata = fileData.metadata
+ /* getTableList(paramList)
.then((res) => {
if (res.status == 200) {
- tableData = res.data.elements
+ data.tableData = res.data.elements
}
})
.finally(() => {
- loading = false
- })
+ data.loading = false
+ }) */
}
/**
* sort table data
@@ -168,33 +184,34 @@ function setTagFamily() {
let tagOptions = tagFamilies.map((item, index) => {
return { label: item.name, value: index }
})
- $bus.$emit('setOptions', tagOptions)
+ $bus.emit('setOptions', tagOptions)
}
function handleSelectionChange(val) {
multipleSelection = val;
}
function handleSizeChange() { }
function handleCurrentChange() { }
+initData()
</script>
<template>
<div>
- <el-table v-loading="loading" element-loading-text="loading" element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.8)" ref="multipleTable" max-height=700 stripe :data="tableData"
- highlight-current-row tooltip-effect="dark" @selection-change="handleSelectionChange" border
- empty-text="No data yet">
+ <el-table v-loading="data.loading" element-loading-text="loading" element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.8)" ref="multipleTable" max-height=700 stripe
+ :data="data.tableData" highlight-current-row tooltip-effect="dark" @selection-change="handleSelectionChange"
+ border empty-text="No data yet">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" label="number" width="80">
</el-table-column>
- <el-table-column v-for="item in tableTags" sortable :sort-change="sortChange" :key="item.name"
+ <el-table-column v-for="item in data.tableTags" sortable :sort-change="sortChange" :key="item.name"
:label="item.name" :prop="item.name">
</el-table-column>
</el-table>
- <el-pagination v-if="tableData.length > 0" class="margin-top-bottom" @size-change="handleSizeChange"
- @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[6, 12, 18, 24]"
- :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
+ <el-pagination v-if="data.tableData.length > 0" class="margin-top-bottom" @size-change="handleSizeChange"
+ @current-change="handleCurrentChange" :current-page="data.queryInfo.pagenum" :page-sizes="[6, 12, 18, 24]"
+ :page-size="data.queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="data.total">
</el-pagination>
</div>
</template>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/components/DrawerRight/index.vue b/ui/src/components/Database/Main/components/DrawerRight/index.vue
index e742488..a2a6e34 100644
--- a/ui/src/components/Database/Main/components/DrawerRight/index.vue
+++ b/ui/src/components/Database/Main/components/DrawerRight/index.vue
@@ -18,40 +18,49 @@
-->
<script setup>
-import { computed, watch } from '@vue/runtime-core'
+import { computed, reactive, watch } from '@vue/runtime-core'
import DetailListComponent from './components/detail-list.vue'
import DetailTableComponent from './components/detail-table.vue'
-defineProps({
+const props = defineProps({
fileData: {
type: Object,
}
})
const emit = defineEmits(['closeDetail'])
// data
-let tagFamily = 0
-let options = []
-let closeColor = 'var(--color-main-font)'
-let closeBackGroundColor = 'var(--color-white)'
-let detailList = []
+let data = reactive({
+ closeColor: 'var(--color-main-font)',
+ closeBackGroundColor: 'var(--color-white)',
+ detailList: [],
+ options: [],
+ tagFamily: 0
+})
const tableData = computed(() => {
- let tags = fileData.tagFamilies[tagFamily].tags
- return tags.map((item) => {
+ console.log('tableData')
+ let tags = props.fileData.tagFamilies[data.tagFamily].tags
+ console.log(tags)
+ let arr = tags.map((item) => {
return { tags: item.name, type: item.type }
})
+ console.log('arr', arr)
+ return arr
})
-watch(() => fileData, () => {
- options = fileData.tagFamilies.map((item, index) => {
+watch(() => props.fileData, () => {
+ data.options = props.fileData.tagFamilies.map((item, index) => {
return { label: item.name, value: index }
})
+ initData()
+})
+data.options = props.fileData.tagFamilies.map((item, index) => {
+ return { label: item.name, value: index }
})
-
initData()
function initData() {
- let metadata = fileData.metadata
+ let metadata = props.fileData.metadata
let tagsNumber = 0
- fileData.tagFamilies.forEach((item) => {
+ props.fileData.tagFamilies.forEach((item) => {
tagsNumber += item.tags.length
})
let detail = [
@@ -66,23 +75,23 @@ function initData() {
value: metadata.modRevision
}, {
key: "Tags families number",
- value: fileData.tagFamilies.length
+ value: props.fileData.tagFamilies.length
}, {
key: "Tags number",
value: tagsNumber
}, {
key: "UpdatedAt",
- value: fileData.updatedAt == null ? 'null' : fileData.updatedAt
+ value: props.fileData.updatedAt == null ? 'null' : props.fileData.updatedAt
}]
- detailList = detail
+ data.detailList = detail
}
function handleOver() {
- closeColor = 'var(--color-main)'
- closeBackgroundColor = 'var(--color-select)'
+ data.closeColor = 'var(--color-main)'
+ data.closeBackgroundColor = 'var(--color-select)'
}
function handleLeave() {
- closeColor = "var(--color-main-font)"
- closeBackgroundColor = "var(--color-white)"
+ data.closeColor = "var(--color-main-font)"
+ data.closeBackgroundColor = "var(--color-white)"
}
function closeDetail() {
emit('closeDetail')
@@ -100,21 +109,24 @@ function closeDetail() {
{{fileData.metadata.name}}
</span>
</div>
- <i class="el-icon-close pointer detail-close icon" @click="closeDetail" @mouseover="handleOver"
- @mouseleave="handleLeave"
- :style="{ color: closeColor, backgroundColor: closeBackgroundColor }"></i>
+ <el-icon class="el-icon-close pointer detail-close icon" @click="closeDetail"
+ @mouseover="handleOver" @mouseleave="handleLeave"
+ :style="{ color: data.closeColor, backgroundColor: data.closeBackgroundColor }">
+ <Close />
+ </el-icon>
</div>
<div class="text-secondary-color text-tips text-start text-family margin-top-bottom-little">
{{fileData.metadata.group}}</div>
- <div v-for="item in detailList" :key="item.key">
+ <div v-for="item in data.detailList" :key="item.key">
<detail-list-component :keyName="item.key" :value="item.value"></detail-list-component>
</div>
<div class="text-main-color text-tips text-start text-family margin-top-bottom-little"
style="margin-top: 20px;">Tags
families</div>
<div class="flex align-start" style="margin-bottom: 10px;">
- <el-select v-model="tagFamily" style="width: 100%;" filterable placeholder="Please select">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ <el-select v-model="data.tagFamily" style="width: 100%;" filterable placeholder="Please select">
+ <el-option v-for="item in data.options" :key="item.value" :label="item.label"
+ :value="item.value">
</el-option>
</el-select>
</div>
diff --git a/ui/src/components/Database/Main/components/SecondNavigation/index.vue b/ui/src/components/Database/Main/components/SecondNavigation/index.vue
index 1ab8e6d..71f3a5e 100644
--- a/ui/src/components/Database/Main/components/SecondNavigation/index.vue
+++ b/ui/src/components/Database/Main/components/SecondNavigation/index.vue
@@ -18,9 +18,10 @@
-->
<script setup>
-import { getCurrentInstance } from "@vue/runtime-core"
-
-const $bus = getCurrentInstance().appContext.config.globalProperties.$bus
+import { getCurrentInstance, reactive } from "@vue/runtime-core"
+import { Search } from '@element-plus/icons-vue'
+const { proxy } = getCurrentInstance()
+const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
defineProps({
showDrawer: {
type: Boolean,
@@ -30,8 +31,11 @@ defineProps({
const emit = defineEmits(['openDetail'])
// data
+let data = reactive({
+ options: [],
+ tagFamily: 0
+})
let options = []
-let tagFamily = 0
let refreshStyle = {
fontColor: "var(--color-main-font)",
color: "var(--color-main-font)",
@@ -67,8 +71,8 @@ let pickerOptions = {
}]
}
-$bus.$on('setOptions', (opt) => {
- options = opt
+$bus.on('setOptions', (opt) => {
+ data.options = opt
})
// methods
@@ -83,10 +87,10 @@ function handleLeave() {
refreshStyle.backgroundColor = "var(--color-white)"
}
function changeTagFamilies() {
- $bus.$emit('changeTagFamilies', tagFamily)
+ $bus.emit('changeTagFamilies', data.tagFamily)
}
function refresh() {
- $bus.$emit('refresh')
+ $bus.emit('refresh')
}
function openDetail() {
emit('openDetail')
@@ -95,20 +99,24 @@ function openDesign() { }
</script>
<template>
- <div class="flex second-nav-contain align-item-center justify-around">
- <el-select v-model="tagFamily" @change="changeTagFamilies" filterable placeholder="Please select">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ <div class="flex second-nav-contain align-item-center">
+ <el-select v-model="data.tagFamily" @change="changeTagFamilies" style="width: 150px" filterable
+ placeholder="Please select">
+ <el-option v-for="item in data.options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
- <el-date-picker class="date-picker" v-model="value" type="datetimerange" :picker-options="pickerOptions"
- range-separator="to" start-placeholder="begin" end-placeholder="end" align="right">
+ <el-date-picker class="date-picker" v-model="value" type="datetimerange" :shortcuts="pickerOptions.shortcuts"
+ range-separator="to" start-placeholder="begin" end-placeholder="end" align="right" disabled>
</el-date-picker>
- <el-input class="search-input" placeholder="Search by Tags" clearable v-model="query">
- <el-button slot="append" icon="el-icon-search"></el-button>
+
+ <el-input class="search-input" placeholder="Search by Tags" clearable v-model="query" disabled>
+ <template #append>
+ <el-button :icon="Search" />
+ </template>
</el-input>
- <el-button class="nav-button" @click="refresh" icon="el-icon-refresh-right">Refresh</el-button>
+ <el-button class="nav-button" @click="refresh" icon="el-icon-refresh-right" disabled>Refresh</el-button>
<el-button class="nav-button" @click="openDetail">{{ showDrawer ? "Close Detail" : "Open Detail" }}</el-button>
- <el-button class="nav-button" @click="openDesign">Open Design</el-button>
+ <el-button class="nav-button" @click="openDesign" disabled>Open Design</el-button>
</div>
</template>
@@ -119,16 +127,17 @@ function openDesign() { }
}
.second-nav-contain {
- width: 100%;
+ width: calc(100% - 20px) !important;
height: 50px;
+ padding: 0 10px 0 10px;
.date-picker {
- width: 28%;
- margin: 0;
+ width: 250px;
+ margin: 0 10px 0 10px;
}
.search-input {
- width: 28%;
+ width: 250px;
margin: 0;
}
diff --git a/ui/src/components/Database/Main/components/TagNavigation/index.vue b/ui/src/components/Database/Main/components/TagNavigation/index.vue
index 32e2286..87a8ae2 100644
--- a/ui/src/components/Database/Main/components/TagNavigation/index.vue
+++ b/ui/src/components/Database/Main/components/TagNavigation/index.vue
@@ -19,7 +19,7 @@
<script setup>
import stores from '../../../../../stores/index'
-
+import { computed } from 'vue'
const { tags } = stores()
const tagsList = computed(() => {
return tags.tagsList
@@ -37,7 +37,7 @@ function handleClose(item, index) {
<template>
<div class="justify-start flex">
- <el-tag class="pointer flex align-item-center" size="medium" v-for="(item, index) in tagsList"
+ <el-tag class="pointer flex align-item-center" size="large" v-for="(item, index) in tagsList"
:key="item.metadata.name" closable @click="changeMenu(item)" @close="handleClose(item, index)"
style="width:180px;" :effect="currentMenu.metadata.group === item.metadata.group &&
currentMenu.metadata.type === item.metadata.type &&
@@ -45,7 +45,7 @@ function handleClose(item, index) {
? 'dark'
: 'plain'">
<span :title="item.metadata.group + ' / ' + item.metadata.type + ' / ' + item.metadata.name"
- class="text-overflow-hidden" style="width:85%">{{
+ class="text-overflow-hidden" style="width:100%">{{
item.metadata.name
}}</span>
</el-tag>
diff --git a/ui/src/components/Database/Main/index.vue b/ui/src/components/Database/Main/index.vue
index e67cf7d..cfcba51 100644
--- a/ui/src/components/Database/Main/index.vue
+++ b/ui/src/components/Database/Main/index.vue
@@ -22,59 +22,63 @@ import SecondNavigationComponent from './components/SecondNavigation/index.vue'
import TagNavigationComponent from './components/TagNavigation/index.vue'
import DrawerRightComponent from './components/DrawerRight/index.vue'
import DataTableComponent from './components/DataTable/index.vue'
+import { reactive } from '@vue/reactivity'
// data
-let showDrawer = false
+let data = reactive({
+ showDrawer: false,
+ fileData: null
+})
let navWidth = '0px'
-let fileData = null
// methods
function openDetail() {
- showDrawer = !showDrawer
+ data.showDrawer = !data.showDrawer
}
-function drawerRight(data) {
- fileData = data
+function drawerRight(dataList) {
+ data.fileData = dataList
}
function closeDetail() {
- showDrawer = false
+ data.showDrawer = false
}
</script>
<template>
- <div class="flex" style="height:100%; width:100%;">
- <div :style="showDrawer ? 'width: calc(80% - 2px)' : 'width: calc(100% - 2px)'" style="height: 100%;">
- <el-card style="max-height: 97.5%;">
- <div style="width: 100%; height: 40px;">
- <tag-navigation-component></tag-navigation-component>
+ <div class="flex" style="height:100%; width:100%;">
+ <div :style="data.showDrawer ? 'width: calc(80% - 2px)' : 'width: calc(100% - 2px)'" style="height: 100%;">
+ <el-card style="max-height: 97.5%;">
+ <div style="width: 100%; height: 40px;">
+ <tag-navigation-component></tag-navigation-component>
+ </div>
+ <!--top-navigation-component @handleNavigation="handleNavigation"></top-navigation-component-->
+ <second-navigation-component @openDetail="openDetail" :showDrawer="data.showDrawer" style="width: 100%">
+ </second-navigation-component>
+ <data-table-component @drawerRight="drawerRight" class="margin-all-little"></data-table-component>
+ </el-card>
+ </div>
+ <div class="bd-top bd-left drawer-right" v-if="data.showDrawer">
+ <drawer-right-component :fileData="data.fileData" @closeDetail="closeDetail"></drawer-right-component>
</div>
- <!--top-navigation-component @handleNavigation="handleNavigation"></top-navigation-component-->
- <second-navigation-component @openDetail="openDetail" :showDrawer="showDrawer"></second-navigation-component>
- <data-table-component @drawerRight="drawerRight" class="margin-all-little"></data-table-component>
- </el-card>
- </div>
- <div class="bd-top bd-left drawer-right" v-if="showDrawer">
- <drawer-right-component :fileData="fileData" @closeDetail="closeDetail"></drawer-right-component>
</div>
- </div>
</template>
<style lang="scss">
.el-card {
- margin: 10px;
- padding: 0;
- height: 100%;
+ margin: 10px;
+ padding: 0;
+ height: 100%;
}
.el-card__body {
- padding: 0;
+ padding: 0;
}
.drawer-right {
- -webkit-animation: rtl-drawer-in .3s 1ms;
- animation: rtl-drawer-in .3s 1ms;
- width: 20%;
- height: calc(100% - 5px);
- background-color: var(--color-background);
+ -webkit-animation: rtl-drawer-in .3s 1ms;
+ animation: rtl-drawer-in .3s 1ms;
+ width: 20%;
+ height: calc(100% - 5px);
+ background-color: var(--color-background);
}
</style>
\ No newline at end of file
diff --git a/ui/src/components/Header/index.vue b/ui/src/components/Header/index.vue
index fdedb64..3656202 100644
--- a/ui/src/components/Header/index.vue
+++ b/ui/src/components/Header/index.vue
@@ -23,6 +23,7 @@ import { computed } from '@vue/runtime-core'
import { ElImage, ElTooltip, ElMenu, ElMenuItem } from 'element-plus'
import stores from '../../stores/index'
const { aside, header, tags } = stores()
+
const currentMenu = computed(() => {
return tags.currentMenu
})
@@ -32,14 +33,14 @@ const isCollapse = computed(() => {
const showButton = computed(() => {
return header.showButton
})
-const userImg = ref('../../../../../assets/banyandb_small.jpg')
+const userImg = ref('src/assets/banyandb_small.jpg')
const handleSelect = (e) => {
e === '/database'
? header.changeShowButton(true)
: header.changeShowButton(false)
}
const changeAsideWidth = () => {
- if (isCollapse) {
+ if (isCollapse.value) {
aside.changeCollapse(false)
aside.changeFatherWidth('200px')
} else {
@@ -65,22 +66,26 @@ defineProps({
</div>
</el-image>
<div class="title text-main-color text-title text-family text-weight-lt">BanyanDB Manager</div>
- <div class="flex center pointer icon-size" @click="changeAsideWidth" v-if="showButton">
- <el-tooltip class="item" effect="dark" :content="!isCollapse ? 'Collapse menu' : 'Expand menu'"
+ <div class="flex center pointer icon-size" @click="changeAsideWidth" v-if="header.showButton">
+ <el-tooltip class="item" effect="dark" :content="!aside.isCollapse ? 'Collapse menu' : 'Expand menu'"
placement="bottom">
- <i class="el-icon-s-fold icon" v-if="!isCollapse"></i>
- <i class="el-icon-s-unfold icon" v-else></i>
+ <el-icon v-if="!aside.isCollapse" class="icon">
+ <Fold />
+ </el-icon>
+ <el-icon class="icon" v-else>
+ <Expand />
+ </el-icon>
</el-tooltip>
</div>
<div v-else class="icon-size"></div>
- <span v-if="showButton && currentMenu"
- :title="currentMenu.metadata.group + ' / ' + currentMenu.metadata.type + ' / ' + currentMenu.metadata.name"
+ <span v-if="header.showButton && tags.currentMenu"
+ :title="tags.currentMenu.metadata.group + ' / ' + tags.currentMenu.metadata.type + ' / ' + tags.currentMenu.metadata.name"
class="text-overflow-hidden text-general-color pointer margin-left-small" style="width:380px;">{{
- currentMenu.metadata.group + ' / ' + currentMenu.metadata.name
+ tags.currentMenu.metadata.group + ' / ' + tags.currentMenu.metadata.name
}}</span>
<div v-else style="width:380px;" class="margin-left-small"></div>
</div>
- <div class="navigation" style="margin-right: 450px;">
+ <div class="navigation" style="margin-right: 400px;">
<el-menu active-text-color="#6E38F7" router class="el-menu-demo" mode="horizontal" :default-active="active"
@select="handleSelect">
<el-menu-item index="/home">Home</el-menu-item>
@@ -90,8 +95,12 @@ defineProps({
</el-menu>
</div>
<div class="person flex justify-around align-item-center">
- <i class="el-icon-message-solid icon pointer" style="color: #CAD1E1"></i>
- <i class="el-icon-s-custom icon pointer"></i>
+ <el-icon class="icon pointer">
+ <Message />
+ </el-icon>
+ <el-icon class="icon pointer">
+ <Avatar />
+ </el-icon>
<div class="text-normal text-main-color text-family text-weight-lt text-title">Admin</div>
</div>
</div>
diff --git a/ui/src/main.js b/ui/src/main.js
index b0d9f8d..48d10e5 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -17,7 +17,7 @@
* under the License.
*/
-import { createApp } from 'vue'
+import { createApp, nextTick } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
@@ -43,9 +43,13 @@ import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/custom.scss'
import './styles/main.scss'
+import * as ElIcon from '@element-plus/icons-vue'
const app = createApp(App)
+for (let iconName in ElIcon){
+ app.component(iconName, ElIcon[iconName])
+}
echarts.use([
TitleComponent,
TooltipComponent,
@@ -59,16 +63,16 @@ echarts.use([
])
app.config.globalProperties.$http = axios
app.config.globalProperties.$loading = ElLoading
-app.config.globalProperties.$loading.create = () => {
- app.$loading.instance = ElLoading.service({
+app.config.globalProperties.$loadingCreate = () => {
+ app.config.globalProperties.instance = ElLoading.service({
text: 'loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)',
})
}
-app.config.globalProperties.$loading.close = () => {
+app.config.globalProperties.$loadingClose = () => {
nextTick(() => {
- app.$loading.instance.close()
+ app.config.globalProperties.instance.close()
})
}
app.config.globalProperties.$message = ElMessage
@@ -90,10 +94,9 @@ app.config.globalProperties.$message.success = () => {
type: 'success'
})
}
-
+app.config.globalProperties.mittBus = new mitt()
app.use(createPinia())
app.use(router)
app.use(ElementPlus)
-app.mount('#app')
-app.config.globalProperties.mittBus = new mitt()
\ No newline at end of file
+app.mount('#app')
\ No newline at end of file
diff --git a/ui/src/utils/axios.js b/ui/src/utils/axios.js
index 28a2319..50cf399 100644
--- a/ui/src/utils/axios.js
+++ b/ui/src/utils/axios.js
@@ -23,7 +23,7 @@ import axios from "axios"
import { ElMessage } from "element-plus"
const axiosService = axios.create({
- //baseURL: "http://34.92.1.105:18913",// process.env.VUE_APP_BASE_API,
+ // baseURL: "http://34.92.85.178:18913",// process.env.VUE_APP_BASE_API,
timeout: 30000
})
@@ -81,11 +81,12 @@ axiosService.interceptors.response.use(
console.log(error.message)
const resErr = error.data
console.log(resErr)
- let msg = error.data.message ? error.data.message : error.message
+
+ let msg = error.data && error.data.message ? error.data.message : error.message
ElMessage({
message: msg,
type: "error",
- duration: 5000
+ duration: 3000
})
return Promise.reject(error)
}
diff --git a/ui/src/views/DatabaseView.vue b/ui/src/views/DatabaseView.vue
index 2a257b3..36a85be 100644
--- a/ui/src/views/DatabaseView.vue
+++ b/ui/src/views/DatabaseView.vue
@@ -21,8 +21,7 @@ import AsideComponent from '../components/Database/Aside/index.vue'
import MainComponent from '../components/Database/Main/index.vue'
import MainStartComponent from '../components/Database/Main/components/MainStart/index.vue'
import stores from '../stores/index'
-import { computed } from '@vue/runtime-core'
-
+import { computed } from 'vue'
const { aside, tags } = stores()
// pinia data
@@ -61,11 +60,11 @@ function shrinkUp(e) {
<div @mousemove="shrinkMove" @mouseup="shrinkUp" style="width:100%; height:100%">
<el-container>
<el-aside :width="fatherWidth" class="bd-top flex" style="position:relative;">
- <aside-component></aside-component>
+ <AsideComponent></AsideComponent>
<div class="resize" @mousedown="shrinkDown" title="Shrink sidebar"></div>
</el-aside>
<el-main style="background-color: var(--color-background)">
- <component :is="mainComponent"></component>
+ <component :is="mainComponent === 'mainStartCom' ? MainStartComponent : MainComponent"></component>
</el-main>
</el-container>
</div>
diff --git a/ui/vite.config.js b/ui/vite.config.js
index e9e143e..e58cdb4 100644
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -43,7 +43,7 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
- devServer: {
+ server: {
proxy: {
"^/api": {
target: "http://localhost:17913",