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 84346935 Add Measure Reader (#274)
84346935 is described below
commit 84346935215bfb693ac1a91ecf9292da62f688b0
Author: Wu ChuSheng <[email protected]>
AuthorDate: Tue Jun 6 09:01:30 2023 +0800
Add Measure Reader (#274)
* Add timestamp
* Init Measure; Add init timestamp
* Add Measure Modules, Show Measure's data
* Add display fields function
---
ui/src/api/index.js | 4 +-
ui/src/{components2 => components}/Aside/index.vue | 8 +-
.../CodeMirror/index.vue | 0
.../Aside/components/DialogResources/TagDialog.vue | 167 ------
.../Aside/components/DialogResources/index.vue | 209 --------
ui/src/components/Database/Aside/index.vue | 569 ---------------------
.../Database/Main/components/DataTable/index.vue | 217 --------
.../DrawerRight/components/detail-list.vue | 39 --
.../DrawerRight/components/detail-table.vue | 41 --
.../Database/Main/components/DrawerRight/index.vue | 171 -------
.../Database/Main/components/MainStart/index.vue | 41 --
.../Main/components/SecondNavigation/index.vue | 163 ------
.../Main/components/TagNavigation/index.vue | 63 ---
.../TopNavigation/components/top-button.vue | 59 ---
.../Main/components/TopNavigation/index.vue | 81 ---
ui/src/components/Database/Main/index.vue | 85 ---
.../Header/components/header.vue | 0
ui/src/components/Header/index.vue | 165 +-----
ui/src/{components2 => components}/Read/index.vue | 146 +++++-
.../RightMenu/components/right-menu-item.vue | 0
.../Aside/components => }/RightMenu/index.vue | 0
ui/src/{components2 => components}/Start/index.vue | 0
.../StreamEditor/index.vue | 0
.../StreamEditor/tagEditor.vue | 0
.../{components2 => components}/TopNav/index.vue | 0
ui/src/components2/Header/index.vue | 57 ---
.../RightMenu/components/right-menu-item.vue | 67 ---
ui/src/components2/RightMenu/index.vue | 38 --
ui/src/router/index.js | 6 +-
ui/src/styles/elementPlus.scss | 3 +
ui/src/views/DashboardView.vue | 36 --
ui/src/views/Measure/index.vue | 4 +-
ui/src/views/Measure/measure.vue | 8 +-
ui/src/views/MeasureView.vue | 81 ---
ui/src/views/PropertyView.vue | 39 --
ui/src/views/Stream/createEdit.vue | 2 +-
ui/src/views/Stream/index.vue | 4 +-
ui/src/views/Stream/stream.vue | 4 +-
ui/src/views/StreamView.vue | 81 ---
39 files changed, 171 insertions(+), 2487 deletions(-)
diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index 7da9f960..50cf5010 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -43,9 +43,9 @@ export function getStreamOrMeasure(type, group, name) {
})
}
-export function getTableList(data) {
+export function getTableList(data, type) {
return request({
- url: '/api/v1/stream/data',
+ url: `/api/v1/${type}/data`,
data: data,
method: 'post'
})
diff --git a/ui/src/components2/Aside/index.vue
b/ui/src/components/Aside/index.vue
similarity index 98%
rename from ui/src/components2/Aside/index.vue
rename to ui/src/components/Aside/index.vue
index 6eab11e5..7b6592eb 100644
--- a/ui/src/components2/Aside/index.vue
+++ b/ui/src/components/Aside/index.vue
@@ -18,7 +18,7 @@
-->
<script setup>
-import RigheMenu from '@/components2/RightMenu/index.vue'
+import RigheMenu from '@/components/RightMenu/index.vue'
import { getGroupList, getStreamOrMeasureList, deleteStreamOrMeasure,
deleteGroup, createGroup, editGroup, createResources } from '@/api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentInstance } from "@vue/runtime-core"
@@ -527,8 +527,7 @@ initActiveMenu()
<Plus />
</el-icon>
</div>
- <el-dialog width="25%" center :title="`${data.setGroup} group`"
v-model="data.dialogGroupVisible"
- :show-close="false">
+ <el-dialog width="25%" center :title="`${data.setGroup} group`"
v-model="data.dialogGroupVisible" :show-close="false">
<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">
@@ -547,8 +546,7 @@ initActiveMenu()
</el-button>
</div>
</el-dialog>
- <div v-if="data.showRightMenu" class="right-menu box-shadow"
- :style="{ top: `${data.top}px`, left: `${data.left}px` }">
+ <div v-if="data.showRightMenu" class="right-menu box-shadow" :style="{
top: `${data.top}px`, left: `${data.left}px` }">
<RigheMenu @handleRightItem="handleRightItem"
:rightMenuList="data.rightMenuList">
</RigheMenu>
</div>
diff --git a/ui/src/components2/CodeMirror/index.vue
b/ui/src/components/CodeMirror/index.vue
similarity index 100%
rename from ui/src/components2/CodeMirror/index.vue
rename to ui/src/components/CodeMirror/index.vue
diff --git
a/ui/src/components/Database/Aside/components/DialogResources/TagDialog.vue
b/ui/src/components/Database/Aside/components/DialogResources/TagDialog.vue
deleted file mode 100644
index 2f8024f8..00000000
--- a/ui/src/components/Database/Aside/components/DialogResources/TagDialog.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import { watch, ref, reactive } from 'vue'
-const rule = {
- tagFamily: [
- {
- required: true, message: 'Please enter the tagFamily name',
trigger: 'blur'
- }
- ]
-}
-const props = defineProps({
- visible: {
- type: Boolean,
- default: false,
- required: true
- },
- operation: {
- type: String,
- default: 'Add',
- required: true
- },
- type: {
- type: String,
- default: 'Tag'
- },
- group: {
- type: String,
- required: true
- },
- name: {
- type: String,
- required: true
- }
-})
-
-let data = reactive({
- dialogVisible: false,
- form: {
- metadata: {
- group: '',
- name: '',
- tagFamily: ''
- }
- }
-})
-let rules = rule
-let tags = [{
- name: 'start_time',
- type: 'TAG_TYPE_INT',
- indexedOnly: false
-}]
-const ruleForm = ref()
-const emit = defineEmits(['confirm', 'cancel'])
-
-watch(() => props.visible, () => {
- data.dialogVisible = props.visible
-})
-watch(() => props.group, () => {
- data.form.metadata.group = props.group
-})
-
-function confirmForm() {
- ruleForm.value.validate((valid) => {
- if (valid) {
- emit('confirm', data.form)
- }
- })
-}
-function cancelForm() {
- emit('cancel')
-}
-function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
- if (columnIndex === 0) {
-
- if (rowIndex % 2 === 0) {
- return {
- rowspan: 2,
- colspan: 1
- };
- } else {
- return {
- rowspan: 0,
- colspan: 0
- };
- }
- }
-}
-</script>
-
-<template>
- <div>
- <el-dialog width="35%" center :title="`${operation} ${type}`"
:show-close="false" v-model="data.dialogVisible"
- :align-center="true">
- <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="data.form.metadata.group">
- </el-input>
- </el-form-item>
- <el-form-item label="name" label-width="100px" prop="name">
- <el-input disabled v-model="data.form.metadata.name">
- </el-input>
- </el-form-item>
- <el-form-item label="tagFamily" label-width="100px"
prop="tagFamily">
- <el-input v-model="data.form.metadata.tagFamily">
- </el-input>
- </el-form-item>
- <div class="flex justify-between justify-between opeartorTag">
- <div>
- <span>Tag</span>
- </div>
- <div style="width: 50%" class="flex justify-end">
- <el-button type="primary" size="small">Add
tag</el-button>
- <el-button size="small">Batch deletion</el-button>
- </div>
- </div>
- <el-table :data="tags" border>
- <el-table-column type="selection" width="55" />
- <el-table-column label="Name" prop="name" />
- <el-table-column label="Type" prop="type" />
- <el-table-column label="indexedOnly" prop="indexedOnly" />
- <el-table-column fixed="right" label="Operations"
width="150">
- <template #default>
- <el-button size="small"
@click="handleClick">Detele</el-button>
- <el-button size="small">Edit</el-button>
- </template>
- </el-table-column>
- </el-table>
- </el-form>
- <div slot="footer" class="dialog-footer footer">
- <el-button @click="cancelForm">cancel</el-button>
- <el-button type="primary" @click="confirmForm">{{ operation }}
- </el-button>
- </div>
- </el-dialog>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.footer {
- width: 100%;
- display: flex;
- justify-content: center;
-}
-
-.opeartorTag {
- width: 100%;
- height: 40px;
-}
-</style>
\ No newline at end of file
diff --git
a/ui/src/components/Database/Aside/components/DialogResources/index.vue
b/ui/src/components/Database/Aside/components/DialogResources/index.vue
deleted file mode 100644
index 797a07eb..00000000
--- a/ui/src/components/Database/Aside/components/DialogResources/index.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import { watch, ref, reactive } from 'vue'
-import TagDialog from './TagDialog.vue'
-const rule = {
- name: [
- {
- required: true, message: 'Please enter the name', trigger: 'blur'
- }
- ],
- group: [
- {
- required: true, message: 'Please enter the group', trigger: 'blur'
- }
- ]
-}
-const props = defineProps({
- visible: {
- type: Boolean,
- default: false,
- required: true
- },
- operation: {
- type: String,
- default: 'create',
- required: true
- },
- type: {
- type: String,
- default: 'stream',
- required: true
- },
- group: {
- type: String,
- required: true
- }
-})
-
-let data = reactive({
- dialogVisible: false,
- tagDialogVisible: false,
- operation: 'Add',
- form: {
- metadata: {
- group: '',
- name: ''
- }
- }
-})
-let rules = rule
-let tableData = [{
- name: 'stream-ids',
- tags: [{
- name: 'start_time',
- type: 'TAG_TYPE_INT',
- indexedOnly: false
- }]
-}, {
- name: 'stream-ids',
-}, {
- name: 'stream-ids',
-}, {
- name: 'stream-ids',
-}, {
- name: 'stream-ids',
-}, {
- name: 'stream-ids',
-}, {
- name: 'stream-ids',
-}, {
- name: 'stream-ids',
-}]
-const ruleForm = ref()
-const emit = defineEmits(['confirm', 'cancel'])
-
-watch(() => props.visible, () => {
- data.dialogVisible = props.visible
-})
-watch(() => props.group, () => {
- data.form.metadata.group = props.group
-})
-
-function confirmForm() {
- ruleForm.value.validate((valid) => {
- if (valid) {
- emit('confirm', data.form)
- }
- })
-}
-function cancelForm() {
- emit('cancel')
-}
-function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
- if (columnIndex === 0) {
-
- if (rowIndex % 2 === 0) {
- return {
- rowspan: 2,
- colspan: 1
- };
- } else {
- return {
- rowspan: 0,
- colspan: 0
- };
- }
- }
-}
-</script>
-
-<template>
- <div>
- <el-dialog width="35%" center :title="`${operation} ${type}`"
:show-close="false" v-model="data.dialogVisible"
- :align-center="true">
- <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="data.form.metadata.group">
- </el-input>
- </el-form-item>
- <el-form-item label="name" label-width="100px" prop="name">
- <el-input :disabled="operation == 'edit'"
v-model="data.form.metadata.name">
- </el-input>
- </el-form-item>
- <div class="flex justify-between justify-between opeartorTag">
- <div>
- <span>Tag Families</span>
- </div>
- <div style="width: 50%" class="flex justify-end">
- <el-button type="primary" size="small"
@click="data.tagDialogVisible = true, data.operation = 'Add'">Add tag families
- </el-button>
- <el-button size="small">Batch deletion</el-button>
- </div>
- </div>
- <el-table :data="tableData" border>
- <el-table-column type="selection" width="55" />
- <!-- <el-table-column label="Tags" type="expand"
width="60">
- <template #default="props">
- <div class="flex justify-end justify-between
opeartorTag">
- <el-button type="primary" size="small">Add
tag</el-button>
- <el-button size="small">Batch
deletion</el-button>
- </div>
- <el-table :data="props.row.tags" border
style="width: 95%; margin-left: 5%;">
- <el-table-column type="selection" width="55" />
- <el-table-column label="Name" prop="name" />
- <el-table-column label="Type" prop="type" />
- <el-table-column label="indexedOnly"
prop="indexedOnly" />
- <el-table-column fixed="right"
label="Operations" width="150">
- <template #default>
- <el-button size="small"
@click="handleClick">Detele</el-button>
- <el-button
size="small">Edit</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div style="width: 95%; margin-left: 5%;">
- <el-divider />
- </div>
- </template>
- </el-table-column> -->
- <el-table-column label="Name"
prop="name"></el-table-column>
- <el-table-column fixed="right" label="Operations"
width="150">
- <template #default>
- <el-button size="small"
@click="handleClick">Detele</el-button>
- <el-button size="small"
@click="data.tagDialogVisible = true, data.operation = 'Edit'">Edit
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- </el-form>
- <div slot="footer" class="dialog-footer footer">
- <el-button @click="cancelForm">cancel</el-button>
- <el-button type="primary" @click="confirmForm">{{ operation }}
- </el-button>
- </div>
- </el-dialog>
- </div>
- <tag-dialog :visible.sync="data.tagDialogVisible"
@cancel="data.tagDialogVisible = false"
- :group="data.form.metadata.group" :name="data.form.metadata.name"
:operation="data.operation"></tag-dialog>
-</template>
-
-<style lang="scss" scoped>
-.footer {
- width: 100%;
- display: flex;
- justify-content: center;
-}
-
-.opeartorTag {
- width: 100%;
- height: 40px;
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Aside/index.vue
b/ui/src/components/Database/Aside/index.vue
deleted file mode 100644
index 74201f17..00000000
--- a/ui/src/components/Database/Aside/index.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import stores from '../../../stores/index'
-import { getGroupList, getStreamOrMeasureList, deleteStreamOrMeasure,
deleteGroup, createGroup, editGroup, createResources } from '@/api/index'
-import { ElMessage } from 'element-plus'
-import DialogResourcesComponent from './components/DialogResources/index.vue'
-import { getCurrentInstance } from "@vue/runtime-core"
-import { ref, reactive } from 'vue'
-import { computed } from '@vue/runtime-core'
-
-
-const { proxy } = getCurrentInstance()
-const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate
-const $loadingClose = proxy.$loadingClose
-// eventBus
-const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
-const { ctx: that } = getCurrentInstance()
-const { aside, tags, menuState } = stores()
-const ruleForm = ref()
-// init data
-const list1 = [{
- icon: "el-icon-folder",
- name: "new group",
- id: "create Group"
-}, {
- icon: "el-icon-folder",
- name: "edit group",
- id: "edit Group"
-}, {
- icon: "el-icon-document",
- name: "new resources",
- id: "create resources"
-}, {
- icon: "el-icon-refresh-right",
- name: "refresh",
- id: "refresh Group"
-}, {
- icon: "el-icon-delete",
- name: "delete",
- id: "delete Group"
-}]
-const list2 = [{
- icon: "el-icon-delete",
- name: "delete",
- id: "delete resources"
-}]
-const rule = {
- name: [
- {
- required: true, message: 'Please enter the name of the group',
trigger: 'blur'
- }
- ],
- catalog: [
- {
- required: true, message: 'Please select the type of the group',
trigger: 'blur'
- }
- ]
-}
-// pinia data
-const isCollapse = computed(() => {
- return aside.isCollapse
-})
-const tagsList = computed(() => {
- return tags.tagsList
-})
-const currentMenu = computed(() => {
- return tags.currentMenu
-})
-// props data
-const props = defineProps({
- type: {
- type: String,
- required: true,
- default: ''
- }
-})
-
-
-// data
-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
-let rightGroupIndex = 0 // right click group list index
-let rightChildIndex = 0 // right click Resources list index
-let rules = rule // group dialog form rules
-
-// methods
-function getGroupLists() {
- $loadingCreate()
- getGroupList()
- .then(res => {
- if (res.status == 200) {
- let group = res.data.group
- let length = group.length
- data.groupLists = group
- deleteOtherGroup()
- data.groupLists.forEach((item, index) => {
- let catalog = item.catalog
- let type = catalog == 'CATALOG_MEASURE' ? 'measure' :
'stream'
- let name = item.metadata.name
- getStreamOrMeasureList(type, name)
- .then(res => {
- if (res.status == 200) {
- item.children = res.data[type]
- }
- })
- .finally(() => {
- if (length - 1 == index) {
- $loadingClose()
- }
- that.$forceUpdate()
- })
- })
- }
- })
- .finally(() => {
- $loadingClose()
- })
-}
-
-function deleteOtherGroup() {
- for (let i = 0; i < data.groupLists.length; i++) {
- let type = data.groupLists[i].catalog == 'CATALOG_MEASURE' ? 'measure'
: 'stream'
- if (type !== props.type) {
- data.groupLists.splice(i, 1)
- i--
- }
- }
-}
-
-function stopPropagation(e) {
- e = e || window.event;
- if (e.stopPropagation) {
- e.stopPropagation();
- } else {
- e.cancelBubble = true;
- }
-}
-
-/**
- * open group or resources right menu
- */
-function rightClick(e, index, indexChild) {
- menuState.changeRightMenuList(rightMenuListThree)
- data.rightClickType = 'resources'
- rightGroupIndex = index
- rightChildIndex = indexChild
- openRightMenu(e)
-}
-function rightClickGroup(e, index) {
- menuState.changeRightMenuList(rightMenuListTwo)
- data.rightClickType = 'group'
- rightGroupIndex = index
- openRightMenu(e)
-}
-function openRightMenu(e) {
- menuState.changeShowRightMenu(true)
- menuState.changeLeft(e.pageX)
- menuState.changeTop(e.pageY)
- stopPropagation()
-}
-
-/**
- * open stream or measure
- */
-function openResources(index, indexChildren) {
- let item = data.groupLists[index].children[indexChildren]
- /**
- * Todo
- * Measure or Stream?
- */
- if (data.groupLists[index].catalog == "CATALOG_MEASURE") {
- item.metadata.type = "measure"
- } else {
- item.metadata.type = "stream"
- }
- tags.selectMenu(item)
-}
-
-/**
- * click right menu item
- */
-function handleRightItem(index) {
- if (data.rightClickType == 'group') {
- // right click group
-
- let rightName = rightMenuListTwo[index].name
- switch (rightName) {
- case 'new group':
- data.setGroup = 'create'
- openCreateGroup()
- break
- case 'edit group':
- data.setGroup = 'edit'
- openEditGroup()
- break
- case 'new resources':
- data.operation = 'create'
- openResourcesDialog()
- break
- case 'refresh':
- getGroupLists()
- break
- case 'delete':
- openDeleteDialog()
- break
- }
- } else {
- // right click measure or stream
- let rightName = rightMenuListThree[index].name
- switch (rightName) {
- case 'delete':
- openDeleteDialog()
- }
- }
- // close right menu
- menuState.changeShowRightMenu(false)
-}
-
-/**
- * click right menu delete Resources
- */
-function openDeleteDialog() {
- data.dialogVisible = true
-}
-function deleteGroupOrResources() {
- 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 {
- // delete measure or stream Resources
- deleteResources(group, type)
- }
-}
-function deleteGroupFunc(group, type) {
- 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({
- message: 'There are Resources open in this group. Please close
these Resources before proceeding',
- type: "warning",
- duration: 5000
- })
- data.dialogVisible = false
- return
- }
- }
- // delete group
- $loadingCreate()
- deleteGroup(group)
- .then((res) => {
- if (res.status == 200) {
- if (res.data.deleted) {
- ElMessage({
- message: 'Delete succeeded',
- type: "success",
- duration: 5000
- })
- getGroupLists()
- }
- }
- })
- .finally(() => {
- $loadingClose()
- data.dialogVisible = false
- })
-}
-function deleteResources(group, type) {
- 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({
- message: 'This resources has been opened. Please close the
resources before proceeding!',
- type: "warning",
- duration: 5000
- })
- data.dialogVisible = false
- return
- }
- // delete Resources
- $loadingCreate()
- deleteStreamOrMeasure(type, group, name)
- .then((res) => {
- if (res.status == 200) {
- if (res.data.deleted) {
- ElMessage({
- message: 'Delete succeeded',
- type: "success",
- duration: 5000
- })
- getGroupLists()
- }
- }
- })
- .finally(() => {
- $loadingClose()
- data.dialogVisible = false
- })
-}
-
-/**
- * click right menu 'new group' or 'edit group'
- */
-function openCreateGroup() {
- data.dialogGroupVisible = true
-}
-function openEditGroup() {
- 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() {
- data.setGroup == 'create' ? createGroupFunc() : editGroupFunc()
-}
-function createGroupFunc() {
- ruleForm.value.validate((valid) => {
- if (valid) {
- let dataList = {
- group: {
- metadata: {
- group: "",
- name: data.groupForm.name
- },
- catalog: data.groupForm.catalog
- }
- }
- $loadingCreate()
- createGroup(dataList)
- .then((res) => {
- if (res.status == 200) {
- getGroupLists()
- ElMessage({
- message: 'Created successfully',
- type: "success",
- duration: 3000
- })
- }
- })
- .finally(() => {
- data.dialogGroupVisible = false
- $loadingClose()
- })
- }
- })
-}
-function editGroupFunc() {
- let name = data.groupLists[rightGroupIndex].metadata.name
- ruleForm.value.validate((valid) => {
- if (valid) {
- let dataList = {
- group: {
- metadata: {
- group: "",
- name: data.groupForm.name
- },
- catalog: data.groupForm.catalog
- }
- }
- $loadingCreate()
- editGroup(name, dataList)
- .then((res) => {
- if (res.status == 200) {
- getGroupLists()
- ElMessage({
- message: 'Update succeeded',
- type: "success",
- duration: 3000
- })
- }
- })
- .finally(() => {
- data.dialogGroupVisible = false
- $loadingClose()
- })
- }
- })
-}
-// init form data
-function clearGroupForm() {
- data.groupForm = {
- name: null,
- catalog: 'CATALOG_STREAM'
- }
-}
-
-/**
- * click right menu 'new resources' or 'edit resources'
- */
-function openResourcesDialog() {
- // the group is stream or measure
- 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() {
- data.dialogResourcesVisible = false
-}
-function confirmResourcesDialog(form) {
- 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()
- ElMessage({
- message: 'Created successfully',
- type: "success",
- duration: 3000
- })
- }
- })
- .finally(() => {
- data.dialogResourcesVisible = false
- $loadingClose()
- })
-}
-function cancelCreateEditDialog() {
- clearGroupForm()
- data.dialogGroupVisible = false
-}
-// get group list
-getGroupLists()
-// monitor click right menu item
-$bus.on('handleRightItem', (index) => {
- handleRightItem(index)
-})
-</script>
-
-<template>
- <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 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 #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 #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>
- </el-menu-item>
- </div>
- </div>
- </el-sub-menu>
- </div>
- </el-menu>
- <el-dialog title="Tips" v-model="data.dialogVisible" width="25%"
center :show-close="false">
- <div style="margin-bottom: 30px;">
- <span :title="`Are you sure to delete this
${data.rightClickType}?`">Are you sure to delete this {{
- data.rightClickType
- }}?</span>
- </div>
- <span slot="footer" class="dialog-footer footer">
- <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="`${data.setGroup} group`"
v-model="data.dialogGroupVisible" :show-close="false">
- <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">
- </el-input>
- </el-form-item>
- <el-form-item label="group type" label-width="120px"
prop="catalog">
- <el-select v-model="data.groupForm.catalog"
placeholder="please select" style="width: 100%">
- <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 footer">
- <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="data.dialogResourcesVisible" :group="data.group"
- :operation="data.operation" :type="data.type"
@cancel="cancelResourcesDialog"
- @confirm="confirmResourcesDialog"></dialog-resources-component>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.el-menu {
- width: 100%;
- border-right: none;
- text-align: start;
- text-justify: middle;
-}
-
-.footer {
- width: 100%;
- display: flex;
- justify-content: center;
-}
-
-.right-menu {
- width: 130px;
- position: fixed;
- z-index: 9999999999999999999999999999 !important;
- background-color: white;
-}
-
-i {
- font-size: 25px;
- color: var(--color-main);
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/components/DataTable/index.vue
b/ui/src/components/Database/Main/components/DataTable/index.vue
deleted file mode 100644
index 7d7f27a6..00000000
--- a/ui/src/components/Database/Main/components/DataTable/index.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import stores from '@/stores/index'
-import { getStreamOrMeasure, getTableList } from '@/api/index'
-import { computed, reactive } from '@vue/runtime-core'
-import { getCurrentInstance } from "@vue/runtime-core"
-import { ref, watch } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const $loadingClose = proxy.$loadingClose
-const $loadingCreate = proxy.$loadingCreate
-const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
-
-const { tags } = stores()
-const currentMenu = computed(() => {
- return tags.currentMenu
-})
-const type = computed(() => {
- return tags.currentMenu && tags.currentMenu.metadata ?
tags.currentMenu.metadata.type : ''
-})
-const group = computed(() => {
- return tags.currentMenu && tags.currentMenu.metadata ?
tags.currentMenu.metadata.group : ''
-})
-const name = computed(() => {
- return tags.currentMenu && tags.currentMenu.metadata ?
tags.currentMenu.metadata.name : ''
-})
-const multipleTable = ref()
-//data
-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 multipleSelection = []
-let checkAllFlag = false
-let fileData = {}
-// let loading = false
-let index = 0
-let param = {
- metadata: {
- group: '',
- name: '',
- createRevision: '',
- modRevision: '',
- id: ''
- },
- offset: null,
- limit: null,
- criteria: [
- {
- tagFamilyName: ''
- }
- ],
- projection: {
- tagFamilies: [
- {
- name: '',
- tags: []
- }
- ]
- }
-}
-
-watch(() => tags.currentMenu, () => {
- initData()
-})
-watch(() => data.tableTags, () => {
- let tagFamily = fileData.tagFamilies[index]
- let tagsList = []
- tagFamily.tags.forEach((item) => {
- tagsList.push(item.name)
- })
- param.projection.tagFamilies[0].name = tagFamily.name
- param.projection.tagFamilies[0].tags = tagsList
- param.criteria[0].tagFamilyName = tagFamily.name
-})
-
-$bus.on('checkAll', () => {
- if (!checkAllFlag) {
- data.tableData.forEach(row => {
- multipleTable.toggleRowSelection(row)
- })
- checkAllFlag = true
- }
-})
-$bus.on('checkNone', () => {
- multipleTable.clearSelection()
-})
-$bus.on('changeTagFamilies', (i) => {
- index = i
- data.tableTags = fileData.tagFamilies[i].tags
- getTable()
-})
-$bus.on('refresh', () => {
- initData()
-})
-
-const emit = defineEmits(['drawerRight'])
-
-// methods
-/**
- * init data
- */
-function initData() {
- if (!currentMenu.value) {
- return
- }
- $loadingCreate()
- getStreamOrMeasure(type.value, group.value, name.value)
- .then((res) => {
- if (res.status == 200) {
- fileData = res.data[type.value]
- index = 0
- data.tableTags = fileData.tagFamilies[0].tags
- emit('drawerRight', fileData)
- setTagFamily()
- getTable()
- }
- })
- .finally(() => {
- $loadingClose()
- })
-}
-/**
- * get table data
- */
-function getTable() {
- //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) {
- data.tableData = res.data.elements
- }
- })
- .finally(() => {
- data.loading = false
- }) */
-}
-/**
- * sort table data
- */
-function sortChange(object) {
-
-}
-/**
- * set table tags, set navigation select
- */
-function setTagFamily() {
- let tagFamilies = fileData.tagFamilies
- let tagOptions = tagFamilies.map((item, index) => {
- return { label: item.name, value: index }
- })
- $bus.emit('setOptions', tagOptions)
-}
-function handleSelectionChange(val) {
- multipleSelection = val;
-}
-function handleSizeChange() { }
-function handleCurrentChange() { }
-initData()
-</script>
-
-<template>
- <div>
- <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 border
- :data="data.tableData" highlight-current-row tooltip-effect="dark"
@selection-change="handleSelectionChange"
- empty-text="No data yet">
- <el-table-column type="selection" width="55">
- </el-table-column>
- <el-table-column type="index" label="number" width="90">
- </el-table-column>
- <el-table-column v-for="item in data.tableTags" sortable
:sort-change="sortChange" :key="item.name"
- :label="item.name" :prop="item.name" show-overflow-tooltip>
- </el-table-column>
- </el-table>
-
- <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/components/detail-list.vue
b/ui/src/components/Database/Main/components/DrawerRight/components/detail-list.vue
deleted file mode 100644
index b804c711..00000000
---
a/ui/src/components/Database/Main/components/DrawerRight/components/detail-list.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-defineProps({
- keyName: {
- type: String,
- },
- value: {
- type: [String, Number]
- }
-})
-</script>
-
-<template>
- <div style="width: 100%; height: 45px;" class="flex justify-between
bd-bottom align-item-center">
- <div class="text-main-color text-tips text-family">{{keyName}}</div>
- <div style="width: 50%; text-align: right;"
- class="text-secondary-color text-tips text-family
text-overflow-hidden">
- <span :title="value">{{value}}</span>
- </div>
- </div>
-</template>
\ No newline at end of file
diff --git
a/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
b/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
deleted file mode 100644
index 6f5dcca9..00000000
---
a/ui/src/components/Database/Main/components/DrawerRight/components/detail-table.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-defineProps({
- tableData: {
- type: Array,
- required: true
- }
-})
-let options = ['tags', 'type']
-function handleSelectionChange() { }
-</script>
-
-<template>
- <div>
- <el-table ref="multipleTable" height=395 stripe :data="tableData"
highlight-current-row tooltip-effect="dark"
- @selection-change="handleSelectionChange" border empty-text="No
data yet">
- <el-table-column type="index" label="number" width="90">
- </el-table-column>
- <el-table-column v-for="item in options" :key="item" :prop="item"
:label="item" show-overflow-tooltip>
- </el-table-column>
- </el-table>
- </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
deleted file mode 100644
index 8b27e77e..00000000
--- a/ui/src/components/Database/Main/components/DrawerRight/index.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import { computed, reactive, watch } from '@vue/runtime-core'
-import DetailListComponent from './components/detail-list.vue'
-import DetailTableComponent from './components/detail-table.vue'
-const props = defineProps({
- fileData: {
- type: Object,
- }
-})
-const emit = defineEmits(['closeDetail'])
-// data
-let data = reactive({
- closeColor: 'var(--color-main-font)',
- closeBackGroundColor: 'var(--color-white)',
- detailList: [],
- options: [],
- tagFamily: 0
-})
-
-const tableData = computed(() => {
- let tags = props.fileData.tagFamilies[data.tagFamily].tags
- let arr = tags.map((item) => {
- return { tags: item.name, type: item.type }
- })
- return arr
-})
-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 = props.fileData.metadata
- let tagsNumber = 0
- props.fileData.tagFamilies.forEach((item) => {
- tagsNumber += item.tags.length
- })
- let detail = [
- {
- key: "Url",
- value: `${metadata.group}/${metadata.name}`
- }, {
- key: "CreateRevision",
- value: metadata.createRevision
- }, {
- key: "ModRevision",
- value: metadata.modRevision
- }, {
- key: "Tags families number",
- value: props.fileData.tagFamilies.length
- }, {
- key: "Tags number",
- value: tagsNumber
- }, {
- key: "UpdatedAt",
- value: props.fileData.updatedAt == null ? 'null' :
props.fileData.updatedAt
- }]
- data.detailList = detail
-}
-function handleOver() {
- data.closeColor = 'var(--color-main)'
- data.closeBackgroundColor = 'var(--color-select)'
-}
-function handleLeave() {
- data.closeColor = "var(--color-main-font)"
- data.closeBackgroundColor = "var(--color-white)"
-}
-function closeDetail() {
- emit('closeDetail')
-}
-</script>
-
-<template>
- <div class="drawer-container flex column">
- <el-card style="max-height: calc(100% - 30px); margin: 15px;">
- <div class="detail-content-container">
- <div class="detail-content-title flex justify-between">
- <div class="text-main-color text-title text-family">
- <span :title="fileData.metadata.name">
- {{ fileData.metadata.name }}
- </span>
- </div>
- <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 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="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>
- <!--div class="text-main-color text-tips text-start
text-family margin-top-bottom-little">Tags
- Configuration Information</div-->
-
- <detail-table-component
:tableData="tableData"></detail-table-component>
- </div>
- </el-card>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.drawer-container {
- width: 100%;
- height: 100%;
-
- .detail-title {
- width: 100%;
- height: 15px;
- line-height: 15px;
- }
-
- .detail-content {
- margin-top: 15px;
- width: 100%;
- height: calc(100% - 30px);
- background: var(--color-white);
-
- .detail-content-container {
- width: calc(100% - 40px);
- height: calc(100% - 40px);
-
- .detail-content-title {
- width: 100%;
- height: 20px;
-
- .detail-close {
- width: 20px;
- height: 20px;
- }
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/components/MainStart/index.vue
b/ui/src/components/Database/Main/components/MainStart/index.vue
deleted file mode 100644
index edc17f0c..00000000
--- a/ui/src/components/Database/Main/components/MainStart/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-defineProps({
- type: {
- type: String,
- default: 'stream'
- }
-})
-</script>
-
-<template>
- <div class="startContainer flex center column">
- <div class="text-big text-placeholder-color text-family
margin-top-bottom">Welcome to BanyanDB Manager!</div>
- <div class="text-title text-placeholder-color text-famil">Please open
the {{type}} to start working!</div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.startContainer {
- width: 100%;
- height: 100%;
-}
-</style>
\ No newline at end of file
diff --git
a/ui/src/components/Database/Main/components/SecondNavigation/index.vue
b/ui/src/components/Database/Main/components/SecondNavigation/index.vue
deleted file mode 100644
index 9725d184..00000000
--- a/ui/src/components/Database/Main/components/SecondNavigation/index.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-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,
- default: false
- }
-})
-const emit = defineEmits(['openDetail'])
-
-// data
-let data = reactive({
- options: [],
- tagFamily: 0
-})
-let options = []
-let refreshStyle = {
- fontColor: "var(--color-main-font)",
- color: "var(--color-main-font)",
- backgroundColor: "var(--color-white)"
-}
-let query = ''
-let value = ''
-let pickerOptions = {
- shortcuts: [{
- text: 'Last week',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: 'Last month',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: 'Last three months',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
- picker.$emit('pick', [start, end]);
- }
- }]
-}
-
-$bus.on('setOptions', (opt) => {
- data.options = opt
-})
-
-// methods
-function andleOver() {
- refreshStyle.fontColor = "var(--color-main)"
- refreshStyle.color = "var(--color-main)"
- refreshStyle.backgroundColor = "var(--color-select)"
-}
-function handleLeave() {
- refreshStyle.fontColor = "var(--color-main-font)"
- refreshStyle.color = "var(--color-main-font)"
- refreshStyle.backgroundColor = "var(--color-white)"
-}
-function changeTagFamilies() {
- $bus.emit('changeTagFamilies', data.tagFamily)
-}
-function refresh() {
- $bus.emit('refresh')
-}
-function openDetail() {
- emit('openDetail')
-}
-function openDesign() { }
-</script>
-
-<template>
- <div class="flex second-nav-contain align-item-center justify-center">
- <div class="flex justify-between align-item-center" style="width:
100%;">
- <div class="flex align-item-center" style="width: 50%;">
- <div class="flex justify-start align-item-center"
style="width: 130px;">
- <el-select v-model="data.tagFamily"
@change="changeTagFamilies" 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>
- <div class="flex justify-start align-item-center
set-margin-left" style="width: 270px;">
- <el-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>
- </div>
- <!-- <div class="flex justify-start align-item-center
set-margin-left" style="width: 270px;">
- <el-input class="search-input" placeholder="Search by
Tags" clearable v-model="query" disabled>
- <template #append>
- <el-button :icon="Search" />
- </template>
- </el-input>
- </div> -->
- </div>
- <div class="flex align-item-center justify-end" style="width:50%;">
- <div>
- <el-button class="nav-button" @click="refresh"
disabled>Refresh</el-button>
- </div>
- <div class="set-margin-left">
- <el-button class="nav-button" @click="openDesign"
disabled>Open Design</el-button>
- </div>
- <div class="set-margin-left">
- <el-button class="nav-button" type="primary"
@click="openDetail">
- {{ showDrawer ? "Close Detail" : "Open Detail" }}
- </el-button>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.set-margin-left {
- margin-left: 10px;
-}
-
-.nav-button {
- width: 100%;
- margin: 0;
-}
-
-.second-nav-contain {
- width: calc(100% - 20px) !important;
- height: 30px;
- padding: 0 10px 0 10px;
-
- .search-input {
- width: 100%;
- margin: 0;
- }
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/components/TagNavigation/index.vue
b/ui/src/components/Database/Main/components/TagNavigation/index.vue
deleted file mode 100644
index dbe168c6..00000000
--- a/ui/src/components/Database/Main/components/TagNavigation/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import stores from '../../../../../stores/index'
-import { computed } from 'vue'
-const { tags } = stores()
-const tagsList = computed(() => {
- return tags.tagsList
-})
-const currentMenu = computed(() => {
- return tags.currentMenu
-})
-function changeMenu(item) {
- tags.selectMenu(item)
-}
-function handleClose(item, index) {
- tags.closeTag(item)
-}
-</script>
-
-<template>
- <div class="justify-start flex">
- <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:130px;" :effect="currentMenu.metadata.group ===
item.metadata.group &&
- currentMenu.metadata.type === item.metadata.type &&
- currentMenu.metadata.name === item.metadata.name
- ? 'dark'
- : 'plain'">
- <span :title="item.metadata.group + ' / ' + item.metadata.type + '
/ ' + item.metadata.name"
- class="text-overflow-hidden" style="width:100%">{{
- item.metadata.name
- }}</span>
- </el-tag>
- </div>
-</template>
-
-<style lang="scss" scoped>
-div {
- margin: 10px 10px 0 10px;
-
- .el-tag {
- margin-right: 10px;
- }
-}
-</style>
\ No newline at end of file
diff --git
a/ui/src/components/Database/Main/components/TopNavigation/components/top-button.vue
b/ui/src/components/Database/Main/components/TopNavigation/components/top-button.vue
deleted file mode 100644
index 39b4f301..00000000
---
a/ui/src/components/Database/Main/components/TopNavigation/components/top-button.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-defineProps({
- icon: {
- type: String,
- },
- name: {
- type: String
- }
-})
-
-// data
-let active = 'background-color: #F2F6FC'
-
-// methods
-function handleOver() {
- active = "background-color: #ecf5ff; color: var(--color-main); font-color:
var(--color-main)"
-}
-function handleLeave() {
- active = "background-color: #F2F6FC; color: var(--color-main-font);
font-color: var(--color-main-font)"
-}
-</script>
-
-<template>
- <div class="button-item flex center text-main-color text-family"
:style="active" @mouseover="handleOver"
- @mouseleave="handleLeave">
- <i :class="icon" class="text-big"></i>
- <div class="text-main-color text-family text-title"
:style="active">{{name}}</div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.button-item {
- height: 100%;
- cursor: pointer;
-}
-
-i {
- margin-right: 10px;
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/components/TopNavigation/index.vue
b/ui/src/components/Database/Main/components/TopNavigation/index.vue
deleted file mode 100644
index d9fffcc9..00000000
--- a/ui/src/components/Database/Main/components/TopNavigation/index.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import TopButton from './components/top-button.vue'
-
-const emit = defineEmits(['handleNavigation'])
-// data
-let button = [{
- icon: "el-icon-upload2",
- name: "Import"
-}, {
- icon: "el-icon-download",
- name: "Export"
-}, {
- icon: "el-icon-truck",
- name: "Filter"
-}, {
- icon: "el-icon-sort",
- name: "Sort"
-}, {
- icon: "el-icon-plus",
- name: "AddData"
-}, {
- icon: "el-icon-delete",
- name: "Truncate"
-}, {
- icon: "el-icon-reading",
- name: "Detail"
-}, {
- icon: "el-icon-files",
- name: "Design"
-}]
-let drawer = false
-
-// methods
-function handleNavigation(item, index) {
- emit('handleNavigation', item, index)
-}
-function handleClose(done) {
- done()
-}
-</script>
-
-<template>
- <div class="flex center top-contain">
- <div v-for="(item, index) in button" @click="handleNavigation(item,
index)" :key="item.name"
- class="buttonItem poiner">
- <top-button :icon="item.icon" :name="item.name"></top-button>
- </div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.top-contain {
- width: 100%;
- height: 50px;
- background-color: var(--color-Quad-border);
-}
-
-.buttonItem {
- height: 100%;
- flex-grow: 1;
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/Database/Main/index.vue
b/ui/src/components/Database/Main/index.vue
deleted file mode 100644
index ed78e452..00000000
--- a/ui/src/components/Database/Main/index.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-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 data = reactive({
- showDrawer: false,
- fileData: null
-})
-let navWidth = '0px'
-
-// methods
-function openDetail() {
- data.showDrawer = !data.showDrawer
-}
-function drawerRight(dataList) {
- data.fileData = dataList
-}
-function closeDetail() {
- data.showDrawer = false
-}
-
-</script>
-
-<template>
- <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: calc(100% - 30px);">
- <div style="width: 100%; height: 30px;">
- <tag-navigation-component></tag-navigation-component>
- </div>
- <el-divider border-style="dashed" />
- <!--top-navigation-component
@handleNavigation="handleNavigation"></top-navigation-component-->
- <second-navigation-component @openDetail="openDetail"
:showDrawer="data.showDrawer" style="width: 100%; margin-top: 10px;">
- </second-navigation-component>
- <data-table-component @drawerRight="drawerRight"
class="margin-all-little"></data-table-component>
- </el-card>
- </div>
- <div class="bd-left drawer-right" v-if="data.showDrawer">
- <drawer-right-component :fileData="data.fileData"
@closeDetail="closeDetail"></drawer-right-component>
- </div>
- </div>
-</template>
-
-<style lang="scss">
-/* .el-card {
- margin: 15px;
- padding: 0;
- height: 100%;
-}
-
-.el-card__body {
- padding: 0;
-} */
-
-.drawer-right {
- -webkit-animation: rtl-drawer-in .3s 1ms;
- animation: rtl-drawer-in .3s 1ms;
- width: 20%;
- height: 100%;
- background-color: var(--color-background);
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components2/Header/components/header.vue
b/ui/src/components/Header/components/header.vue
similarity index 100%
rename from ui/src/components2/Header/components/header.vue
rename to ui/src/components/Header/components/header.vue
diff --git a/ui/src/components/Header/index.vue
b/ui/src/components/Header/index.vue
index c2654d29..c736a500 100644
--- a/ui/src/components/Header/index.vue
+++ b/ui/src/components/Header/index.vue
@@ -18,151 +18,40 @@
-->
<script setup>
-import { ref, reactive } from "vue";
-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
-})
-const isCollapse = computed(() => {
- return aside.isCollapse
-})
-const showButton = computed(() => {
- return header.showButton
-})
-const data = reactive({
- activeMenu: '/dashboard'
-})
-
-const userImg = ref('src/assets/banyandb_small.jpg')
-const handleSelect = (e) => {
- sessionStorage.setItem('active', e)
- data.activeMenu = e
- e === '/stream' || e === '/measure'
- ? header.changeShowButton(true)
- : header.changeShowButton(false)
-}
-const changeAsideWidth = () => {
- if (isCollapse.value) {
- aside.changeCollapse(false)
- aside.changeFatherWidth('200px')
- } else {
- aside.changeCollapse(true)
- aside.changeFatherWidth('65px')
- }
-}
-defineProps({
- active: {
- type: String,
- default: '/dashboard'
- }
-})
-function initData() {
- data.activeMenu = sessionStorage.getItem('active')
- data.activeMenu === '/stream' || data.activeMenu === '/measure'
- ? header.changeShowButton(true)
- : header.changeShowButton(false)
-}
-initData()
+import Header from './components/header.vue'
</script>
<template>
- <div class="flex align-item-center justify-between bd-bottom header">
- <div class="image flex align-item-center justify-between">
- <el-image :src="userImg" class="flex center" fit="fill">
- <div slot="error" class="image-slot">
- <i class="el-icon-picture-outline"></i>
- </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="header.showButton">
- <el-tooltip class="item" effect="dark"
:content="!aside.isCollapse ? 'Collapse menu' : 'Expand menu'"
- placement="bottom">
- <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="header.showButton && tags.currentMenu &&
data.activeMenu == '/stream'"
- :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;">{{
- 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: 20%">
- <el-menu active-text-color="#6E38F7" router :ellipsis="false"
class="el-menu-demo" mode="horizontal"
- :default-active="data.activeMenu" @select="handleSelect">
- <el-menu-item index="/dashboard">Dashboard</el-menu-item>
- <el-menu-item index="/stream">Stream</el-menu-item>
- <el-menu-item index="/measure">Measure</el-menu-item>
- <el-menu-item index="/property">Property</el-menu-item>
- </el-menu>
- </div>
- <div class="person flex justify-around align-item-center">
- <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 class="size">
+ <el-container>
+ <el-header>
+ <Header class="size"></Header>
+ </el-header>
+ <el-main>
+ <RouterView></RouterView>
+ </el-main>
+ </el-container>
</div>
</template>
-<style lang="scss" scoped>
-.header {
- width: 100%;
- height: 100%
-}
-
-.image {
- width: 665px;
- height: 100%;
- .el-image {
- width: 59px;
- height: 59px;
- }
-
- .title {
- height: 100%;
- line-height: 59px;
- }
-}
-.el-menu-item {
- font-weight: var(--weight-lt);
- font-size: var(--size-lt);
- font-family: var(--font-family-main);
-}
-
-.el-menu-item:hover {
- color: var(--el-menu-active-color) !important;
-}
-
-.navigation {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.person {
- width: 140px;
- height: 100%;
- margin-right: 30px;
-}
-
-.icon-size {
- width: 25px;
- height: 25px;
+<style lang="scss" scoped>
+.el-container {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+
+ .el-header {
+ background-color: #ffffff;
+ padding: 0;
+ margin: 0;
+ }
+
+ .el-main {
+ background-color: #eaedf1;
+ padding: 0;
+ margin: 0;
+ }
}
</style>
\ No newline at end of file
diff --git a/ui/src/components2/Read/index.vue
b/ui/src/components/Read/index.vue
similarity index 70%
rename from ui/src/components2/Read/index.vue
rename to ui/src/components/Read/index.vue
index cf01f477..f63240e7 100644
--- a/ui/src/components2/Read/index.vue
+++ b/ui/src/components/Read/index.vue
@@ -24,8 +24,9 @@ import { watch, getCurrentInstance } from '@vue/runtime-core'
import { getStreamOrMeasure, getTableList } from '@/api/index'
import { Search, RefreshRight } from '@element-plus/icons-vue'
import { jsonToYaml, yamlToJson } from '@/utils/yaml'
-import CodeMirror from '@/components2/CodeMirror/index.vue'
+import CodeMirror from '@/components/CodeMirror/index.vue'
import { ElMessage } from 'element-plus'
+import { computed } from '@vue/runtime-core'
const route = useRoute()
@@ -45,7 +46,25 @@ const tagType = {
'TAG_TYPE_DATA_BINARY': 'binaryData',
'TAG_TYPE_ID': 'id'
}
+const fieldTypes = {
+ 'FIELD_TYPE_UNSPECIFIED': 'null',
+ 'FIELD_TYPE_STRING': 'str',
+ 'FIELD_TYPE_INT': 'int',
+ 'FIELD_TYPE_STRING_ARRAY': 'strArray',
+ 'FIELD_TYPE_INT_ARRAY': 'intArray',
+ 'FIELD_TYPE_DATA_BINARY': 'binaryData',
+ 'FIELD_TYPE_ID': 'id'
+}
const shortcuts = [
+ {
+ text: 'Last 15 minutes',
+ value: () => {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 900 * 1000)
+ return [start, end]
+ }
+ },
{
text: 'Last week',
value: () => {
@@ -95,6 +114,9 @@ const param = {
}
}
const data = reactive({
+ fields: [],
+ tableFields: [],
+ handleFields: "",
group: route.params.group,
name: route.params.group,
type: route.params.type,
@@ -114,13 +136,31 @@ const data = reactive({
code: null,
codeStorage: []
})
-
+const tableHeader = computed(() => {
+ return data.tableTags.concat(data.tableFields)
+})
+watch(() => data.handleFields, () => {
+ if (data.handleFields.length > 0) {
+ data.tableTags = data.tableTags.map(item => {
+ item.label = `${data.options[data.tagFamily].label}.${item.name}`
+ return item
+ })
+ } else {
+ data.tableTags = data.tableTags.map(item => {
+ item.label = item.name
+ return item
+ })
+ }
+})
watch(() => route, () => {
data.group = route.params.group
data.name = route.params.name
data.type = route.params.type
data.tableData = []
data.tableTags = []
+ data.tableFields = []
+ data.fields = []
+ data.handleFields = ""
if (data.group && data.name && data.type) {
initCode()
@@ -148,20 +188,27 @@ function initCode() {
if (index >= 0) {
data.code = data.codeStorage[index].params.code
} else {
+ let timeRange = {
+ timeRange: {
+ begin: new Date(new Date() - 15),
+ end: new Date()
+ }
+ }
+ timeRange.timeRange.begin.setTime(timeRange.timeRange.begin.getTime()
- 900 * 1000)
+ timeRange = jsonToYaml(timeRange).data
data.code = ref(
- `timeRange:
- begin: null
- end: null
-offset: 1
+ `${timeRange}offset: 1
limit: 10
+orderBy:
+ indexRuleName: ""
+ sort: SORT_UNSPECIFIED
`)
}
- /* orderBy:
- indexRuleName: ""
- sort:
- SORT_UNSPECIFIED: ""
- SORT_DESC: ""
- SORT_ASC: "" */
+}
+function changeCode(name, value) {
+ let code = yamlToJson(data.code).data
+ code[name] = value
+ data.code = jsonToYaml(code).data
}
function initData() {
$loadingCreate()
@@ -169,11 +216,15 @@ function initData() {
.then(res => {
if (res.status == 200) {
data.resourceData = res.data[data.type]
- data.tableTags = res.data[data.type].tagFamilies[0].tags
+ data.tableTags =
res.data[data.type].tagFamilies[0].tags.map(item => {
+ item.label = item.name
+ return item
+ })
data.options = res.data[data.type].tagFamilies.map((item,
index) => {
return { label: item.name, value: index }
})
data.tagFamily = 0
+ data.fields = res.data[data.type].fields ?
res.data[data.type].fields : []
handleCodeData()
}
})
@@ -185,14 +236,28 @@ function getTableData() {
data.tableData = []
data.loading = true
setTableParam()
- let paramList = param
+ let paramList = JSON.parse(JSON.stringify(param))
+ if (data.type == 'measure') {
+ paramList.tagProjection = paramList.projection
+ if (data.handleFields.length > 0) {
+ paramList.fieldProjection = {
+ names: data.handleFields
+ }
+ }
+ delete paramList.projection
+ }
/* paramList.offset = data.queryInfo.pagenum
paramList.limit = data.queryInfo.pagesize */
paramList.metadata = data.resourceData.metadata
- getTableList(paramList)
+ getTableList(paramList, data.type)
.then((res) => {
if (res.status == 200) {
- setTableData(res.data.elements)
+ if (data.type == 'stream') {
+ setTableData(res.data.elements)
+ } else {
+ setTableData(res.data.dataPoints)
+ }
+
}
})
.catch(() => {
@@ -201,6 +266,7 @@ function getTableData() {
}
function setTableData(elements) {
const tags = data.resourceData.tagFamilies[data.tagFamily].tags
+ const tableFields = data.tableFields
data.tableData = elements.map(item => {
let dataItem = {}
item.tagFamilies[0].tags.forEach(tag => {
@@ -211,6 +277,20 @@ function setTableData(elements) {
}
dataItem[tag.key] =
Object.hasOwnProperty.call(tag.value[tagType[type]], 'value') ?
tag.value[tagType[type]].value : tag.value[tagType[type]]
})
+ if (data.type == 'measure' && tableFields.length > 0) {
+ item.fields.forEach(field => {
+ const name = field.name
+ const fieldType = tableFields.filter(tableField => {
+ return tableField.name == name
+ })[0].fieldType || ''
+ if (field.value[fieldTypes[fieldType]] == null) {
+ return dataItem[name] = 'Null'
+ }
+ dataItem[name] =
Object.hasOwnProperty.call(field.value[fieldTypes[fieldType]], 'value') ?
field.value[fieldTypes[fieldType]].value : field.value[fieldTypes[fieldType]]
+ })
+ }
+
+ dataItem.timestamp = item.timestamp
return dataItem
})
data.loading = false
@@ -226,7 +306,13 @@ function setTableParam() {
//param.criteria[0].tagFamilyName = tagFamily.name
}
function changeTagFamilies() {
- data.tableTags = data.resourceData.tagFamilies[data.tagFamily].tags
+ data.tableTags =
data.resourceData.tagFamilies[data.tagFamily].tags.map(item => {
+ item.label = item.name
+ if (data.handleFields.length > 0) {
+ item.label = `${data.options[data.tagFamily].label}.${item.name}`
+ }
+ return item
+ })
getTableData()
}
function handleCodeData() {
@@ -250,6 +336,7 @@ function handleCodeData() {
} else {
data.timeValue = []
}
+ json.orderBy ? param.orderBy = json.orderBy : delete param.orderBy
getTableData()
}
function searchTableData() {
@@ -278,6 +365,16 @@ function changeDatePicker() {
json.data.timeRange.end = data.timeValue ? data.timeValue[1] : null
data.code = jsonToYaml(json.data).data
}
+function changeFields() {
+ data.tableFields = data.handleFields.map(fieldName => {
+ let item = data.fields.filter(field => {
+ return field.name == fieldName
+ })[0]
+ item.label = item.name
+ return item
+ })
+ getTableData()
+}
</script>
<template>
@@ -302,6 +399,12 @@ function changeDatePicker() {
:value="item.value">
</el-option>
</el-select>
+ <el-select v-if="data.type == 'measure'"
v-model="data.handleFields" collapse-tags
+ style="margin: 0 0 0 10px; width: 400px;"
@change="changeFields" filterable multiple
+ placeholder="Please select Fields">
+ <el-option v-for="item in data.fields"
:key="item.name" :label="item.name" :value="item.name">
+ </el-option>
+ </el-select>
<el-date-picker @change="changeDatePicker"
style="margin: 0 10px 0 10px" v-model="data.timeValue"
type="datetimerange" :shortcuts="shortcuts"
range-separator="to" start-placeholder="begin"
end-placeholder="end" align="right">
@@ -327,14 +430,11 @@ function changeDatePicker() {
</el-table-column>
<el-table-column type="index" label="number" width="90">
</el-table-column>
- <el-table-column v-for="item in data.tableTags" sortable
:sort-change="sortChange" :key="item.name"
- :label="item.name" :prop="item.name" show-overflow-tooltip>
+ <el-table-column label="timestamp" width="260" key="timestamp"
prop="timestamp"></el-table-column>
+ <el-table-column v-for="item in tableHeader" sortable
:sort-change="sortChange" :key="item.name"
+ :label="item.label" :prop="item.name"
show-overflow-tooltip>
</el-table-column>
</el-table>
- <!-- <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> -->
</el-card>
</div>
</template>
diff --git
a/ui/src/components/Database/Aside/components/RightMenu/components/right-menu-item.vue
b/ui/src/components/RightMenu/components/right-menu-item.vue
similarity index 100%
rename from
ui/src/components/Database/Aside/components/RightMenu/components/right-menu-item.vue
rename to ui/src/components/RightMenu/components/right-menu-item.vue
diff --git a/ui/src/components/Database/Aside/components/RightMenu/index.vue
b/ui/src/components/RightMenu/index.vue
similarity index 100%
rename from ui/src/components/Database/Aside/components/RightMenu/index.vue
rename to ui/src/components/RightMenu/index.vue
diff --git a/ui/src/components2/Start/index.vue
b/ui/src/components/Start/index.vue
similarity index 100%
rename from ui/src/components2/Start/index.vue
rename to ui/src/components/Start/index.vue
diff --git a/ui/src/components2/StreamEditor/index.vue
b/ui/src/components/StreamEditor/index.vue
similarity index 100%
rename from ui/src/components2/StreamEditor/index.vue
rename to ui/src/components/StreamEditor/index.vue
diff --git a/ui/src/components2/StreamEditor/tagEditor.vue
b/ui/src/components/StreamEditor/tagEditor.vue
similarity index 100%
rename from ui/src/components2/StreamEditor/tagEditor.vue
rename to ui/src/components/StreamEditor/tagEditor.vue
diff --git a/ui/src/components2/TopNav/index.vue
b/ui/src/components/TopNav/index.vue
similarity index 100%
rename from ui/src/components2/TopNav/index.vue
rename to ui/src/components/TopNav/index.vue
diff --git a/ui/src/components2/Header/index.vue
b/ui/src/components2/Header/index.vue
deleted file mode 100644
index c736a500..00000000
--- a/ui/src/components2/Header/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import Header from './components/header.vue'
-</script>
-
-<template>
- <div class="size">
- <el-container>
- <el-header>
- <Header class="size"></Header>
- </el-header>
- <el-main>
- <RouterView></RouterView>
- </el-main>
- </el-container>
- </div>
-</template>
-
-
-
-<style lang="scss" scoped>
-.el-container {
- height: 100%;
- padding: 0;
- margin: 0;
-
- .el-header {
- background-color: #ffffff;
- padding: 0;
- margin: 0;
- }
-
- .el-main {
- background-color: #eaedf1;
- padding: 0;
- margin: 0;
- }
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components2/RightMenu/components/right-menu-item.vue
b/ui/src/components2/RightMenu/components/right-menu-item.vue
deleted file mode 100644
index b9b1ed29..00000000
--- a/ui/src/components2/RightMenu/components/right-menu-item.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-defineProps({
- icon: String,
- name: String
-})
-</script>
-
-<template>
- <div class="flex right-menu-item align-item-center pointer"
@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">
- <span :title="name">{{ name }}</span>
- </div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.right-menu-item {
- padding: 3px 6px 3px 6px;
- width: calc(100% - 12px);
- line-height: 30px;
- height: 30px;
- text-align: start;
- background-color: white;
- color: var(--color-main-font);
-
- &:hover {
- background-color: #ecf5ff;
- color: var(--color-main);
- }
-}
-
-i {
- font-size: 20px;
- line-height: 30px;
- height: 30px;
-
- &:hover {
- color: var(--color-main);
- }
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components2/RightMenu/index.vue
b/ui/src/components2/RightMenu/index.vue
deleted file mode 100644
index 5bd9b9b5..00000000
--- a/ui/src/components2/RightMenu/index.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script setup>
-import RightMenuItem from './components/right-menu-item.vue'
-defineProps({
- rightMenuList: Array
-})
-</script>
-
-<template>
- <div style="width: 100%;" class="border-radius-little">
- <div style="width: 100%;" v-for="(item, index) in rightMenuList"
:key="item.name">
- <right-menu-item @handleRightItem="$emit('handleRightItem',
index)" :icon="item.icon" :name="item.name">
- </right-menu-item>
- </div>
- </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index c458848e..3ab1a2a6 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -18,7 +18,7 @@
*/
import { createRouter, createWebHistory } from 'vue-router'
-import Header from '@/components2/Header/index.vue'
+import Header from '@/components/Header/index.vue'
import NotFoundView from '../views/NotFoundView.vue'
const router = createRouter({
@@ -51,7 +51,7 @@ const router = createRouter({
{
path: '/banyandb/stream/start',
name: 'streamStart',
- component: () => import('@/components2/Start/index.vue'),
+ component: () => import('@/components/Start/index.vue'),
meta: {
type: 'stream'
}
@@ -82,7 +82,7 @@ const router = createRouter({
{
path: '/banyandb/measure/start',
name: 'measureStart',
- component: () => import('@/components2/Start/index.vue'),
+ component: () => import('@/components/Start/index.vue'),
meta: {
type: 'measure'
}
diff --git a/ui/src/styles/elementPlus.scss b/ui/src/styles/elementPlus.scss
index b930cd53..5f257a14 100644
--- a/ui/src/styles/elementPlus.scss
+++ b/ui/src/styles/elementPlus.scss
@@ -235,12 +235,15 @@
height: 100% !important;
}
}
+
.el-menu-item.is-active {
color: var(--color-main) !important;
}
+
.el-sub-menu.is-active {
--el-menu-active-color: var(--color-main) !important;
}
+
.navigation {
border: 0px !important;
}
diff --git a/ui/src/views/DashboardView.vue b/ui/src/views/DashboardView.vue
deleted file mode 100644
index 5e301287..00000000
--- a/ui/src/views/DashboardView.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-
-<script>
-export default {
- name: 'Dashboard',
-}
-</script>
-
-<template>
- <div>
- <h1 class="home">
- This is the dashboard page
- </h1>
- </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/ui/src/views/Measure/index.vue b/ui/src/views/Measure/index.vue
index 8783afc1..a313e6b0 100644
--- a/ui/src/views/Measure/index.vue
+++ b/ui/src/views/Measure/index.vue
@@ -18,8 +18,8 @@
-->
<script setup>
-import Aside from '@/components2/Aside/index.vue'
-import TopNav from '@/components2/TopNav/index.vue'
+import Aside from '@/components/Aside/index.vue'
+import TopNav from '@/components/TopNav/index.vue'
import { reactive } from 'vue';
const data = reactive({
diff --git a/ui/src/views/Measure/measure.vue b/ui/src/views/Measure/measure.vue
index 8052921a..758b6e99 100644
--- a/ui/src/views/Measure/measure.vue
+++ b/ui/src/views/Measure/measure.vue
@@ -18,13 +18,13 @@
-->
<script setup>
+import Read from '@/components/Read/index.vue'
</script>
<template>
- <div class="about">
- <h1>This is the Measure page</h1>
+ <div>
+ <Read></Read>
</div>
</template>
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/ui/src/views/MeasureView.vue b/ui/src/views/MeasureView.vue
deleted file mode 100644
index a083649f..00000000
--- a/ui/src/views/MeasureView.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-<script setup>
-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'
-const { aside, tags } = stores()
-
-// pinia data
-const fatherWidth = computed(() => {
- return aside.fatherWidth
-})
-const mainComponent = computed(() => {
- return tags.currentMenu == null ? 'mainStartCom' : 'mainCom'
-})
-
-// data
-let isShrink = false
-
-// methods
-function shrinkMove(e) {
- if (isShrink) {
- let wid = e.screenX + 5
- if (wid <= 65) {
- aside.changeCollapse(true)
- aside.changeFatherWidth('65px')
- } else {
- aside.changeCollapse(false)
- aside.changeFatherWidth(`${wid}px`)
- }
- }
-}
-function shrinkDown(e) {
- isShrink = true
-}
-function shrinkUp(e) {
- isShrink = false
-}
-</script>
-
-<template>
- <div @mousemove="shrinkMove" @mouseup="shrinkUp" style="width:100%;
height:100%">
- <el-container>
- <el-aside :width="fatherWidth" class="bd-top flex"
style="position:relative;">
- <AsideComponent type="measure"></AsideComponent>
- <div class="resize" @mousedown="shrinkDown" title="Shrink
sidebar"></div>
- </el-aside>
- <el-main style="background-color: var(--color-background)">
- <component :is="MainStartComponent" type="measure"></component>
- </el-main>
- </el-container>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.resize {
- cursor: col-resize;
- position: absolute;
- right: 0;
- height: 100%;
- width: 5px;
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/views/PropertyView.vue b/ui/src/views/PropertyView.vue
deleted file mode 100644
index de971073..00000000
--- a/ui/src/views/PropertyView.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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="about">
- <h1>This is the property page</h1>
- </div>
-</template>
-
-<script>
-export default{
- name: 'AboutView',
- data() {
- return {
-
- }
- },
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/ui/src/views/Stream/createEdit.vue
b/ui/src/views/Stream/createEdit.vue
index f7a0650d..9e8710b9 100644
--- a/ui/src/views/Stream/createEdit.vue
+++ b/ui/src/views/Stream/createEdit.vue
@@ -18,7 +18,7 @@
-->
<script setup>
-import StreamEditor from '@/components2/StreamEditor/index.vue'
+import StreamEditor from '@/components/StreamEditor/index.vue'
</script>
<template>
diff --git a/ui/src/views/Stream/index.vue b/ui/src/views/Stream/index.vue
index 92e026b6..4a15b385 100644
--- a/ui/src/views/Stream/index.vue
+++ b/ui/src/views/Stream/index.vue
@@ -18,8 +18,8 @@
-->
<script setup>
-import Aside from '@/components2/Aside/index.vue'
-import TopNav from '@/components2/TopNav/index.vue'
+import Aside from '@/components/Aside/index.vue'
+import TopNav from '@/components/TopNav/index.vue'
import { reactive } from 'vue';
const data = reactive({
diff --git a/ui/src/views/Stream/stream.vue b/ui/src/views/Stream/stream.vue
index bbf8ba85..86b8a040 100644
--- a/ui/src/views/Stream/stream.vue
+++ b/ui/src/views/Stream/stream.vue
@@ -18,9 +18,7 @@
-->
<script setup>
-import Read from '@/components2/Read/index.vue'
-import { useRoute } from 'vue-router'
-const route = useRoute()
+import Read from '@/components/Read/index.vue'
</script>
<template>
diff --git a/ui/src/views/StreamView.vue b/ui/src/views/StreamView.vue
deleted file mode 100644
index d8411301..00000000
--- a/ui/src/views/StreamView.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
- ~ Licensed to 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. Apache Software Foundation (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.
--->
-<script setup>
-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'
-const { aside, tags } = stores()
-
-// pinia data
-const fatherWidth = computed(() => {
- return aside.fatherWidth
-})
-const mainComponent = computed(() => {
- return tags.currentMenu == null ? 'mainStartCom' : 'mainCom'
-})
-
-// data
-let isShrink = false
-
-// methods
-function shrinkMove(e) {
- if (isShrink) {
- let wid = e.screenX + 5
- if (wid <= 65) {
- aside.changeCollapse(true)
- aside.changeFatherWidth('65px')
- } else {
- aside.changeCollapse(false)
- aside.changeFatherWidth(`${wid}px`)
- }
- }
-}
-function shrinkDown(e) {
- isShrink = true
-}
-function shrinkUp(e) {
- isShrink = false
-}
-</script>
-
-<template>
- <div @mousemove="shrinkMove" @mouseup="shrinkUp" style="width:100%;
height:100%">
- <el-container>
- <el-aside :width="fatherWidth" class="bd-top flex"
style="position:relative;">
- <AsideComponent type="stream"></AsideComponent>
- <div class="resize" @mousedown="shrinkDown" title="Shrink
sidebar"></div>
- </el-aside>
- <el-main style="background-color: var(--color-background)">
- <component :is="mainComponent === 'mainStartCom' ?
MainStartComponent : MainComponent" type="stream"></component>
- </el-main>
- </el-container>
- </div>
-</template>
-
-<style lang="scss" scoped>
-.resize {
- cursor: col-resize;
- position: absolute;
- right: 0;
- height: 100%;
- width: 5px;
-}
-</style>
\ No newline at end of file
