apache-airflow-providers-edge3 1.1.3__py3-none-any.whl → 1.2.0__py3-none-any.whl

airflow/providers/edge3/plugins/www/src/main.tsx

@@ -0,0 +1,58 @@
+/*!
+ * 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 { ChakraProvider } from "@chakra-ui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import axios from "axios";
+import { FC } from "react";
+
+import { ColorModeProvider } from "src/context/colorMode";
+import { EdgeLayout } from "src/layouts/EdgeLayout";
+import { tokenHandler } from "src/utils";
+
+import { system } from "./theme";
+
+export type PluginComponentProps = object;
+
+/**
+ * Main plugin component
+ */
+const PluginComponent: FC<PluginComponentProps> = () => {
+  // ensure HTTP API calls are authenticated with current session token
+  axios.interceptors.request.use(tokenHandler);
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: Infinity,
+      },
+    },
+  });
+
+  return (
+    <ChakraProvider value={system}>
+      <QueryClientProvider client={queryClient}>
+        <ColorModeProvider>
+          <EdgeLayout />
+        </ColorModeProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+};
+
+export default PluginComponent;

airflow/providers/edge3/plugins/www/src/pages/JobsPage.tsx

@@ -0,0 +1,88 @@
+/*!
+ * 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, Table } from "@chakra-ui/react";
+import { useUiServiceJobs } from "openapi/queries";
+
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { StateBadge } from "src/components/StateBadge";
+import { autoRefreshInterval } from "src/utils";
+
+export const JobsPage = () => {
+  const { data, error } = useUiServiceJobs(undefined, {
+    enabled: true,
+    refetchInterval: autoRefreshInterval,
+  });
+
+  // TODO to make it proper
+  // Use DataTable as component from Airflow-Core UI
+  // Add sorting
+  // Add filtering
+  // Add links to see job details / jobs list
+  // Translation
+  if (data)
+    return (
+      <Box p={2}>
+        <Table.Root size="sm" interactive stickyHeader striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader>Dag ID</Table.ColumnHeader>
+              <Table.ColumnHeader>Run ID</Table.ColumnHeader>
+              <Table.ColumnHeader>Task ID</Table.ColumnHeader>
+              <Table.ColumnHeader>Map Index</Table.ColumnHeader>
+              <Table.ColumnHeader>Try Number</Table.ColumnHeader>
+              <Table.ColumnHeader>State</Table.ColumnHeader>
+              <Table.ColumnHeader>Queue</Table.ColumnHeader>
+              <Table.ColumnHeader>Queued DTTM</Table.ColumnHeader>
+              <Table.ColumnHeader>Edge Worker</Table.ColumnHeader>
+              <Table.ColumnHeader>Last Update</Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {data.jobs.map((job) => (
+              <Table.Row
+                key={`${job.dag_id}.${job.run_id}.${job.task_id}.${job.map_index}.${job.try_number}`}
+              >
+                <Table.Cell>{job.dag_id}</Table.Cell>
+                <Table.Cell>{job.run_id}</Table.Cell>
+                <Table.Cell>{job.task_id}</Table.Cell>
+                <Table.Cell>{job.map_index}</Table.Cell>
+                <Table.Cell>{job.try_number}</Table.Cell>
+                <Table.Cell>
+                  <StateBadge state={job.state}>{job.state}</StateBadge>
+                </Table.Cell>
+                <Table.Cell>{job.queue}</Table.Cell>
+                <Table.Cell>{job.queued_dttm}</Table.Cell>
+                <Table.Cell>{job.edge_worker}</Table.Cell>
+                <Table.Cell>{job.last_update}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
+    );
+  if (error) {
+    return (
+      <Box p={2}>
+        <p>Unable to load data:</p>
+        <ErrorAlert error={error} />
+      </Box>
+    );
+  }
+  return <Box p={2}>Loading...</Box>;
+};

airflow/providers/edge3/plugins/www/src/pages/WorkerPage.tsx

@@ -0,0 +1,105 @@
+/*!
+ * 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, Table } from "@chakra-ui/react";
+import { useUiServiceWorker } from "openapi/queries";
+
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { WorkerStateBadge } from "src/components/WorkerStateBadge";
+import { autoRefreshInterval } from "src/utils";
+
+export const WorkerPage = () => {
+  const { data, error } = useUiServiceWorker(undefined, {
+    enabled: true,
+    refetchInterval: autoRefreshInterval,
+  });
+
+  // TODO to make it proper
+  // Use DataTable as component from Airflow-Core UI
+  // Add actions for maintenance / delete of orphan worker
+  // Add sorting
+  // Add filtering
+  // Add links to see jobs on worker
+  // Translation
+  if (data)
+    return (
+      <Box p={2}>
+        <Table.Root size="sm" interactive stickyHeader striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader>Worker Name</Table.ColumnHeader>
+              <Table.ColumnHeader>State</Table.ColumnHeader>
+              <Table.ColumnHeader>Queues</Table.ColumnHeader>
+              <Table.ColumnHeader>First Online</Table.ColumnHeader>
+              <Table.ColumnHeader>Last Heartbeat</Table.ColumnHeader>
+              <Table.ColumnHeader>Active Jobs</Table.ColumnHeader>
+              <Table.ColumnHeader>System Information</Table.ColumnHeader>
+              <Table.ColumnHeader>Operations</Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {data.workers.map((worker) => (
+              <Table.Row key={worker.worker_name}>
+                <Table.Cell>{worker.worker_name}</Table.Cell>
+                <Table.Cell>
+                  <WorkerStateBadge state={worker.state}>{worker.state}</WorkerStateBadge>
+                </Table.Cell>
+                <Table.Cell>
+                  {worker.queues ? (
+                    <ul>
+                      {worker.queues.map((queue) => (
+                        <li key={queue}>{queue}</li>
+                      ))}
+                    </ul>
+                  ) : (
+                    "(default)"
+                  )}
+                </Table.Cell>
+                <Table.Cell>{worker.first_online}</Table.Cell>
+                <Table.Cell>{worker.last_heartbeat}</Table.Cell>
+                <Table.Cell>{worker.jobs_active}</Table.Cell>
+                <Table.Cell>
+                  {worker.sysinfo ? (
+                    <ul>
+                      {Object.entries(worker.sysinfo).map(([key, value]) => (
+                        <li key={key}>
+                          {key}: {value}
+                        </li>
+                      ))}
+                    </ul>
+                  ) : (
+                    "N/A"
+                  )}
+                </Table.Cell>
+                <Table.Cell>{worker.maintenance_comments}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
+    );
+  if (error) {
+    return (
+      <Box p={2}>
+        <p>Unable to load data:</p>
+        <ErrorAlert error={error} />
+      </Box>
+    );
+  }
+  return <Box p={2}>Loading...</Box>;
+};

airflow/providers/edge3/plugins/www/src/res/README.md

@@ -0,0 +1,24 @@
+<!--
+ 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.
+ -->
+
+# Edge Icon Resources
+
+The icons were sourced from https://github.com/grommet/grommet-icons/blob/e9bcdfd0ee7cd96f6f065dc223611743bcd1ed58/public/img/cloud-computer.svg
+
+All credits to @alansouzati - https://github.com/alansouzati

airflow/providers/edge3/plugins/www/src/res/cloud-computer-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="none" stroke="#FFFFFF" stroke-width="2" d="M6,6 L6,5 C6,2 7.5,1 10,1 L14,1 C16.5,1 18,2.5 18,5 L18,6 C21,6 23,8 23,11 C23,14 21,16 18,16 M14,6 L6,6 C3,6 1,7.5 1,11 C1,14.5 3,16 6,16 M8,19 L16,19 L16,12 L8,12 L8,19 Z M12,19 L12,23 L12,19 Z M9,23 L15,23 L9,23 Z"/>
+</svg>

airflow/providers/edge3/plugins/www/src/res/cloud-computer.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="none" stroke="#000" stroke-width="2" d="M6,6 L6,5 C6,2 7.5,1 10,1 L14,1 C16.5,1 18,2.5 18,5 L18,6 C21,6 23,8 23,11 C23,14 21,16 18,16 M14,6 L6,6 C3,6 1,7.5 1,11 C1,14.5 3,16 6,16 M8,19 L16,19 L16,12 L8,12 L8,19 Z M12,19 L12,23 L12,19 Z M9,23 L15,23 L9,23 Z"/>
+</svg>

airflow/providers/edge3/plugins/www/src/theme.ts

@@ -0,0 +1,176 @@
+/*!
+ * 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.
+ */
+
+/* eslint-disable perfectionist/sort-objects */
+import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
+
+const generateSemanticTokens = (color: string, darkContrast: string = "white") => ({
+  solid: { value: `{colors.${color}.600}` },
+  contrast: { value: { _light: "white", _dark: darkContrast } },
+  fg: { value: { _light: `{colors.${color}.800}`, _dark: `{colors.${color}.200}` } },
+  muted: { value: { _light: `{colors.${color}.200}`, _dark: `{colors.${color}.800}` } },
+  subtle: { value: { _light: `{colors.${color}.100}`, _dark: `{colors.${color}.900}` } },
+  emphasized: { value: { _light: `{colors.${color}.300}`, _dark: `{colors.${color}.700}` } },
+  focusRing: { value: { _light: `{colors.${color}.800}`, _dark: `{colors.${color}.200}` } },
+});
+
+const customConfig = defineConfig({
+  theme: {
+    tokens: {
+      colors: {
+        // Default green was too light
+        success: {
+          "50": { value: "#E0FFE0" },
+          "100": { value: "#C2FFC2" },
+          "200": { value: "#80FF80" },
+          "300": { value: "#42FF42" },
+          "400": { value: "#00FF00" },
+          "500": { value: "#00C200" },
+          "600": { value: "#008000" },
+          "700": { value: "#006100" },
+          "800": { value: "#004200" },
+          "900": { value: "#001F00" },
+          "950": { value: "#000F00" },
+        },
+        failed: defaultConfig.theme?.tokens?.colors?.red ?? {},
+        // Default gray was too dark
+        queued: {
+          "50": { value: "#F5F5F5" },
+          "100": { value: "#EBEBEB" },
+          "200": { value: "#D4D4D4" },
+          "300": { value: "#BFBFBF" },
+          "400": { value: "#ABABAB" },
+          "500": { value: "#969696" },
+          "600": { value: "#808080" },
+          "700": { value: "#616161" },
+          "800": { value: "#404040" },
+          "900": { value: "#212121" },
+          "950": { value: "#0F0F0F" },
+        },
+        skipped: defaultConfig.theme?.tokens?.colors?.pink ?? {},
+        up_for_reschedule: defaultConfig.theme?.tokens?.colors?.cyan ?? {},
+        up_for_retry: defaultConfig.theme?.tokens?.colors?.yellow ?? {},
+        upstream_failed: defaultConfig.theme?.tokens?.colors?.orange ?? {},
+        // lime
+        running: {
+          "50": { value: "#EFFBEF" },
+          "100": { value: "#DEF7DE" },
+          "200": { value: "#B9EEB9" },
+          "300": { value: "#98E698" },
+          "400": { value: "#78DE78" },
+          "500": { value: "#53D553" },
+          "600": { value: "#32CD32" },
+          "700": { value: "#269C26" },
+          "800": { value: "#196719" },
+          "900": { value: "#0D350D" },
+          "950": { value: "#061906" },
+        },
+        // violet
+        restarting: {
+          "50": { value: "#F6EBFF" },
+          "100": { value: "#EDD6FF" },
+          "200": { value: "#D9A8FF" },
+          "300": { value: "#C880FF" },
+          "400": { value: "#B657FF" },
+          "500": { value: "#A229FF" },
+          "600": { value: "#8F00FF" },
+          "700": { value: "#6E00C2" },
+          "800": { value: "#480080" },
+          "900": { value: "#260042" },
+          "950": { value: "#11001F" },
+        },
+        // mediumpurple
+        deferred: {
+          "50": { value: "#F6F3FC" },
+          "100": { value: "#EDE7F9" },
+          "200": { value: "#DACEF3" },
+          "300": { value: "#C8B6ED" },
+          "400": { value: "#B9A1E7" },
+          "500": { value: "#A689E1" },
+          "600": { value: "#9370DB" },
+          "700": { value: "#6432C8" },
+          "800": { value: "#412182" },
+          "900": { value: "#211041" },
+          "950": { value: "#100821" },
+        },
+        // tan
+        scheduled: {
+          "50": { value: "#FBF8F4" },
+          "100": { value: "#F8F3ED" },
+          "200": { value: "#F1E7DA" },
+          "300": { value: "#E8D9C4" },
+          "400": { value: "#E1CDB2" },
+          "500": { value: "#DAC1A0" },
+          "600": { value: "#D2B48C" },
+          "700": { value: "#B9894B" },
+          "800": { value: "#7D5C31" },
+          "900": { value: "#3E2E18" },
+          "950": { value: "#21180D" },
+        },
+        // lightblue
+        none: {
+          "50": { value: "#F7FBFD" },
+          "100": { value: "#F3F9FB" },
+          "200": { value: "#E4F2F7" },
+          "300": { value: "#D8ECF3" },
+          "400": { value: "#C8E5EE" },
+          "500": { value: "#BDDFEB" },
+          "600": { value: "#ADD8E6" },
+          "700": { value: "#5FB2CE" },
+          "800": { value: "#30819C" },
+          "900": { value: "#18414E" },
+          "950": { value: "#0C2027" },
+        },
+        // lightgrey
+        removed: {
+          "50": { value: "#FCFCFC" },
+          "100": { value: "#F7F7F7" },
+          "200": { value: "#F0F0F0" },
+          "300": { value: "#E8E8E8" },
+          "400": { value: "#E0E0E0" },
+          "500": { value: "#DBDBDB" },
+          "600": { value: "#D3D3D3" },
+          "700": { value: "#9E9E9E" },
+          "800": { value: "#696969" },
+          "900": { value: "#363636" },
+          "950": { value: "#1A1A1A" },
+        },
+      },
+    },
+    semanticTokens: {
+      colors: {
+        success: generateSemanticTokens("success"),
+        failed: defaultConfig.theme?.semanticTokens?.colors?.red ?? {},
+        queued: generateSemanticTokens("queued"),
+        skipped: defaultConfig.theme?.semanticTokens?.colors?.pink ?? {},
+        up_for_reschedule: defaultConfig.theme?.semanticTokens?.colors?.cyan ?? {},
+        up_for_retry: defaultConfig.theme?.semanticTokens?.colors?.yellow ?? {},
+        upstream_failed: defaultConfig.theme?.semanticTokens?.colors?.orange ?? {},
+        running: generateSemanticTokens("running"),
+        restarting: generateSemanticTokens("restarting"),
+        deferred: generateSemanticTokens("deferred"),
+        scheduled: generateSemanticTokens("scheduled"),
+        none: generateSemanticTokens("none", "black"),
+        removed: generateSemanticTokens("removed", "black"),
+      },
+    },
+  },
+});
+
+export const system = createSystem(defaultConfig, customConfig);

