Adds initial router, routes, and placeholder views

airflow/ui/.neutrinorc.js

@@ -37,6 +37,7 @@ module.exports = {
       // Aliases for internal modules
       neutrino.config.resolve.alias.set('root', resolve(__dirname));
       neutrino.config.resolve.alias.set('src', resolve(__dirname, 'src'));
+      neutrino.config.resolve.alias.set('views', resolve(__dirname, 'src/views'));
     },
     typescript(),
     // Modify typescript config in .tsconfig.json

airflow/ui/package.json

@@ -16,7 +16,8 @@
     "framer-motion": "^3.10.0",
     "react": "^16",
     "react-dom": "^16",
-    "react-hot-loader": "^4"
+    "react-hot-loader": "^4",
+    "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
     "@neutrinojs/eslint": "^9.5.0",
@@ -27,8 +28,12 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
+    "@types/react-router-dom": "^5.1.7",
     "eslint": "^7",
     "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "history": "^5.0.0",
     "jest": "^26",
     "neutrino": "^9.5.0",
     "neutrinojs-typescript": "^1.1.6",

airflow/ui/src/App.tsx

@@ -19,12 +19,43 @@
 
 import { hot } from 'react-hot-loader';
 import React from 'react';
-import { Center, Heading } from '@chakra-ui/react';
+import { Route, Redirect, Switch } from 'react-router-dom';
+
+import Pipelines from 'views/Pipelines';
+import Pipeline from 'views/Pipeline';
+
+import EventLogs from 'views/Activity/EventLogs';
+
+import Config from 'views/Config';
+
+import Access from 'views/Access';
+import Users from 'views/Access/Users';
+import Roles from 'views/Access/Roles';
+
+import Docs from 'views/Docs';
+import NotFound from 'views/NotFound';
 
 const App = () => (
-  <Center height="100vh">
-    <Heading>Apache Airflow new UI</Heading>
-  </Center>
+  <Switch>
+    <Redirect exact path="/" to="/pipelines" />
+    <Route exact path="/pipelines" component={Pipelines} />
+    <Route exact path="/pipelines/:dagId" component={Pipeline} />
+
+    <Route exact path="/activity/event-logs" component={EventLogs} />
+
+    <Route exact path="/config" component={Config} />
+
+    <Route exact path="/access" component={Access} />
+    <Route exact path="/access/users" component={Users} />
+    <Route exact path="/access/users/new" component={Users} />
+    <Route exact path="/access/users/:username" component={Users} />
+    <Route exact path="/access/users/:username/edit" component={Users} />
+    <Route exact path="/access/roles" component={Roles} />
+
+    <Route exact path="/docs" component={Docs} />
+
+    <Route component={NotFound} />
+  </Switch>
 );
 
 export default hot(module)(App);

airflow/ui/src/index.tsx

@@ -19,14 +19,17 @@
 
 import React from 'react';
 import { render } from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 
 import App from './App';
 import theme from './theme';
 
 render(
-  <ChakraProvider theme={theme}>
-    <App />
-  </ChakraProvider>,
+  <BrowserRouter basename="/">
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
+  </BrowserRouter>,
   document.getElementById('root'),
 );

airflow/ui/src/views/Access/Roles.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Roles: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Roles</Heading>
+  </Center>
+);
+
+export default Roles;

airflow/ui/src/views/Access/Users.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Users: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Users</Heading>
+  </Center>
+);
+
+export default Users;

airflow/ui/src/views/Access/index.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Access: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Access</Heading>
+  </Center>
+);
+
+export default Access;

airflow/ui/src/views/Activity/EventLogs.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const EventLogs: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Event Logs</Heading>
+  </Center>
+);
+
+export default EventLogs;

airflow/ui/src/views/Config/index.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Config: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Config</Heading>
+  </Center>
+);
+
+export default Config;

airflow/ui/src/views/Docs.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Docs: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Docs</Heading>
+  </Center>
+);
+
+export default Docs;

airflow/ui/src/views/NotFound.tsx

@@ -0,0 +1,44 @@
+/*!
+ * 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 as RouterLink } from 'react-router-dom';
+import {
+  Center,
+  Box,
+  Heading,
+  Link,
+} from '@chakra-ui/react';
+
+const NotFound: React.FC = () => (
+  <Center mt="50px">
+    <Box textAlign="center">
+      <Heading>Page not found</Heading>
+      <Link
+        as={RouterLink}
+        to="/"
+        color="teal.500"
+      >
+        Return to the main page
+      </Link>
+    </Box>
+  </Center>
+);
+
+export default NotFound;

airflow/ui/src/views/Pipeline/index.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Pipeline: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Pipeline</Heading>
+  </Center>
+);
+
+export default Pipeline;

airflow/ui/src/views/Pipelines.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Center, Heading } from '@chakra-ui/react';
+
+const Pipelines: React.FC = () => (
+  <Center height="100vh">
+    <Heading>Pipelines</Heading>
+  </Center>
+);
+
+export default Pipelines;