chore(SchedulersAndAgents): fix some React-warnings

ytsaurus · Nov 17, 2023 · c33a208 · c33a208
1 parent 76fe005
commit c33a208
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/...chedulersAndAgents/Scheduler/Scheduler.js → ...hedulersAndAgents/Scheduler/Scheduler.tsx b/...chedulersAndAgents/Scheduler/Scheduler.js → ...hedulersAndAgents/Scheduler/Scheduler.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import hammer from '../../../../common/hammer';
 import block from 'bem-cn-lite';
@@ -13,14 +12,21 @@ import '../Schedulers.scss';
 
 const b = block('system');
 
-export default function Scheduler({host, state, maintenanceMessage}) {
-    const theme = {
-        active: 'online',
-        connected: 'online',
-        standby: 'banned',
-        disconnected: 'banned',
-        offline: 'offline',
-    }[state];
+export type SchedulerProps = {
+    host?: string;
+    state: 'active' | 'connected' | 'standby' | 'disconnected' | 'offline';
+    maintenanceMessage?: React.ReactNode;
+};
+export default function Scheduler({host, state, maintenanceMessage}: SchedulerProps) {
+    const theme = (
+        {
+            active: 'online',
+            connected: 'online',
+            standby: 'banned',
+            disconnected: 'banned',
+            offline: 'offline',
+        } as const
+    )[state];
 
     const address = hammer.format['Address'](host);
 
@@ -38,15 +44,9 @@ export default function Scheduler({host, state, maintenanceMessage}) {
             <div title={address} className={b('scheduler-host')}>
                 <div className={b('scheduler-host-address')}>{address}</div>
                 <div className={b('scheduler-host-copy-btn')}>
-                    <ClipboardButton view="flat-secondary" text={host} />
+                    {host && <ClipboardButton view="flat-secondary" text={host} />}
                 </div>
             </div>
         </div>
     );
 }
-
-Scheduler.propTypes = {
-    host: PropTypes.string.isRequired,
-    state: PropTypes.oneOf(['offline', 'active', 'connected', 'standby', 'disconnected']),
-    maintenanceMessage: PropTypes.string,
-};
diff --git a/packages/ui/src/ui/pages/system/SchedulersAndAgents/SchedulersAndAgents.js b/packages/ui/src/ui/pages/system/SchedulersAndAgents/SchedulersAndAgents.js
@@ -58,14 +58,16 @@ class SchedulersAndAgents extends Component {
     };
 
     renderHosts(connectedHosts) {
-        return _.map(connectedHosts, ({host, state, maintenanceMessage}) => (
-            <Scheduler
-                key={host}
-                host={host}
-                state={state}
-                maintenanceMessage={maintenanceMessage}
-            />
-        ));
+        return _.map(connectedHosts, ({host, state, maintenanceMessage}, index) => {
+            return (
+                <Scheduler
+                    key={host ?? index}
+                    host={host}
+                    state={state}
+                    maintenanceMessage={maintenanceMessage}
+                />
+            );
+        });
     }
 
     renderSection(name, heading, showHostTypeButton) {
@@ -134,8 +136,8 @@ class SchedulersAndAgents extends Component {
                 {_.map(alerts.schedulers, (alert) => (
                     <Alert key={alert.attributes.host} error={alert} />
                 ))}
-                {_.map(alerts.agents, (alert) => (
-                    <Alert error={alert} />
+                {_.map(alerts.agents, (alert, index) => (
+                    <Alert key={index} error={alert} />
                 ))}
 
                 <div className={b('schedulers-agents')}>