You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2021/03/26 20:57:39 UTC
[GitHub] [airflow] ryanahamilton opened a new pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
ryanahamilton opened a new pull request #15041:
URL: https://github.com/apache/airflow/pull/15041
Follow-up to #15007 that also provides scaffold routes and their correlating view files.
- Adds nesting layout containers `RunsContainer`, `RunContainer`, and `TIContainer` that all inherit from a shared `PipelineContainer`.
- Refactors the navigation in `SectionWrapper` into a shareable `SectionNav` component that is now used for all sub-navigations.
- The usage of `useDagRuns` and `useTaskInstances` query hooks is only a temporary implementation to allow rendering of links (left half of screen in GIF below) to traverse all of the new routes introduced in this PR.
**DISCLAIMER:** All aesthetics (colors, fonts, icons) will be subject to future change—this simply uses a default theme. View routes and naming are "working titles"—also subject to change.
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on pull request #15041:
URL: https://github.com/apache/airflow/pull/15041#issuecomment-808508554
lgtm
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a change in pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on a change in pull request #15041:
URL: https://github.com/apache/airflow/pull/15041#discussion_r602584080
##########
File path: airflow/ui/src/views/Pipeline/PipelineContainer.tsx
##########
@@ -0,0 +1,95 @@
+/*!
+ * 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 React from 'react';
+import { Link } from 'react-router-dom';
+import useReactRouter from 'use-react-router';
+import {
+ Box,
+ Flex,
+ Heading,
+ useColorModeValue,
+} from '@chakra-ui/react';
+
+import AppContainer from 'components/AppContainer';
+
+import { useDagRuns, useTaskInstances } from 'api';
+import { defaultDagRuns, defaultTaskInstances } from 'api/defaults';
+
+import type {
+ Dag as DagType, DagRun as DagRunType, TaskInstance as TaskInstanceType,
+} from 'interfaces';
+
+interface RouterProps {
+ match: { params: { dagId: DagType['dagId'], dagRunId: DagRunType['dagRunId'] } }
+}
+
+const PipelineContainer: React.FC = ({ children }) => {
+ const { match: { params: { dagId, dagRunId } } }: RouterProps = useReactRouter();
+
+ const { data: { dagRuns } = defaultDagRuns } = useDagRuns(dagId);
+ const { data: { taskInstances } = defaultTaskInstances } = useTaskInstances(dagId, dagRunId);
+
+ const linkColor = useColorModeValue('gray.400', 'gray.500');
+ const dividerColor = useColorModeValue('gray.100', 'gray.700');
+
+ return (
+ <AppContainer
+ breadcrumb={(
+ <Heading as="h1" size="md">
+ <Box
+ as="span"
+ color={linkColor}
+ _hover={{ color: 'teal.500' }}
+ >
+ <Link to="/pipelines" color="currentColor">Pipelines</Link>
+ /
+ </Box>
+ {dagId}
+ </Heading>
+ )}
+ >
+ <Flex height="100%">
+ <Box flex="1" borderRightWidth="2px" borderColor={dividerColor}>
+ <Heading mb={2}>Runs</Heading>
+ {!!dagRuns.length && dagRuns.map((dagRun: DagRunType) => (
+ <Box>
Review comment:
We need a key here.
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] github-actions[bot] commented on pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on pull request #15041:
URL: https://github.com/apache/airflow/pull/15041#issuecomment-808513240
The PR most likely needs to run full matrix of tests because it modifies parts of the core of Airflow. However, committers might decide to merge it quickly and take the risk. If they don't merge it quickly - please rebase it to the latest master at your convenience, or amend the last commit of the PR, and push it with --force-with-lease.
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a change in pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on a change in pull request #15041:
URL: https://github.com/apache/airflow/pull/15041#discussion_r602584430
##########
File path: airflow/ui/src/views/Pipeline/PipelineContainer.tsx
##########
@@ -0,0 +1,95 @@
+/*!
+ * 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 React from 'react';
+import { Link } from 'react-router-dom';
+import useReactRouter from 'use-react-router';
+import {
+ Box,
+ Flex,
+ Heading,
+ useColorModeValue,
+} from '@chakra-ui/react';
+
+import AppContainer from 'components/AppContainer';
+
+import { useDagRuns, useTaskInstances } from 'api';
+import { defaultDagRuns, defaultTaskInstances } from 'api/defaults';
+
+import type {
+ Dag as DagType, DagRun as DagRunType, TaskInstance as TaskInstanceType,
+} from 'interfaces';
+
+interface RouterProps {
+ match: { params: { dagId: DagType['dagId'], dagRunId: DagRunType['dagRunId'] } }
+}
+
+const PipelineContainer: React.FC = ({ children }) => {
+ const { match: { params: { dagId, dagRunId } } }: RouterProps = useReactRouter();
+
+ const { data: { dagRuns } = defaultDagRuns } = useDagRuns(dagId);
+ const { data: { taskInstances } = defaultTaskInstances } = useTaskInstances(dagId, dagRunId);
+
+ const linkColor = useColorModeValue('gray.400', 'gray.500');
+ const dividerColor = useColorModeValue('gray.100', 'gray.700');
+
+ return (
+ <AppContainer
+ breadcrumb={(
+ <Heading as="h1" size="md">
+ <Box
+ as="span"
+ color={linkColor}
+ _hover={{ color: 'teal.500' }}
+ >
+ <Link to="/pipelines" color="currentColor">Pipelines</Link>
+ /
+ </Box>
+ {dagId}
+ </Heading>
+ )}
+ >
+ <Flex height="100%">
+ <Box flex="1" borderRightWidth="2px" borderColor={dividerColor}>
+ <Heading mb={2}>Runs</Heading>
+ {!!dagRuns.length && dagRuns.map((dagRun: DagRunType) => (
+ <Box>
Review comment:
Also, checking for length is redundant, no?
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a change in pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on a change in pull request #15041:
URL: https://github.com/apache/airflow/pull/15041#discussion_r602586014
##########
File path: airflow/ui/src/api/index.ts
##########
@@ -39,6 +39,23 @@ export function useDags() {
);
}
+export function useDagRuns(dagId: Dag['dagId'], dateMin?: string) {
+ return useQuery<DagRunsResponse, Error>(
+ ['dagRun', dagId],
+ (): Promise<DagRunsResponse> => axios.get(`dags/${dagId}/dagRuns${dateMin ? `?start_date_gte=${dateMin}` : ''}`),
Review comment:
We probably want some functions to handle the formatting of url params but that's not needed now.
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on a change in pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on a change in pull request #15041:
URL: https://github.com/apache/airflow/pull/15041#discussion_r602584191
##########
File path: airflow/ui/src/views/Pipeline/PipelineContainer.tsx
##########
@@ -0,0 +1,95 @@
+/*!
+ * 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 React from 'react';
+import { Link } from 'react-router-dom';
+import useReactRouter from 'use-react-router';
+import {
+ Box,
+ Flex,
+ Heading,
+ useColorModeValue,
+} from '@chakra-ui/react';
+
+import AppContainer from 'components/AppContainer';
+
+import { useDagRuns, useTaskInstances } from 'api';
+import { defaultDagRuns, defaultTaskInstances } from 'api/defaults';
+
+import type {
+ Dag as DagType, DagRun as DagRunType, TaskInstance as TaskInstanceType,
+} from 'interfaces';
+
+interface RouterProps {
+ match: { params: { dagId: DagType['dagId'], dagRunId: DagRunType['dagRunId'] } }
+}
+
+const PipelineContainer: React.FC = ({ children }) => {
+ const { match: { params: { dagId, dagRunId } } }: RouterProps = useReactRouter();
+
+ const { data: { dagRuns } = defaultDagRuns } = useDagRuns(dagId);
+ const { data: { taskInstances } = defaultTaskInstances } = useTaskInstances(dagId, dagRunId);
+
+ const linkColor = useColorModeValue('gray.400', 'gray.500');
+ const dividerColor = useColorModeValue('gray.100', 'gray.700');
+
+ return (
+ <AppContainer
+ breadcrumb={(
+ <Heading as="h1" size="md">
+ <Box
+ as="span"
+ color={linkColor}
+ _hover={{ color: 'teal.500' }}
+ >
+ <Link to="/pipelines" color="currentColor">Pipelines</Link>
+ /
+ </Box>
+ {dagId}
+ </Heading>
+ )}
+ >
+ <Flex height="100%">
+ <Box flex="1" borderRightWidth="2px" borderColor={dividerColor}>
+ <Heading mb={2}>Runs</Heading>
+ {!!dagRuns.length && dagRuns.map((dagRun: DagRunType) => (
+ <Box>
+ <Link to={`/pipelines/${dagId}/${dagRun.dagRunId}`}>{dagRun.dagRunId}</Link>
+ </Box>
+ ))}
+ {dagRunId && (
+ <>
+ <Heading mb={2} size="md" mt={8}>Task Instances:</Heading>
+ {!!taskInstances.length && taskInstances.map((ti: TaskInstanceType) => (
+ <Box>
Review comment:
A `key` here too
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] ryanahamilton merged pull request #15041: UI scaffold views, routes, and layout containers for Runs and Tasks
Posted by GitBox <gi...@apache.org>.
ryanahamilton merged pull request #15041:
URL: https://github.com/apache/airflow/pull/15041
--
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org