From 3b9574c9cfec0179a59de02572bf473d2282b1c6 Mon Sep 17 00:00:00 2001 From: EduardZaydler <117674342+EduardZaydler@users.noreply.github.com> Date: Mon, 11 Nov 2024 12:17:20 +0500 Subject: [PATCH] hiding filters on empty result (#559) --- .../AllContatcsTable/AllContactsTable.tsx | 20 +++-- src/Components/MetricList/MetricList.tsx | 21 +++-- src/Components/TagList/TagList.tsx | 20 +++-- src/Components/TagListItem/TagListItem.tsx | 16 ++-- .../Components/CurrentStateTab.tsx | 31 ++++--- .../Components/EventListTab/EventListTab.tsx | 85 +++++++++++-------- src/Constants/heights.ts | 10 +++ src/tests/core/api/local/api.yml | 13 +++ 8 files changed, 133 insertions(+), 83 deletions(-) create mode 100644 src/Constants/heights.ts diff --git a/src/Components/AllContatcsTable/AllContactsTable.tsx b/src/Components/AllContatcsTable/AllContactsTable.tsx index 494f6529..b1b6cd85 100644 --- a/src/Components/AllContatcsTable/AllContactsTable.tsx +++ b/src/Components/AllContatcsTable/AllContactsTable.tsx @@ -2,14 +2,14 @@ import React, { FC } from "react"; import { Contact } from "../../Domain/Contact"; import { FixedSizeList as List } from "react-window"; import { getCoreRowModel, ColumnDef, flexRender, useReactTable } from "@tanstack/react-table"; -import { - LIST_HEIGHT, - MAX_LIST_LENGTH_BEFORE_SCROLLABLE, - ROW_HEIGHT, - getTotalItemSize, -} from "../TagList/TagList"; import RouterLink from "../RouterLink/RouterLink"; import { getPageLink } from "../../Domain/Global"; +import { + MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE, + TAG_LIST_HEIGHT, + TAG_ROW_HEIGHT, +} from "../../Constants/heights"; +import { getTotalItemSize } from "../TagList/TagList"; import classNames from "classnames/bind"; import styles from "./AllContactsTable.less"; @@ -73,7 +73,7 @@ export const AllContactsTable: FC = ({ getCoreRowModel: getCoreRowModel(), }); - const isListLongEnoughToScroll = contacts.length > MAX_LIST_LENGTH_BEFORE_SCROLLABLE; + const isListLongEnoughToScroll = contacts.length > MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE; return ( <> @@ -128,10 +128,12 @@ export const AllContactsTable: FC = ({ {contacts.length ? ( {({ index, style }) => { diff --git a/src/Components/MetricList/MetricList.tsx b/src/Components/MetricList/MetricList.tsx index 29462ae0..415ce3d5 100644 --- a/src/Components/MetricList/MetricList.tsx +++ b/src/Components/MetricList/MetricList.tsx @@ -6,6 +6,12 @@ import type { VariableSizeList } from "react-window"; import { VariableSizeList as List } from "react-window"; import { MetricListItem } from "../MetricListItem/MetricListItem"; import { useEffect, useRef } from "react"; +import { + METRIC_LIST_HEIGHT, + METRIC_LIST_ROW_HEIGHT, + METRIC_LIST_ROW_PADDING, + MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE, +} from "../../Constants/heights"; import { ConfirmMetricDeletionWithTransformNull } from "../ConfirmMetricDeletionWithTransformNull/ConfirmMetricDeletionWithTransformNull"; import classNames from "classnames/bind"; @@ -15,11 +21,6 @@ const cn = classNames.bind(styles); export type SortingColumn = "state" | "name" | "event" | "value"; -const MAX_LIST_LENGTH_BEFORE_SCROLLABLE = 25; -const METRIC_LIST_HEIGHT = 500; -const METRIC_LIST_ROW_HEIGHT = 20; -const METRIC_LIST_ROW_PADDING = 5; - type Props = { status?: boolean; items: MetricItemList; @@ -71,11 +72,13 @@ export default function MetricList(props: Props): React.ReactElement {
MAX_LIST_LENGTH_BEFORE_SCROLLABLE ? "stable" : "auto", + entries.length > MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE + ? "stable" + : "auto", }} > {status && ( @@ -144,9 +147,9 @@ export default function MetricList(props: Props): React.ReactElement { MAX_LIST_LENGTH_BEFORE_SCROLLABLE + entries.length > MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE ? METRIC_LIST_HEIGHT : getTotalSize(entries) + 2 } diff --git a/src/Components/TagList/TagList.tsx b/src/Components/TagList/TagList.tsx index 05ac8bd2..e0b88849 100644 --- a/src/Components/TagList/TagList.tsx +++ b/src/Components/TagList/TagList.tsx @@ -9,6 +9,11 @@ import { TagListItem } from "../TagListItem/TagListItem"; import { Input, Token } from "@skbkontur/react-ui"; import { TokenInput, TokenInputType } from "@skbkontur/react-ui/components/TokenInput"; import { RowStack } from "@skbkontur/react-stack-layout"; +import { + MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE, + TAG_LIST_HEIGHT, + TAG_ROW_HEIGHT, +} from "../../Constants/heights"; import classNames from "classnames/bind"; import styles from "./TagList.less"; @@ -20,12 +25,7 @@ interface ITagListProps { contacts: Contact[]; } -export const MAX_LIST_LENGTH_BEFORE_SCROLLABLE = 40; -export const LIST_HEIGHT = 1000; -export const SUBSCRIPTION_LIST_HEIGHT = 500; -export const ROW_HEIGHT = 25; - -export const getTotalItemSize = (length: number) => length * ROW_HEIGHT + 1; +export const getTotalItemSize = (length: number) => length * TAG_ROW_HEIGHT + 1; export const TagList: FC = ({ items, contacts }) => { const { sortedData, sortConfig, handleSort } = useSortData(items, "name"); @@ -62,7 +62,7 @@ export const TagList: FC = ({ items, contacts }) => { [sortedData, filterContacts, filterTagName] ); - const isListLongEnoughToScroll = filteredTags.length > MAX_LIST_LENGTH_BEFORE_SCROLLABLE; + const isListLongEnoughToScroll = filteredTags.length > MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE; const getContatcs = (query: string): Promise => { if (!contacts) { @@ -158,10 +158,12 @@ export const TagList: FC = ({ items, contacts }) => { diff --git a/src/Components/TagListItem/TagListItem.tsx b/src/Components/TagListItem/TagListItem.tsx index 53e09f1f..28b90d8b 100644 --- a/src/Components/TagListItem/TagListItem.tsx +++ b/src/Components/TagListItem/TagListItem.tsx @@ -11,16 +11,16 @@ import { useModal } from "../../hooks/useModal"; import SubscriptionEditModal from "../SubscriptionEditModal/SubscriptionEditModal"; import { Subscription } from "../../Domain/Subscription"; import { VariableSizeList as List } from "react-window"; -import { - MAX_LIST_LENGTH_BEFORE_SCROLLABLE, - SUBSCRIPTION_LIST_HEIGHT, - getTotalItemSize, - ROW_HEIGHT, -} from "../TagList/TagList"; import { useDeleteSubscriptionMutation } from "../../services/SubscriptionsApi"; import { useDeleteTagMutation } from "../../services/TagsApi"; import RouterLink from "../RouterLink/RouterLink"; import { getPageLink } from "../../Domain/Global"; +import { + MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE, + SUBSCRIPTION_LIST_HEIGHT, + TAG_ROW_HEIGHT, +} from "../../Constants/heights"; +import { getTotalItemSize } from "../TagList/TagList"; import classNames from "classnames/bind"; import styles from "../TagList/TagList.less"; @@ -41,7 +41,7 @@ export const getSubscriptionRowHeight = (contactIDs: string[]) => { return getTotalItemSize(contactIDs.length); } - return ROW_HEIGHT; + return TAG_ROW_HEIGHT; }; export const TagListItem: FC = ({ @@ -86,7 +86,7 @@ export const TagListItem: FC = ({ ).length; const getSubscriptionsTableHeight = - subscriptionContactsCount > MAX_LIST_LENGTH_BEFORE_SCROLLABLE + subscriptionContactsCount > MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE ? SUBSCRIPTION_LIST_HEIGHT : getTotalItemSize(subscriptionContactsCount); diff --git a/src/Components/TriggerInfo/Components/CurrentStateTab.tsx b/src/Components/TriggerInfo/Components/CurrentStateTab.tsx index 748023db..3ce2aca5 100644 --- a/src/Components/TriggerInfo/Components/CurrentStateTab.tsx +++ b/src/Components/TriggerInfo/Components/CurrentStateTab.tsx @@ -6,6 +6,7 @@ import { Status } from "../../../Domain/Status"; import { SearchInput } from "./SearchInput/SearchInput"; import { Flexbox } from "../../Flexbox/FlexBox"; import { EmptyListText } from "./EmptyListMessage/EmptyListText"; +import { MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE } from "../../../Constants/heights"; interface ICurrentStateTabProps { metrics: MetricItemList; @@ -68,20 +69,28 @@ export const CurrentStateTab: FC = ({ return result; }, [sortedMetrics, searchValue]); - const isMetrics = useMemo(() => filteredMetrics && Object.keys(filteredMetrics).length > 0, [ - filteredMetrics, - ]); + const isFilteredMetrics = useMemo( + () => filteredMetrics && Object.keys(filteredMetrics).length > 0, + [filteredMetrics] + ); + + const isMetrics = useMemo( + () => Object.keys(metrics).length > MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE, + [metrics] + ); return ( - setSearchValue("")} - /> - {isMetrics ? ( + {isMetrics && ( + setSearchValue("")} + /> + )} + {isFilteredMetrics ? ( = ({ triggerName }) => { { skip: Boolean(fromTime && untilTime && isAfter(fromTime, untilTime)) } ); const grouppedEvents = useMemo(() => composeEvents(events?.list || [], triggerName), [events]); + + const isFilterSectionVisible = !!( + debouncedSearchMetric.length > 0 || + selectedStatuses.length > 0 || + fromTime || + untilTime || + (events && events?.list.length > 0) + ); + const pageCount = Math.ceil((events?.total ?? 0) / (events?.size ?? 1)); return ( - - setSearchMetric("")} - /> - x !== Status.DEL)} - selectedStatuses={selectedStatuses} - onSelect={setSelectedStatuses} - /> - -
- - fromTime && - untilTime && - validateTriggerEventsDateFilters(fromTime, untilTime) - } - date={fromTime} - setDate={setFromTime} - /> - {"—"} - - fromTime && - untilTime && - validateTriggerEventsDateFilters(fromTime, untilTime) - } - date={untilTime} - setDate={setUntilTime} - /> -
- - + {isFilterSectionVisible && ( + + setSearchMetric("")} + /> + x !== Status.DEL)} + selectedStatuses={selectedStatuses} + onSelect={setSelectedStatuses} + /> + +
+ + fromTime && + untilTime && + validateTriggerEventsDateFilters(fromTime, untilTime) + } + date={fromTime} + setDate={setFromTime} + /> + {"—"} + + fromTime && + untilTime && + validateTriggerEventsDateFilters(fromTime, untilTime) + } + date={untilTime} + setDate={setUntilTime} + /> +
+ + + )} {events?.list.length !== 0 ? ( <> diff --git a/src/Constants/heights.ts b/src/Constants/heights.ts new file mode 100644 index 00000000..a17f85fd --- /dev/null +++ b/src/Constants/heights.ts @@ -0,0 +1,10 @@ +export const MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE = 25; +export const METRIC_LIST_HEIGHT = 500; +export const METRIC_LIST_ROW_HEIGHT = 20; +export const METRIC_LIST_ROW_PADDING = 5; + +export const MAX_TAG_LIST_LENGTH_BEFORE_SCROLLABLE = 40; +export const TAG_LIST_HEIGHT = 1000; +export const TAG_ROW_HEIGHT = 25; + +export const SUBSCRIPTION_LIST_HEIGHT = 500; diff --git a/src/tests/core/api/local/api.yml b/src/tests/core/api/local/api.yml index 1ef7308c..2e0e66e6 100644 --- a/src/tests/core/api/local/api.yml +++ b/src/tests/core/api/local/api.yml @@ -14,6 +14,19 @@ graphite_remote: check_interval: 60s timeout: 60s metrics_ttl: 168h + retries: + initial_interval: 60s + randomization_factor: 0.5 + multiplier: 1.5 + max_interval: 120s + max_retries_count: 3 + health_check_timeout: 6s + health_check_retries: + initial_interval: 20s + randomization_factor: 0.5 + multiplier: 1.5 + max_interval: 80s + max_retries_count: 3 prometheus_remote: - cluster_id: default cluster_name: Prometheus 1