Merge pull request #201 from similarweb/fix/200-ui-proptypes-warnings

FIX: [ui] fix react proptypes warnings
similarweb · Mar 15, 2020 · f246c69 · f246c69
2 parents 9fbba42 + 898ba91
commit f246c69
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 35 deletions.
diff --git a/ui/client/src/DataComponents/Kinds.js b/ui/client/src/DataComponents/Kinds.js
@@ -27,7 +27,7 @@ const Kinds = ({ selectedTab, onTabChange }) => {
     <AppBar position="static" color="primary" classes={{ root: classes.root }}>
       <Tabs value={selectedTab} onChange={onTabChange} classes={{indicator: classes.indicator}}>
         {
-          data.kinds.map((kind, index) => <Tab classes={{root: classes.tab}} label={kind.name} value={index} disableRipple />)
+          data.kinds.map((kind, index) => <Tab key={kind.name} classes={{root: classes.tab}} label={kind.name} value={index} disableRipple />)
       }
       </Tabs>
     </AppBar>

diff --git a/ui/client/src/DataComponents/ReplicaSetEvents.js b/ui/client/src/DataComponents/ReplicaSetEvents.js
@@ -11,25 +11,21 @@ const ReplicaSetEvents = ({ kindIndex }) => {
   if (!data) {
     return null;
   }
-  
+
   const replicaSets = data.kinds[kindIndex].replicaSet || [];
   return (
     <>
       {
-        replicaSets.map((set) => (
-          <>
-          {set.logs.length > 0 && 
-          <DeploymentDetailsSection title={set.name}>
-            <Grid container>
-              <Grid item xs={12}>
-                <Paper>
-                  <EventsViewLogs logs={set.logs} />
-                </Paper>
-              </Grid>
+        replicaSets.map((set) => set.logs.length > 0 && (
+        <DeploymentDetailsSection key={set.name} title={set.name}>
+          <Grid container>
+            <Grid item xs={12}>
+              <Paper>
+                <EventsViewLogs logs={set.logs} />
+              </Paper>
             </Grid>
-          </DeploymentDetailsSection>
-          }
-          </>
+          </Grid>
+        </DeploymentDetailsSection>
         ))
       }
 

diff --git a/ui/client/src/components/EventsView/EventViewSelector.js b/ui/client/src/components/EventsView/EventViewSelector.js
@@ -49,7 +49,7 @@ const EventsViewSelector = ({ items, selected, onRowClick }) => {
       {
         name: 'Pod',
         header: (name) => <TableCell>{name}</TableCell>,
-        cell: (row) => {return <Box display="flex" alignItems="center"><div className={row.hasError && classes.marker}></div> {row.name}</Box>},
+        cell: (row) => {return <Box display="flex" alignItems="center"><div className={row.hasError ? classes.marker : undefined}></div> {row.name}</Box>},
       },
       {
         name: 'Status',
@@ -80,4 +80,4 @@ EventsViewSelector.defaultProps = {
   onRowClick: () => null,
 };
 
-export default React.memo(EventsViewSelector);
+export default EventsViewSelector;
diff --git a/ui/client/src/components/EventsView/EventsView.js b/ui/client/src/components/EventsView/EventsView.js
@@ -76,7 +76,7 @@ EventsView.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     events: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
-      logs: PropTypes.arrayOf(PropTypes.shape(EventsViewLogs.propTypes)),
+      logs: EventsViewLogs.propTypes.logs,
     })),
     ...EventsViewSelector.propTypes,
   })),

diff --git a/ui/client/src/components/EventsView/EventsViewLogs.js b/ui/client/src/components/EventsView/EventsViewLogs.js
@@ -90,11 +90,11 @@ EventsViewLogs.propTypes = {
   logs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
     time: PropTypes.number,
-    error: PropTypes.bool,
-    content: PropTypes.string,
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    content: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   })),
-  onTabChange: PropTypes.func.isRequired,
-  selectedTab: PropTypes.number.isRequired,
+  onTabChange: PropTypes.func,
+  selectedTab: PropTypes.number,
   tabs: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     error: PropTypes.bool,
