From dff6d79aecd7d7fdbaa08ffba131ab3de0a3ba0b Mon Sep 17 00:00:00 2001 From: Omkar Kesarkhane <127078473+omkarK06@users.noreply.github.com> Date: Thu, 29 Aug 2024 12:45:35 +0530 Subject: [PATCH] fix: Restoring tables column ordering in saved views (#4385) 1. Restoring tables column ordering in saved views 2. Added barMinHeight for bar charts #4384 ## Summary by CodeRabbit - **New Features** - Enhanced the handling of timestamp columns in log data, improving functionality based on selected fields. - Introduced a new property for data representation to ensure minimum height for bar elements in charts. - **Bug Fixes** - Streamlined column order management in search results to prevent issues when saving and loading views. - **Style** - Improved layout and formatting of components for better readability and visual alignment. - **Chores** - Minor cosmetic adjustments to code formatting for consistency and maintainability. --- web/src/components/alerts/ScheduledAlert.vue | 2 +- web/src/components/logstream/schema.vue | 8 +- web/src/composables/useLogs.ts | 7 +- web/src/plugins/logs/SearchResult.vue | 32 ++- web/src/utils/dashboard/convertSQLData.ts | 4 + web/src/views/LogStream.vue | 196 ++++++++++--------- 6 files changed, 126 insertions(+), 123 deletions(-) diff --git a/web/src/components/alerts/ScheduledAlert.vue b/web/src/components/alerts/ScheduledAlert.vue index 9c87020a5c..54fab56ae6 100644 --- a/web/src/components/alerts/ScheduledAlert.vue +++ b/web/src/components/alerts/ScheduledAlert.vue @@ -56,7 +56,7 @@ along with this program. If not, see . /> - @@ -220,8 +219,7 @@ size="sm" color="secondary" /> - + {{ t("logStream.cancel") }} - + {{ t("logStream.cancel") }} { if (columns.value && !store.state.zoConfig.show_stream_stats_doc_num) { columns.value = columns.value.filter( - (column) => column.name !== "doc_num" + (column) => column.name !== "doc_num", ); } @@ -426,7 +423,7 @@ export default defineComponent({ if (!value) { onChangeStreamFilter(selectedStreamType.value); } - } + }, ); const getLogStream = (refresh: boolean = false) => { @@ -470,7 +467,7 @@ export default defineComponent({ schema: data.schema ? data.schema : [], stream_type: data.stream_type, }; - }) + }), ); duplicateStreamList.value = [...logStream.value]; @@ -548,7 +545,7 @@ export default defineComponent({ }; const confirmBatchDeleteAction = () => { confirmBatchDelete.value = true; - console.log(selected,"selected items") + console.log(selected, "selected items"); }; const deleteStream = () => { @@ -556,7 +553,7 @@ export default defineComponent({ .delete( store.state.selectedOrganization.identifier, deleteStreamName, - deleteStreamType + deleteStreamType, ) .then((res: any) => { if (res.data.code == 200) { @@ -565,7 +562,7 @@ export default defineComponent({ message: "Stream deleted successfully.", }); removeStream(deleteStreamName, deleteStreamType); - selected.value = [] + selected.value = []; getLogStream(); } }) @@ -574,61 +571,70 @@ export default defineComponent({ color: "negative", message: "Error while deleting stream.", }); - }) + }); }; const deleteBatchStream = () => { isDeleting.value = true; - const selectedItems = selected.value - const promises : Promise[] = []; + const selectedItems = selected.value; + const promises: Promise[] = []; - selectedItems.forEach((stream : any) => { - promises.push( - streamService.delete( - store.state.selectedOrganization.identifier, - stream.name, - stream.stream_type - ) - ); - }); - - Promise.all(promises) - .then((responses) => { - const successfulDeletions = responses.filter((res) => res.data.code === 200); - const failedDeletions = responses.filter((res) => res.data.code !== 200); - - if (successfulDeletions.length > 0) { - $q.notify({ - color: "positive", - message: `Deleted ${successfulDeletions.length} streams successfully.`, - }); - } - - if (failedDeletions.length > 0) { - $q.notify({ - color: "negative", - message: `Failed to delete ${failedDeletions.length} streams.`, - }); - } - - // Remove deleted streams from the list - console.log(selectedItems,"after deleting streams") - selectedItems.forEach((stream : any) => { - removeStream(stream.name, stream.stream_type); - selected.value = selected.value.filter((item : any) => item.name !== stream.name && item.stream_type !== stream.stream_type); + selectedItems.forEach((stream: any) => { + promises.push( + streamService.delete( + store.state.selectedOrganization.identifier, + stream.name, + stream.stream_type, + ), + ); }); - getLogStream(); - }) - .catch((error) => { - console.error(error); - $q.notify({ - color: "negative", - message: "Error while deleting streams.", - }); - }).finally(() => { - isDeleting.value = false; - }); -}; + Promise.all(promises) + .then((responses) => { + const successfulDeletions = responses.filter( + (res) => res.data.code === 200, + ); + const failedDeletions = responses.filter( + (res) => res.data.code !== 200, + ); + + if (successfulDeletions.length > 0) { + $q.notify({ + color: "positive", + message: `Deleted ${successfulDeletions.length} streams successfully.`, + }); + } + + if (failedDeletions.length > 0) { + $q.notify({ + color: "negative", + message: `Failed to delete ${failedDeletions.length} streams.`, + }); + } + + // Remove deleted streams from the list + console.log(selectedItems, "after deleting streams"); + selectedItems.forEach((stream: any) => { + removeStream(stream.name, stream.stream_type); + selected.value = selected.value.filter( + (item: any) => + item.name !== stream.name && + item.stream_type !== stream.stream_type, + ); + }); + + getLogStream(); + }) + .catch((error) => { + console.error(error); + $q.notify({ + color: "negative", + message: "Error while deleting streams.", + }); + }) + .finally(() => { + isDeleting.value = false; + }); + }; onActivated(() => { if (logStream.value.length > 0) { @@ -646,10 +652,11 @@ export default defineComponent({ getLogStream(); } }); - const getSelectedString = () => { - return selected.value.length === 0 ? '' : `${selected.value.length} record${selected.value.length > 1 ? 's' : ''} selected` - } - + const getSelectedString = () => { + return selected.value.length === 0 + ? "" + : `${selected.value.length} record${selected.value.length > 1 ? "s" : ""} selected`; + }; const exploreStream = (props: any) => { router.push({ @@ -690,14 +697,14 @@ export default defineComponent({ selectedStreamType.value = value; logStream.value = filterData( duplicateStreamList.value, - filterQuery.value.toLowerCase() + filterQuery.value.toLowerCase(), ); resultTotal.value = logStream.value.length; }; - const getSelectedItems = () =>{ - console.log(selected.value[0],"selected") - } + const getSelectedItems = () => { + console.log(selected.value[0], "selected"); + }; const addStream = () => { addStreamDialog.value.show = true; // router.push({ @@ -750,7 +757,6 @@ export default defineComponent({ getSelectedItems, isDeleting, }; - }, }); @@ -762,13 +768,13 @@ export default defineComponent({ justify-content: flex-end; } } -.bottom-bar{ +.bottom-bar { display: flex; - width:100%; + width: 100%; justify-content: space-between; align-items: center; } -.delete-btn{ +.delete-btn { width: 10vw; }