feat(Healthcheck): redesign #2348

Raubzeug · 2025-05-30T14:55:17Z

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
318	317	0	1	0

😟 No changes in tests. 😕

Bundle Size: 🔺

Current: 83.76 MB | Main: 83.65 MB
Diff: +0.10 MB (0.12%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

Copilot

Pull Request Overview

This PR redesigns the Healthcheck feature by replacing the old DiagnosticCard-based preview with a new Alert-based component and cleans up related styles and imports. It also introduces an xs size for EmptyState, fixes import paths for EmptyFilter, adds a showVeil option to Drawer, wraps the fullscreen button in a tooltip, and adds a new HealthcheckStatus component.

Reviewed Changes

Copilot reviewed 65 out of 65 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss	Removed legacy issue-tree styles
src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx	Refactored preview component to use Alert and new layout logic
src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.scss	Added styles for the redesigned HealthcheckPreview
src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx	Deleted old details view component
src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss	Removed legacy Healthcheck styles
src/containers/Storage/PaginatedStorageNodesTable/StorageNodesEmptyDataMessage.tsx	Corrected EmptyFilter import path
src/containers/Storage/PaginatedStorageGroupsTable/StorageGroupsEmptyDataMessage.tsx	Corrected EmptyFilter import path
src/components/SplitPane/SplitPane.scss	Removed gutter z-index override
src/components/HealthcheckStatus/i18n/index.ts & en.json & HealthcheckStatus.tsx	Added new HealthcheckStatus component and translations
src/components/EnableFullscreenButton/EnableFullscreenButton.tsx	Wrapped fullscreen button in ActionTooltip
src/components/EmptyState/EmptyState.tsx	Introduced `xs` size variant
src/components/EmptyState/EmptyState.scss	Added styles for the new `xs` size
src/components/EmptyFilter/i18n/index.ts	Fixed i18n import path
src/components/EmptyFilter/EmptyFilter.tsx	Updated component import paths
src/components/Drawer/Drawer.tsx	Added `showVeil` prop to toggle veil visibility
src/components/Drawer/Drawer.scss	Increased drawer item z-index

Comments suppressed due to low confidence (2)

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx:23

[nitpick] The active prop is declared in HealthcheckPreviewProps but never used in the component. Remove it to clean up unused code.

active?: boolean;

src/components/SplitPane/SplitPane.scss:25

[nitpick] Removing the gutter's z-index may cause it to drop behind other elements and break drag functionality. Confirm this change or add a comment explaining the new stacking context.

z-index: 10;

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx

src/components/EmptyState/EmptyState.scss

Raubzeug · 2025-06-03T12:12:18Z

@astandrik @artemmufazalov design review passed, stand redeployed!

astandrik · 2025-06-04T10:00:54Z

src/components/Drawer/Drawer.scss


    &__item {
-        z-index: 4;
+        z-index: 11;


maybe we could make some global constants?
It unobvious what 11 here and not 12 or 10

Indeed there's no need in this change. I removed it.

astandrik · 2025-06-04T10:01:42Z

src/components/Drawer/Drawer.tsx

    detectClickOutside?: boolean;
    defaultWidth?: number;
    isPercentageWidth?: boolean;
+    showVeil?: boolean;


maybe hideVeil with hideVeil=false is better
why? To represent the original components' prop that is "hideVeil"

astandrik · 2025-06-04T10:07:30Z

src/components/EmptyState/EmptyState.scss

+            width: 321px;
+            height: 100px;
+            #{$block}__image {
+                margin-right: 20px;


--g-spacing-5

astandrik · 2025-06-04T10:07:48Z

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

-        <Button onClick={onEnableFullscreen} view={view} disabled={disabled} title="Fullscreen">
-            <Icon data={SquareDashed} />
-        </Button>
+        <ActionTooltip title="Fullscreen">


astandrik · 2025-06-04T10:08:05Z

src/components/HealthcheckStatus/HealthcheckStatus.tsx

+    [SelfCheckResult.DEGRADED]: 'info',
+    [SelfCheckResult.MAINTENANCE_REQUIRED]: 'warning',
+    [SelfCheckResult.EMERGENCY]: 'danger',
+    [SelfCheckResult.UNSPECIFIED]: 'normal',


it's map SelfCheckResultToLabelTheme, no need to translate here

astandrik · 2025-06-04T10:12:06Z

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/i18n/en.json

-  "status_message.ok": "No issues",
-  "no-data": "no healthcheck data"
+  "description_problems": [
+    "There is {{count}} issues.",


"issues" is plural and "is" - for singular

astandrik · 2025-06-04T10:30:04Z

src/uiFactory/types.ts

    getMonitoringLink?: GetMonitoringLink;
    getMonitoringClusterLink?: GetMonitoringClusterLink;
+
+    getHealthckechViewTitles: GetHealthcheckViewTitles<CommonIssueType>;


maybe it would be better to make one field for all healthcheck functions? I doubt that there are two app with same getHealthckechViewTitles but different getHealthcheckViewsOrder

astandrik · 2025-06-04T10:38:57Z

src/containers/Tenant/Healthcheck/components/HealthcheckIssues.tsx

+        () =>
+            view
+                ? filteredIssues.filter((issue) => {
+                      const type = issue.upperType || issue.type;


whats upperType? I would suppose that it's issue in upperCase but looking at getLeaves function more likely its parentType

the structure is: Root => firstParent => ... => nthParent => child.
UpperType is the type of the firstParent... I will reword.

astandrik · 2025-06-04T11:29:04Z

src/containers/Tenant/Healthcheck/components/HealthcheckIssues.tsx

+export function Issues({issues}: IssuesProps) {
+    const {view, issuesFilter} = useTenantQueryParams();
+
+    const filteredIssues = React.useMemo(() => {


maybe could try to hide them with css has-text?

unfortunately not possible for now

astandrik · 2025-06-04T11:44:20Z

src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx

+        return null;
+    }
+
+    return pdisk.map((el: {id: string; path: string}) => (


maybe something instead of el would be great =)

astandrik · 2025-06-04T12:06:43Z

maybe when searching - we could open found issues?

astandrik · 2025-06-04T12:07:40Z

src/components/ProgressViewer/ProgressViewer.tsx

 7) warningThreshold - the percentage of fullness at which the color of the progress bar changes to yellow
 8) dangerThreshold - the percentage of fullness at which the color of the progress bar changes to red
+9) overflow - parcents may be more that 100%
 */


astandrik · 2025-06-04T12:08:47Z

src/containers/Tenant/Healthcheck/Healthcheck.scss

+        position: sticky;
+        z-index: 1;
+        top: 0px;
+        left: 0;


top, left lets both be 0px or 0

Raubzeug requested review from artemmufazalov and astandrik May 30, 2025 14:55

Raubzeug force-pushed the healthcheck branch 2 times, most recently from bae0560 to 9136f5f Compare May 31, 2025 13:58

astandrik requested a review from Copilot June 2, 2025 14:14

Copilot AI reviewed Jun 2, 2025

View reviewed changes

src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx Show resolved Hide resolved

src/components/EmptyState/EmptyState.scss Show resolved Hide resolved

astandrik requested changes Jun 4, 2025

View reviewed changes

astandrik reviewed Jun 4, 2025

View reviewed changes

Raubzeug requested a review from astandrik June 4, 2025 14:55

Raubzeug added 14 commits June 4, 2025 17:56

fix: loader position for tenant

503e6c4

refactor: move EmptyFilter to components

5aaf47a

feat(Healthcheck): redesign

bca7007

fix: tests

85d4064

fix: tests

0b2b0a2

fix: tests

41341d6

fix(SplitPane): gutter z-index 0

4ef00d6

feat(MetricCards): add network utilization

e3087ca

fix: design review

f531ff7

fix: add animation

996c701

fix: add animation

4eeb23d

fix: review

56713a2

fix: review

2ce27ab

fix: animation

7281810

Raubzeug force-pushed the healthcheck branch from 47d0053 to 7281810 Compare June 4, 2025 14:57

astandrik approved these changes Jun 5, 2025

View reviewed changes

Raubzeug added this pull request to the merge queue Jun 5, 2025

Merged via the queue into main with commit eac76af Jun 5, 2025
7 checks passed

Raubzeug deleted the healthcheck branch June 5, 2025 06:32

ydb-platform-bot mentioned this pull request Jun 5, 2025

chore(main): release 9.4.0 #2371

Merged

Raubzeug linked an issue Jun 5, 2025 that may be closed by this pull request

add support for network data on database page #1926

Closed

ydb-platform-bot mentioned this pull request Jun 23, 2025

chore(hotfix/v9.6.3-hotfix.2): release 9.6.3-hotfix.2 #2465

Closed

feat(Healthcheck): redesign #2348

feat(Healthcheck): redesign #2348

Uh oh!

Conversation

Raubzeug commented May 30, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI Results

Test Status: ⚠️ FLAKY

Bundle Size: 🔺

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Raubzeug commented Jun 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

astandrik commented Jun 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Raubzeug commented May 30, 2025 •

edited by github-actions bot

Loading