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 <53624363+sksdo...@users.noreply.github.com> 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