You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/07/28 02:51:21 UTC
[skywalking-banyandb] branch main updated: Add some funtions (#147)
This is an automated email from the ASF dual-hosted git repository.
wusheng 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 deec0b1 Add some funtions (#147)
deec0b1 is described below
commit deec0b1e4a8ed0edce1da89b6c70d8edd7bd054c
Author: Wu ChuSheng <a1...@gmail.com>
AuthorDate: Thu Jul 28 10:51:16 2022 +0800
Add some funtions (#147)
---
dist/LICENSE | 13 +
.../ui-licenses/license-echarts.txt} | 207 ++--------
dist/licenses/ui-licenses/license-tslib.txt | 12 +
dist/licenses/ui-licenses/license-zrender.txt | 29 ++
ui/LICENSE | 13 +
ui/package-lock.json | 45 +++
ui/package.json | 1 +
ui/src/App.vue | 16 +-
ui/src/assets/main.scss | 16 +-
ui/src/components/HeaderComponent.vue | 16 +-
.../databaseComponents/AsideComponent.vue | 122 ------
...igationComponent.vue => MainStartComponent.vue} | 44 +--
.../databaseComponents/TagNavigationComponent.vue | 23 +-
.../asideComponents/AsideComponent.vue | 416 +++++++++++++++++++++
.../RightMenuComponent.vue} | 46 +--
.../asideComponents/RightMenuItemComponent.vue} | 59 +--
.../mainComponents/DataTableComponent.vue | 6 +
.../mainComponents/TopNavigationComponent.vue | 4 -
ui/src/main.js | 48 ++-
ui/src/store/aside.js | 21 +-
ui/src/store/index.js | 4 +-
ui/src/store/{aside.js => menuState.js} | 15 +-
ui/src/store/tags.js | 19 +-
ui/src/views/Database.vue | 64 +++-
24 files changed, 808 insertions(+), 451 deletions(-)
diff --git a/dist/LICENSE b/dist/LICENSE
index a97cbee..a8afea8 100644
--- a/dist/LICENSE
+++ b/dist/LICENSE
@@ -338,11 +338,24 @@ The following components are used in UI.See project link for details.
The text of each license is also included at licenses/ui-licenses/LICENSE-[project].txt.
+========================================================================
+0BSD licenses
+========================================================================
+
+ tslib 2.3.0 0BSD
+
+========================================================================
+Apache-2.0 licenses
+========================================================================
+
+ echarts 5.3.3 Apache-2.0
+
========================================================================
BSD-3-Clause licenses
========================================================================
normalize-wheel 1.0.1 BSD-3-Clause
+ zrender 5.3.2 BSD-3-Clause
========================================================================
MIT licenses
diff --git a/dist/LICENSE b/dist/licenses/ui-licenses/license-echarts.txt
similarity index 54%
copy from dist/LICENSE
copy to dist/licenses/ui-licenses/license-echarts.txt
index a97cbee..c633765 100644
--- a/dist/LICENSE
+++ b/dist/licenses/ui-licenses/license-echarts.txt
@@ -1,3 +1,4 @@
+
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
@@ -173,191 +174,49 @@
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
+ END OF TERMS AND CONDITIONS
-========================================================================
-Apache-2.0 licenses
-========================================================================
-
- github.com/SkyAPM/badger/v3 v3.0.0-20220403004319-fea65bd5e9e4 Apache-2.0
- github.com/coreos/go-semver v0.3.0 Apache-2.0
- github.com/coreos/go-systemd/v22 v22.3.2 Apache-2.0
- github.com/dgraph-io/ristretto v0.1.0 Apache-2.0
- github.com/envoyproxy/protoc-gen-validate v0.1.0 Apache-2.0
- github.com/golang/glog v1.0.0 Apache-2.0
- github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da Apache-2.0
- github.com/golang/mock v1.6.0 Apache-2.0
- github.com/google/btree v1.0.1 Apache-2.0
- github.com/google/flatbuffers v1.12.1 Apache-2.0
- github.com/grpc-ecosystem/go-grpc-middleware v1.3.0 Apache-2.0
- github.com/grpc-ecosystem/go-grpc-prometheus v1.2.0 Apache-2.0
- github.com/inconshreveable/mousetrap v1.0.0 Apache-2.0
- github.com/jonboulle/clockwork v0.2.2 Apache-2.0
- github.com/matttproud/golang_protobuf_extensions v1.0.1 Apache-2.0
- github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd Apache-2.0
- github.com/modern-go/reflect2 v1.0.2 Apache-2.0
- github.com/mschoch/smat v0.2.0 Apache-2.0
- github.com/oklog/run v1.1.0 Apache-2.0
- github.com/prometheus/client_golang v1.12.2 Apache-2.0
- github.com/prometheus/client_model v0.2.0 Apache-2.0
- github.com/prometheus/common v0.32.1 Apache-2.0
- github.com/prometheus/procfs v0.7.3 Apache-2.0
- github.com/soheilhy/cmux v0.1.5 Apache-2.0
- github.com/spf13/afero v1.8.2 Apache-2.0
- github.com/spf13/cobra v1.4.0 Apache-2.0
- go.etcd.io/etcd/api/v3 v3.5.4 Apache-2.0
- go.etcd.io/etcd/client/pkg/v3 v3.5.4 Apache-2.0
- go.etcd.io/etcd/client/v2 v2.305.4 Apache-2.0
- go.etcd.io/etcd/client/v3 v3.5.4 Apache-2.0
- go.etcd.io/etcd/pkg/v3 v3.5.4 Apache-2.0
- go.etcd.io/etcd/raft/v3 v3.5.4 Apache-2.0
- go.etcd.io/etcd/server/v3 v3.5.4 Apache-2.0
- go.opencensus.io v0.23.0 Apache-2.0
- go.opentelemetry.io/contrib v0.20.0 Apache-2.0
- go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.20.0 Apache-2.0
- go.opentelemetry.io/otel v0.20.0 Apache-2.0
- go.opentelemetry.io/otel/exporters/otlp v0.20.0 Apache-2.0
- go.opentelemetry.io/otel/metric v0.20.0 Apache-2.0
- go.opentelemetry.io/otel/sdk v0.20.0 Apache-2.0
- go.opentelemetry.io/otel/sdk/export/metric v0.20.0 Apache-2.0
- go.opentelemetry.io/otel/sdk/metric v0.20.0 Apache-2.0
- go.opentelemetry.io/otel/trace v0.20.0 Apache-2.0
- go.opentelemetry.io/proto/otlp v0.7.0 Apache-2.0
- google.golang.org/genproto v0.0.0-20220615141314-f1464d18c36b Apache-2.0
- google.golang.org/grpc v1.47.0 Apache-2.0
- gopkg.in/ini.v1 v1.66.4 Apache-2.0
- gopkg.in/yaml.v2 v2.4.0 Apache-2.0
-
-========================================================================
-Apache-2.0 and BSD-3-Clause licenses
-========================================================================
-
- github.com/RoaringBitmap/roaring v0.9.1 Apache-2.0 and BSD-3-Clause
-
-========================================================================
-BSD-2-Clause licenses
-========================================================================
+ APPENDIX: How to apply the Apache License to your work.
- github.com/gorilla/websocket v1.4.2 BSD-2-Clause
- github.com/magiconair/properties v1.8.6 BSD-2-Clause
- github.com/pkg/errors v0.9.1 BSD-2-Clause
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
-========================================================================
-BSD-3-Clause licenses
-========================================================================
+ Copyright [yyyy] [name of copyright owner]
- github.com/bits-and-blooms/bitset v1.2.0 BSD-3-Clause
- github.com/fsnotify/fsnotify v1.5.4 BSD-3-Clause
- github.com/gogo/protobuf v1.3.2 BSD-3-Clause
- github.com/golang/protobuf v1.5.2 BSD-3-Clause
- github.com/golang/snappy v0.0.3 BSD-3-Clause
- github.com/google/go-cmp v0.5.8 BSD-3-Clause
- github.com/google/uuid v1.3.0 BSD-3-Clause
- github.com/grpc-ecosystem/grpc-gateway v1.16.0 BSD-3-Clause
- github.com/grpc-ecosystem/grpc-gateway/v2 v2.10.3 BSD-3-Clause
- github.com/pmezard/go-difflib v1.0.0 BSD-3-Clause
- github.com/spf13/pflag v1.0.5 BSD-3-Clause
- golang.org/x/crypto v0.0.0-20220525230936-793ad666bf5e BSD-3-Clause
- golang.org/x/exp v0.0.0-20220602145555-4a0574d9293f BSD-3-Clause
- golang.org/x/mod v0.6.0-dev.0.20220106191415-9b9b3d81d5e3 BSD-3-Clause
- golang.org/x/net v0.0.0-20220520000938-2e3eb7b945c2 BSD-3-Clause
- golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a BSD-3-Clause
- golang.org/x/text v0.3.7 BSD-3-Clause
- golang.org/x/time v0.0.0-20210220033141-f8bda1e9f3ba BSD-3-Clause
- golang.org/x/xerrors v0.0.0-20220517211312-f3a8303e98df BSD-3-Clause
- google.golang.org/protobuf v1.28.0 BSD-3-Clause
+ Licensed 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
-========================================================================
-BSD-3-Clause and Apache-2.0 and MIT licenses
-========================================================================
+ http://www.apache.org/licenses/LICENSE-2.0
- github.com/klauspost/compress v1.15.6 BSD-3-Clause and Apache-2.0 and MIT
+ 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.
-========================================================================
-ISC licenses
-========================================================================
- github.com/davecgh/go-spew v1.1.1 ISC
-========================================================================
-MIT licenses
-========================================================================
- github.com/SkyAPM/clock v1.3.1-0.20220416123716-97dcb111a8d8 MIT
- github.com/beorn7/perks v1.0.1 MIT
- github.com/cespare/xxhash v1.1.0 MIT
- github.com/cespare/xxhash/v2 v2.1.2 MIT
- github.com/dustin/go-humanize v1.0.0 MIT
- github.com/form3tech-oss/jwt-go v3.2.3+incompatible MIT
- github.com/go-chi/chi/v5 v5.0.7 MIT
- github.com/json-iterator/go v1.1.12 MIT
- github.com/mitchellh/mapstructure v1.5.0 MIT
- github.com/onsi/ginkgo/v2 v2.1.4 MIT
- github.com/onsi/gomega v1.19.0 MIT
- github.com/pelletier/go-toml/v2 v2.0.1 MIT
- github.com/rs/zerolog v1.26.1 MIT
- github.com/sirupsen/logrus v1.7.0 MIT
- github.com/spf13/cast v1.5.0 MIT
- github.com/spf13/jwalterweatherman v1.1.0 MIT
- github.com/spf13/viper v1.12.0 MIT
- github.com/stretchr/objx v0.1.1 MIT
- github.com/stretchr/testify v1.7.1 MIT
- github.com/subosito/gotenv v1.3.0 MIT
- github.com/tmc/grpc-websocket-proxy v0.0.0-20201229170055-e5319fda7802 MIT
- github.com/xiang90/probing v0.0.0-20190116061207-43a291ad63a2 MIT
- go.etcd.io/bbolt v1.3.6 MIT
- go.uber.org/atomic v1.9.0 MIT
- go.uber.org/multierr v1.8.0 MIT
- go.uber.org/zap v1.17.0 MIT
- gopkg.in/natefinch/lumberjack.v2 v2.0.0 MIT
========================================================================
-MIT and Apache-2.0 licenses
-========================================================================
+Apache ECharts Subcomponents:
- github.com/pelletier/go-toml v1.9.5 MIT and Apache-2.0
- gopkg.in/yaml.v3 v3.0.1 MIT and Apache-2.0
-
-========================================================================
-MIT and BSD-3-Clause licenses
-========================================================================
-
- sigs.k8s.io/yaml v1.2.0 MIT and BSD-3-Clause
-
-========================================================================
-MPL-2.0 licenses
-========================================================================
-
- github.com/hashicorp/golang-lru v0.5.4 MPL-2.0
- github.com/hashicorp/hcl v1.0.0 MPL-2.0
-
-========================================================================
-UI related licenses
-========================================================================
-
-The following components are used in UI.See project link for details.
-The text of each license is also included at licenses/ui-licenses/LICENSE-[project].txt.
-
-
-========================================================================
-BSD-3-Clause licenses
-========================================================================
-
- normalize-wheel 1.0.1 BSD-3-Clause
-
-========================================================================
-MIT licenses
-========================================================================
+The Apache ECharts project contains subcomponents with separate copyright
+notices and license terms. Your use of the source code for these
+subcomponents is also subject to the terms and conditions of the following
+licenses.
- async-validator MIT
- babel-helper-vue-jsx-merge-props 2.0.3 MIT
- babel-runtime 6.26.0 MIT
- babel-runtime/node_modules/core-js 2.6.12 MIT
- babel-runtime/node_modules/regenerator-runtime 0.11.1 MIT
- core-js 3.22.8 MIT
- deepmerge 1.5.2 MIT
- element-ui 2.15.9 MIT
- resize-observer-polyfill 1.5.1 MIT
- throttle-debounce 1.1.0 MIT
- vue 2.6.14 MIT
- vue-router 3.5.4 MIT
- vuex 3.6.2 MIT
+BSD 3-Clause (d3.js):
+The following files embed [d3.js](https://github.com/d3/d3) BSD 3-Clause:
+ `/src/chart/treemap/treemapLayout.ts`,
+ `/src/chart/tree/layoutHelper.ts`,
+ `/src/chart/graph/forceHelper.ts`,
+ `/src/util/number.ts`
+See `/licenses/LICENSE-d3` for details of the license.
diff --git a/dist/licenses/ui-licenses/license-tslib.txt b/dist/licenses/ui-licenses/license-tslib.txt
new file mode 100644
index 0000000..bfe6430
--- /dev/null
+++ b/dist/licenses/ui-licenses/license-tslib.txt
@@ -0,0 +1,12 @@
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
\ No newline at end of file
diff --git a/dist/licenses/ui-licenses/license-zrender.txt b/dist/licenses/ui-licenses/license-zrender.txt
new file mode 100644
index 0000000..66348cb
--- /dev/null
+++ b/dist/licenses/ui-licenses/license-zrender.txt
@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2017, Baidu Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+ contributors may be used to endorse or promote products derived from
+ this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
diff --git a/ui/LICENSE b/ui/LICENSE
index 2c3b40e..fd89916 100644
--- a/ui/LICENSE
+++ b/ui/LICENSE
@@ -6,11 +6,24 @@ The following components are used in UI.See project link for details.
The text of each license is also included at licenses/ui-licenses/LICENSE-[project].txt.
+========================================================================
+0BSD licenses
+========================================================================
+
+ tslib 2.3.0 0BSD
+
+========================================================================
+Apache-2.0 licenses
+========================================================================
+
+ echarts 5.3.3 Apache-2.0
+
========================================================================
BSD-3-Clause licenses
========================================================================
normalize-wheel 1.0.1 BSD-3-Clause
+ zrender 5.3.2 BSD-3-Clause
========================================================================
MIT licenses
diff --git a/ui/package-lock.json b/ui/package-lock.json
index a8777c5..7845896 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"core-js": "^3.6.5",
+ "echarts": "^5.3.3",
"element-ui": "^2.15.9",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
@@ -5869,6 +5870,15 @@
"safer-buffer": "^2.1.0"
}
},
+ "node_modules/echarts": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
+ "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+ "dependencies": {
+ "tslib": "2.3.0",
+ "zrender": "5.3.2"
+ }
+ },
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -13074,6 +13084,11 @@
}
}
},
+ "node_modules/tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"node_modules/tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -14808,6 +14823,14 @@
"engines": {
"node": ">=10"
}
+ },
+ "node_modules/zrender": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
+ "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+ "dependencies": {
+ "tslib": "2.3.0"
+ }
}
},
"dependencies": {
@@ -19372,6 +19395,15 @@
"safer-buffer": "^2.1.0"
}
},
+ "echarts": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
+ "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+ "requires": {
+ "tslib": "2.3.0",
+ "zrender": "5.3.2"
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -25207,6 +25239,11 @@
"integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
"dev": true
},
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -26613,6 +26650,14 @@
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"dev": true
+ },
+ "zrender": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
+ "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+ "requires": {
+ "tslib": "2.3.0"
+ }
}
}
}
diff --git a/ui/package.json b/ui/package.json
index 7b51d7c..f9851d0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -11,6 +11,7 @@
},
"dependencies": {
"core-js": "^3.6.5",
+ "echarts": "^5.3.3",
"element-ui": "^2.15.9",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 58ba6ee..0bee284 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -18,16 +18,16 @@
-->
<template>
- <div id="app">
+ <div id="app" @mousedown="appMouseDown">
<el-container>
<el-header v-if="show">
<header-component :active="activePath" :showButton="showButton"></header-component>
</el-header>
<el-main>
<keep-alive>
- <router-view v-if="$route.meta.keepAlive"/>
+ <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
- <router-view v-if="!$route.meta.keepAlive"></router-view>
+ <router-view v-if="!$route.meta.keepAlive"></router-view>
</el-main>
</el-container>
</div>
@@ -43,12 +43,15 @@ export default {
showButton: true,
}
},
+
components: {
HeaderComponent
},
+
beforeCreate() {
this.$loading.create()
},
+
created() {
let path = this.$route.path
let name = this.$route.name
@@ -63,9 +66,16 @@ export default {
this.$store.commit('changeShowButton', false)
}
},
+
mounted() {
this.$loading.close()
},
+
+ methods: {
+ appMouseDown() {
+ this.$store.commit("changeShowRightMenu", false)
+ }
+ }
}
</script>
diff --git a/ui/src/assets/main.scss b/ui/src/assets/main.scss
index 9dc7787..d3ab2e1 100644
--- a/ui/src/assets/main.scss
+++ b/ui/src/assets/main.scss
@@ -48,7 +48,7 @@
/* ==================
font style
==================== */
-.text-overflow-hidden {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
+.text-overflow-hidden {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block;}
.text-tips {font-size: var(--size-mini);}
.text-normal {font-size: var(--size-lt);}
.text-title {font-size: var(--size-title);}
@@ -66,6 +66,7 @@
.text-main-color {color: var(--color-main-font);}
.text-general-color {color: var(--color-general-font)}
.text-secondary-color {color: var(--color-secondary-font)}
+.text-placeholder-color {color: var(--color-placeholder-font)}
/* ==================
icon style
@@ -79,11 +80,24 @@
==================== */
.border-radius {border-radius: 10px;}
.border-radius-little {border-radius: 5px;}
+.border-radius-top-little {border-top-left-radius: 5px; border-top-right-radius: 5px;}
+.border-radius-bottom-little {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
+
+/* ==================
+ box-shadow
+==================== */
+.box-shadow{box-shadow: 0px 0px 10px var(--color-placeholder-font);}
/* ==================
margin
==================== */
.margin-top-bottom {margin: 20px 0 20px 0;}
.margin-top-bottom-little {margin: 10px 0 10px 0;}
+.margin-left {margin: 0 0 0 20px;}
+.margin-left-little {margin-left: 10px;}
+.margin-left-small {margin-left: 5px;}
+.margin-right {margin: 0 20px 0 0;}
+.margin-right-little {margin-right: 10px;}
+.margin-right-small {margin-right: 5px;}
.margin-all {margin: 20px;}
.margin-all-little {margin: 10px;}
\ No newline at end of file
diff --git a/ui/src/components/HeaderComponent.vue b/ui/src/components/HeaderComponent.vue
index 84f48d9..c17f6b5 100644
--- a/ui/src/components/HeaderComponent.vue
+++ b/ui/src/components/HeaderComponent.vue
@@ -27,15 +27,22 @@
</el-image>
<div class="title text-main-color text-title text-family text-weight-lt">BanyanDB Manager</div>
<div class="flex center pointer icon-size" @click="changeAsideWidth" v-if="showButton">
- <el-tooltip class="item" effect="dark" :content="!isCollapse ? 'Collapse menu' : 'Expand menu'" placement="bottom">
+ <el-tooltip class="item" effect="dark" :content="!isCollapse ? 'Collapse menu' : 'Expand menu'"
+ placement="bottom">
<i class="el-icon-s-fold icon" v-if="!isCollapse"></i>
<i class="el-icon-s-unfold icon" v-else></i>
</el-tooltip>
-
</div>
<div v-else class="icon-size"></div>
+ <span
+ v-if="showButton && currentMenu"
+ :title="currentMenu.metadata.group + ' / ' + currentMenu.metadata.type + ' / ' + currentMenu.metadata.name"
+ class="text-overflow-hidden text-general-color pointer margin-left-small" style="width:380px;">{{ currentMenu.metadata.group + ' / ' +
+ currentMenu.metadata.type + ' / ' + currentMenu.metadata.name
+ }}</span>
+ <div v-else style="width:380px;" class="margin-left-small"></div>
</div>
- <div class="navigation">
+ <div class="navigation" style="margin-right: 450px;">
<el-menu active-text-color="#6E38F7" router class="el-menu-demo" mode="horizontal" :default-active="active"
@select="handleSelect">
<el-menu-item index="/home">Home</el-menu-item>
@@ -66,6 +73,7 @@ export default {
...mapState({
showButton: (state) => state.header.showButton,
isCollapse: (state) => state.aside.isCollapse,
+ currentMenu: (state) => state.tags.currentMenu
})
},
props: {
@@ -103,7 +111,7 @@ export default {
}
.image {
- width: 280px;
+ width: 665px;
height: 100%;
.el-image {
diff --git a/ui/src/components/databaseComponents/AsideComponent.vue b/ui/src/components/databaseComponents/AsideComponent.vue
deleted file mode 100644
index a50142d..0000000
--- a/ui/src/components/databaseComponents/AsideComponent.vue
+++ /dev/null
@@ -1,122 +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>
- <el-menu default-active="2" active-text-color="#6E38F7" style="height: 100%" :collapse="isCollapse"
- :collapse-transition="false">
-
- <el-submenu index="1">
- <template slot="title">
- <i class="el-icon-folder"></i>
- <span slot="title">Database</span>
- </template>
- <el-submenu index="1-1">
- <template slot="title">
- <i class="el-icon-folder"></i>
- <span slot="title">Node name</span>
- </template>
- <el-submenu index="1-1-1">
- <template slot="title">
- <i class="el-icon-folder"></i>
- <span slot="title">Stream</span>
- </template>
- <el-menu-item index="1-1-3-1">
- <template slot="title">
- <i class="el-icon-document"></i>
- <span slot="title">db</span>
- </template>
- </el-menu-item>
- <el-menu-item index="1-1-3-2">
- <template slot="title">
- <i class="el-icon-document"></i>
- <span slot="title">product</span>
- </template>
- </el-menu-item>
- <el-menu-item index="1-1-3-3">
- <template slot="title">
- <i class="el-icon-document"></i>
- <span slot="title">xxxxxxx</span>
- </template>
- </el-menu-item>
- </el-submenu>
- </el-submenu>
- <el-submenu index="1-2">
- <template slot="title">
- <i class="el-icon-folder"></i>
- <span slot="title">node</span>
- </template>
- <el-submenu index="1-2-1">
- <template slot="title">
- <i class="el-icon-folder"></i>
- <span slot="title">Stream</span>
- </template>
- <el-menu-item index="1-2-3-1">
- <template slot="title">
- <i class="el-icon-document"></i>
- <span slot="title">db</span>
- </template>
- </el-menu-item>
- <el-menu-item index="1-2-3-2">
- <template slot="title">
- <i class="el-icon-document"></i>
- <span slot="title">product</span>
- </template>
- </el-menu-item>
- <el-menu-item index="1-2-3-3">
- <template slot="title">
- <i class="el-icon-document"></i>
- <span slot="title">xxxxxx</span>
- </template>
- </el-menu-item>
- </el-submenu>
- </el-submenu>
- </el-submenu>
-
- </el-menu>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
- name: 'AsideComponent',
- data() {
- return {
- }
- },
- computed: {
- ...mapState({
- isCollapse: (state) => state.aside.isCollapse
- })
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-menu {
- width: 100%;
- border-right: none;
- text-align: start;
- text-justify: middle;
-}
-
-i {
- font-size: 25px;
- color: var(--color-main);
-}
-</style>
\ No newline at end of file
diff --git a/ui/src/components/databaseComponents/TagNavigationComponent.vue b/ui/src/components/databaseComponents/MainStartComponent.vue
similarity index 54%
copy from ui/src/components/databaseComponents/TagNavigationComponent.vue
copy to ui/src/components/databaseComponents/MainStartComponent.vue
index 4257203..f8ec185 100644
--- a/ui/src/components/databaseComponents/TagNavigationComponent.vue
+++ b/ui/src/components/databaseComponents/MainStartComponent.vue
@@ -18,45 +18,15 @@
-->
<template>
- <div class="justify-start flex">
- <el-tag class="pointer" size="medium" v-for="(item, index) in tags" :key="item.name" closable
- @click="changeMenu(item)" @close="handleClose(item, index)" effect="dark">{{ item.name }}
- </el-tag>
- </div>
+ <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 file to start working!</div>
+ </div>
</template>
-<script>
-import { mapState, mapMutations } from "vuex"
-export default {
- name: 'TagNavigationComponent',
- computed: {
- ...mapState({
- tags: (state) => state.tags.tagsList,
- }),
- },
- created() {
-
- },
- methods: {
- ...mapMutations({
- close: 'closeTag',
- }),
- changeMenu(item) {
- console.log(item)
- },
- handleClose(item, index) {
- console.log(item, index)
- }
- }
-}
-</script>
-
<style lang="scss" scoped>
-div {
- margin: 20px 20px 0 20px;
-
- .el-tag {
- margin-right: 15px;
- }
+.startContainer {
+ width: 100%;
+ height: 100%;
}
</style>
\ No newline at end of file
diff --git a/ui/src/components/databaseComponents/TagNavigationComponent.vue b/ui/src/components/databaseComponents/TagNavigationComponent.vue
index 4257203..432cfcf 100644
--- a/ui/src/components/databaseComponents/TagNavigationComponent.vue
+++ b/ui/src/components/databaseComponents/TagNavigationComponent.vue
@@ -19,8 +19,16 @@
<template>
<div class="justify-start flex">
- <el-tag class="pointer" size="medium" v-for="(item, index) in tags" :key="item.name" closable
- @click="changeMenu(item)" @close="handleClose(item, index)" effect="dark">{{ item.name }}
+ <el-tag class="pointer flex align-item-center" size="medium" v-for="(item, index) in tags" :key="item.metadata.name"
+ closable @click="changeMenu(item)" @close="handleClose(item, index)" style="width:180px;" :effect="currentMenu.metadata.group === item.metadata.group &&
+ currentMenu.metadata.type === item.metadata.type &&
+ 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:85%">{{
+ item.metadata.name
+ }}</span>
</el-tag>
</div>
</template>
@@ -32,6 +40,7 @@ export default {
computed: {
...mapState({
tags: (state) => state.tags.tagsList,
+ currentMenu: (state) => state.tags.currentMenu
}),
},
created() {
@@ -43,9 +52,19 @@ export default {
}),
changeMenu(item) {
console.log(item)
+ /**
+ * 切换组件
+ * currentMenu
+ */
+ this.$store.commit('selectMenu', item)
},
handleClose(item, index) {
console.log(item, index)
+ let length = this.tags.length - 1
+ this.close(item)
+ /**
+ * 切换组件
+ */
}
}
}
diff --git a/ui/src/components/databaseComponents/asideComponents/AsideComponent.vue b/ui/src/components/databaseComponents/asideComponents/AsideComponent.vue
new file mode 100644
index 0000000..29503c0
--- /dev/null
+++ b/ui/src/components/databaseComponents/asideComponents/AsideComponent.vue
@@ -0,0 +1,416 @@
+<!--
+ ~ 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 style="width:100%; height:100%">
+ <el-menu :default-active="currentMenu ? currentMenu.metadata.group + currentMenu.metadata.name : ''" active-text-color="#6E38F7"
+ style="height: 100%;" :collapse="isCollapse" :collapse-transition="false">
+ <div v-for="(item, index) in groupLists" :key="item.metadata.name"
+ @contextmenu.prevent="rightClickGroup($event, index)">
+ <el-submenu :index="item.metadata.name + '-' + index">
+ <template slot="title">
+ <i class="el-icon-folder"></i>
+ <span slot="title" :title="item.metadata.name" style="width: 70%"
+ class="text-overflow-hidden">{{
+ item.metadata.name
+ }}</span>
+ </template>
+ <div @contextmenu.prevent="rightClickFolder($event, index, 'stream')">
+ <el-submenu :index="item.metadata.name + '-' + index + '-stream'">
+ <template slot="title">
+ <i class="el-icon-folder"></i>
+ <span slot="title">Stream</span>
+ </template>
+ <div @contextmenu.prevent="rightClick($event, index)">
+ <el-menu-item :index="'streamFile1' + index" @click="openStreamFile">
+ <template slot="title">
+ <i class="el-icon-document"></i>
+ <span slot="title" title="streamFile" style="width: 90%"
+ class="text-overflow-hidden">streamFile1</span>
+ </template>
+ </el-menu-item>
+ </div>
+ </el-submenu>
+ </div>
+ <div @contextmenu.prevent="rightClickFolder($event, index, 'measure')">
+ <el-submenu :index="item.metadata.name + '-' + index + '-measure'">
+ <template slot="title">
+ <i class="el-icon-folder"></i>
+ <span slot="title">Measure</span>
+ </template>
+ <div v-for="(itemMeasure, indexMeasure) in item.measure" :key="itemMeasure.metadata.name">
+ <div @contextmenu.prevent="rightClick($event, index, indexMeasure)">
+ <el-menu-item :index="itemMeasure.metadata.group + itemMeasure.metadata.name"
+ @click="openMeasureFile(index, indexMeasure)">
+ <template slot="title">
+ <i class="el-icon-document"></i>
+ <span slot="title" :title="itemMeasure.metadata.name" style="width: 90%"
+ class="text-overflow-hidden">{{ itemMeasure.metadata.name }}</span>
+ </template>
+ </el-menu-item>
+ </div>
+ </div>
+ </el-submenu>
+ </div>
+ </el-submenu>
+ </div>
+ </el-menu>
+ <div v-if="showRightMenu" class="right-menu border-radius-little box-shadow"
+ :style="{ top: topNumber + 'px', left: leftNumber + 'px' }">
+ <right-menu-component :rightMenuList="rightMenuList"></right-menu-component>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import RightMenuComponent from './RightMenuComponent.vue'
+export default {
+ name: 'AsideComponent',
+ data() {
+ return {
+ groupLists: [{
+ "metadata": {
+ "group": "",
+ "name": "measure-default",
+ "id": 0,
+ "createRevision": "0",
+ "modRevision": "0"
+ },
+ "catalog": "CATALOG_MEASURE",
+ "resourceOpts": {
+ "shardNum": 1,
+ "blockNum": 12,
+ "ttl": "420d"
+ },
+ "updatedAt": null,
+ "measure": [
+ {
+ "metadata": {
+ "group": "measure-default",
+ "name": "browser_app_error_rate",
+ "id": 0,
+ "createRevision": "764",
+ "modRevision": "764"
+ },
+ "tagFamilies": [
+ {
+ "name": "default",
+ "tags": [
+ {
+ "name": "entity_id",
+ "type": "TAG_TYPE_STRING"
+ },
+ {
+ "name": "denominator",
+ "type": "TAG_TYPE_INT"
+ },
+ {
+ "name": "numerator",
+ "type": "TAG_TYPE_INT"
+ },
+ {
+ "name": "time_bucket",
+ "type": "TAG_TYPE_INT"
+ },
+ {
+ "name": "id",
+ "type": "TAG_TYPE_ID"
+ }
+ ]
+ }
+ ],
+ "fields": [
+ {
+ "name": "percentage",
+ "fieldType": "FIELD_TYPE_INT",
+ "encodingMethod": "ENCODING_METHOD_GORILLA",
+ "compressionMethod": "COMPRESSION_METHOD_ZSTD"
+ }
+ ],
+ "entity": {
+ "tagNames": [
+ "id"
+ ]
+ },
+ "interval": "1h",
+ "updatedAt": null
+ },
+ {
+ "metadata": {
+ "group": "measure-default",
+ "name": "browser_app_error_sum",
+ "id": 0,
+ "createRevision": "769",
+ "modRevision": "769"
+ },
+ "tagFamilies": [
+ {
+ "name": "default",
+ "tags": [
+ {
+ "name": "entity_id",
+ "type": "TAG_TYPE_STRING"
+ },
+ {
+ "name": "time_bucket",
+ "type": "TAG_TYPE_INT"
+ },
+ {
+ "name": "id",
+ "type": "TAG_TYPE_ID"
+ }
+ ]
+ }
+ ],
+ "fields": [
+ {
+ "name": "value",
+ "fieldType": "FIELD_TYPE_INT",
+ "encodingMethod": "ENCODING_METHOD_GORILLA",
+ "compressionMethod": "COMPRESSION_METHOD_ZSTD"
+ }
+ ],
+ "entity": {
+ "tagNames": [
+ "id"
+ ]
+ },
+ "interval": "1h",
+ "updatedAt": null
+ },
+ {
+ "metadata": {
+ "group": "measure-default",
+ "name": "browser_app_page_ajax_error_sum",
+ "id": 0,
+ "createRevision": "790",
+ "modRevision": "790"
+ },
+ "tagFamilies": [
+ {
+ "name": "default",
+ "tags": [
+ {
+ "name": "entity_id",
+ "type": "TAG_TYPE_STRING"
+ },
+ {
+ "name": "service_id",
+ "type": "TAG_TYPE_STRING"
+ },
+ {
+ "name": "time_bucket",
+ "type": "TAG_TYPE_INT"
+ },
+ {
+ "name": "id",
+ "type": "TAG_TYPE_ID"
+ }
+ ]
+ }
+ ],
+ "fields": [
+ {
+ "name": "value",
+ "fieldType": "FIELD_TYPE_INT",
+ "encodingMethod": "ENCODING_METHOD_GORILLA",
+ "compressionMethod": "COMPRESSION_METHOD_ZSTD"
+ }
+ ],
+ "entity": {
+ "tagNames": [
+ "id"
+ ]
+ },
+ "interval": "1h",
+ "updatedAt": null
+ }
+ ]
+ },
+ {
+ "metadata": {
+ "group": "",
+ "name": "stream-browser_error_log",
+ "id": 0,
+ "createRevision": "0",
+ "modRevision": "0"
+ },
+ "catalog": "CATALOG_STREAM",
+ "resourceOpts": {
+ "shardNum": 2,
+ "blockNum": 0,
+ "ttl": "420d"
+ },
+ "updatedAt": null
+ },
+ {
+ "metadata": {
+ "group": "",
+ "name": "stream-default",
+ "id": 0,
+ "createRevision": "0",
+ "modRevision": "0"
+ },
+ "catalog": "CATALOG_STREAM",
+ "resourceOpts": {
+ "shardNum": 1,
+ "blockNum": 0,
+ "ttl": "420d"
+ },
+ "updatedAt": null
+ },],
+ topNumber: 0,
+ leftNumber: 0,
+ rightMenuListOne: [{
+ icon: "el-icon-document",
+ name: "new File",
+ id: "create File"
+ }, {
+ icon: "el-icon-refresh-right",
+ name: "refresh",
+ id: "refresh Folder"
+ }, {
+ icon: "el-icon-delete",
+ name: "delete",
+ id: "delete Folder"
+ }],
+ rightMenuList: this.rightMenuListOne,
+ rightMenuListTwo: [{
+ icon: "el-icon-folder",
+ name: "new Group",
+ id: "create Group"
+ }, {
+ icon: "el-icon-refresh-right",
+ name: "refresh",
+ id: "refresh Group"
+ }, {
+ icon: "el-icon-delete",
+ name: "delete",
+ id: "delete Group"
+ }],
+ rightMenuListThree: [{
+ icon: "el-icon-refresh-right",
+ name: "refresh",
+ id: "refresh File"
+ }, {
+ icon: "el-icon-delete",
+ name: "delete",
+ id: "delete File"
+ }]
+ }
+ },
+
+ components: {
+ RightMenuComponent
+ },
+
+ async created() {
+ console.log('this is aside created')
+ this.getGroupLists()
+ },
+
+ computed: {
+ ...mapState({
+ isCollapse: (state) => state.aside.isCollapse,
+ showRightMenu: (state) => state.menuState.showRightMenu,
+ currentMenu: (state) => state.tags.currentMenu
+ })
+ },
+
+ methods: {
+ async getGroupLists() {
+ try {
+ const data = await this.$http.get('/api/v1/group/schema/lists')
+ if (data.status != 200) {
+ this.$message.error(data.status, data.statusText)
+ } else {
+ this.groupLists = data.data.group
+ console.log(data)
+ }
+ } catch (err) {
+ console.log(err)
+ this.$message.errorNet()
+ }
+ },
+ stopPropagation(e) {
+ e = e || window.event;
+ if (e.stopPropagation) { //W3C阻止冒泡方法
+ e.stopPropagation();
+ } else {
+ e.cancelBubble = true; //IE阻止冒泡方法
+ }
+ },
+ openRightMenu(e) {
+ this.$store.commit("changeShowRightMenu", true)
+ this.topNumber = e.pageY
+ this.leftNumber = e.pageX
+ this.stopPropagation()
+ },
+ // open file right menu
+ rightClick(e, index, indexMeasure) {
+ this.rightMenuList = this.rightMenuListThree
+ this.openRightMenu(e)
+ console.log('rightClick')
+ },
+ // open folder right menu
+ rightClickFolder(e, index, type) {
+ this.rightMenuList = this.rightMenuListOne
+ this.openRightMenu(e)
+ console.log('rightClickFolder')
+ },
+ // open group right menu
+ rightClickGroup(e, index) {
+ this.rightMenuList = this.rightMenuListTwo
+ this.openRightMenu(e)
+ console.log('rightClickGroup')
+ },
+ openStreamFile() {
+
+
+ },
+ openMeasureFile(index, indexMeasure) {
+ let item = this.groupLists[index].measure[indexMeasure]
+ item.metadata.type = "measure"
+ this.$store.commit('selectMenu', item)
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.el-menu {
+ width: 100%;
+ border-right: none;
+ text-align: start;
+ text-justify: middle;
+}
+
+.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/databaseComponents/TagNavigationComponent.vue b/ui/src/components/databaseComponents/asideComponents/RightMenuComponent.vue
similarity index 57%
copy from ui/src/components/databaseComponents/TagNavigationComponent.vue
copy to ui/src/components/databaseComponents/asideComponents/RightMenuComponent.vue
index 4257203..8477051 100644
--- a/ui/src/components/databaseComponents/TagNavigationComponent.vue
+++ b/ui/src/components/databaseComponents/asideComponents/RightMenuComponent.vue
@@ -18,45 +18,29 @@
-->
<template>
- <div class="justify-start flex">
- <el-tag class="pointer" size="medium" v-for="(item, index) in tags" :key="item.name" closable
- @click="changeMenu(item)" @close="handleClose(item, index)" effect="dark">{{ item.name }}
- </el-tag>
- </div>
+ <div style="width: 100%;" class="border-radius-little">
+ <div style="width: 100%;" v-for="(item, index) in rightMenuList" :key="item.name">
+ <right-menu-item
+ :class="index == rightMenuList.length - 1 ? 'border-radius-bottom-little' : index == 0 ? 'border-radius-top-little bd-bottom' : 'bd-bottom'"
+ :icon="item.icon" :name="item.name"></right-menu-item>
+ </div>
+ </div>
</template>
<script>
-import { mapState, mapMutations } from "vuex"
+import RightMenuItem from './RightMenuItemComponent.vue'
export default {
- name: 'TagNavigationComponent',
- computed: {
- ...mapState({
- tags: (state) => state.tags.tagsList,
- }),
- },
- created() {
-
- },
- methods: {
- ...mapMutations({
- close: 'closeTag',
- }),
- changeMenu(item) {
- console.log(item)
+ name: "RightMenuComponent",
+ data() {
+ return {
+ }
},
- handleClose(item, index) {
- console.log(item, index)
+ props:['rightMenuList'],
+ components: {
+ RightMenuItem
}
- }
}
</script>
<style lang="scss" scoped>
-div {
- margin: 20px 20px 0 20px;
-
- .el-tag {
- margin-right: 15px;
- }
-}
</style>
\ No newline at end of file
diff --git a/ui/src/views/Database.vue b/ui/src/components/databaseComponents/asideComponents/RightMenuItemComponent.vue
similarity index 52%
copy from ui/src/views/Database.vue
copy to ui/src/components/databaseComponents/asideComponents/RightMenuItemComponent.vue
index 83c1467..85db8aa 100644
--- a/ui/src/views/Database.vue
+++ b/ui/src/components/databaseComponents/asideComponents/RightMenuItemComponent.vue
@@ -18,45 +18,46 @@
-->
<template>
- <el-container>
- <el-aside :width="fatherWidth" class="bd-top">
- <aside-component></aside-component>
- </el-aside>
- <el-main style="background-color: var(--color-background)">
- <main-component></main-component>
- </el-main>
- </el-container>
+ <div class="flex right-menu-item align-item-center pointer" @mouseover="handleOver" @mouseleave="handleLeave"
+ :style="{ backgroundColor: bdColor, color: colorStr}">
+ <i :class="icon"></i>
+ <div style="width: 70%;" class="text-overflow-hidden margin-left-small">{{ name }}</div>
+ </div>
</template>
<script>
-import AsideComponent from '../components/databaseComponents/AsideComponent.vue'
-
-import MainComponent from '../components/databaseComponents/MainComponent.vue'
-import { mapState } from 'vuex'
export default {
- name: 'Database',
+ name: "RightMenuItemComponent",
data() {
return {
-
+ bdColor: "white",
+ colorStr: "var(--color-main-font)"
}
},
- computed: {
- ...mapState({
- fatherWidth: (state) => state.aside.fatherWidth
- })
- },
- components: {
- AsideComponent,
- MainComponent
- },
- activated() {
- console.log('this component is activated!')
- },
- deactivated() {
- console.log('this component is deactivated!')
- },
+ props: ['icon', 'name'],
+ methods: {
+ handleOver() {
+ this.bdColor = "#ecf5ff"
+ this.colorStr = "var(--color-main)"
+ },
+ handleLeave() {
+ this.bdColor = "white"
+ this.colorStr = "var(--color-main-font)"
+ }
+ }
}
</script>
<style lang="scss" scoped>
+.right-menu-item {
+ padding: 3px 6px 3px 6px;
+ width: calc(100% - 12px);
+ height: 40px;
+ text-align: start;
+}
+
+i {
+ font-size: 25px;
+ color: var(--color-main);
+}
</style>
\ No newline at end of file
diff --git a/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue b/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue
index 0944747..69a9c7a 100644
--- a/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue
+++ b/ui/src/components/databaseComponents/mainComponents/DataTableComponent.vue
@@ -152,6 +152,12 @@ export default {
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
+ },
+ handleSizeChange() {
+
+ },
+ handleCurrentChange() {
+
}
}
}
diff --git a/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue b/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
index edea650..239c728 100644
--- a/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
+++ b/ui/src/components/databaseComponents/mainComponents/TopNavigationComponent.vue
@@ -23,10 +23,6 @@
class="buttonItem poiner">
<top-button :icon="item.icon" :name="item.name"></top-button>
</div>
- <!--el-drawer title="我是标题" :wrapperClosable="false" :size="450" :visible.sync="drawer" :modal="false"
- :append-to-body="true" direction="rtl" :close-on-press-escape="false" :before-close="handleClose">
- <span>我来啦!</span>
- </el-drawer-->
</div>
</template>
diff --git a/ui/src/main.js b/ui/src/main.js
index 2944147..4855b81 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -18,8 +18,19 @@
*/
import Vue from 'vue'
-import './plugins/axios'
-import { Button, Container, Header, Main, Aside, Menu, MenuItem, MenuItemGroup, Submenu, Image, Loading, Tooltip, Tag, Card, Drawer, MessageBox, DatePicker, Input, Table, TableColumn, Pagination } from 'element-ui'
+import axios from 'axios'
+import { Button, Container, Header, Main, Aside, Menu, MenuItem, MenuItemGroup, Submenu, Image, Loading, Tooltip, Tag, Card, Drawer, MessageBox, Message, DatePicker, Input, Table, TableColumn, Pagination } from 'element-ui'
+import * as echarts from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import {
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ TransformComponent
+} from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
import App from './App.vue'
import router from './router'
import store from './store'
@@ -50,6 +61,25 @@ Vue.use(TableColumn)
Vue.use((Pagination))
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$loading = Loading
+Vue.prototype.$message = Message
+Vue.prototype.$message.error = (status, statusText) => {
+ Message({
+ message: status + statusText,
+ type: 'error',
+ })
+}
+Vue.prototype.$message.errorNet = () => {
+ Message({
+ message: 'Error: Please check the network connection!',
+ type: 'error'
+ })
+}
+Vue.prototype.$message.success = () => {
+ Message({
+ message: "OK",
+ type: 'success'
+ })
+}
Vue.prototype.$loading.create = () => {
Vue.prototype.$loading.instance = Loading.service({
text: '拼命加载中',
@@ -64,6 +94,20 @@ Vue.prototype.$loading.close = () => {
}
Vue.prototype.$bus = new Vue()
+Vue.prototype.$http = axios
+
+echarts.use([
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ TransformComponent,
+ BarChart,
+ LabelLayout,
+ UniversalTransition,
+ CanvasRenderer
+])
+
new Vue({
router,
store,
diff --git a/ui/src/store/aside.js b/ui/src/store/aside.js
index d6c937e..d478c39 100644
--- a/ui/src/store/aside.js
+++ b/ui/src/store/aside.js
@@ -18,17 +18,16 @@
*/
export default {
- state: {
- fatherWidth: '200px',
- isCollapse: false
+ state: {
+ fatherWidth: '200px',
+ isCollapse: false
+ },
+ mutations: {
+ changeFatherWidth(state, val) {
+ state.fatherWidth = val
},
- mutations: {
- changeFatherWidth(state, val) {
- state.fatherWidth = val
- },
- changeCollapse(state, val) {
- state.isCollapse = val
- }
+ changeCollapse(state, val) {
+ state.isCollapse = val
}
}
-
\ No newline at end of file
+}
diff --git a/ui/src/store/index.js b/ui/src/store/index.js
index bf09675..d4a8f6d 100644
--- a/ui/src/store/index.js
+++ b/ui/src/store/index.js
@@ -22,6 +22,7 @@ import Vuex from 'vuex'
import header from './header'
import aside from './aside'
import tags from './tags'
+import menuState from './menuState'
Vue.use(Vuex)
export default new Vuex.Store({
@@ -34,6 +35,7 @@ export default new Vuex.Store({
modules: {
header,
aside,
- tags
+ tags,
+ menuState
}
})
diff --git a/ui/src/store/aside.js b/ui/src/store/menuState.js
similarity index 80%
copy from ui/src/store/aside.js
copy to ui/src/store/menuState.js
index d6c937e..ea3c8e1 100644
--- a/ui/src/store/aside.js
+++ b/ui/src/store/menuState.js
@@ -19,16 +19,11 @@
export default {
state: {
- fatherWidth: '200px',
- isCollapse: false
+ showRightMenu: false
},
mutations: {
- changeFatherWidth(state, val) {
- state.fatherWidth = val
- },
- changeCollapse(state, val) {
- state.isCollapse = val
- }
+ changeShowRightMenu(state, val) {
+ state.showRightMenu = val
+ }
}
- }
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/store/tags.js b/ui/src/store/tags.js
index 9b38c38..da07df4 100644
--- a/ui/src/store/tags.js
+++ b/ui/src/store/tags.js
@@ -19,19 +19,24 @@
export default {
state: {
- tagsList: [
- {
- name: 'node\\Stream\\db',
- }
- ],
+ tagsList: [],
currentMenu: null,
},
mutations: {
selectMenu(state, val) {
-
+ console.log(val)
+ state.currentMenu = val
+ let result = state.tagsList.findIndex(item => item.metadata.group === val.metadata.group && item.metadata.type === val.metadata.type && item.metadata.name === val.metadata.name)
+ result === -1 ? state.tagsList.push(val) : ''
+ window.sessionStorage.setItem('tagsList', JSON.stringify(state.tagsList))
+ window.sessionStorage.setItem('currentMenu', JSON.stringify(state.currentMenu))
},
closeTag(state, val) {
-
+ let result = state.tagsList.findIndex(item => item.metadata.group === val.metadata.group && item.metadata.type === val.metadata.type && item.metadata.name === val.metadata.name)
+ result === -1 ? '' : state.tagsList.splice(result, 1)
+ if (state.tagsList.length === 0) state.currentMenu = null
+ window.sessionStorage.setItem('tagsList', JSON.stringify(state.tagsList))
+ window.sessionStorage.setItem('currentMenu', JSON.stringify(state.currentMenu))
},
changeTag(state, val) {
diff --git a/ui/src/views/Database.vue b/ui/src/views/Database.vue
index 83c1467..0efb92c 100644
--- a/ui/src/views/Database.vue
+++ b/ui/src/views/Database.vue
@@ -18,36 +18,47 @@
-->
<template>
- <el-container>
- <el-aside :width="fatherWidth" class="bd-top">
- <aside-component></aside-component>
- </el-aside>
- <el-main style="background-color: var(--color-background)">
- <main-component></main-component>
- </el-main>
- </el-container>
+ <div @mousemove="shrinkMove" @mouseup="shrinkUp" style="width:100%; height:100%">
+ <el-container>
+ <el-aside :width="fatherWidth" class="bd-top flex" style="position:relative;">
+ <aside-component></aside-component>
+ <div class="resize" @mousedown="shrinkDown" title="Shrink sidebar"></div>
+ </el-aside>
+ <el-main style="background-color: var(--color-background)">
+ <component :is="mainComponent"></component>
+ </el-main>
+ </el-container>
+ </div>
</template>
<script>
-import AsideComponent from '../components/databaseComponents/AsideComponent.vue'
-
+import AsideComponent from '../components/databaseComponents/asideComponents/AsideComponent.vue'
import MainComponent from '../components/databaseComponents/MainComponent.vue'
+import MainStartComponent from '../components/databaseComponents/MainStartComponent.vue'
import { mapState } from 'vuex'
export default {
name: 'Database',
data() {
return {
-
+ isShrink: false,
}
},
+ created() {
+ this.$loading.create()
+ },
+ mounted() {
+ this.$loading.close()
+ },
computed: {
...mapState({
- fatherWidth: (state) => state.aside.fatherWidth
+ fatherWidth: (state) => state.aside.fatherWidth,
+ mainComponent: (state) => state.tags.currentMenu == null ? "mainStartCom" : "mainCom"
})
},
components: {
AsideComponent,
- MainComponent
+ mainCom: MainComponent,
+ mainStartCom: MainStartComponent
},
activated() {
console.log('this component is activated!')
@@ -55,8 +66,35 @@ export default {
deactivated() {
console.log('this component is deactivated!')
},
+ methods: {
+ shrinkMove(e) {
+ if (this.isShrink) {
+ let wid = e.screenX + 5
+ if (wid <= 65) {
+ this.$store.commit('changeCollapse', true)
+ this.$store.commit('changeFatherWidth', '65px')
+ } else {
+ this.$store.commit('changeCollapse', false)
+ this.$store.commit('changeFatherWidth', wid + 'px')
+ }
+ }
+ },
+ shrinkDown(e) {
+ this.isShrink = true
+ },
+ shrinkUp(e) {
+ this.isShrink = false
+ }
+ }
}
</script>
<style lang="scss" scoped>
+.resize {
+ cursor: col-resize;
+ position: absolute;
+ right: 0;
+ height: 100%;
+ width: 5px;
+}
</style>
\ No newline at end of file