Add dag filter button links to homepage. (apache#44682)

airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricsBadge.tsx → airflow/ui/src/components/MetricsBadge.tsx

@@ -21,7 +21,7 @@ import { Badge, type BadgeProps } from "@chakra-ui/react";
 type MetricBadgeProps = {
   readonly backgroundColor: string;
   readonly color?: string;
-  readonly runs: number;
+  readonly runs?: number;
 } & BadgeProps;
 
 export const MetricsBadge = ({
@@ -34,6 +34,7 @@ export const MetricsBadge = ({
     borderRadius={15}
     color={color}
     minWidth={10}
+    mr={1}
     px={4}
     py={1}
     size="md"

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

@@ -19,8 +19,9 @@
 import { Box, Heading, HStack } from "@chakra-ui/react";
 import type { DAGRunStates } from "openapi-gen/requests/types.gen";
 
+import { MetricsBadge } from "src/components/MetricsBadge";
+
 import { MetricSection } from "./MetricSection";
-import { MetricsBadge } from "./MetricsBadge";
 
 type DagRunMetricsProps = {
   readonly dagRunStates: DAGRunStates;

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

@@ -18,11 +18,10 @@
  */
 import { Box, Flex, HStack, VStack, Text } from "@chakra-ui/react";
 
+import { MetricsBadge } from "src/components/MetricsBadge";
 import { capitalize } from "src/utils";
 import { stateColor } from "src/utils/stateColor";
 
-import { MetricsBadge } from "./MetricsBadge";
-
 const BAR_WIDTH = 100;
 const BAR_HEIGHT = 5;
 

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

@@ -19,8 +19,9 @@
 import { Box, Heading, HStack } from "@chakra-ui/react";
 import type { TaskInstanceStateCount } from "openapi-gen/requests/types.gen";
 
+import { MetricsBadge } from "src/components/MetricsBadge";
+
 import { MetricSection } from "./MetricSection";
-import { MetricsBadge } from "./MetricsBadge";
 
 type TaskInstanceMetricsProps = {
   readonly taskInstanceStates: TaskInstanceStateCount;

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

@@ -16,18 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  Box,
-  Badge,
-  Text,
-  Button,
-  useDisclosure,
-  Skeleton,
-} from "@chakra-ui/react";
+import { Box, Text, Button, useDisclosure, Skeleton } from "@chakra-ui/react";
 import { FiChevronRight } from "react-icons/fi";
 
 import { useImportErrorServiceGetImportErrors } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { MetricsBadge } from "src/components/MetricsBadge";
+import { stateColor } from "src/utils/stateColor";
 
 import { DAGImportErrorsModal } from "./DAGImportErrorsModal";
 
@@ -54,14 +49,10 @@ export const DAGImportErrors = () => {
           onClick={onOpen}
           variant="outline"
         >
-          <Badge
-            background="red.solid"
-            borderRadius="full"
-            color="red.contrast"
-            px={2}
-          >
-            {importErrorsCount}
-          </Badge>
+          <MetricsBadge
+            backgroundColor={stateColor.failed}
+            runs={importErrorsCount}
+          />
           <Box alignItems="center" display="flex" gap={1}>
             <Text fontWeight="bold">Dag Import Errors</Text>
             <FiChevronRight />

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

@@ -0,0 +1,52 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Text, Button } from "@chakra-ui/react";
+import { FiChevronRight } from "react-icons/fi";
+import { Link as RouterLink } from "react-router-dom";
+
+import { MetricsBadge } from "src/components/MetricsBadge";
+import { capitalize } from "src/utils";
+
+// TODO: Add badge count once API is available
+
+export const DagFilterButton = ({
+  badgeColor,
+  filter,
+  link,
+}: {
+  readonly badgeColor: string;
+  readonly filter: string;
+  readonly link: string;
+}) => (
+  <RouterLink to={link}>
+    <Button
+      alignItems="center"
+      borderRadius="md"
+      display="flex"
+      gap={2}
+      variant="outline"
+    >
+      <Box alignItems="center" display="flex" gap={1}>
+        <MetricsBadge backgroundColor={badgeColor} />
+        <Text fontWeight="bold">{capitalize(filter)} Dags</Text>
+        <FiChevronRight />
+      </Box>
+    </Button>
+  </RouterLink>
+);

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

@@ -16,10 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, Heading } from "@chakra-ui/react";
+import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
 import { FiClipboard } from "react-icons/fi";
 
+import { stateColor } from "src/utils/stateColor";
+
 import { DAGImportErrors } from "./DAGImportErrors";
+import { DagFilterButton } from "./DagFilterButton";
 
 export const Stats = () => (
   <Box>
@@ -29,6 +32,23 @@ export const Stats = () => (
         Stats
       </Heading>
     </Flex>
-    <DAGImportErrors />
+    <HStack>
+      <DagFilterButton
+        badgeColor={stateColor.failed}
+        filter="failed"
+        link="dags?last_dag_run_state=failed"
+      />
+      <DAGImportErrors />
+      <DagFilterButton
+        badgeColor={stateColor.running}
+        filter="running"
+        link="dags?last_dag_run_state=running"
+      />
+      <DagFilterButton
+        badgeColor="blue.solid"
+        filter="active"
+        link="dags?paused=false"
+      />
+    </HStack>
   </Box>
 );