From b4df42b027ee3457bfc56081be91b50066731ee3 Mon Sep 17 00:00:00 2001
From: Max Fitton <maxfitton@anyscale.com>
Date: Thu, 29 Oct 2020 23:12:43 -0700
Subject: [PATCH] [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  |   2 +-
 .../logical-view/ActorClassGroup.tsx          | 104 ++++++++++--------
 .../logical-view/ActorDetailsPane.tsx         |   2 +-
 3 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/dashboard/client/src/common/LabeledDatum.tsx b/dashboard/client/src/common/LabeledDatum.tsx
index 0f6313074..3fcf15716 100644
--- a/dashboard/client/src/common/LabeledDatum.tsx
+++ b/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>
diff --git a/dashboard/client/src/pages/dashboard/logical-view/ActorClassGroup.tsx b/dashboard/client/src/pages/dashboard/logical-view/ActorClassGroup.tsx
index a37fa5945..ccf91644c 100644
--- a/dashboard/client/src/pages/dashboard/logical-view/ActorClassGroup.tsx
+++ b/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>
diff --git a/dashboard/client/src/pages/dashboard/logical-view/ActorDetailsPane.tsx b/dashboard/client/src/pages/dashboard/logical-view/ActorDetailsPane.tsx
index 83f30d1ff..ea970fd58 100644
--- a/dashboard/client/src/pages/dashboard/logical-view/ActorDetailsPane.tsx
+++ b/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>