Merge branch 'dev' into starship_dag_migration_operator

astronomer · May 23, 2024 · d72215b · d72215b
2 parents 7d93914 + ae53e73
commit d72215b
Show file tree

Hide file tree

Showing 12 changed files with 644 additions and 125 deletions.
diff --git a/astronomer_starship/src/App.jsx b/astronomer_starship/src/App.jsx
@@ -19,6 +19,7 @@ import {
 } from './State';
 import './index.css';
 import AppLoading from './component/AppLoading';
+import TelescopePage from './pages/TelescopePage';
 
 export default function App() {
   const [state, dispatch] = useReducer(reducer, initialState, getInitialState);
@@ -118,7 +119,8 @@ export default function App() {
         <Route path="pools" element={<PoolsPage key="pools" state={state} dispatch={dispatch} />} />
         <Route path="env" element={<EnvVarsPage key="env-vars" state={state} dispatch={dispatch} />} />
         <Route path="dags" element={<DAGHistoryPage key="dag-history" state={state} dispatch={dispatch} />} />
-      </Route>,
+        <Route path="telescope" element={<TelescopePage key="telescope" state={state} dispatch={dispatch} />} />
+     </Route>,
     ),
   );
   return (

diff --git a/astronomer_starship/src/State.jsx b/astronomer_starship/src/State.jsx
@@ -31,6 +31,14 @@ export const initialState = {
   isProductSelected: false,
   isTokenTouched: false,
   token: null,
+  deploymentId: null,
+  telescopeOrganizationId: '',
+  telescopePresignedUrl: '',
+
+  // Software Specific:
+  releaseName: null,
+  workspaceId: null,
+
   // ### VARIABLES PAGE ####
   variablesLocalData: [],
   variablesRemoteData: [],
@@ -51,6 +59,7 @@ export const initialState = {
   envRemoteData: [],
   envLoading: false,
   envError: null,
+  organizationId: null,
   // ### DAGS PAGE ####
   dagsData: {},
   dagsLoading: false,
@@ -79,15 +88,15 @@ export const reducer = (state, action) => {
         urlDeploymentPart: action.urlDeploymentPart,
         urlOrgPart: action.urlOrgPart,
         isValidUrl: action.urlOrgPart && action.urlDeploymentPart,
-        isSetupComplete: action.urlOrgPart && action.urlDeploymentPart && state.token,
+        isSetupComplete: state.isStarship && state.isAirflow && state.token && action.urlOrgPart && action.urlDeploymentPart,
       };
     }
     case 'set-token': {
       return {
         ...state,
         isTokenTouched: true,
         token: action.token,
-        isSetupComplete: action.token && state.isValidUrl,
+        isSetupComplete: state.isStarship && state.isAirflow && action.token && state.isValidUrl,
       };
     }
     case 'toggle-is-astro': {
@@ -96,17 +105,48 @@ export const reducer = (state, action) => {
         isAstro: !state.isAstro,
         isProductSelected: true,
         targetUrl: getTargetUrlFromParts(state.urlOrgPart, state.urlDeploymentPart, !state.isAstro),
+        token: null,
         isSetupComplete: false,
       };
     }
     case 'set-is-product-selected': {
       return { ...state, isProductSelected: true };
     }
     case 'set-is-starship': {
-      return { ...state, isStarship: action.isStarship };
+      return {
+        ...state,
+        isStarship: action.isStarship,
+        isSetupComplete: action.isStarship && state.isAirflow && state.token && state.isValidUrl,
+      };
     }
     case 'set-is-airflow': {
-      return { ...state, isAirflow: action.isAirflow };
+      return {
+        ...state,
+        isAirflow: action.isAirflow,
+        isSetupComplete: action.isAirflow && state.isStarship && state.token && state.isValidUrl,
+      };
+    }
+    case 'set-software-info': {
+      return {
+        ...state,
+        releaseName: action.releaseName,
+        workspaceId: action.workspaceId,
+        deploymentId: action.deploymentId,
+      };
+    }
+
+    // ### Telescope ###
+    case 'set-telescope-org': {
+      return {
+        ...state,
+        telescopeOrganizationId: action.telescopeOrganizationId,
+      };
+    }
+    case 'set-telescope-presigned-url': {
+      return {
+        ...state,
+        telescopePresignedUrl: action.telescopePresignedUrl,
+      };
     }
 
     // ### VARIABLES PAGE ####
@@ -131,6 +171,7 @@ export const reducer = (state, action) => {
       return action.error.response.status === 401 ? {
         ...state,
         variablesError: action.error,
+        variablesLoading: false,
         isSetupComplete: false,
         isTokenTouched: false,
         token: null,
@@ -159,6 +200,7 @@ export const reducer = (state, action) => {
       return action.error.response.status === 401 ? {
         ...state,
         connectionsError: action.error,
+        connectionsLoading: false,
         isSetupComplete: false,
         isTokenTouched: false,
         token: null,
@@ -187,6 +229,7 @@ export const reducer = (state, action) => {
       return action.error.response.status === 401 ? {
         ...state,
         poolsError: action.error,
+        poolsLoading: false,
         isSetupComplete: false,
         isTokenTouched: false,
         token: null,
@@ -208,13 +251,16 @@ export const reducer = (state, action) => {
         ...state,
         envLocalData: action.envLocalData,
         envRemoteData: action.envRemoteData,
+        organizationId: action.envRemoteData['ASTRO_ORGANIZATION_ID'] || state.organizationId,
+        deploymentId: action.envRemoteData['ASTRO_DEPLOYMENT_ID'] || state.deploymentId,
         envLoading: false,
       };
     }
     case 'set-env-error': {
       return action.error.response.status === 401 ? {
         ...state,
         envError: action.error,
+        envLoading: false,
         isSetupComplete: false,
         isTokenTouched: false,
         token: null,
@@ -241,6 +287,7 @@ export const reducer = (state, action) => {
       return action.error.response.status === 401 ? {
         ...state,
         dagsError: action.error,
+        dagsLoading: false,
         isSetupComplete: false,
         isTokenTouched: false,
         token: null,

diff --git a/astronomer_starship/src/component/DataTable.jsx b/astronomer_starship/src/component/DataTable.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  Table, Thead, Tbody, Tr, Th, Td, chakra,
+  Table, Thead, Tbody, Tr, Th, Td, chakra, TableContainer,
 } from '@chakra-ui/react';
 import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
 import {
@@ -21,58 +21,60 @@ export default function DataTable({
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    state: { sorting },
+    state: {sorting},
   });
 
   return (
-    <Table className="data-table">
-      <Thead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <Tr key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
-              const { meta } = header.column.columnDef;
-              return (
-                <Th
-                  key={header.id}
-                  onClick={header.column.getToggleSortingHandler()}
-                  isNumeric={meta?.isNumeric}
-                >
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
+    <TableContainer>
+      <Table className="data-table">
+        <Thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
+                const {meta} = header.column.columnDef;
+                return (
+                  <Th
+                    key={header.id}
+                    onClick={header.column.getToggleSortingHandler()}
+                    isNumeric={meta?.isNumeric}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
 
-                  <chakra.span pl="4">
-                    {header.column.getIsSorted() ? (
-                      header.column.getIsSorted() === 'desc' ? (
-                        <TriangleDownIcon aria-label="sorted descending" />
-                      ) : (
-                        <TriangleUpIcon aria-label="sorted ascending" />
-                      )
-                    ) : null}
-                  </chakra.span>
-                </Th>
-              );
-            })}
-          </Tr>
-        ))}
-      </Thead>
-      <Tbody>
-        {table.getRowModel().rows.map((row) => (
-          <Tr key={row.id}>
-            {row.getVisibleCells().map((cell) => {
-              // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
-              const { meta } = cell.column.columnDef;
-              return (
-                <Td key={cell.id} isNumeric={meta?.isNumeric}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </Td>
-              );
-            })}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
+                    <chakra.span pl="4">
+                      {header.column.getIsSorted() ? (
+                        header.column.getIsSorted() === 'desc' ? (
+                          <TriangleDownIcon aria-label="sorted descending" />
+                        ) : (
+                          <TriangleUpIcon aria-label="sorted ascending" />
+                        )
+                      ) : null}
+                    </chakra.span>
+                  </Th>
+                );
+              })}
+            </Tr>
+          ))}
+        </Thead>
+        <Tbody>
+          {table.getRowModel().rows.map((row) => (
+            <Tr key={row.id}>
+              {row.getVisibleCells().map((cell) => {
+                // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
+                const {meta} = cell.column.columnDef;
+                return (
+                  <Td maxW={100} key={cell.id} isNumeric={meta?.isNumeric}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                );
+              })}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/astronomer_starship/src/component/ValidatedUrlCheckbox.jsx b/astronomer_starship/src/component/ValidatedUrlCheckbox.jsx
@@ -12,13 +12,29 @@ export default function ValidatedUrlCheckbox({
   useEffect(() => {
     // noinspection JSCheckFunctionSignatures
     axios.get(proxyUrl(url), { headers: proxyHeaders(token) })
-      .then((res) => setValid(res.status === 200))
+      .then((res) => {
+        // Valid if it's a 200, has data, and is JSON
+        const isValid = (
+          res.status === 200 &&
+          res.data &&
+          (res.headers['content-type'] === 'application/json' || res.data === "OK")
+        );
+        setValid(isValid);
+      })
       .catch((err) => {
-        toast({
-          title: err.response?.data?.error || err.response?.data || err.message,
-          status: 'error',
-          isClosable: true,
-        });
+        if (err.response.status === 404) {
+          toast({
+            title: 'Not found',
+            status: 'error',
+            isClosable: true,
+          });
+        } else {
+          toast({
+            title: err.response?.data?.error || err.message || err.response?.data,
+            status: 'error',
+            isClosable: true,
+          });
+        }
         setValid(false);
       })
       .finally(() => setLoading.off());

diff --git a/astronomer_starship/src/constants.js b/astronomer_starship/src/constants.js
@@ -1,4 +1,5 @@
 const constants = {
+  TELESCOPE_ROUTE: '/api/starship/telescope',
   ENV_VAR_ROUTE: '/api/starship/env_vars',
   POOL_ROUTE: '/api/starship/pools',
   CONNECTIONS_ROUTE: '/api/starship/connections',

diff --git a/astronomer_starship/src/pages/DAGHistoryPage.jsx b/astronomer_starship/src/pages/DAGHistoryPage.jsx
@@ -160,7 +160,7 @@ DAGHistoryMigrateButton.defaultProps = {
   isDisabled: false,
 };
 
-export function setDagData(localData, remoteData, key = 'dag_id') {
+function setDagData(localData, remoteData, key = 'dag_id') {
   const output = {};
   localData.forEach((i) => {
     const keyValue = i[key];