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 c1cffb4aadc Added a default detailed view option in user settings
(#47879)
c1cffb4aadc is described below
commit c1cffb4aadcbcf661a87a290934a3367f1ee29d1
Author: Aritra Basu <[email protected]>
AuthorDate: Tue Mar 18 23:11:46 2025 +0530
Added a default detailed view option in user settings (#47879)
* Added a default detailed view option in user settings
Added an additional option under user settings for
the default view for detailed view. This should
ideally go under a settings page or some other full
user settings page. But since that isn't there today
put it here. We could move it later.
* Added styling to User default view button
---
airflow/ui/src/layouts/Details/DetailsLayout.tsx | 4 ++--
airflow/ui/src/layouts/Nav/UserSettingsButton.tsx | 21 ++++++++++++++++++++-
2 files changed, 22 insertions(+), 3 deletions(-)
diff --git a/airflow/ui/src/layouts/Details/DetailsLayout.tsx
b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
index 1eafd7cf107..7902278af94 100644
--- a/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -50,8 +50,8 @@ export const DetailsLayout = ({ children, error, isLoading,
tabs }: Props) => {
const { dagId = "" } = useParams();
const { data: dag } = useDagServiceGetDag({ dagId });
-
- const [dagView, setDagView] = useLocalStorage<"graph" |
"grid">(`dag_view-${dagId}`, "grid");
+ const [defaultDagView] = useLocalStorage<"graph" |
"grid">("default_dag_view", "grid");
+ const [dagView, setDagView] = useLocalStorage<"graph" |
"grid">(`dag_view-${dagId}`, defaultDagView);
const { fitView, getZoom } = useReactFlow();
diff --git a/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
b/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
index b7defe8af73..2d79d43629c 100644
--- a/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
+++ b/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
@@ -20,7 +20,9 @@ import { useDisclosure } from "@chakra-ui/react";
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
-import { FiClock, FiLogOut, FiMoon, FiSun, FiUser } from "react-icons/fi";
+import { FiClock, FiGrid, FiLogOut, FiMoon, FiSun, FiUser } from
"react-icons/fi";
+import { MdOutlineAccountTree } from "react-icons/md";
+import { useLocalStorage } from "usehooks-ts";
import { Menu } from "src/components/ui";
import { useColorMode } from "src/context/colorMode/useColorMode";
@@ -38,6 +40,7 @@ export const UserSettingsButton = () => {
const { onClose: onCloseTimezone, onOpen: onOpenTimezone, open:
isOpenTimezone } = useDisclosure();
const { onClose: onCloseLogout, onOpen: onOpenLogout, open: isOpenLogout } =
useDisclosure();
const { selectedTimezone } = useTimezone();
+ const [dagView, setDagView] = useLocalStorage<"graph" |
"grid">("default_dag_view", "grid");
return (
<Menu.Root positioning={{ placement: "right" }}>
@@ -58,6 +61,22 @@ export const UserSettingsButton = () => {
</>
)}
</Menu.Item>
+ <Menu.Item
+ onClick={() => (dagView === "grid" ? setDagView("graph") :
setDagView("grid"))}
+ value={dagView}
+ >
+ {dagView === "grid" ? (
+ <>
+ <MdOutlineAccountTree size="1.25rem" style={{ marginRight: "8px"
}} />
+ Default to graph view
+ </>
+ ) : (
+ <>
+ <FiGrid size="1.25rem" style={{ marginRight: "8px" }} />
+ Default to grid view
+ </>
+ )}
+ </Menu.Item>
<Menu.Item onClick={onOpenTimezone} value="timezone">
<FiClock size="1.25rem" style={{ marginRight: "8px" }} />
{dayjs().tz(selectedTimezone).format("HH:mm z (Z)")}
