[Dashboard] Make Infeasible Actor UX Less Scary (#11654)

* Update infeasible actor UI so that it only shows infeasible for an ActorClassGroup if at least one actor in the class is infeasible

* lint

dashboard/client/src/common/LabeledDatum.tsx

@@ -24,7 +24,7 @@ const LabeledDatum: React.FC<LabeledDatumProps> = ({
 }) => {
   const classes = useLabeledDatumStyles();
   const innerHtml = (
-    <Grid container item xs={6}>
+    <Grid container item xs={12}>
       <Grid item xs={6}>
         <Box className={tooltip && classes.tooltipLabel}>{label}</Box>
       </Grid>

dashboard/client/src/pages/dashboard/logical-view/ActorClassGroup.tsx

@@ -63,56 +63,64 @@ const ActorClassGroup: React.FC<ActorClassGroupProps> = ({
       <Box display="block" className={classes.title}>
         <Typography variant="h5">{title}</Typography>
       </Box>
-      <Grid container className={classes.title}>
-        <LabeledDatum
-          label={
-            <ActorStateRepr state={Alive} variant="body1" showTooltip={true} />
-          }
-          datum={
-            Alive in summary.stateToCount ? summary.stateToCount[Alive] : 0
-          }
-        />
-        <LabeledDatum
-          label={
-            <ActorStateRepr
-              state={Infeasible}
-              variant="body1"
-              showTooltip={true}
+      <Grid container xs={12} spacing={2}>
+        <Grid container item xs={5} className={classes.title}>
+          {Infeasible in summary.stateToCount && (
+            <LabeledDatum
+              label={
+                <ActorStateRepr
+                  state={Infeasible}
+                  variant="body1"
+                  showTooltip={true}
+                />
+              }
+              datum={summary.stateToCount[Infeasible]}
             />
-          }
-          datum={
-            Infeasible in summary.stateToCount
-              ? summary.stateToCount[Infeasible]
-              : 0
-          }
-        />
-        <LabeledDatum
-          label={
-            <ActorStateRepr
-              state={PendingResources}
-              variant="body1"
-              showTooltip={true}
-            />
-          }
-          datum={
-            PendingResources in summary.stateToCount
-              ? summary.stateToCount[PendingResources]
-              : 0
-          }
-        />
-        <LabeledDatum
-          label={"Mean Lifetime"}
-          datum={asSeconds(summary.avgLifetime)}
-        />
-        <LabeledDatum
-          label={"Max Lifetime"}
-          datum={asSeconds(summary.maxLifetime)}
-        />
-        <LabeledDatum
-          label={"Executed Tasks"}
-          datum={summary.numExecutedTasks}
-        />
+          )}
+          <LabeledDatum
+            label={
+              <ActorStateRepr
+                state={Alive}
+                variant="body1"
+                showTooltip={true}
+              />
+            }
+            datum={
+              Alive in summary.stateToCount ? summary.stateToCount[Alive] : 0
+            }
+          />
+
+          <LabeledDatum
+            label={
+              <ActorStateRepr
+                state={PendingResources}
+                variant="body1"
+                showTooltip={true}
+              />
+            }
+            datum={
+              PendingResources in summary.stateToCount
+                ? summary.stateToCount[PendingResources]
+                : 0
+            }
+          />
+        </Grid>
+        <Grid container item xs={5} className={classes.title}>
+          <LabeledDatum
+            label={"Mean Lifetime"}
+            datum={asSeconds(summary.avgLifetime)}
+          />
+          <LabeledDatum
+            label={"Max Lifetime"}
+            datum={asSeconds(summary.maxLifetime)}
+          />
+          <LabeledDatum
+            label={"Executed Tasks"}
+            datum={summary.numExecutedTasks}
+          />
+        </Grid>
       </Grid>
+
       {expanded ? (
         <React.Fragment>
           <Box>{entries}</Box>

dashboard/client/src/pages/dashboard/logical-view/ActorDetailsPane.tsx

@@ -126,7 +126,7 @@ const ActorDetailsPane: React.FC<ActorDetailsPaneProps> = ({ actor }) => {
         <ActorStateRepr state={actor.state} />
       </div>
       {isFullActorInfo(actor) && (
-        <Grid container className={classes.detailsPane}>
+        <Grid container spacing={3} className={classes.detailsPane}>
           <Grid container item xs={6}>
             <Grid item xs={4}>
               <Typography>CPU Usage</Typography>