@@ -104,6 +104,8 @@ EventsViewLogs.propTypes = {
 EventsViewLogs.defaultProps = {
   logs: [],
   tabs: [],
+  onTabChange: () => null,
+  selectedTab: 0
 };
 
 export default EventsViewLogs;
diff --git a/ui/client/src/components/ReplicasStats/ReplicasStatsBoxes.js b/ui/client/src/components/ReplicasStats/ReplicasStatsBoxes.js
@@ -15,15 +15,15 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-  card: {
-    backgroundColor: (props) => (props.error ? theme.palette.error.main : null),
+  cardError: {
+    backgroundColor: theme.palette.error.main,
   },
 }));
 
 const SingleBox = ({ name, data, error }) => {
-  const classes = useStyles({error});
+  const classes = useStyles({ error });
   return (
-    <Card classes={{ root: classes.card }} error={error}>
+    <Card classes={{ root: error ? classes.cardError : undefined }}>
       <Box display="flex" flexDirection="column" alignItems="center">
         <Box m={1}><Typography classes={{ root: classes.typography }} variant="h6">{name}</Typography></Box>
         <Box m={1}><Typography classes={{ root: classes.typography }} variant="h4">{data}</Typography></Box>

diff --git a/ui/client/src/components/Table/TableStateless.js b/ui/client/src/components/Table/TableStateless.js
@@ -14,7 +14,7 @@ import Loader from '../Loader/Loader';
 const renderRows = (config, data, page) => data.map((row, rowIndex) => {
   const RowComponent = config.row.render(row, rowIndex);
   // eslint-disable-next-line max-len
-  const rowCells = config.cells.map((cellConfig, idx) => <TableCell key={`table-row-${idx}-${rowIndex}-${row.name}`} style={cellConfig.cellStyle}>{cellConfig.cell(row, ((page) * data.length) + rowIndex)}</TableCell>);
+  const rowCells = config.cells.map((cellConfig) => <TableCell key={cellConfig.id} style={cellConfig.cellStyle}>{cellConfig.cell(row, ((page) * data.length) + rowIndex)}</TableCell>);
   return (
     <RowComponent key={`row-cell-${rowIndex}-${row.name}`}>
       {rowCells}

diff --git a/ui/client/src/components/Timeline/TimelineItem.js b/ui/client/src/components/Timeline/TimelineItem.js
@@ -8,12 +8,14 @@ import StepIcon from '@material-ui/core/StepIcon';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Box from '@material-ui/core/Box';
 import moment from 'moment';
+import WarningIcon from '@material-ui/icons/Warning';
+import FiberManualRecord from '@material-ui/icons/FiberManualRecord';
 import TimelineErrorBox from './TimelineErrorBox';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     '& svg': {
-      transform: 'scale(0.6)',
+      transform: 'scale(0.8)',
     },
   },
   label: {
@@ -23,9 +25,9 @@ const useStyles = makeStyles((theme) => ({
   },
   error: {
     color: theme.palette.error.main,
-    '& svg': {
-      transform: 'scale(0.8)',
-    }
+  },
+  completed: {
+    color: theme.palette.primary.main,
   },
   date: {
     marginRight: 20,
@@ -39,10 +41,12 @@ const TimelineItem = ({
     <Step active>
       <StepLabel
         error={error}
-        classes={{ root: classes.root, label: classes.label, error: classes.error }}
+        classes={{
+          root: classes.root, label: classes.label, error: classes.error, completed: classes.completed,
+        }}
         StepIconComponent={StepIcon}
         StepIconProps={{
-          completed: false, error, icon: '',
+          icon: error ? <WarningIcon /> : <FiberManualRecord className={classes.completed} />,
         }}
       >
         <Box display="flex" justifyContent="space-between">
@@ -55,7 +59,7 @@ const TimelineItem = ({
       </StepLabel>
       {
             content && (
-            <StepContent orientation="vertical">
+            <StepContent orientation="vertical" icon="">
               <TimelineErrorBox>{content}</TimelineErrorBox>
             </StepContent>
             )
@@ -66,7 +70,7 @@ const TimelineItem = ({
 
 TimelineItem.propTypes = {
   error: PropTypes.bool,
-  content: PropTypes.string,
+  content: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   title: PropTypes.string.isRequired,
   time: PropTypes.number.isRequired,
 };