hiding filters on empty result (#559)

moira-alert · Nov 11, 2024 · 3b9574c · 3b9574c
1 parent 4d8d49e
commit 3b9574c
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 83 deletions.
diff --git 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<IAllContactsTableProps> = ({
         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<IAllContactsTableProps> = ({
             {contacts.length ? (
                 <List
                     height={
-                        isListLongEnoughToScroll ? LIST_HEIGHT : getTotalItemSize(contacts.length)
+                        isListLongEnoughToScroll
+                            ? TAG_LIST_HEIGHT
+                            : getTotalItemSize(contacts.length)
                     }
                     itemCount={table.getRowModel().rows.length}
-                    itemSize={ROW_HEIGHT}
+                    itemSize={TAG_ROW_HEIGHT}
                     width="100%"
                 >
                     {({ index, style }) => {

diff --git 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 {
         <section className={cn("table")}>
             <header
                 className={cn("row", "header")}
-                // When the metrics list is over MAX_LIST_LENGTH_BEFORE_SCROLLABLE items, it becomes scrollable.
+                // When the metrics list is over MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE items, it becomes scrollable.
                 // Add a scrollbar gutter on the right to align header cells with row cells.
                 style={{
                     scrollbarGutter:
-                        entries.length > 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 {
                 <List
                     ref={ref}
                     height={
-                        // When the metrics list is over MAX_LIST_LENGTH_BEFORE_SCROLLABLE items, it will have a fixed 500px height.
+                        // When the metrics list is over MAX_METRIC_LIST_LENGTH_BEFORE_SCROLLABLE items, it will have a fixed 500px height.
                         // Otherwise, the total height will be the sum of individual row heights.
-                        entries.length > 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
@@ -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<ITagListProps> = ({ items, contacts }) => {
     const { sortedData, sortConfig, handleSort } = useSortData(items, "name");
@@ -62,7 +62,7 @@ export const TagList: FC<ITagListProps> = ({ 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<Contact[]> => {
         if (!contacts) {
@@ -158,10 +158,12 @@ export const TagList: FC<ITagListProps> = ({ items, contacts }) => {
                     </div>
                     <List
                         height={
-                            isListLongEnoughToScroll ? LIST_HEIGHT : getTotalItemSize(items.length)
+                            isListLongEnoughToScroll
+                                ? TAG_LIST_HEIGHT
+                                : getTotalItemSize(items.length)
                         }
                         width="100%"
-                        itemSize={ROW_HEIGHT}
+                        itemSize={TAG_ROW_HEIGHT}
                         itemCount={filteredTags.length}
                         itemData={filteredTags}
                     >

diff --git 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<ItemProps> = ({
@@ -86,7 +86,7 @@ export const TagListItem: FC<ItemProps> = ({
     ).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
@@ -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<ICurrentStateTabProps> = ({
         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 (
         <Flexbox margin="28px 0 0 0" gap={28}>
-            <SearchInput
-                value={searchValue}
-                width={"100%"}
-                placeholder="Filter by metric name"
-                onValueChange={handleInputValueChange}
-                onClear={() => setSearchValue("")}
-            />
-            {isMetrics ? (
+            {isMetrics && (
+                <SearchInput
+                    value={searchValue}
+                    width={"100%"}
+                    placeholder="Filter by metric name"
+                    onValueChange={handleInputValueChange}
+                    onClear={() => setSearchValue("")}
+                />
+            )}
+            {isFilteredMetrics ? (
                 <MetricList
                     status
                     items={filteredMetrics}

diff --git a/src/Components/TriggerInfo/Components/EventListTab/EventListTab.tsx b/src/Components/TriggerInfo/Components/EventListTab/EventListTab.tsx
@@ -58,46 +58,57 @@ export const EventListTab: FC<IEventListTabProps> = ({ 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 (
         <Flexbox margin="28px 0 0 0" gap={28}>
-            <Flexbox direction="row" justify="space-between">
-                <SearchInput
-                    placeholder="Filter by metric name, regExp is supported"
-                    width={340}
-                    value={searchMetric}
-                    onValueChange={handleInputValueChange}
-                    onClear={() => setSearchMetric("")}
-                />
-                <FilterStatusSelect
-                    availableStatuses={StatusesList.filter((x) => x !== Status.DEL)}
-                    selectedStatuses={selectedStatuses}
-                    onSelect={setSelectedStatuses}
-                />
-                <ValidationContainer ref={validationContainerRef}>
-                    <div className={cn("from-to-filter")}>
-                        <DateAndTimeMenu
-                            validateDateAndTime={() =>
-                                fromTime &&
-                                untilTime &&
-                                validateTriggerEventsDateFilters(fromTime, untilTime)
-                            }
-                            date={fromTime}
-                            setDate={setFromTime}
-                        />
-                        {"—"}
-                        <DateAndTimeMenu
-                            validateDateAndTime={() =>
-                                fromTime &&
-                                untilTime &&
-                                validateTriggerEventsDateFilters(fromTime, untilTime)
-                            }
-                            date={untilTime}
-                            setDate={setUntilTime}
-                        />
-                    </div>
-                </ValidationContainer>
-            </Flexbox>
+            {isFilterSectionVisible && (
+                <Flexbox direction="row" justify="space-between">
+                    <SearchInput
+                        placeholder="Filter by metric name, regExp is supported"
+                        width={340}
+                        value={searchMetric}
+                        onValueChange={handleInputValueChange}
+                        onClear={() => setSearchMetric("")}
+                    />
+                    <FilterStatusSelect
+                        availableStatuses={StatusesList.filter((x) => x !== Status.DEL)}
+                        selectedStatuses={selectedStatuses}
+                        onSelect={setSelectedStatuses}
+                    />
+                    <ValidationContainer ref={validationContainerRef}>
+                        <div className={cn("from-to-filter")}>
+                            <DateAndTimeMenu
+                                validateDateAndTime={() =>
+                                    fromTime &&
+                                    untilTime &&
+                                    validateTriggerEventsDateFilters(fromTime, untilTime)
+                                }
+                                date={fromTime}
+                                setDate={setFromTime}
+                            />
+                            {"—"}
+                            <DateAndTimeMenu
+                                validateDateAndTime={() =>
+                                    fromTime &&
+                                    untilTime &&
+                                    validateTriggerEventsDateFilters(fromTime, untilTime)
+                                }
+                                date={untilTime}
+                                setDate={setUntilTime}
+                            />
+                        </div>
+                    </ValidationContainer>
+                </Flexbox>
+            )}
             <Loader active={isLoading || isFetching}>
                 {events?.list.length !== 0 ? (
                     <>

diff --git a/src/Constants/heights.ts 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
@@ -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