This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 8dc5fcdc6af Use UI config (#44364)
8dc5fcdc6af is described below
commit 8dc5fcdc6af7cd8e472d8ae06c80e1d5d6a72f6c
Author: Brent Bovenzi <[email protected]>
AuthorDate: Mon Nov 25 12:14:22 2024 -0500
Use UI config (#44364)
* Swap to use ui/config
* Fix type checks
* Change from True to boolean types
---
airflow/ui/src/components/DataTable/useTableUrlState.ts | 4 +---
airflow/ui/src/components/TogglePause.tsx | 5 +++--
airflow/ui/src/context/timezone/TimezoneProvider.tsx | 2 +-
airflow/ui/src/layouts/BaseLayout.tsx | 2 +-
airflow/ui/src/layouts/Nav/DocsButton.tsx | 2 +-
airflow/ui/src/pages/DagsList/Dag/Code/Code.tsx | 2 +-
airflow/ui/src/pages/DagsList/DagsFilters.tsx | 8 +++-----
airflow/ui/src/pages/DagsList/DagsList.tsx | 8 +++-----
airflow/ui/src/pages/Dashboard/Health/Health.tsx | 13 +++++--------
airflow/ui/src/queries/useConfig.tsx | 16 +++++-----------
10 files changed, 24 insertions(+), 38 deletions(-)
diff --git a/airflow/ui/src/components/DataTable/useTableUrlState.ts
b/airflow/ui/src/components/DataTable/useTableUrlState.ts
index bb249b735c8..286882bd025 100644
--- a/airflow/ui/src/components/DataTable/useTableUrlState.ts
+++ b/airflow/ui/src/components/DataTable/useTableUrlState.ts
@@ -27,9 +27,7 @@ import type { TableState } from "./types";
export const useTableURLState = (defaultState?: Partial<TableState>) => {
const [searchParams, setSearchParams] = useSearchParams();
- const configPageSize = useConfig("webserver", "page_size");
- const pageSize =
- typeof configPageSize === "string" ? parseInt(configPageSize, 10) : 50;
+ const pageSize = useConfig("page_size") as number;
const defaultTableState = {
pagination: {
diff --git a/airflow/ui/src/components/TogglePause.tsx
b/airflow/ui/src/components/TogglePause.tsx
index 9670eb372c6..87dea1cec6b 100644
--- a/airflow/ui/src/components/TogglePause.tsx
+++ b/airflow/ui/src/components/TogglePause.tsx
@@ -60,8 +60,9 @@ export const TogglePause = ({
onSuccess,
});
- const showConfirmation =
- useConfig("webserver", "require_confirmation_dag_change") === "True";
+ const showConfirmation = Boolean(
+ useConfig("require_confirmation_dag_change"),
+ );
const onToggle = useCallback(() => {
mutate({
diff --git a/airflow/ui/src/context/timezone/TimezoneProvider.tsx
b/airflow/ui/src/context/timezone/TimezoneProvider.tsx
index 5b1ef11558d..6d4dd5eb29e 100644
--- a/airflow/ui/src/context/timezone/TimezoneProvider.tsx
+++ b/airflow/ui/src/context/timezone/TimezoneProvider.tsx
@@ -33,7 +33,7 @@ export const TimezoneContext =
createContext<TimezoneContextType | undefined>(
const TIMEZONE_KEY = "timezone";
export const TimezoneProvider = ({ children }: PropsWithChildren) => {
- const defaultUITimezone = useConfig("webserver", "default_ui_timezone");
+ const defaultUITimezone = useConfig("default_ui_timezone");
const [selectedTimezone, setSelectedTimezone] = useLocalStorage(
TIMEZONE_KEY,
diff --git a/airflow/ui/src/layouts/BaseLayout.tsx
b/airflow/ui/src/layouts/BaseLayout.tsx
index 73b43a40a25..ddc3dc16ba8 100644
--- a/airflow/ui/src/layouts/BaseLayout.tsx
+++ b/airflow/ui/src/layouts/BaseLayout.tsx
@@ -25,7 +25,7 @@ import { useConfig } from "src/queries/useConfig";
import { Nav } from "./Nav";
export const BaseLayout = ({ children }: PropsWithChildren) => {
- const instanceName = useConfig("webserver", "instance_name");
+ const instanceName = useConfig("instance_name");
// const instanceNameHasMarkup =
// webserverConfig?.options.find(
// ({ key }) => key === "instance_name_has_markup",
diff --git a/airflow/ui/src/layouts/Nav/DocsButton.tsx
b/airflow/ui/src/layouts/Nav/DocsButton.tsx
index 8b305e87f0e..b6e494b4fc4 100644
--- a/airflow/ui/src/layouts/Nav/DocsButton.tsx
+++ b/airflow/ui/src/layouts/Nav/DocsButton.tsx
@@ -40,7 +40,7 @@ const links = [
];
export const DocsButton = () => {
- const showAPIDocs = useConfig("webserver", "enable_swagger_ui") === "True";
+ const showAPIDocs = Boolean(useConfig("enable_swagger_ui"));
return (
<Menu.Root positioning={{ placement: "right" }}>
diff --git a/airflow/ui/src/pages/DagsList/Dag/Code/Code.tsx
b/airflow/ui/src/pages/DagsList/Dag/Code/Code.tsx
index 8dd9a68472d..e224db5a362 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Code/Code.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Code/Code.tsx
@@ -60,7 +60,7 @@ export const Code = () => {
dagId: dagId ?? "",
});
- const defaultWrap = useConfig("webserver", "default_wrap") === "True";
+ const defaultWrap = Boolean(useConfig("default_wrap"));
const [wrap, setWrap] = useState(defaultWrap);
diff --git a/airflow/ui/src/pages/DagsList/DagsFilters.tsx
b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
index 9ec45dff164..fbce68971b2 100644
--- a/airflow/ui/src/pages/DagsList/DagsFilters.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
@@ -70,12 +70,10 @@ export const DagsFilters = () => {
orderBy: "name",
});
- const hidePausedDagsByDefault = useConfig(
- "webserver",
- "hide_paused_dags_by_default",
+ const hidePausedDagsByDefault = Boolean(
+ useConfig("hide_paused_dags_by_default"),
);
- const defaultShowPaused =
- hidePausedDagsByDefault === "True" ? "false" : "all";
+ const defaultShowPaused = hidePausedDagsByDefault ? "false" : "all";
const { setTableURLState, tableURLState } = useTableURLState();
const { pagination, sorting } = tableURLState;
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx
b/airflow/ui/src/pages/DagsList/DagsList.tsx
index daa931e5464..66f1bd8a700 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -159,12 +159,10 @@ export const DagsList = () => {
"card",
);
- const hidePausedDagsByDefault = useConfig(
- "webserver",
- "hide_paused_dags_by_default",
+ const hidePausedDagsByDefault = Boolean(
+ useConfig("hide_paused_dags_by_default"),
);
- const defaultShowPaused =
- hidePausedDagsByDefault === "True" ? false : undefined;
+ const defaultShowPaused = hidePausedDagsByDefault ? false : undefined;
const showPaused = searchParams.get(PAUSED_PARAM);
diff --git a/airflow/ui/src/pages/Dashboard/Health/Health.tsx
b/airflow/ui/src/pages/Dashboard/Health/Health.tsx
index 42829a69581..0694283930c 100644
--- a/airflow/ui/src/pages/Dashboard/Health/Health.tsx
+++ b/airflow/ui/src/pages/Dashboard/Health/Health.tsx
@@ -21,16 +21,12 @@ import { MdOutlineHealthAndSafety } from "react-icons/md";
import { useMonitorServiceGetHealth } from "openapi/queries";
import { ErrorAlert } from "src/components/ErrorAlert";
-import { useConfig } from "src/queries/useConfig";
import { HealthTag } from "./HealthTag";
export const Health = () => {
const { data, error, isLoading } = useMonitorServiceGetHealth();
- const isStandaloneDagProcessor =
- useConfig("scheduler", "standalone_dag_processor") === "True";
-
return (
<Box>
<Flex color="fg.muted" mb={2}>
@@ -58,14 +54,15 @@ export const Health = () => {
status={data?.triggerer.status}
title="Triggerer"
/>
- {isStandaloneDagProcessor ? (
+ {/* TODO: Update this to match the API when we move the config check
to the API level */}
+ {data?.dag_processor.status === undefined ? undefined : (
<HealthTag
isLoading={isLoading}
-
latestHeartbeat={data?.dag_processor.latest_dag_processor_heartbeat}
- status={data?.dag_processor.status}
+ latestHeartbeat={data.dag_processor.latest_dag_processor_heartbeat}
+ status={data.dag_processor.status}
title="Dag Processor"
/>
- ) : undefined}
+ )}
</HStack>
</Box>
);
diff --git a/airflow/ui/src/queries/useConfig.tsx
b/airflow/ui/src/queries/useConfig.tsx
index 7dd17ef27bf..a77a6613bfa 100644
--- a/airflow/ui/src/queries/useConfig.tsx
+++ b/airflow/ui/src/queries/useConfig.tsx
@@ -16,17 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useConfigServiceGetConfig } from "openapi/queries";
+import { useConfigServiceGetConfigs } from "openapi/queries";
+import type { ConfigResponse } from "openapi/requests/types.gen";
-export const useConfig = (sectionName: string, configKey: string) => {
- // TODO: replace with a ui/config endpoint which will always return what the
UI need to render
- const { data: config } = useConfigServiceGetConfig({
- accept: "application/json",
- });
+export const useConfig = (configKey: keyof ConfigResponse) => {
+ const { data: config } = useConfigServiceGetConfigs();
- const configSection = config?.sections.find(
- (section) => section.name === sectionName,
- );
-
- return configSection?.options.find(({ key }) => key === configKey)?.value;
+ return config?.[configKey];
};
