Update icons and various UI fixes (apache#46725)

Author: bbovenzi

airflow/ui/src/components/StateIcon.tsx

@@ -17,17 +17,8 @@
  * under the License.
  */
 import type { IconBaseProps } from "react-icons";
-import {
-  FiActivity,
-  FiAlertOctagon,
-  FiCalendar,
-  FiCheckCircle,
-  FiRepeat,
-  FiSkipForward,
-  FiSlash,
-  FiWatch,
-} from "react-icons/fi";
-import { LuCalendarSync, LuCircleDashed, LuCircleFadingArrowUp, LuRedo2 } from "react-icons/lu";
+import { FiActivity, FiCalendar, FiRepeat, FiSkipForward, FiSlash, FiWatch, FiX } from "react-icons/fi";
+import { LuCalendarSync, LuCheck, LuCircleDashed, LuCircleFadingArrowUp, LuRedo2 } from "react-icons/lu";
 import { PiQueue } from "react-icons/pi";
 
 import type { TaskInstanceState } from "openapi/requests/types.gen";
@@ -41,7 +32,7 @@ export const StateIcon = ({ state, ...rest }: Props) => {
     case "deferred":
       return <FiWatch {...rest} />;
     case "failed":
-      return <FiAlertOctagon {...rest} />;
+      return <FiX {...rest} />;
     case "queued":
       return <PiQueue {...rest} />;
     case "removed":
@@ -55,7 +46,7 @@ export const StateIcon = ({ state, ...rest }: Props) => {
     case "skipped":
       return <FiSkipForward {...rest} />;
     case "success":
-      return <FiCheckCircle {...rest} />;
+      return <LuCheck {...rest} />;
     case "up_for_reschedule":
       return <LuCalendarSync {...rest} />;
     case "up_for_retry":

airflow/ui/src/layouts/Nav/Nav.tsx

@@ -43,7 +43,7 @@ export const Nav = () => {
       py={3}
       top={0}
       width={20}
-      zIndex={1}
+      zIndex={2}
     >
       <Flex alignItems="center" flexDir="column" width="100%">
         <Box mb={3}>

airflow/ui/src/pages/Dashboard/HistoricalMetrics/AssetEvents.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Heading, Flex, HStack, VStack, StackSeparator, Skeleton } from "@chakra-ui/react";
 import { createListCollection } from "@chakra-ui/react/collection";
+import { FiDatabase } from "react-icons/fi";
 
 import { useAssetServiceGetAssetEvents } from "openapi/queries";
 import { StateBadge } from "src/components/StateBadge";
@@ -52,6 +53,7 @@ export const AssetEvents = ({ assetSortBy, endDate, setAssetSortBy, startDate }:
       <Flex justify="space-between" mr={1} mt={0} pl={3} pt={1}>
         <HStack>
           <StateBadge colorPalette="blue" fontSize="md" variant="solid">
+            <FiDatabase />
             {data?.total_entries ?? " "}
           </StateBadge>
           <Heading marginEnd="auto" size="md">

airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Heading, HStack } from "@chakra-ui/react";
 import type { DAGRunStates } from "openapi-gen/requests/types.gen";
+import { FiBarChart } from "react-icons/fi";
 
 import { StateBadge } from "src/components/StateBadge";
 
@@ -34,6 +35,7 @@ export const DagRunMetrics = ({ dagRunStates, total }: DagRunMetricsProps) => (
   <Box borderRadius={5} borderWidth={1} p={2}>
     <HStack mb={4}>
       <StateBadge colorPalette="blue" fontSize="md" variant="solid">
+        <FiBarChart />
         {total}
       </StateBadge>
       <Heading size="md">Dag Runs</Heading>

airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx

@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, VStack, SimpleGrid, GridItem } from "@chakra-ui/react";
+import { Box, VStack, SimpleGrid, GridItem, Flex, Heading } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
+import { PiBooks } from "react-icons/pi";
 
 import { useDashboardServiceHistoricalMetrics } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
@@ -52,6 +53,12 @@ export const HistoricalMetrics = () => {
 
   return (
     <Box width="100%">
+      <Flex color="fg.muted" my={2}>
+        <PiBooks />
+        <Heading ml={1} size="xs">
+          History
+        </Heading>
+      </Flex>
       <ErrorAlert error={error} />
       <VStack alignItems="left" gap={2}>
         <TimeRangeSelector

airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx

@@ -18,6 +18,7 @@
  */
 import { Box, Heading, HStack } from "@chakra-ui/react";
 import type { TaskInstanceState, TaskInstanceStateCount } from "openapi-gen/requests/types.gen";
+import { MdOutlineTask } from "react-icons/md";
 
 import { StateBadge } from "src/components/StateBadge";
 
@@ -47,11 +48,11 @@ export const TaskInstanceMetrics = ({ taskInstanceStates, total }: TaskInstanceM
   <Box borderRadius={5} borderWidth={1} mt={2} p={2}>
     <HStack mb={4}>
       <StateBadge colorPalette="blue" fontSize="md" variant="solid">
+        <MdOutlineTask />
         {total}
       </StateBadge>
       <Heading size="md">Task Instances</Heading>
     </HStack>
-
     {TASK_STATES.sort((stateA, stateB) =>
       taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,
     ).map((state) =>

airflow/ui/src/pages/Dashboard/Stats/Stats.tsx

@@ -29,7 +29,7 @@ export const Stats = () => (
     <Flex color="fg.muted" my={2}>
       <FiClipboard />
       <Heading ml={1} size="xs">
-        Stats
+        Links
       </Heading>
     </Flex>
     <HStack>