diff --git a/src/components/BasicNodeViewer/BasicNodeViewer.tsx b/src/components/BasicNodeViewer/BasicNodeViewer.tsx index 04cb0d90ef..c85f6f8be2 100644 --- a/src/components/BasicNodeViewer/BasicNodeViewer.tsx +++ b/src/components/BasicNodeViewer/BasicNodeViewer.tsx @@ -3,7 +3,7 @@ import cn from 'bem-cn-lite'; import type {AdditionalNodesProps} from '../../types/additionalProps'; import type {PreparedNode} from '../../store/reducers/node/types'; -import EntityStatus from '../EntityStatus/EntityStatus'; +import {EntityStatus} from '../EntityStatus/EntityStatus'; import {Tags} from '../Tags'; import {Icon} from '../Icon'; diff --git a/src/components/EntityStatus/EntityStatus.js b/src/components/EntityStatus/EntityStatus.js deleted file mode 100644 index 1a125721ed..0000000000 --- a/src/components/EntityStatus/EntityStatus.js +++ /dev/null @@ -1,136 +0,0 @@ -import {Icon, Link as UIKitLink} from '@gravity-ui/uikit'; -import cn from 'bem-cn-lite'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {Link} from 'react-router-dom'; -import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg'; -import circleInfoIcon from '../../assets/icons/circle-info.svg'; -import circleTimesIcon from '../../assets/icons/circle-xmark.svg'; -import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg'; -import {ClipboardButton} from '../ClipboardButton'; -import './EntityStatus.scss'; - -const icons = { - BLUE: circleInfoIcon, - YELLOW: circleExclamationIcon, - ORANGE: triangleExclamationIcon, - RED: circleTimesIcon, -}; - -const b = cn('entity-status'); - -class EntityStatus extends React.Component { - static propTypes = { - status: PropTypes.string, - name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - onNameMouseEnter: PropTypes.func, - onNameMouseLeave: PropTypes.func, - path: PropTypes.string, - size: PropTypes.string, - label: PropTypes.string, - iconPath: PropTypes.string, - hasClipboardButton: PropTypes.bool, - clipboardButtonAlwaysVisible: PropTypes.bool, - showStatus: PropTypes.bool, - externalLink: PropTypes.bool, - className: PropTypes.string, - mode: PropTypes.oneOf(['color', 'icons']), - withLeftTrim: PropTypes.bool, - }; - - static defaultProps = { - status: 'gray', - text: '', - size: 's', - label: '', - showStatus: true, - externalLink: false, - mode: 'color', - withLeftTrim: false, - clipboardButtonAlwaysVisible: false, - }; - renderIcon() { - const {status, size, showStatus, mode} = this.props; - - if (!showStatus) { - return null; - } - - const modifiers = {state: status.toLowerCase(), size}; - - if (mode === 'icons' && icons[status]) { - return ; - } - - return
; - } - renderStatusLink() { - const {iconPath} = this.props; - - return ( - - {this.renderIcon()} - - ); - } - renderLink() { - const {externalLink, name, path, onNameMouseEnter, onNameMouseLeave} = this.props; - - if (externalLink) { - return ( - - {name} - - ); - } - - return path ? ( - - {name} - - ) : ( - name && ( - - {name} - - ) - ); - } - render() { - const {name, label, iconPath, hasClipboardButton, className, size, status} = this.props; - - return ( -
- {iconPath ? this.renderStatusLink() : this.renderIcon()} - {label && ( - - {label} - - )} - - {this.renderLink()} - - {hasClipboardButton && ( - - )} -
- ); - } -} - -export default EntityStatus; diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss index 0f31ad4965..51360442f9 100644 --- a/src/components/EntityStatus/EntityStatus.scss +++ b/src/components/EntityStatus/EntityStatus.scss @@ -91,7 +91,6 @@ } &__status-color { - &_state_running, &_state_green { background-color: var(--ydb-color-status-green); } @@ -104,7 +103,6 @@ &_state_red { background-color: var(--ydb-color-status-red); } - &_state_gray, &_state_grey { background-color: var(--ydb-color-status-grey); } diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx new file mode 100644 index 0000000000..1cdc0d7393 --- /dev/null +++ b/src/components/EntityStatus/EntityStatus.tsx @@ -0,0 +1,124 @@ +import {Link} from 'react-router-dom'; +import cn from 'bem-cn-lite'; + +import {Icon, Link as UIKitLink} from '@gravity-ui/uikit'; + +import {EFlag} from '../../types/api/enums'; +import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg'; +import circleInfoIcon from '../../assets/icons/circle-info.svg'; +import circleTimesIcon from '../../assets/icons/circle-xmark.svg'; +import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg'; +import {ClipboardButton} from '../ClipboardButton'; +import './EntityStatus.scss'; + +const icons = { + [EFlag.Blue]: circleInfoIcon, + [EFlag.Yellow]: circleExclamationIcon, + [EFlag.Orange]: triangleExclamationIcon, + [EFlag.Red]: circleTimesIcon, +}; + +const b = cn('entity-status'); + +interface EntityStatusProps { + status?: EFlag; + name?: string; + label?: string; + path?: string; + iconPath?: string; + + size?: 'xs' | 's' | 'm' | 'l'; + mode?: 'color' | 'icons'; + + showStatus?: boolean; + externalLink?: boolean; + withLeftTrim?: boolean; + + hasClipboardButton?: boolean; + clipboardButtonAlwaysVisible?: boolean; + + className?: string; +} + +export function EntityStatus({ + status = EFlag.Grey, + name = '', + label, + path, + iconPath, + + size = 's', + mode = 'color', + + showStatus = true, + externalLink = false, + withLeftTrim = false, + + hasClipboardButton, + clipboardButtonAlwaysVisible = false, + + className, +}: EntityStatusProps) { + const renderIcon = () => { + if (!showStatus) { + return null; + } + + const modifiers = {state: status.toLowerCase(), size}; + + if (mode === 'icons' && status in icons) { + return ( + + ); + } + + return
; + }; + const renderStatusLink = () => { + return ( + + {renderIcon()} + + ); + }; + const renderLink = () => { + if (externalLink) { + return ( + + {name} + + ); + } + + return path ? ( + + {name} + + ) : ( + name && {name} + ); + }; + return ( +
+ {iconPath ? renderStatusLink() : renderIcon()} + {label && ( + + {label} + + )} + {renderLink()} + {hasClipboardButton && ( + + )} +
+ ); +} diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx index 1eb336c96c..2e751f4f92 100644 --- a/src/components/NodeHostWrapper/NodeHostWrapper.tsx +++ b/src/components/NodeHostWrapper/NodeHostWrapper.tsx @@ -7,7 +7,7 @@ import type {NodeAddress} from '../../types/additionalProps'; import {getDefaultNodePath} from '../../containers/Node/NodePages'; import {isUnavailableNode} from '../../utils/nodes'; -import EntityStatus from '../EntityStatus/EntityStatus'; +import {EntityStatus} from '../EntityStatus/EntityStatus'; import {NodeEndpointsTooltipContent} from '../TooltipsContent'; import {Icon} from '../Icon'; import {CellWithPopover} from '../CellWithPopover/CellWithPopover'; diff --git a/src/components/Tablet/Tablet.scss b/src/components/Tablet/Tablet.scss index 09b8e8658c..83ae417220 100644 --- a/src/components/Tablet/Tablet.scss +++ b/src/components/Tablet/Tablet.scss @@ -16,7 +16,7 @@ padding: 10px; } - &_status_gray { + &_status_grey { background-color: var(--ydb-color-status-grey); } &_status_yellow { diff --git a/src/components/TabletsOverall/TabletsOverall.tsx b/src/components/TabletsOverall/TabletsOverall.tsx index 1bceb2f8b5..872fb6afca 100644 --- a/src/components/TabletsOverall/TabletsOverall.tsx +++ b/src/components/TabletsOverall/TabletsOverall.tsx @@ -86,7 +86,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) { value: statesForOverallProgress[key], })); - // sort stack to achieve order "green, orange, yellow, red, blue, gray" + // sort stack to achieve order "green, orange, yellow, red, blue, grey" stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]); return ( diff --git a/src/components/TabletsStatistic/TabletsStatistic.scss b/src/components/TabletsStatistic/TabletsStatistic.scss index bbc6205499..eb80d6b271 100644 --- a/src/components/TabletsStatistic/TabletsStatistic.scss +++ b/src/components/TabletsStatistic/TabletsStatistic.scss @@ -39,7 +39,7 @@ color: var(--g-color-text-danger); background: var(--g-color-base-danger-light); } - &_state_gray { + &_state_grey { color: var(--g-color-text-secondary); border: 1px solid var(--g-color-line-generic-hover); } diff --git a/src/components/VirtualTable/TableHead.tsx b/src/components/VirtualTable/TableHead.tsx index bf1d575b93..17dc9d64d4 100644 --- a/src/components/VirtualTable/TableHead.tsx +++ b/src/components/VirtualTable/TableHead.tsx @@ -170,7 +170,7 @@ export const TableHead = ({ let newSortParams: SortParams = {}; // Order is changed in following order: - // 1. Inactive Sort Order - gray icon of default order + // 1. Inactive Sort Order - grey icon of default order // 2. Active default order // 3. Active not default order if (columnId === sortParams.columnId) { diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index d17849f3de..06b5c6000d 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -25,7 +25,7 @@ import {Tenants} from '../Tenants/Tenants'; import {StorageWrapper} from '../Storage/StorageWrapper'; import {NodesWrapper} from '../Nodes/NodesWrapper'; import {Versions} from '../Versions/Versions'; -import EntityStatus from '../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../components/EntityStatus/EntityStatus'; import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants'; import {ClusterInfo} from './ClusterInfo/ClusterInfo'; diff --git a/src/containers/Clusters/Clusters.scss b/src/containers/Clusters/Clusters.scss index 998cb7fa83..3a0d20482d 100644 --- a/src/containers/Clusters/Clusters.scss +++ b/src/containers/Clusters/Clusters.scss @@ -36,7 +36,7 @@ &_type_red { background: var(--ydb-color-status-red); } - &_type_gray { + &_type_grey { background: var(--ydb-color-status-grey); } &_type_orange { diff --git a/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js b/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js index 5683a65e36..48483458ab 100644 --- a/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js +++ b/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js @@ -24,7 +24,7 @@ export const HeatmapCanvas = (props) => { const rectX = (index % columnsCount) * (TABLET_SIZE + TABLET_PADDING); const rectY = Math.floor(index / columnsCount) * (TABLET_SIZE + TABLET_PADDING); - ctx.fillStyle = tablet.color || 'gray'; + ctx.fillStyle = tablet.color || 'grey'; ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE); }; } diff --git a/src/containers/Node/NodeStructure/Pdisk.tsx b/src/containers/Node/NodeStructure/Pdisk.tsx index 3c9fc9e3d2..806275bba1 100644 --- a/src/containers/Node/NodeStructure/Pdisk.tsx +++ b/src/containers/Node/NodeStructure/Pdisk.tsx @@ -7,6 +7,7 @@ import {ArrowToggle, Button, Popover} from '@gravity-ui/uikit'; import DataTable, {type Column} from '@gravity-ui/react-data-table'; import type {ValueOf} from '../../../types/common'; +import {EFlag} from '../../../types/api/enums'; import type { PreparedStructurePDisk, PreparedStructureVDisk, @@ -19,7 +20,7 @@ import { createPDiskDeveloperUILink, createVDiskDeveloperUILink, } from '../../../utils/developerUI/developerUI'; -import EntityStatus from '../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../components/EntityStatus/EntityStatus'; import InfoViewer, {type InfoViewerItem} from '../../../components/InfoViewer/InfoViewer'; import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer'; import {Icon} from '../../../components/Icon'; @@ -110,7 +111,9 @@ function getColumns({ width: 70, render: ({row}) => { return ( - + ); }, sortAccessor: (row) => (row.VDiskState === EVDiskState.OK ? 1 : 0), diff --git a/src/containers/Node/NodeStructure/Vdisk.tsx b/src/containers/Node/NodeStructure/Vdisk.tsx index f2eecf8c64..ca6626696d 100644 --- a/src/containers/Node/NodeStructure/Vdisk.tsx +++ b/src/containers/Node/NodeStructure/Vdisk.tsx @@ -1,13 +1,14 @@ import React from 'react'; import cn from 'bem-cn-lite'; -import type {TVDiskStateInfo} from '../../../types/api/vdisk'; +import {EVDiskState, type TVDiskStateInfo} from '../../../types/api/vdisk'; +import {EFlag} from '../../../types/api/enums'; import { formatStorageValuesToGb, stringifyVdiskId, } from '../../../utils/dataFormatters/dataFormatters'; import {bytesToGB, bytesToSpeed} from '../../../utils/utils'; -import EntityStatus from '../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../components/EntityStatus/EntityStatus'; import InfoViewer from '../../../components/InfoViewer/InfoViewer'; import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer'; @@ -119,7 +120,7 @@ export function Vdisk({
VDisk
diff --git a/src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx b/src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx index f6bdc3cdb6..904dce3c45 100644 --- a/src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx +++ b/src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx @@ -3,6 +3,7 @@ import cn from 'bem-cn-lite'; import DataTable, {type Column as DataTableColumn} from '@gravity-ui/react-data-table'; import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit'; +import {EFlag} from '../../../types/api/enums'; import type {Column as VirtualTableColumn} from '../../../components/VirtualTable'; import shieldIcon from '../../../assets/icons/shield.svg'; import type {NodesMap} from '../../../types/store/nodesList'; @@ -12,7 +13,7 @@ import {isSortableStorageProperty} from '../../../utils/storage'; import {isFullVDiskData} from '../../../utils/disks/helpers'; import {bytesToGB, bytesToSpeed} from '../../../utils/utils'; import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters'; -import EntityStatus from '../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../components/EntityStatus/EntityStatus'; import {Stack} from '../../../components/Stack/Stack'; import {CellWithPopover} from '../../../components/CellWithPopover/CellWithPopover'; import {UsageLabel} from '../../../components/UsageLabel/UsageLabel'; @@ -171,14 +172,14 @@ const usedSpaceFlagColumn: StorageGroupsColumn = { render: ({row}) => { const value = row.UsedSpaceFlag; - let color = 'Red'; + let color = EFlag.Red; if (value < 100) { - color = 'Green'; + color = EFlag.Green; } else if (value < 10000) { - color = 'Yellow'; + color = EFlag.Yellow; } else if (value < 1000000) { - color = 'Orange'; + color = EFlag.Orange; } return ; }, diff --git a/src/containers/Storage/UsageFilter/UsageFilter.tsx b/src/containers/Storage/UsageFilter/UsageFilter.tsx index a79d6b7508..d2db7e62cc 100644 --- a/src/containers/Storage/UsageFilter/UsageFilter.tsx +++ b/src/containers/Storage/UsageFilter/UsageFilter.tsx @@ -3,7 +3,7 @@ import cn from 'bem-cn-lite'; import {Select, SelectOption} from '@gravity-ui/uikit'; -import EntityStatus from '../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../components/EntityStatus/EntityStatus'; import {getUsageSeverityForEntityStatus} from '../utils'; diff --git a/src/containers/Storage/utils/index.ts b/src/containers/Storage/utils/index.ts index aa7339ac9a..48cc67acc7 100644 --- a/src/containers/Storage/utils/index.ts +++ b/src/containers/Storage/utils/index.ts @@ -1,4 +1,5 @@ import type {PreparedStorageGroup} from '../../../store/reducers/storage/types'; +import {EFlag} from '../../../types/api/enums'; import {generateEvaluator} from '../../../utils/generateEvaluator'; const defaultDegradationEvaluator = generateEvaluator(1, 2, ['success', 'warning', 'danger']); @@ -25,7 +26,7 @@ export const getUsageSeverityForStorageGroup = generateEvaluator(80, 85, [ 'danger', ]); export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, [ - 'Green', - 'Yellow', - 'Red', + EFlag.Green, + EFlag.Yellow, + EFlag.Red, ]); diff --git a/src/containers/Tablet/Tablet.tsx b/src/containers/Tablet/Tablet.tsx index 6c4eb5ff4c..9bd1bdc42c 100644 --- a/src/containers/Tablet/Tablet.tsx +++ b/src/containers/Tablet/Tablet.tsx @@ -13,7 +13,7 @@ import {CLUSTER_DEFAULT_TITLE, DEVELOPER_UI_TITLE} from '../../utils/constants'; import {parseQuery} from '../../routes'; import type {EType} from '../../types/api/tablet'; -import EntityStatus from '../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../components/EntityStatus/EntityStatus'; import {ResponseError} from '../../components/Errors/ResponseError'; import {Tag} from '../../components/Tag'; import {Icon} from '../../components/Icon'; diff --git a/src/containers/Tablet/TabletTable/TabletTable.tsx b/src/containers/Tablet/TabletTable/TabletTable.tsx index fc027b9671..5f64e3e278 100644 --- a/src/containers/Tablet/TabletTable/TabletTable.tsx +++ b/src/containers/Tablet/TabletTable/TabletTable.tsx @@ -1,6 +1,6 @@ import DataTable, {Column} from '@gravity-ui/react-data-table'; -import EntityStatus from '../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../components/EntityStatus/EntityStatus'; import {InternalLink} from '../../../components/InternalLink/InternalLink'; import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet'; diff --git a/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.js b/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.js index 2205e16a2d..bd2114fedc 100644 --- a/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.js +++ b/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.js @@ -1,19 +1,23 @@ import React from 'react'; import cn from 'bem-cn-lite'; import PropTypes from 'prop-types'; + +import {EFlag} from '../../../../../types/api/enums'; + import './NodeNetwork.scss'; + const b = cn('node-network'); const getNodeModifier = (connected, capacity) => { const percents = Math.floor((connected / capacity) * 100); if (percents === 100) { - return 'green'; + return EFlag.Green; } else if (percents >= 70) { - return 'yellow'; + return EFlag.Yellow; } else if (percents >= 1) { - return 'red'; + return EFlag.Red; } else { - return 'gray'; + return EFlag.Grey; } }; @@ -50,11 +54,14 @@ export class NodeNetwork extends React.Component { render() { const {nodeId, connected, capacity, status, onClick, showID, isBlurred} = this.props; + + const color = status || getNodeModifier(connected, capacity); + return (
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx index 9c6182067b..f626ec7a14 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx @@ -6,7 +6,8 @@ import JSONTree from 'react-json-inspector'; import {TreeView} from 'ydb-ui-components'; -import {IIssuesTree} from '../../../../../../types/store/healthcheck'; +import {IssuesTree} from '../../../../../../store/reducers/healthcheckInfo/types'; +import {hcStatusToColorFlag} from '../../../../../../store/reducers/healthcheckInfo/utils'; import {IssueTreeItem} from './IssueTreeItem'; @@ -15,14 +16,14 @@ import './IssueTree.scss'; const b = cn('issue-tree'); interface IssuesViewerProps { - issueTree: IIssuesTree; + issueTree: IssuesTree; } const IssueTree = ({issueTree}: IssuesViewerProps) => { const [collapsedIssues, setCollapsedIssues] = useState>({}); const renderTree = useCallback( - (data: IIssuesTree[]) => { + (data: IssuesTree[]) => { return data.map((item) => { const {id} = item; const {status, message, type, reasonsItems, level, ...rest} = item; @@ -40,7 +41,13 @@ const IssueTree = ({issueTree}: IssuesViewerProps) => { return ( } + name={ + + } collapsed={isCollapsed} hasArrow={true} onClick={toggleCollapsed} diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx index d2c05ddbb8..61913429e4 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx @@ -1,13 +1,14 @@ import cn from 'bem-cn-lite'; -import EntityStatus from '../../../../../../../components/EntityStatus/EntityStatus'; +import type {EFlag} from '../../../../../../../types/api/enums'; +import {EntityStatus} from '../../../../../../../components/EntityStatus/EntityStatus'; import './IssueTreeItem.scss'; const b = cn('issue-tree-item'); interface IssueRowProps { - status: string; + status: EFlag; message: string; type: string; onClick?: VoidFunction; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx index 4da5f147bb..0b8934a51c 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx @@ -2,7 +2,7 @@ import {useCallback} from 'react'; import {Loader} from '@gravity-ui/uikit'; -import EntityStatus from '../../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus'; import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants'; import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants'; import {mapDatabaseTypeToDBName} from '../../utils/schema'; @@ -71,7 +71,7 @@ export function TenantOverview({ autorefresh, ); - const {Name, State, Type} = tenant || {}; + const {Name, Type, Overall} = tenant || {}; const tenantType = mapDatabaseTypeToDBName(Type); @@ -114,7 +114,7 @@ export function TenantOverview({ return (
void; loading: boolean; diff --git a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx b/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx index f5427b1401..becfecdd45 100644 --- a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx +++ b/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx @@ -5,7 +5,7 @@ import {useTypedSelector} from '../../../../utils/hooks'; import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer'; import {formatCommonItem} from '../../../../components/InfoViewer/formatters'; -import EntityStatus from '../../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {getEntityName} from '../../utils'; diff --git a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx index 1544fd2d95..836accd8d3 100644 --- a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx +++ b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx @@ -7,7 +7,7 @@ import {createExternalUILink, parseQuery} from '../../../../routes'; import {formatCommonItem} from '../../../../components/InfoViewer/formatters'; import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer'; import {ExternalLinkWithIcon} from '../../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon'; -import EntityStatus from '../../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {getEntityName} from '../../utils'; diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx index eb6cdc0e90..78ca40611d 100644 --- a/src/containers/Tenants/Tenants.tsx +++ b/src/containers/Tenants/Tenants.tsx @@ -3,7 +3,7 @@ import cn from 'bem-cn-lite'; import DataTable, {Column} from '@gravity-ui/react-data-table'; import {Button} from '@gravity-ui/uikit'; -import EntityStatus from '../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../components/EntityStatus/EntityStatus'; import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph'; import {TabletsStatistic} from '../../components/TabletsStatistic'; import {ProblemFilter} from '../../components/ProblemFilter'; diff --git a/src/containers/Versions/NodesTable/NodesTable.tsx b/src/containers/Versions/NodesTable/NodesTable.tsx index 612237ad02..598f48fde1 100644 --- a/src/containers/Versions/NodesTable/NodesTable.tsx +++ b/src/containers/Versions/NodesTable/NodesTable.tsx @@ -8,7 +8,7 @@ import {getDefaultNodePath} from '../../Node/NodePages'; import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer'; import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph'; -import EntityStatus from '../../../components/EntityStatus/EntityStatus'; +import {EntityStatus} from '../../../components/EntityStatus/EntityStatus'; const columns: Column[] = [ { diff --git a/src/store/reducers/healthcheckInfo.ts b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts similarity index 85% rename from src/store/reducers/healthcheckInfo.ts rename to src/store/reducers/healthcheckInfo/healthcheckInfo.ts index d35661c5bf..b41843a81d 100644 --- a/src/store/reducers/healthcheckInfo.ts +++ b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts @@ -5,14 +5,14 @@ import {createSelector} from '@reduxjs/toolkit'; import type {Reducer, Selector} from '@reduxjs/toolkit'; import type { - IHealthCheckInfoAction, - IHealthcheckInfoRootStateSlice, - IHealthcheckInfoState, - IIssuesTree, -} from '../../types/store/healthcheck'; -import type {IssueLog, StatusFlag} from '../../types/api/healthcheck'; + HealthCheckInfoAction, + HealthcheckInfoRootStateSlice, + HealthcheckInfoState, + IssuesTree, +} from './types'; +import type {IssueLog, StatusFlag} from '../../../types/api/healthcheck'; -import {createRequestActionTypes, createApiRequest} from '../utils'; +import {createRequestActionTypes, createApiRequest} from '../../utils'; export const FETCH_HEALTHCHECK = createRequestActionTypes('cluster', 'FETCH_HEALTHCHECK'); @@ -20,7 +20,7 @@ const SET_DATA_WAS_NOT_LOADED = 'healthcheckInfo/SET_DATA_WAS_NOT_LOADED'; const initialState = {loading: false, wasLoaded: false}; -const healthcheckInfo: Reducer = function ( +const healthcheckInfo: Reducer = function ( state = initialState, action, ) { @@ -102,7 +102,7 @@ const getInvertedConsequencesTree = ({ }: { data: IssueLog[]; roots?: IssueLog[]; -}): IIssuesTree[] => { +}): IssuesTree[] => { return roots ? roots.map((issue) => { const reasonsItems = getInvertedConsequencesTree({ @@ -136,19 +136,19 @@ const getIssuesStatistics = (data: IssueLog[]): [StatusFlag, number][] => { }); }; -const getIssuesLog = (state: IHealthcheckInfoRootStateSlice) => +const getIssuesLog = (state: HealthcheckInfoRootStateSlice) => state.healthcheckInfo.data?.issue_log; -export const selectIssuesTreesRoots: Selector = +export const selectIssuesTreesRoots: Selector = createSelector(getIssuesLog, (issues = []) => getRoots(issues)); -export const selectIssuesTrees: Selector = +export const selectIssuesTrees: Selector = createSelector([getIssuesLog, selectIssuesTreesRoots], (data = [], roots = []) => { return getInvertedConsequencesTree({data, roots}); }); export const selectIssuesStatistics: Selector< - IHealthcheckInfoRootStateSlice, + HealthcheckInfoRootStateSlice, [StatusFlag, number][] > = createSelector(getIssuesLog, (issues = []) => getIssuesStatistics(issues)); diff --git a/src/store/reducers/healthcheckInfo/types.ts b/src/store/reducers/healthcheckInfo/types.ts new file mode 100644 index 0000000000..56a2964be0 --- /dev/null +++ b/src/store/reducers/healthcheckInfo/types.ts @@ -0,0 +1,29 @@ +import type {HealthCheckAPIResponse, IssueLog} from '../../../types/api/healthcheck'; +import type {IResponseError} from '../../../types/api/error'; +import type {ApiRequestAction} from '../../utils'; +import type {FETCH_HEALTHCHECK, setDataWasNotLoaded} from './healthcheckInfo'; + +export interface IssuesTree extends IssueLog { + reasonsItems?: IssuesTree[]; +} + +export interface HealthcheckInfoState { + loading: boolean; + wasLoaded: boolean; + data?: HealthCheckAPIResponse; + error?: IResponseError; +} + +type HealthCheckApiRequestAction = ApiRequestAction< + typeof FETCH_HEALTHCHECK, + HealthCheckAPIResponse, + IResponseError +>; + +export type HealthCheckInfoAction = + | HealthCheckApiRequestAction + | ReturnType; + +export interface HealthcheckInfoRootStateSlice { + healthcheckInfo: HealthcheckInfoState; +} diff --git a/src/store/reducers/healthcheckInfo/utils.ts b/src/store/reducers/healthcheckInfo/utils.ts new file mode 100644 index 0000000000..0657b409f9 --- /dev/null +++ b/src/store/reducers/healthcheckInfo/utils.ts @@ -0,0 +1,12 @@ +import {EFlag} from '../../../types/api/enums'; +import {StatusFlag} from '../../../types/api/healthcheck'; + +export const hcStatusToColorFlag: Record = { + [StatusFlag.UNSPECIFIED]: EFlag.Grey, + [StatusFlag.GREY]: EFlag.Grey, + [StatusFlag.GREEN]: EFlag.Green, + [StatusFlag.BLUE]: EFlag.Blue, + [StatusFlag.YELLOW]: EFlag.Yellow, + [StatusFlag.ORANGE]: EFlag.Orange, + [StatusFlag.RED]: EFlag.Red, +}; diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts index f5b983ecc5..b2f11fbcde 100644 --- a/src/store/reducers/index.ts +++ b/src/store/reducers/index.ts @@ -32,7 +32,7 @@ import schemaAcl from './schemaAcl/schemaAcl'; import executeTopQueries from './executeTopQueries/executeTopQueries'; import {tenantOverviewTopQueries} from './tenantOverview/topQueries/tenantOverviewTopQueries'; import executeTopTables from './tenantOverview/executeTopTables/executeTopTables'; -import healthcheckInfo from './healthcheckInfo'; +import healthcheckInfo from './healthcheckInfo/healthcheckInfo'; import shardsWorkload from './shardsWorkload/shardsWorkload'; import {tenantOverviewTopShards} from './tenantOverview/topShards/tenantOverviewTopShards'; import hotKeys from './hotKeys/hotKeys'; diff --git a/src/types/store/healthcheck.ts b/src/types/store/healthcheck.ts deleted file mode 100644 index ec55d737f3..0000000000 --- a/src/types/store/healthcheck.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {ApiRequestAction} from '../../store/utils'; -import {FETCH_HEALTHCHECK, setDataWasNotLoaded} from '../../store/reducers/healthcheckInfo'; -import {IResponseError} from '../api/error'; -import type {HealthCheckAPIResponse, IssueLog} from '../api/healthcheck'; - -export interface IIssuesTree extends IssueLog { - reasonsItems?: IIssuesTree[]; -} - -export type IHealthCheck = HealthCheckAPIResponse; - -export interface IHealthcheckInfoState { - loading: boolean; - wasLoaded: boolean; - data?: HealthCheckAPIResponse; - error?: IResponseError; -} - -type IHealthCheckApiRequestAction = ApiRequestAction< - typeof FETCH_HEALTHCHECK, - HealthCheckAPIResponse, - IResponseError ->; - -export type IHealthCheckInfoAction = - | IHealthCheckApiRequestAction - | ReturnType; - -export interface IHealthcheckInfoRootStateSlice { - healthcheckInfo: IHealthcheckInfoState; -} diff --git a/src/utils/clusterVersionColors.ts b/src/utils/clusterVersionColors.ts index 17abc055fc..1a93e8a151 100644 --- a/src/utils/clusterVersionColors.ts +++ b/src/utils/clusterVersionColors.ts @@ -2,7 +2,7 @@ import {uniqBy} from 'lodash'; import type {MetaClusterVersion} from '../types/api/meta'; import type {VersionToColorMap} from '../types/versions'; -import {COLORS, GRAY_COLOR, getMinorVersion, hashCode} from './versions'; +import {COLORS, GREY_COLOR, getMinorVersion, hashCode} from './versions'; const UNDEFINED_COLOR_INDEX = '__no_color__'; @@ -34,7 +34,7 @@ export const getVersionColors = (versionMap: VersionsMap) => { .sort((a, b) => hashCode(b) - hashCode(a)) .forEach((minor, minorIndex) => { if (baseColorIndex === UNDEFINED_COLOR_INDEX) { - versionToColor.set(minor, GRAY_COLOR); + versionToColor.set(minor, GREY_COLOR); } else { // baseColorIndex is numeric as we check if it is UNDEFINED_COLOR_INDEX before const currentColorIndex = Number(baseColorIndex) % COLORS.length; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index bb7e31f955..751494c7d7 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -20,10 +20,10 @@ export const DAY_IN_SECONDS = 24 * HOUR_IN_SECONDS; export const MS_IN_NANOSECONDS = 1000000; export const TABLET_COLORS = { - Created: 'gray', - ResolveStateStorage: 'lightgray', - Candidate: 'lightgray', - BlockBlobStorage: 'lightgray', + Created: 'grey', + ResolveStateStorage: 'lightgrey', + Candidate: 'lightgrey', + BlockBlobStorage: 'lightgrey', RebuildGraph: 'yellow', Restored: 'yellow', Discover: 'orange', diff --git a/src/utils/versions/getVersionsColors.ts b/src/utils/versions/getVersionsColors.ts index 3ffce97169..ff19d1d652 100644 --- a/src/utils/versions/getVersionsColors.ts +++ b/src/utils/versions/getVersionsColors.ts @@ -25,7 +25,7 @@ export const COLORS = [ '#b22222', // firebrick ]; -export const GRAY_COLOR = '#bfbfbf'; +export const GREY_COLOR = '#bfbfbf'; export const getVersionsMap = (versions: string[], initialMap: VersionsMap = new Map()) => { versions.forEach((version) => { @@ -88,7 +88,7 @@ export const getVersionToColorMap = (versionsMap: VersionsMap) => { versionToColor.set(minor.version, versionColor); }); } else { - versionToColor.set(item.version, GRAY_COLOR); + versionToColor.set(item.version, GREY_COLOR); } }); return versionToColor;