Update UI and wording following Jed review

apache · Jun 1, 2023 · 5de0f7a · 5de0f7a
1 parent a4ce611
commit 5de0f7a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 68 deletions.
diff --git a/airflow/www/static/js/cluster-activity/index.test.tsx b/airflow/www/static/js/cluster-activity/index.test.tsx
@@ -147,7 +147,7 @@ describe("Test ToggleGroups", () => {
     expect(getAllByTestId("echart-container")).toHaveLength(4);
 
     expect(getAllByText("healthy")).toHaveLength(2);
-    expect(getByText("Number of unpaused DAGs:")).toBeInTheDocument();
-    expect(getByText("No Dag Running")).toBeInTheDocument();
+    expect(getByText("Unpaused DAGs")).toBeInTheDocument();
+    expect(getByText("No dag running")).toBeInTheDocument();
   });
 });
diff --git a/airflow/www/static/js/cluster-activity/live-metrics/DagRuns.tsx b/airflow/www/static/js/cluster-activity/live-metrics/DagRuns.tsx
@@ -53,66 +53,61 @@ const DagRuns = (props: BoxProps) => {
       <LoadingWrapper hasData={!!data} isError={isError}>
         <Card w="100%">
           <CardHeader textAlign="center" p={3}>
-            <Heading size="md">Dag Runs</Heading>
+            <Heading size="md">Top 5 longest Dag Runs to finish</Heading>
           </CardHeader>
           <CardBody>
-            <Flex flexDirection="column" mb={5}>
-              <Text as="b" color="blue.600">
-                Top 5 longest Dag Runs to finish:
-              </Text>
-              <Box mt={2}>
-                {data?.totalEntries !== undefined && data.totalEntries > 0 ? (
-                  <Table
-                    size="sm"
-                    style={{ tableLayout: "fixed", width: "100%" }}
-                  >
-                    <Thead>
-                      <Tr>
-                        <Th>Dag Id</Th>
-                        <Th>Run Type</Th>
-                        <Th>Duration</Th>
-                      </Tr>
-                    </Thead>
-                    <Tbody>
-                      {data?.dagRuns?.map((dagRun) => (
-                        <Tr key={dagRun.dagRunId}>
-                          <Td
-                            textOverflow="ellipsis"
-                            overflow="hidden"
-                            whiteSpace="nowrap"
+            <Box mt={2} mb={5}>
+              {data?.totalEntries !== undefined && data.totalEntries > 0 ? (
+                <Table
+                  size="sm"
+                  style={{ tableLayout: "fixed", width: "100%" }}
+                >
+                  <Thead>
+                    <Tr>
+                      <Th>Dag Id</Th>
+                      <Th>Run Type</Th>
+                      <Th>Duration</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {data?.dagRuns?.map((dagRun) => (
+                      <Tr key={dagRun.dagRunId}>
+                        <Td
+                          textOverflow="ellipsis"
+                          overflow="hidden"
+                          whiteSpace="nowrap"
+                        >
+                          <Link
+                            href={`dags/${
+                              dagRun.dagId
+                            }/grid?dag_run_id=${encodeURIComponent(
+                              dagRun.dagRunId as string
+                            )}`}
                           >
-                            <Link
-                              href={`dags/${
-                                dagRun.dagId
-                              }/grid?dag_run_id=${encodeURIComponent(
-                                dagRun.dagRunId as string
-                              )}`}
-                            >
-                              {dagRun.dagId}
-                            </Link>
-                          </Td>
-                          <Td>{dagRun.runType}</Td>
-                          <Td>
-                            {formatDuration(
-                              getDuration(dagRun.startDate, dagRun.endDate)
-                            )}
-                          </Td>
-                        </Tr>
-                      ))}
-                    </Tbody>
-                  </Table>
-                ) : (
-                  <Flex justifyContent="center">
-                    <Heading as="b" size="lg">
-                      No Dag Running
-                    </Heading>
-                  </Flex>
-                )}
-              </Box>
-            </Flex>
+                            {dagRun.dagId}
+                          </Link>
+                        </Td>
+                        <Td>{dagRun.runType}</Td>
+                        <Td>
+                          {formatDuration(
+                            getDuration(dagRun.startDate, dagRun.endDate)
+                          )}
+                        </Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              ) : (
+                <Flex justifyContent="center">
+                  <Heading as="b" size="sm">
+                    No dag running
+                  </Heading>
+                </Flex>
+              )}
+            </Box>
             <Flex justifyContent="end" textAlign="right">
               <Text size="md" color="gray.500">
-                on a total of <Text as="b">{data?.totalEntries}</Text> running
+                out of <Text as="b">{data?.totalEntries}</Text> total running
                 Dag Runs
               </Text>
             </Flex>

diff --git a/airflow/www/static/js/cluster-activity/live-metrics/Dags.tsx b/airflow/www/static/js/cluster-activity/live-metrics/Dags.tsx
@@ -46,22 +46,17 @@ const Dags = (props: BoxProps) => {
       >
         <Card w="100%">
           <CardHeader textAlign="center" p={3}>
-            <Heading size="md">DAGs</Heading>
+            <Heading size="md">Unpaused DAGs</Heading>
           </CardHeader>
           <CardBody>
-            <Flex flexDirection="column" mb={5}>
-              <Text as="b" color="blue.600">
-                Number of unpaused DAGs:
-              </Text>
-              <Flex justifyContent="center" mt={2}>
-                <Heading as="b" size="xl">
-                  {dataOnlyUnpaused?.totalEntries}
-                </Heading>
-              </Flex>
+            <Flex justifyContent="center" mb={4}>
+              <Heading as="b" size="xl">
+                {dataOnlyUnpaused?.totalEntries}
+              </Heading>
             </Flex>
             <Flex justifyContent="end" textAlign="right">
               <Text size="md" color="gray.500">
-                on a total of <Text as="b">{data?.totalEntries}</Text> DAGs
+                out of <Text as="b">{data?.totalEntries}</Text> total DAGs
               </Text>
             </Flex>
           </CardBody>