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 1af0ef44 Feature to view and download value of property from UI (#414)
1af0ef44 is described below
commit 1af0ef444ea951bb1bb3bc92e359e63775d1c823
Author: Suchith Krishna S Donni <[email protected]>
AuthorDate: Sat Mar 16 18:37:21 2024 +0530
Feature to view and download value of property from UI (#414)
---
ui/src/components/Property/PropertyRead.vue | 18 ++++-
ui/src/components/Property/PropertyValueReader.vue | 85 ++++++++++++++++++++++
2 files changed, 102 insertions(+), 1 deletion(-)
diff --git a/ui/src/components/Property/PropertyRead.vue
b/ui/src/components/Property/PropertyRead.vue
index 6142b10b..25355a39 100644
--- a/ui/src/components/Property/PropertyRead.vue
+++ b/ui/src/components/Property/PropertyRead.vue
@@ -25,6 +25,7 @@ import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { RefreshRight } from '@element-plus/icons-vue';
import PropertyEditror from './PropertyEditror.vue';
+import PropertyValueReader from './PropertyValueReader.vue';
const { proxy } = getCurrentInstance()
// Loading
@@ -33,6 +34,7 @@ const $bus =
getCurrentInstance().appContext.config.globalProperties.mittBus
const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate
const $loadingClose = proxy.$loadingClose
const propertyEditorRef = ref()
+const propertyValueViewerRef = ref()
const data = reactive({
group: "",
tableData: []
@@ -62,6 +64,13 @@ const getProperty = () => {
$loadingClose()
})
}
+const openPropertyView = (data) => {
+ propertyValueViewerRef?.value.openDialog(data)
+}
+
+const ellipsizeValueData = (data) => {
+ return data.value.slice(0, 20)+"..."
+}
const openEditField = (index) => {
const item = data.tableData[index]
const param = {
@@ -156,7 +165,13 @@ onMounted(() => {
<template #default="scope">
<el-table :data="scope.row.tags">
<el-table-column label="Key" prop="key"
width="150"></el-table-column>
- <el-table-column label="Value"
prop="value"></el-table-column>
+ <el-table-column label="Value" prop="value">
+ <template #default="scope">
+ {{ellipsizeValueData(scope.row)}}
+ <el-button link type="primary"
@click.prevent="openPropertyView(scope.row)"
+ style="color: var(--color-main); font-weight:
bold;">view</el-button>
+ </template>
+ </el-table-column>
</el-table>
</template>
</el-table-column>
@@ -174,6 +189,7 @@ onMounted(() => {
</el-table>
</el-card>
<PropertyEditror ref="propertyEditorRef"></PropertyEditror>
+ <PropertyValueReader
ref="propertyValueViewerRef"></PropertyValueReader>
</div>
</template>
<style lang="scss" scoped>
diff --git a/ui/src/components/Property/PropertyValueReader.vue
b/ui/src/components/Property/PropertyValueReader.vue
new file mode 100644
index 00000000..29457fed
--- /dev/null
+++ b/ui/src/components/Property/PropertyValueReader.vue
@@ -0,0 +1,85 @@
+<!--
+ ~ 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 { applyProperty } from '@/api';
+import { reactive, ref } from 'vue';
+import { getCurrentInstance } from '@vue/runtime-core'
+import TagEditor from './TagEditor.vue';
+import { ElMessage } from 'element-plus';
+const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate
+const $loadingClose =
getCurrentInstance().appContext.config.globalProperties.$loadingClose
+const showDialog = ref(false)
+const title = ref('')
+const valueData = reactive({
+ data: '',
+ formattedData: ''
+})
+
+const numSpaces = 2
+const initData = () => {
+ valueData.data = temp
+}
+const closeDialog = () => {
+ showDialog.value = false
+ initData()
+}
+
+const downloadValue = () => {
+ const dataBlob = new Blob([valueData.formattedData], { type: 'text/JSON' })
+ var a = document.createElement('a');
+ a.download = 'value.txt';
+ a.href = URL.createObjectURL(dataBlob);
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+}
+
+const openDialog = (data) => {
+ title.value = "Value of key " + data.key
+ showDialog.value = true
+ valueData.data = data.value
+ valueData.formattedData = JSON.stringify(JSON.parse(valueData.data), null,
numSpaces)
+}
+defineExpose({
+ openDialog
+})
+</script>
+
+<template>
+ <el-dialog v-model="showDialog" :title="title">
+ <pre>{{valueData.formattedData}}</pre>
+ <template #footer>
+ <span class="dialog-footer footer">
+ <el-button @click="closeDialog">Cancel</el-button>
+ <el-button type="primary" @click.prevent="downloadValue()">
+ Download
+ </el-button>
+ </span>
+ </template>
+ </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