airflow/providers/edge3/plugins/www/src/utils/config.ts

@@ -0,0 +1,23 @@
+/*!
+ * 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.
+ */
+
+// TODO / Note: might use this in future but core-ui-API is not yet bound:
+// const autoRefreshInterval = useConfig("auto_refresh_interval") as number | undefined;
+// Either we need the UI API as a "common component" or we need to bin services via axios here (again)
+export const autoRefreshInterval = 5000;

airflow/providers/edge3/plugins/www/src/utils/index.ts

@@ -0,0 +1,22 @@
+/*!
+ * 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.
+ */
+
+export { autoRefreshInterval } from "./config";
+export { useContainerWidth } from "./useContainerWidth";
+export { tokenHandler } from "./tokenHandler";

airflow/providers/edge3/plugins/www/src/utils/tokenHandler.ts

@@ -0,0 +1,51 @@
+/*!
+ * 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 type { InternalAxiosRequestConfig } from "axios";
+
+export const TOKEN_STORAGE_KEY = "token";
+const getTokenFromCookies = (): string | undefined => {
+  const cookies = document.cookie.split(";");
+
+  for (const cookie of cookies) {
+    const [name, token] = cookie.split("=");
+
+    if (name?.trim() === "_token" && token !== undefined) {
+      localStorage.setItem(TOKEN_STORAGE_KEY, token);
+      document.cookie = "_token=; expires=Sat, 01 Jan 2000 00:00:00 UTC; path=/;";
+
+      return token;
+    }
+  }
+
+  return undefined;
+};
+
+export const tokenHandler = (config: InternalAxiosRequestConfig) => {
+  const token = localStorage.getItem(TOKEN_STORAGE_KEY) ?? getTokenFromCookies();
+
+  if (token !== undefined) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return config;
+};
+
+export const clearToken = () => {
+  localStorage.removeItem(TOKEN_STORAGE_KEY);
+};

airflow/providers/edge3/plugins/www/src/utils/useContainerWidth.ts

@@ -0,0 +1,43 @@
+/*!
+ * 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 { type MutableRefObject, useEffect, useState } from "react";
+
+export const useContainerWidth = (ref: MutableRefObject<HTMLDivElement | null | undefined>) => {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+
+  return width;
+};

airflow/providers/edge3/plugins/www/src/vite-env.d.ts

@@ -0,0 +1,20 @@
+/*!
+ * 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.
+ */
+
+/// <reference types="vite/client" />

airflow/providers/edge3/plugins/www/testsSetup.ts

@@ -0,0 +1,19 @@
+/*!
+ * 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 "@testing-library/jest-dom/vitest";