ydb-embedded-ui 22.4.0 → 22.6.0

package/src/containers/PDiskPage/PDiskStorageDetails.scss

@@ -0,0 +1,51 @@
+.ydb-pdisk-storage-details {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--g-spacing-5);
+
+    width: fit-content;
+    max-width: 100%;
+    padding: var(--g-spacing-3) var(--g-spacing-5);
+
+    border-radius: var(--g-border-radius-m);
+    background-color: var(--g-color-base-generic);
+
+    &__detail {
+        --g-definition-list-item-gap: 0px;
+
+        min-width: 0;
+        max-width: 200px;
+
+        &_location {
+            min-width: 100px;
+        }
+
+        .g-definition-list__definition {
+            min-width: 0;
+            max-width: 100%;
+        }
+    }
+
+    &__value-popover {
+        flex: 0 1 auto;
+
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    &__value-popover-content {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
+
+            > span {
+                unicode-bidi: plaintext;
+            }
+        }
+    }
+}

package/src/containers/PDiskPage/PDiskStorageDetails.tsx

@@ -0,0 +1,64 @@
+import {DefinitionList} from '@gravity-ui/uikit';
+
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import type {PDiskData} from '../../store/reducers/pdisk/types';
+import {cn} from '../../utils/cn';
+import {getDiskLocationItems} from '../../utils/disks/diskInfo/getDiskLocationItems';
+
+import './PDiskStorageDetails.scss';
+
+const b = cn('ydb-pdisk-storage-details');
+const LOCATION_IDS = ['datacenter', 'rack', 'fqdn', 'pdisk-path'];
+const FIELD_ORDER = [...LOCATION_IDS, 'node-id', 'pdisk-id'];
+
+export function PDiskStorageDetails({
+    data = {},
+    className,
+}: {
+    data?: PDiskData;
+    className?: string;
+}) {
+    const items = getDiskLocationItems(data, {
+        Host: data.NodeHost,
+        Rack: data.NodeRack,
+        DC: data.NodeDC,
+    });
+
+    return (
+        <div className={b(null, className)} data-qa="pdisk-location">
+            {FIELD_ORDER.map((id) => {
+                const item = items.find((entry) => entry.id === id);
+                if (!item) {
+                    return null;
+                }
+                const copyText = item.copyText === undefined ? undefined : String(item.copyText);
+                return (
+                    <DefinitionList
+                        key={id}
+                        direction="vertical"
+                        className={b('detail', {location: LOCATION_IDS.includes(id)})}
+                        qa={`pdisk-location-${id}`}
+                    >
+                        <DefinitionList.Item name={item.name}>
+                            <CopyableValue copyText={copyText} fieldName={item.name}>
+                                <CellWithPopover
+                                    content={copyText}
+                                    disabled={!copyText}
+                                    placement={['top', 'bottom']}
+                                    fullWidth
+                                    wrapperClassName={b('value-popover')}
+                                    className={b('value-popover-content', {
+                                        'with-left-trim': id === 'pdisk-path',
+                                    })}
+                                >
+                                    <span tabIndex={copyText ? 0 : undefined}>{item.content}</span>
+                                </CellWithPopover>
+                            </CopyableValue>
+                        </DefinitionList.Item>
+                    </DefinitionList>
+                );
+            })}
+        </div>
+    );
+}

package/src/containers/PDiskPage/i18n/en.json

@@ -2,6 +2,7 @@
   "fqdn": "FQDN",
   "pdisk": "PDisk",
   "node": "Node",
+  "action_open-in-developer-ui": "Open in Developer UI",
 
   "storage": "Storage",
   "space-distribution": "Space distribution",

package/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -7,6 +7,7 @@ import {NODES_COLUMNS_TO_DATA_FIELDS} from '../../../components/nodesColumns/con
 import {storageApi} from '../../../store/reducers/storage/storage';
 import type {NodesGroupByField, NodesRequiredField} from '../../../types/api/nodes';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import {getRequiredDataFields} from '../../../utils/tableUtils/getRequiredDataFields';
