From cdc8c3bb06838d21cc4afe100c8886f58333a1a5 Mon Sep 17 00:00:00 2001 From: Ousmane Samba Date: Tue, 25 Jun 2024 16:38:33 +0200 Subject: [PATCH] add archive, outputs, dataWarehouse column --- .../src/@types/graylog-web-plugin/index.d.ts | 6 ++- .../StreamsOverview/ColumnRenderers.tsx | 20 +++++++ .../streams/StreamsOverview/Constants.ts | 32 ++++++++++- .../StreamsOverview/StreamsOverview.tsx | 1 + .../StreamsOverview/cells/ArchivingsCell.tsx | 54 +++++++++++++++++++ .../StreamsOverview/cells/OutputsCell.tsx | 47 ++++++++++++++++ .../StreamsOverview/cells/PipelinesCell.tsx | 49 +++++++++++++++++ 7 files changed, 206 insertions(+), 3 deletions(-) create mode 100644 graylog2-web-interface/src/components/streams/StreamsOverview/cells/ArchivingsCell.tsx create mode 100644 graylog2-web-interface/src/components/streams/StreamsOverview/cells/OutputsCell.tsx create mode 100644 graylog2-web-interface/src/components/streams/StreamsOverview/cells/PipelinesCell.tsx diff --git a/graylog2-web-interface/src/@types/graylog-web-plugin/index.d.ts b/graylog2-web-interface/src/@types/graylog-web-plugin/index.d.ts index 2ecb5f6b3161..288ccb722522 100644 --- a/graylog2-web-interface/src/@types/graylog-web-plugin/index.d.ts +++ b/graylog2-web-interface/src/@types/graylog-web-plugin/index.d.ts @@ -190,6 +190,11 @@ interface PluginDataWarehouse { }>, StreamDataWarehouse: React.ComponentType<{}>, DataWarehouseJobs: React.ComponentType<{}>, + streamDataWarehouseTableElements: { + attributeName: string, + attributes: any, + columnRenderer: any, + } } declare module 'graylog-web-plugin/plugin' { @@ -199,7 +204,6 @@ declare module 'graylog-web-plugin/plugin' { dataTiering?: Array defaultNavigation?: Array; navigationItems?: Array; - dataWarehouse?: Array globalNotifications?: Array; fieldValueProviders?:Array; // Global context providers allow to fetch and process data once diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/ColumnRenderers.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/ColumnRenderers.tsx index 4020cdf286cc..d7e63ea08e5c 100644 --- a/graylog2-web-interface/src/components/streams/StreamsOverview/ColumnRenderers.tsx +++ b/graylog2-web-interface/src/components/streams/StreamsOverview/ColumnRenderers.tsx @@ -15,6 +15,8 @@ * . */ import * as React from 'react'; +import type { Output } from 'src/stores/outputs/OutputsStore'; +import { PluginStore } from 'graylog-web-plugin/plugin'; import type { Stream, StreamRule } from 'stores/streams/StreamsStore'; import type { ColumnRenderers } from 'components/common/EntityDataTable'; @@ -25,6 +27,11 @@ import type { IndexSet } from 'stores/indices/IndexSetsStore'; import StatusCell from './cells/StatusCell'; import StreamRulesCell from './cells/StreamRulesCell'; +import PipelinesCell from './cells/PipelinesCell'; +import OutputsCell from './cells/OutputsCell'; +import ArchivingsCell from './cells/ArchivingsCell'; + +const streamDataWarehouseColumnRenderer = PluginStore.exports('dataWarehouse')?.[0]?.streamDataWarehouseTableElements.columnRenderer; const customColumnRenderers = (indexSets: Array): ColumnRenderers => ({ attributes: { @@ -47,6 +54,19 @@ const customColumnRenderers = (indexSets: Array): ColumnRenderers , staticWidth: 130, }, + pipelines: { + renderCell: (_pipeline: any[], stream) => , + staticWidth: 130, + }, + outputs: { + renderCell: (_outputs: Output[], stream) => , + staticWidth: 130, + }, + archiving: { + renderCell: (_archiving:boolean, stream) => , + staticWidth: 130, + }, + ...(streamDataWarehouseColumnRenderer || {}), }, }); diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/Constants.ts b/graylog2-web-interface/src/components/streams/StreamsOverview/Constants.ts index 79d38c49c628..e46554e99081 100644 --- a/graylog2-web-interface/src/components/streams/StreamsOverview/Constants.ts +++ b/graylog2-web-interface/src/components/streams/StreamsOverview/Constants.ts @@ -15,19 +15,47 @@ * . */ +import { PluginStore } from 'graylog-web-plugin/plugin'; + import type { Sort, Attribute } from 'stores/PaginationTypes'; +const streamDataWarehousePlugin = PluginStore.exports('dataWarehouse')?.[0]?.streamDataWarehouseTableElements; export const DEFAULT_LAYOUT = { entityTableId: 'streams', defaultPageSize: 20, defaultSort: { attributeId: 'title', direction: 'asc' } as Sort, - defaultDisplayedAttributes: ['title', 'index_set_title', 'rules', 'throughput', 'disabled'], + defaultDisplayedAttributes: [ + 'title', + 'index_set_title', + 'archiving', + ...streamDataWarehousePlugin?.attributeName ? [streamDataWarehousePlugin.attributeName] : [], + 'rules', + 'pipelines', + 'outputs', + 'throughput', + 'disabled', + ], }; -export const COLUMNS_ORDER = ['title', 'index_set_title', 'rules', 'throughput', 'disabled', 'created_at']; +export const COLUMNS_ORDER = [ + 'title', + 'index_set_title', + 'archiving', + ...streamDataWarehousePlugin?.attributeName ? [streamDataWarehousePlugin.attributeName] : [], + 'rules', + 'pipelines', + 'outputs', + 'throughput', + 'disabled', + 'created_at', +]; export const ADDITIONAL_ATTRIBUTES: Array = [ { id: 'index_set_title', title: 'Index Set', sortable: true, permissions: ['indexsets:read'] }, { id: 'throughput', title: 'Throughput' }, { id: 'rules', title: 'Rules' }, + { id: 'pipelines', title: 'Pipelines' }, + { id: 'outputs', title: 'Outputs' }, + { id: 'archiving', title: 'Archiving' }, + ...(streamDataWarehousePlugin?.attributes || []), ]; diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.tsx index 851a6ff530bb..dd9bf19d94c1 100644 --- a/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.tsx +++ b/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.tsx @@ -52,6 +52,7 @@ type Props = { const StreamsOverview = ({ indexSets }: Props) => { const queryClient = useQueryClient(); + const { entityActions, expandedSections, bulkActions } = useTableElements({ indexSets }); useRefetchStreamsOnStoreChange(() => queryClient.invalidateQueries(KEY_PREFIX)); diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/cells/ArchivingsCell.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/cells/ArchivingsCell.tsx new file mode 100644 index 000000000000..fcfa53b91331 --- /dev/null +++ b/graylog2-web-interface/src/components/streams/StreamsOverview/cells/ArchivingsCell.tsx @@ -0,0 +1,54 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ + +import * as React from 'react'; +import styled, { css } from 'styled-components'; + +import type { Stream } from 'stores/streams/StreamsStore'; +import { Icon, Tooltip } from 'components/common'; +import type { IndexSet } from 'stores/indices/IndexSetsStore'; +import { ARCHIVE_RETENTION_STRATEGY } from 'stores/indices/IndicesStore'; + +type Props = { + stream: Stream, + indexSets: Array, +} + +const Wrapper = styled.div<{ $enabled: boolean }>(({ theme, $enabled }) => css` + color: ${$enabled ? theme.colors.variant.success : theme.colors.variant.default}; + width: fit-content; +`); + +const ArchivingsCell = ({ stream, indexSets }: Props) => { + if (stream.is_default || !stream.is_editable) { + return null; + } + + const indexSet = indexSets.find((is) => is.id === stream.index_set_id); + + const archivingEnabled = indexSet?.retention_strategy_class === ARCHIVE_RETENTION_STRATEGY || indexSet?.data_tiering?.archive_before_deletion; + + return ( + + + + + + ); +}; + +export default ArchivingsCell; diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/cells/OutputsCell.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/cells/OutputsCell.tsx new file mode 100644 index 000000000000..83fb18e31076 --- /dev/null +++ b/graylog2-web-interface/src/components/streams/StreamsOverview/cells/OutputsCell.tsx @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ + +import { useRef } from 'react'; +import * as React from 'react'; +import styled from 'styled-components'; + +import type { Stream } from 'stores/streams/StreamsStore'; +import { CountBadge } from 'components/common'; + +const StyledCountBadge = styled(CountBadge)` + cursor: pointer; +`; + +type Props = { + stream: Stream +} + +const OutputsCell = ({ stream }: Props) => { + const buttonRef = useRef(); + + if (stream.is_default || !stream.is_editable) { + return null; + } + + return ( + + {stream.outputs?.length || 0} + + ); +}; + +export default OutputsCell; diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/cells/PipelinesCell.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/cells/PipelinesCell.tsx new file mode 100644 index 000000000000..f399acf1830b --- /dev/null +++ b/graylog2-web-interface/src/components/streams/StreamsOverview/cells/PipelinesCell.tsx @@ -0,0 +1,49 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ + +import { useRef } from 'react'; +import * as React from 'react'; +import styled from 'styled-components'; + +import useStreamOutputs from 'hooks/useStreamOutputs'; +import type { Stream } from 'stores/streams/StreamsStore'; +import { CountBadge } from 'components/common'; + +const StyledCountBadge = styled(CountBadge)` + cursor: pointer; +`; + +type Props = { + stream: Stream +} + +const PipelinesCell = ({ stream }: Props) => { + const buttonRef = useRef(); + const { data, isInitialLoading, isError } = useStreamOutputs(stream.id); + + if (stream.is_default || !stream.is_editable || isInitialLoading || isError) { + return null; + } + + return ( + + {data.outputs.length} + + ); +}; + +export default PipelinesCell;