Feature/add auto refresh to edge react UI

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

@@ -23,7 +23,7 @@ import { FC } from "react";
 
 import { ColorModeProvider } from "src/context/colorMode";
 import { EdgeLayout } from "src/layouts/EdgeLayout";
-import { tokenHandler } from "src/utils/tokenHandler";
+import { tokenHandler } from "src/utils";
 
 import { system } from "./theme";
 

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

@@ -20,14 +20,17 @@ import { Box, Table } from "@chakra-ui/react";
 import { useUiServiceJobs } from "openapi/queries";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { autoRefreshInterval } from "src/utils";
 
 export const JobsPage = () => {
-  const { data, error } = useUiServiceJobs();
+  const { data, error } = useUiServiceJobs(undefined, {
+    enabled: true,
+    refetchInterval: autoRefreshInterval,
+  });
 
   // TODO to make it proper
   // Beautification of state like in Airflow 2
   // Use DataTable as component from Airflow-Core UI
-  // Add auto-refresh
   // Add sorting
   // Add filtering
   // Add links to see job details / jobs list

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

@@ -20,14 +20,17 @@ import { Box, Table } from "@chakra-ui/react";
 import { useUiServiceWorker } from "openapi/queries";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { autoRefreshInterval } from "src/utils";
 
 export const WorkerPage = () => {
-  const { data, error } = useUiServiceWorker();
+  const { data, error } = useUiServiceWorker(undefined, {
+    enabled: true,
+    refetchInterval: autoRefreshInterval,
+  });
 
   // TODO to make it proper
   // Beautification of state like in Airflow 2
   // Use DataTable as component from Airflow-Core UI
-  // Add auto-refresh
   // Add actions for maintenance / delete of orphan worker
   // Add sorting
   // Add filtering

providers/edge3/src/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;

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

@@ -17,4 +17,6 @@
  * under the License.
  */
 
+export { autoRefreshInterval } from "./config";
 export { useContainerWidth } from "./useContainerWidth";
+export { tokenHandler } from "./tokenHandler";

providers/edge3/www-hash.txt

@@ -1 +1 @@
-b4f3db4634eb0dc143fec40c0248e7412ab23b9b067acd7dffe226e874315cf3
+33ac5e99982b8cf9795aff82a9b08baf5a5c2d13d71d1be72a5ffd664f8e14c1