bbovenzi commented on code in PR #43888: URL: https://github.com/apache/airflow/pull/43888#discussion_r1838176143
########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricsBadge.tsx: ########## @@ -0,0 +1,30 @@ +/*! + * 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 { Badge } from "@chakra-ui/react"; + +type MetricBadgeProps = { + readonly color: string; Review Comment: We need a backgroundColor and a color param. We're getting a lot of bad text colors: <img width="68" alt="Screenshot 2024-11-12 at 9 12 54 AM" src="https://github.com/user-attachments/assets/e5873d97-c0a3-4a53-b8b0-d0dcbd4b5d9a";> ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.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, Heading, HStack } from "@chakra-ui/react"; +import type { DAGRunStates } from "openapi-gen/requests/types.gen"; + +import { MetricSection } from "./MetricSection"; +import { MetricsBadge } from "./MetricsBadge"; + +type DagRunMetricsProps = { + readonly dagRunStates: DAGRunStates; + readonly total: number; +}; + +const DAGRUN_STATES: Array<keyof DAGRunStates> = [ + "queued", + "running", + "success", + "failed", +]; + +export const DagRunMetrics = ({ dagRunStates, total }: DagRunMetricsProps) => ( + <Box borderRadius={5} borderWidth={1} p={2}> + <HStack mb={2}> + <MetricsBadge color="blue.solid" runs={total} /> + <Heading>Dag Runs</Heading> Review Comment: ```suggestion <Heading size="md">Dag Runs</Heading> ``` ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.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, Heading, HStack } from "@chakra-ui/react"; +import type { DAGRunStates } from "openapi-gen/requests/types.gen"; + +import { MetricSection } from "./MetricSection"; +import { MetricsBadge } from "./MetricsBadge"; + +type DagRunMetricsProps = { + readonly dagRunStates: DAGRunStates; + readonly total: number; +}; + +const DAGRUN_STATES: Array<keyof DAGRunStates> = [ + "queued", + "running", + "success", + "failed", +]; + +export const DagRunMetrics = ({ dagRunStates, total }: DagRunMetricsProps) => ( + <Box borderRadius={5} borderWidth={1} p={2}> + <HStack mb={2}> Review Comment: ```suggestion <HStack mb={4}> ``` ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricsBadge.tsx: ########## @@ -0,0 +1,30 @@ +/*! + * 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 { Badge } from "@chakra-ui/react"; + +type MetricBadgeProps = { + readonly color: string; Review Comment: Actually, let's just have this type extend `BadgeProps` and pass `{...rest}` at the end of the component. ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx: ########## @@ -0,0 +1,57 @@ +/*! + * 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, Heading, HStack } from "@chakra-ui/react"; +import type { TaskInstanceStateCount } from "openapi-gen/requests/types.gen"; + +import { MetricSection } from "./MetricSection"; +import { MetricsBadge } from "./MetricsBadge"; + +type TaskInstanceMetricsProps = { + readonly taskInstanceStates: TaskInstanceStateCount; + readonly total: number; +}; + +const TASK_STATES: Array<keyof TaskInstanceStateCount> = [ + "queued", + "running", + "success", + "failed", + "skipped", +]; + +export const TaskInstanceMetrics = ({ + taskInstanceStates, + total, +}: TaskInstanceMetricsProps) => ( + <Box borderRadius={5} borderWidth={1} mt={2} p={2}> + <HStack mb={2}> + <MetricsBadge color="blue.solid" runs={total} /> + <Heading>Task Instances</Heading> Review Comment: ```suggestion <Heading size="md">Task Instances</Heading> ``` ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricsBadge.tsx: ########## @@ -0,0 +1,30 @@ +/*! + * 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 { Badge } from "@chakra-ui/react"; + +type MetricBadgeProps = { + readonly color: string; + readonly runs: number; +}; + +export const MetricsBadge = ({ color, runs }: MetricBadgeProps) => ( + <Badge bg={color} borderRadius={15} minWidth={10} px={5} py={2} size="lg"> Review Comment: ```suggestion <Badge bg={color} borderRadius={15} minWidth={10} px={4} py={1} size="md"> ``` We can make this all smaller. ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricSection.tsx: ########## @@ -0,0 +1,73 @@ +/*! + * 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, Flex, HStack, VStack, Text } from "@chakra-ui/react"; + +import { capitalize } from "src/utils"; +import { stateColor } from "src/utils/stateColor"; + +import { MetricsBadge } from "./MetricsBadge"; + +const BAR_WIDTH = 100; +const BAR_HEIGHT = 5; + +type MetricSectionProps = { + readonly runs: number; + readonly state: string; + readonly total: number; +}; + +export const MetricSection = ({ runs, state, total }: MetricSectionProps) => { + // Calculate the given state as a percentage of total and draw a bar + // in state's color with width as state's percentage and remaining width filed as gray + const statePercent = total === 0 ? 0 : ((runs / total) * 100).toFixed(2); + const stateWidth = total === 0 ? 0 : (runs / total) * BAR_WIDTH; + const remainingWidth = BAR_WIDTH - stateWidth; + + return ( + <VStack align="left" gap={1} mb={4} ml={0} pl={0}> + <Flex justify="space-between"> + <HStack> + <MetricsBadge + color={stateColor[state as keyof typeof stateColor]} + runs={runs} + /> + <Text> {capitalize(state)} </Text> + </HStack> + <Text color="fg.muted"> {statePercent}% </Text> + </Flex> + <HStack gap={0} mt={2}> + <Box + bg={stateColor[state as keyof typeof stateColor]} + borderLeftRadius={5} + height={`${BAR_HEIGHT}px`} + minHeight={2} + width={`${stateWidth}%`} + /> + <Box + bg={stateColor.queued} Review Comment: ```suggestion bg="bg.emphasized" ``` ########## airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx: ########## @@ -0,0 +1,57 @@ +/*! + * 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, Heading, HStack } from "@chakra-ui/react"; +import type { TaskInstanceStateCount } from "openapi-gen/requests/types.gen"; + +import { MetricSection } from "./MetricSection"; +import { MetricsBadge } from "./MetricsBadge"; + +type TaskInstanceMetricsProps = { + readonly taskInstanceStates: TaskInstanceStateCount; + readonly total: number; +}; + +const TASK_STATES: Array<keyof TaskInstanceStateCount> = [ + "queued", + "running", + "success", + "failed", + "skipped", +]; + +export const TaskInstanceMetrics = ({ + taskInstanceStates, + total, +}: TaskInstanceMetricsProps) => ( + <Box borderRadius={5} borderWidth={1} mt={2} p={2}> + <HStack mb={2}> Review Comment: ```suggestion <HStack mb={4}> ``` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