@@ -105,6 +106,7 @@ export function GroupedStorageNodesComponent({
     scrollContainerRef,
 }: PaginatedStorageProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {hideUnavailable} = useHideUnavailableNodes();
 
     const {nodesSearchValue, storageNodesGroupByParam, handleShowAllNodes} =
         useStorageQueryParams();
@@ -131,6 +133,7 @@ export function GroupedStorageNodesComponent({
     const {currentData, isFetching, error} = storageApi.useGetStorageNodesInfoQuery(
         {
             database,
+            alive: hideUnavailable || undefined,
             with: 'all',
             filter: nodesSearchValue.trim(),
             node_id: nodeId,

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -1,6 +1,7 @@
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
 import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {PaginatedStorageProps} from '../PaginatedStorage';
 import {PaginatedStorageNodesTable} from '../PaginatedStorageNodesTable/PaginatedStorageNodesTable';
@@ -22,6 +23,7 @@ export function StorageNodesComponent({
         useStorageQueryParams();
 
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
+    const {hideUnavailable} = useHideUnavailableNodes();
 
     const expertMode = useIsStorageExpertMode();
     const {handleDataFetched, columnsSettings, rowHeight} = useStorageColumnsSettings({
@@ -69,7 +71,12 @@ export function StorageNodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [nodesSearchValue, visibleEntities, nodesUptimeFilter],
+                scrollDependencies: [
+                    nodesSearchValue,
+                    visibleEntities,
+                    nodesUptimeFilter,
+                    hideUnavailable,
+                ],
             }}
         />
     );

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx

@@ -4,6 +4,7 @@ import {ChartTreemap} from '@gravity-ui/icons';
 import {Button, Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
+import {HideUnavailableNodesSwitch} from '../../../components/HideUnavailableNodesSwitch/HideUnavailableNodesSwitch';
 import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext';
 import {Search} from '../../../components/Search/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
@@ -127,6 +128,7 @@ export function StorageNodesControls({
                         {i18n('controls_expert-mode')}
                     </Button>
                 ) : null}
+                <HideUnavailableNodesSwitch className={b('hide-unavailable')} />
             </Flex>
             {canUseStorageExpertMode && isStorageExpertMode ? (
                 <StorageNodesExpertModePanel />

package/src/containers/Storage/PaginatedStorageNodesTable/PaginatedStorageNodesTable.tsx

@@ -14,6 +14,7 @@ import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {cn} from '../../../utils/cn';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {NodesUptimeFilterValues, isUnavailableNode} from '../../../utils/nodes';
 import {STORAGE_NODES_DEFAULT_ROW_HEIGHT} from '../PaginatedStorageNodes/nodeExpertModeLayout';
 
@@ -69,9 +70,11 @@ export const PaginatedStorageNodesTable = ({
     onDataFetched,
 }: PaginatedStorageNodesTableProps) => {
     const history = useHistory();
+    const {hideUnavailable} = useHideUnavailableNodes();
     const tableFilters = React.useMemo(() => {
         return {
             searchValue,
+            hideUnavailable,
             visibleEntities,
             nodesUptimeFilter,
             database,
@@ -81,6 +84,7 @@ export const PaginatedStorageNodesTable = ({
             filterGroupBy,
         };
     }, [
+        hideUnavailable,
         searchValue,
         visibleEntities,
         nodesUptimeFilter,

package/src/containers/Storage/PaginatedStorageNodesTable/getNodes.ts

@@ -29,6 +29,7 @@ export const getStorageNodes: FetchData<
     } = params;
     const {
         searchValue,
+        hideUnavailable,
         nodesUptimeFilter,
         visibleEntities,
         database,
@@ -51,6 +52,7 @@ export const getStorageNodes: FetchData<
         offset,
         sort,
         filter: searchValue?.trim(),
+        alive: hideUnavailable || undefined,
         uptime: getUptimeParamValue(nodesUptimeFilter),
         with: visibleEntities,
         database,

package/src/containers/Storage/Storage.scss

@@ -1,6 +1,10 @@
 @use '../../styles/mixins.scss';
 
 .global-storage {
+    &__hide-unavailable {
+        margin-inline-start: var(--g-spacing-1);
+    }
+
     &__search {
         @include mixins.search();
     }

package/src/containers/StorageGroupPage/StorageGroupPage.scss

@@ -1,4 +1,8 @@
+@use '../../styles/mixins.scss';
+
 .ydb-storage-group-page {
+    --sticky-tabs-height: 40px;
+    --data-table-start: var(--sticky-tabs-height);
     position: relative;
 
     overflow: auto;
@@ -15,19 +19,30 @@
     }
 
     &__summary {
-        margin-top: var(--g-spacing-4);
         margin-bottom: var(--g-spacing-6);
     }
 
-    &__meta {
+    &__title {
         margin-bottom: var(--g-spacing-4);
+        padding-right: 125px;
     }
 
-    &__title {
-        margin-bottom: var(--g-spacing-4);
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
     }
 
     &__storage-title {
+        z-index: 3;
+
+        display: flex;
+        align-items: center;
+
+        height: var(--sticky-tabs-height);
         margin: 0;
+        padding-right: 125px;
+
+        @include mixins.sticky-top();
     }
 }

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import {ArrowLeft} from '@gravity-ui/icons';
-import {Button, ClipboardButton, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {Flex, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
-import {useHistory} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
-import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo';
@@ -31,7 +30,6 @@ const storageGroupPageCn = cn('ydb-storage-group-page');
 
 export function StorageGroupPage() {
     const dispatch = useTypedDispatch();
-    const history = useHistory();
     const database = useDatabaseFromQuery();
     const containerRef = React.useRef<HTMLDivElement>(null);
 
@@ -72,50 +70,32 @@ export function StorageGroupPage() {
         );
     };
 
-    const renderPageMeta = () => {
-        if (!groupId) {
-            return null;
-        }
-
-        const hasPreviousPage = history.length > 1;
-
+    const renderPageTitle = () => {
         return (
             <Flex
-                className={storageGroupPageCn('meta')}
-                alignItems="center"
-                justifyContent={hasPreviousPage ? 'space-between' : 'flex-end'}
+                className={storageGroupPageCn('title')}
+                alignItems="flex-start"
                 gap={2}
+                wrap="nowrap"
             >
-                {hasPreviousPage && (
-                    <Button view="outlined" onClick={() => history.goBack()}>
-                        <Icon data={ArrowLeft} />
-                        {storageGroupPageKeyset('action_back')}
-                    </Button>
-                )}
-                <AutoRefreshControl />
-            </Flex>
-        );
-    };
-
-    const renderPageTitle = () => {
-        return (
-            <Flex className={storageGroupPageCn('title')} alignItems="center" gap={2} wrap="wrap">
-                <Text variant="header-1">{storageGroupPageKeyset('storage-group')}</Text>
-                <Flex alignItems="center" gap={1}>
-                    <Text variant="header-1" color="hint">
-                        {groupId || EMPTY_DATA_PLACEHOLDER}
-                    </Text>
-                    {groupId && (
-                        <ClipboardButton
-                            text={groupId}
-                            view="flat-secondary"
-                            size="s"
-                            aria-label={storageGroupPageKeyset('action_copy-group-id-from-title')}
-                            tooltipInitialText={storageGroupPageKeyset('action_copy-group-id')}
-                        />
-                    )}
+                <Flex
+                    className={storageGroupPageCn('title-content')}
+                    alignItems="center"
+                    gap={2}
+                    wrap="wrap"
+                >
+                    <Text variant="header-1">{storageGroupPageKeyset('storage-group')}</Text>
+                    <CopyableValue
+                        copyText={groupId}
+                        fieldName={storageGroupPageKeyset('storage-group')}
+                        copyButtonLabel={storageGroupPageKeyset('action_copy-group-id-from-title')}
+                    >
+                        <Text variant="header-1" color="hint">
+                            {groupId || EMPTY_DATA_PLACEHOLDER}
+                        </Text>
+                    </CopyableValue>
+                    <StorageGroupStateLabel state={state} />
                 </Flex>
-                <StorageGroupStateLabel state={state} />
             </Flex>
         );
     };
@@ -158,8 +138,8 @@ export function StorageGroupPage() {
     return (
         <div className={storageGroupPageCn(null)} ref={containerRef}>
             {renderHelmet()}
+            {groupId ? <StickyAutoRefreshControl /> : null}
             <div className={storageGroupPageCn('summary')}>
-                {renderPageMeta()}
                 {renderPageTitle()}
                 {renderError()}
                 {renderInfo()}

package/src/containers/StorageGroupPage/i18n/en.json

@@ -1,7 +1,5 @@
 {
   "storage-group": "Storage Group",
   "storage": "Storage",
-  "action_back": "Back",
-  "action_copy-group-id": "Copy Storage Group ID",
   "action_copy-group-id-from-title": "Copy Storage Group ID from page title"
 }

package/src/containers/Tablet/Tablet.scss

@@ -2,10 +2,24 @@
 
 .ydb-tablet-page {
     $_: &;
+    position: relative;
+
+    overflow: auto;
+
     height: 100%;
-    padding: 20px;
+    padding: 0 20px 20px;
     @include mixins.body-2-typography();
 
+    &__content {
+        // The sticky refresh wrapper already supplies the initial 20px page inset.
+        min-height: calc(100% - 20px);
+    }
+
+    &__meta {
+        min-height: 28px;
+        padding-right: 121px;
+    }
+
     &__placeholder {
         display: flex;
         flex: 1 1 auto;

package/src/containers/Tablet/Tablet.tsx

@@ -7,12 +7,13 @@ import {useParams} from 'react-router-dom';
 import {useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
 import {EmptyStateWrapper} from '../../components/EmptyState';
 import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InternalLink} from '../../components/InternalLink';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {PageMeta} from '../../components/PageMeta/PageMeta';
 import {tabletPageQueryParams, useTabletPagePath} from '../../routes';
 import {useTabletDevUiSecurePath} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
@@ -106,25 +107,30 @@ export function Tablet() {
     }
 
     return (
-        <Flex gap={5} direction="column" className={b()}>
+        <div className={b()}>
             <Helmet>
                 <title>{`${id} — ${i18n('tablet.header')} — ${
                     databaseFullPath || queryClusterName || CLUSTER_DEFAULT_TITLE
                 }`}</title>
             </Helmet>
-            <PageMetaWithAutorefresh items={metaItems} />
-            <LoaderWrapper loading={loading} size="l">
-                {error ? <ResponseError error={error} /> : null}
-                {currentData ? (
-                    <TabletContent
-                        id={id}
-                        tablet={tablet}
-                        history={history}
-                        database={database || databaseFullPath}
-                    />
-                ) : null}
-            </LoaderWrapper>
-        </Flex>
+            <StickyAutoRefreshControl />
+            <Flex gap={5} direction="column" className={b('content')}>
+                <Flex alignItems="center" className={b('meta')}>
+                    <PageMeta items={metaItems} />
+                </Flex>
+                <LoaderWrapper loading={loading} size="l">
+                    {error ? <ResponseError error={error} /> : null}
+                    {currentData ? (
+                        <TabletContent
+                            id={id}
+                            tablet={tablet}
+                            history={history}
+                            database={database || databaseFullPath}
+                        />
+                    ) : null}
+                </LoaderWrapper>
+            </Flex>
+        </div>
     );
 }
 

package/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -31,6 +31,7 @@ import {getInfoTabLinks} from '../../../../utils/additionalProps';
 import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {useClusterNameFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
+import {useDatabaseHealthcheckAvailable} from '../../../../utils/hooks/useDatabaseHealthcheckAvailable';
 import {useDatabasesV2} from '../../../../utils/hooks/useDatabasesV2';
 import {canShowTenantMonitoringTab} from '../../../../utils/monitoringVisibility';
 import {useTenantPage} from '../../TenantNavigation/useTenantNavigation';
@@ -64,18 +65,6 @@ function isTenantLoading(isFetching: boolean, tenant: TTenant | undefined, error
     return isFetching && tenant === undefined && !error;
 }
 
-function shouldSkipHealthcheck({
-    isServerless,
-    isV2NavigationEnabled,
-    tenant,
-}: {
-    isServerless: boolean;
-    isV2NavigationEnabled: boolean;
-    tenant?: TTenant;
-}) {
-    return isServerless || isV2NavigationEnabled || tenant === undefined;
-}
-
 function getDatabaseStatus(overall?: EFlag, selfCheckResult?: SelfCheckResult) {
     const healthcheckStatus =
         selfCheckResult === undefined ? undefined : selfCheckResultToHcStatus[selfCheckResult];
@@ -128,20 +117,6 @@ function renderTenantError(error: unknown, defaultMessage: string) {
     return error ? <ResponseError error={error} defaultMessage={defaultMessage} /> : null;
 }
 
-function renderHealthcheckPreview({
-    database,
-    isServerless,
-    isV2NavigationEnabled,
-}: {
-    database: string;
-    isServerless: boolean;
-    isV2NavigationEnabled: boolean;
-}) {
-    return !isServerless && !isV2NavigationEnabled ? (
-        <HealthcheckPreview database={database} />
-    ) : null;
-}
-
 function renderOverviewHead({
     databaseStatus,
     handleOpenMonitoring,
@@ -308,6 +283,8 @@ export function TenantOverview({
     const tenantLoading = isTenantLoading(isFetching, tenant, error);
     const {Name, Type, Overall, CoresTotal} = tenant || {};
     const isServerless = Type === 'Serverless';
+    const healthcheckAvailable = useDatabaseHealthcheckAvailable(Type);
+    const showHealthcheck = healthcheckAvailable && !isV2NavigationEnabled;
 
     // Use healthcheck self_check_result as the database status color when available;
     // fall back to tenantinfo.Overall (e.g. for Serverless databases where healthcheck is skipped).
@@ -317,7 +294,7 @@ export function TenantOverview({
     const {currentData: healthcheckData} = healthcheckApi.useGetHealthcheckInfoQuery(
         {database, clusterName},
         {
-            skip: shouldSkipHealthcheck({isServerless, isV2NavigationEnabled, tenant}),
+            skip: !showHealthcheck || tenant === undefined,
         },
     );
     const databaseStatus = getDatabaseStatus(Overall, healthcheckData?.self_check_result);
@@ -404,11 +381,7 @@ export function TenantOverview({
                             tenantType,
                         })}
                         <Flex direction="column" gap={4}>
-                            {renderHealthcheckPreview({
-                                database,
-                                isServerless,
-                                isV2NavigationEnabled,
-                            })}
+                            {showHealthcheck && <HealthcheckPreview database={database} />}
                             <QueriesActivityBar database={database} />
                             <MetricsTabs
                                 metrics={metricOverview}

package/src/containers/Tenant/Healthcheck/Healthcheck.scss

@@ -93,7 +93,12 @@
         }
     }
     &__issue-status {
-        text-align: start;
+        display: flex;
+        flex-shrink: 0;
+    }
+    &__issue-title {
+        min-width: 0;
+        overflow-wrap: anywhere;
     }
     &__issue-content {
         --g-definition-list-item-gap: var(--g-spacing-3);

package/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx

@@ -80,17 +80,26 @@ export function HealthcheckIssue({
                                         justifyContent="space-between"
                                         className={b('issue-summary')}
                                     >
-                                        <Flex direction="column" gap={1} alignSelf="center">
-                                            <Text variant="subheader-2">{issue.message}</Text>
-
+                                        <Flex
+                                            gap={2}
+                                            alignItems="center"
+                                            className={b('issue-message')}
+                                        >
                                             {issue.status && (
                                                 <div className={b('issue-status')}>
                                                     <EntityStatus.Label
+                                                        view="compact"
                                                         size="s"
                                                         status={hcStatusToColorFlag[issue.status]}
                                                     />
                                                 </div>
                                             )}
+                                            <Text
+                                                variant="subheader-2"
+                                                className={b('issue-title')}
+                                            >
+                                                {issue.message}
+                                            </Text>
                                         </Flex>
                                         <Flex
                                             wrap="nowrap"
@@ -124,21 +133,22 @@ export function HealthcheckIssue({
                             >
                                 <Flex
                                     id={id}
-                                    direction="column"
-                                    gap={1}
-                                    alignSelf="center"
+                                    gap={2}
+                                    alignItems="center"
                                     className={b('issue-message')}
                                 >
-                                    <Text variant="subheader-2">{issue.message}</Text>
-
                                     {issue.status && (
                                         <div className={b('issue-status')}>
                                             <EntityStatus.Label
+                                                view="compact"
                                                 size="s"
                                                 status={hcStatusToColorFlag[issue.status]}
                                             />
                                         </div>
                                     )}
+                                    <Text variant="subheader-2" className={b('issue-title')}>
+                                        {issue.message}
+                                    </Text>
                                 </Flex>
                                 <div
                                     className={b('issue-action')}