fix(System/Nodes): minor fixes [YTFRONT-3297]

ytsaurus · Oct 17, 2024 · cf2862a · cf2862a
1 parent 9badece
commit cf2862a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/packages/ui/src/ui/components/CollapsibleSection/CollapsibleSection.scss b/packages/ui/src/ui/components/CollapsibleSection/CollapsibleSection.scss
@@ -15,6 +15,10 @@
         cursor: pointer;
         margin-left: 4px;
         padding-right: 20px;
+
+        &_right-padding_small {
+            padding-right: 8px;
+        }
     }
 
     .elements {

diff --git a/packages/ui/src/ui/components/CollapsibleSection/CollapsibleSection.tsx b/packages/ui/src/ui/components/CollapsibleSection/CollapsibleSection.tsx
@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import block from 'bem-cn-lite';
 
 import ErrorBoundary from '../../components/ErrorBoundary/ErrorBoundary';
@@ -15,16 +14,6 @@ type PropsStateLess = CollapsibleSectionProps & {
 };
 
 export class CollapsibleSectionStateLess extends Component<PropsStateLess> {
-    static propTypes = {
-        name: PropTypes.node.isRequired,
-        collapsed: PropTypes.bool,
-        onToggle: PropTypes.func.isRequired,
-        size: PropTypes.oneOf(['s', 'ss', 'xs', 'm', 'l', 'xl', 'ns']),
-        children: PropTypes.node,
-        overview: PropTypes.node,
-        className: PropTypes.string,
-    };
-
     static defaultProps = {
         size: 'm',
         collapsed: false,
@@ -38,7 +27,16 @@ export class CollapsibleSectionStateLess extends Component<PropsStateLess> {
     };
 
     render() {
-        const {name, children, size, overview, className, collapsed, marginDirection} = this.props;
+        const {
+            name,
+            children,
+            size,
+            overview,
+            className,
+            collapsed,
+            marginDirection,
+            togglerRightPadding,
+        } = this.props;
 
         return (
             <ErrorBoundary>
@@ -57,7 +55,7 @@ export class CollapsibleSectionStateLess extends Component<PropsStateLess> {
                             {name}
                             <a>
                                 <Icon
-                                    className={b('toggler')}
+                                    className={b('toggler', {'right-padding': togglerRightPadding})}
                                     awesome={collapsed ? 'angle-down' : 'angle-up'}
                                 />
                             </a>
@@ -83,6 +81,8 @@ export interface CollapsibleSectionProps {
     overview?: React.ReactNode;
 
     marginDirection?: 'top' | 'bottom';
+
+    togglerRightPadding?: 'small';
 }
 
 export default function CollapsibleSection(props: CollapsibleSectionProps) {

diff --git a/packages/ui/src/ui/pages/system/Nodes/Nodes.scss b/packages/ui/src/ui/pages/system/Nodes/Nodes.scss
@@ -9,7 +9,7 @@
     }
 
     &__expand-btn {
-        margin-left: 20px;
+        margin-left: 8px;
         margin-right: 10px;
     }
 }
diff --git a/packages/ui/src/ui/pages/system/ProxiesImpl/ProxiesImpl.tsx b/packages/ui/src/ui/pages/system/ProxiesImpl/ProxiesImpl.tsx
@@ -45,6 +45,7 @@ export function ProxiesImpl({
             onToggle={onToggleCollapsed}
             collapsed={collapsed}
             size={UI_COLLAPSIBLE_SIZE}
+            togglerRightPadding="small"
         >
             <RoleGroupsContainer>
                 {map_(roleGroups, (data) => {

diff --git a/packages/ui/src/ui/pages/system/ProxiesImpl/StatsInfo.tsx b/packages/ui/src/ui/pages/system/ProxiesImpl/StatsInfo.tsx
@@ -26,7 +26,7 @@ const COLORS_BY_STATUS = {
     ONLINE: ['var(--success-color)', 'var(--success-text)', 'var(--default-color)'],
     OFFLINE: ['var(--danger-color)', 'var(--danger-text)', 'var(--default-color)'],
     BANNED: ['var(--warning-color)', 'var(--warning-text)', 'var(--default-color)'],
-    OTHER: [],
+    OTHER: ['var(--info-color)', 'var(--info-text)', 'var(--default-color)'],
     FULL: [],
 };
 
@@ -80,7 +80,7 @@ export const StatsInfo = ({
             </Text>
             <Progress className={block('progress')} stack={stack ?? []} size="xs" />
 
-            <TextCountUrl text="ALERT" count={alertNumber} color="warning" url={alertsUrl} />
+            <TextCountUrl text="ALERT" count={alertNumber} color="primary" url={alertsUrl} />
             <TextCountUrl text="DEC" count={decNumber} color="primary" url={decUrl} />
         </div>
     );