frontend: Add detail drawer mode #1447

vyncent-t · 2023-10-10T14:46:52Z

Introduce Detail Drawer Mode in Headlamp

For issue #1354

Description

This PR introduces a new 'Detail Drawer' mode to Headlamp, providing users with the option to view details in a side drawer. This enhances the user interface by allowing for a more flexible and efficient way of displaying detailed information without navigating away from the current view.

Features

Implemented the Detail Drawer mode.
Added toggle functionality to enable/disable the Detail Drawer view.
Ensured seamless integration of the side drawer with existing UI components.

Verification

Verified that the detail information is accurately displayed in the drawer.
Checked the responsiveness and consistency of the drawer across different screen sizes and orientations.

WIP

Progress

No longer using placeholder button to open and close drawer
Solved issue where clicking on a drawer link in a different list view would render pod list view
Solved issue where drawers were not responsive
Working drawer mode toggle in general settings, toggle switch 'Details on list view'

Issues

vyncent-t · 2023-10-11T20:39:32Z

Commit Notes

Fixes broken switch in settings, used to only turn enable/disable once due to reading from localStorage and not global state
Fixed detail drawer enabled mode from setting back to default, improved local storage usage fixed it

vyncent-t · 2023-11-29T20:03:24Z

Note

fixes the issue where changes made would not run with new UI

vyncent-t · 2023-11-29T20:31:12Z

note

fixes translation
need to fix label *

vyncent-t · 2023-12-04T20:17:13Z

Work note

Progress

Pro: When the drawer is on open mode, you can now click the button which will minimize it to the closed mode off to the right
Pro: Able to see behind drawer with no backdrop

Issues

Issue: When the drawer is in the Closed Mode, there is no pushing the content to the middle of the screen, it sits on top of the right of the page and not next to it
Issue: The main content is still unable to be clicked on, which could be good since you can bet focused on clicking links in the main menu?
Issue: When refreshing the page on the settings view, the drawer mode is set to enabled and open by default, it needs to be taking the state of the last made changes
- Currently if you turn off the drawer mode it will be turned on automatically when refreshing the settings page
Issue: The "flat" drawer is not rendering anything inside it
- it also does not stay on the screen
- It leaves when you move pages

vyncent-t · 2023-12-07T16:34:27Z

vyncent-t · 2023-12-08T15:56:47Z

Commit fix pushed

Issue: When clicking the enable button the box is not matching the enable (FIXED, now when clicking the enable drawer mode on or off the drawer render will match)
Issue: The main content is still unable to be clicked on, which could be good since you can bet focused on clicking links in the main menu ( FIXED, now able to use main page content when drawer is in mini mode)
Issue: When refreshing the page on the settings view, the drawer mode is set to enabled and open by default, it needs to be taking the state of the last made changes (FIXED, now when choosing on or off for enable button, when refreshing the page or leaving the page the state is saved and renders on or off)

vyncent-t · 2023-12-08T20:54:42Z

Solved by creation of working placeholder button

Issue: When the drawer is in the Closed Mode the top bar content is squished

vyncent-t · 2023-12-11T18:12:35Z

After a considerable amount of time spent on working in a closed drawer version (a squished column to the right of the screen) I think the better solution would be to use a floating drawer open button which has fixed a number of issues related to the original squished drawer idea

Fixes

Issue: When the drawer is in the Closed Mode the top bar content is squished (FIXED, created a working placeholder button)
Issue: When the drawer is in the Closed Mode, there is no pushing the content to the middle of the screen, it sits on top of the right of the page and not next to it (FIXED, created a working placeholder button)
Issue: The "flat" drawer is not rendering anything inside it (FIXED, created a working placeholder button)
Issue: When the drawer is in the Closed Mode the top bar content is squished (FIXED, created a working placeholder button)

Issues

Issue: Drawer state is reset when refreshing the page
Placeholder button now implemented, but not keeping the same shape when on settings page

Pod view

Settings

Solved

Pod

Settings

vyncent-t · 2023-12-11T20:45:02Z

Solved

Issue: Placeholder button now implemented, but not keeping the same shape when on settings page

vyncent-t · 2023-12-15T16:06:55Z

Solved

Issue: Drawer state is reset when refreshing the page (FIXED, now pulling and setting open status from local storage for drawer mode and open drawer)

vyncent-t · 2023-12-15T20:29:34Z

ISSUE

Currently the iframes render within another iframe, need actual content within frame

illume · 2023-12-28T16:55:41Z

Some meeting notes...

We need to get the design considered more I think
- What should the text be in the settings
  - Details on side of list view
  - Details at same time as list
  - View in details side draw
  - Details on list view <---- chose this one for now
- Does this setting need an extra info tooltip for a longer description of what it is?
  - Decide later.
- What text should be for the drawer button name?
  - No open drawer button.
- Should there be a button to leave the drawer open at all? Maybe it should be always open, with no option to toggle it (except in settings).
  - no there should not be a button
- What would a mobile view look like?
  - The drawer doesn't make sense in mobile mode, so we disable it in mobile view.
- Should it squish the table, or be an overlay?
  - The issue asks for a Drawer, so will do a Drawer.
    - One issue with this is that all the table data can't be seen when the drawer is opened
    - For a large screen, it would probably be better if the table data can all be seen
- Should the open drawer button be like the sidebar?
  - No, just like a mui drawer with a backdrop
Persistence of the drawer
- We will keep it so the drawer is not persistent. When the view changes, the drawer won't be there.
iframes
- We won't do iframes, because it's a bit hacky. It loads the whole page without a way to disable sidebars/top bars and other parts. The UX is more difficult with iframes.
We need a URL for the view with the drawer open. So if someone copies the URL to someone else they would have the same view.
- this URL scheme doesn't work because the component will reload and navigate
  - /c/minikube/pods
  - /c/minikube/pods/kube-system/coredns-xkjxckvjxkcjv
  - /c/minikube/pods/kube-system/coredns-xkjxckvjxkcjv/drawer <- this one would show the list and the pod details at the same time.
- we want to not reload the page, so use query params?
  - /c/minikube/pods?name=coredns-xkjxckvjxkcjv&namespace=kube-system

experiments in drawer-details2 branch
See frontend/src/components/pod/Details.tsx to take the name and namespace from query params or params. So if there are query params it uses those. This should allow using the Details component inside the List component.

The next step is to change the Link inside frontend/src/components/common/Link.tsx to when drawer setting is turned on to produce links like /c/minikube/pods?name=coredns-xkjxckvjxkcjv&namespace=kube-system instead of /c/minikube/pods/kube-system/coredns-xkjxckvjxkcjv

Add a method to get the searchParams for a resource in headlamp/frontend/src/lib/k8s/cluster.ts something like:

    getListPlusDetails() {
      // return a link like this: /c/minikube/pods?name=coredns-xkjxckvjxkcjv&namespace=kube-system
      // returns listRoute + ?name=&namespace=
    }

vyncent-t · 2024-01-02T17:20:38Z

Dev note:
This push adds working functionality between the state of isDetailDrawerEnabled and the kind of list link that will render on the pod details view

The idea is to change the links based on if the isDetailDrawerEnabled is set to on or off
- If the isDetailDrawerEnabled is set to on, we pass it as a param (drawerEnabled?) to the Link component, which will then render the route with the '/drawer' added to the url
- the toggle setting option for Details on list view can be used to turn on and off this link render
- placeholder route has been created in the router PodDrawer

To test:

navigate to the general settings and toggle the Details on list view button on/off
in a different window navigate to the pods list view
hover mouse over each link to read if the link contains /drawer at the end (present if set to on, normal link if set to off, both will direct you to the same place)

vyncent-t · 2024-11-12T16:53:47Z

last push:

I think this fixes the typescript error for kubeObject & void return

setting the slice state for the current resource to be just the json part of the kubeObject being set (we were extracting just the json part anyway to render in the drawer from the selectedResource state (DetailsDrawer.tsx line 9)

DetailsDrawer

Link

vyncent-t · 2024-11-21T16:19:08Z

@sniok review ready

frontend/src/components/App/Layout.tsx

frontend/src/components/App/Settings/DrawerModeButton.tsx

sniok · 2024-11-22T09:44:42Z

frontend/src/components/App/Settings/DrawerModeButton.tsx

+
+  // DETAIL DRAWER MODE
+  const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  const [isDrawerEnabled, changeDetailDrawerEnabled] = useState<any>(isDetailDrawerEnabled);


isDrawerEnabled is duplicated state, use only the state from the store instead

you moved the initial value inside the useState which wasn't my point. I mean that useState is not needed here, you can use state.drawerMode.isDetailDrawerEnabled directly by reading from redux and setting value directly to redux.

Then you won't have duplicated state and won't need useEffect on line 25 that syncs value to the redux store and dispatches on line 18-22

const isDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); const setIsDrawerEnabled = (isEnabled: boolean) => dispatch(setDetailDrawerEnabled(isEnabled));

frontend/src/components/App/Settings/DrawerModeButton.tsx

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

frontend/src/components/common/Link.tsx

frontend/src/redux/drawerModeSlice.ts

sniok · 2024-11-27T10:44:59Z

frontend/src/i18n/locales/de/translation.json

@@ -53,8 +53,9 @@
  "Delete Plugin": "",
  "Are you sure you want to delete this plugin?": "",
  "Save": "",
-  "Uh-oh! Something went wrong.": "Oh-oh! Etwas ist schief gelaufen.",
+  "Uh-oh! Something went wrong.": "",


this translation is gone

running i18n removes it

sniok · 2024-11-27T10:46:16Z

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

+          <Box width={800}>
+            <Box style={{ marginTop: '5rem', marginBottom: '2rem' }}>
+              <Button variant="outlined" color="primary" onClick={() => closeDrawer()}>
+                Close


this string is not translated

sniok · 2024-11-27T10:47:50Z

frontend/src/components/App/Settings/DrawerModeButton.tsx

+
+  // NOTICE THAT WE DO NOT USE isDrawerEnabled TO DETERMINE HOW THE SWITCH IS RENDERED UNDER THE CHECKED PROP, THIS IS BECAUSE THE USEEFFECT WILL RERENDER THE COMPONENT WITH THE NEW STATE
+  return (
+    <FormControlLabel


I think this setting needs some explanation for what "Drawer mode" is. Just a Switch with label "drawer mode" won't be clear to everyone

added a tooltip explanation

vyncent-t · 2024-12-03T20:14:09Z

added description to drawer mode button

fixed drawer not working on app mode (currently only updating the URL for browser mode)

frontend/src/components/App/Settings/DrawerModeButton.tsx

sniok · 2024-12-10T10:26:00Z

frontend/src/components/App/Settings/DrawerModeButton.tsx

+
+  // DETAIL DRAWER MODE
+  const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  const [isDrawerEnabled, changeDetailDrawerEnabled] = useState<any>(isDetailDrawerEnabled);


sniok · 2024-12-10T10:27:51Z

Could you also try to split the commit into separate ones? For example one with adding the slice, another with settings, another with updates to the Link, etc

frontend/src/components/App/Settings/DrawerModeSettings.tsx

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

frontend/src/components/common/Link.tsx

frontend/src/redux/drawerModeSlice.ts

frontend/src/components/App/Settings/DrawerModeSettings.tsx

Signed-off-by: Vincent T <[email protected]>

vyncent-t force-pushed the details-drawer branch 2 times, most recently from d115bb2 to 3f7e7c1 Compare October 11, 2023 20:33

vyncent-t force-pushed the details-drawer branch from 3f7e7c1 to 64cb1e2 Compare November 29, 2023 20:02

vyncent-t force-pushed the details-drawer branch from 64cb1e2 to b49bdef Compare November 29, 2023 20:30

vyncent-t self-assigned this Nov 29, 2023

vyncent-t force-pushed the details-drawer branch from b49bdef to e828312 Compare December 4, 2023 20:14

vyncent-t force-pushed the details-drawer branch from e828312 to 49e7160 Compare December 7, 2023 16:33

vyncent-t force-pushed the details-drawer branch from 49e7160 to b2c9f0b Compare December 8, 2023 15:55

vyncent-t force-pushed the details-drawer branch from b2c9f0b to 5e443f0 Compare December 11, 2023 18:10

vyncent-t force-pushed the details-drawer branch from 5e443f0 to e313b44 Compare December 11, 2023 20:05

vyncent-t force-pushed the details-drawer branch 3 times, most recently from 63f5c73 to 3bd3c63 Compare December 15, 2023 16:05

vyncent-t requested a review from illume December 28, 2023 16:39

vyncent-t force-pushed the details-drawer branch from 3bd3c63 to e3ddd00 Compare January 2, 2024 17:07

vyncent-t force-pushed the details-drawer branch 2 times, most recently from 33bbf31 to c3df513 Compare January 3, 2024 16:09

vyncent-t marked this pull request as ready for review November 12, 2024 18:09

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Nov 12, 2024

vyncent-t requested a review from sniok November 12, 2024 18:10

vyncent-t force-pushed the details-drawer branch from ea8417c to d96ab40 Compare November 21, 2024 15:51

sniok requested changes Nov 22, 2024

View reviewed changes

vyncent-t force-pushed the details-drawer branch from d96ab40 to 68644ca Compare November 26, 2024 19:16

sniok reviewed Nov 27, 2024

View reviewed changes

vyncent-t force-pushed the details-drawer branch 3 times, most recently from 93d716c to d08eeda Compare December 3, 2024 20:11

vyncent-t force-pushed the details-drawer branch from d08eeda to 0eb2776 Compare December 6, 2024 16:11

sniok reviewed Dec 10, 2024

View reviewed changes

vyncent-t force-pushed the details-drawer branch 3 times, most recently from af8bdbb to aaed78e Compare December 10, 2024 15:36

sniok requested changes Dec 10, 2024

View reviewed changes

sniok reviewed Dec 10, 2024

View reviewed changes

frontend/src/components/App/Settings/DrawerModeSettings.tsx Outdated Show resolved Hide resolved

vyncent-t added 6 commits December 10, 2024 15:43

frontend: DetailsDrawer: Add details drawer comp

ee1e3a4

Signed-off-by: Vincent T <[email protected]>

frontend: DrawerModeSettings: Add drawer mode settings comp

eb67f4c

Signed-off-by: Vincent T <[email protected]>

frontend: drawerModeSlice: Add drawer mode redux slice

0408afc

Signed-off-by: Vincent T <[email protected]>

frontend: Link: Add drawer logic to links

9cec3e8

Signed-off-by: Vincent T <[email protected]>

frontend: Settings: Add stories for drawer mode

a19be06

Signed-off-by: Vincent T <[email protected]>

frontend: i18n: Add translations for drawer mode

aab4894

Signed-off-by: Vincent T <[email protected]>

vyncent-t force-pushed the details-drawer branch from 8bd6eed to aab4894 Compare December 10, 2024 20:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

frontend: Add detail drawer mode #1447

frontend: Add detail drawer mode #1447

vyncent-t commented Oct 10, 2023 •

edited

Loading

vyncent-t commented Oct 11, 2023

vyncent-t commented Nov 29, 2023

vyncent-t commented Nov 29, 2023

vyncent-t commented Dec 4, 2023 •

edited

Loading

vyncent-t commented Dec 7, 2023 •

edited

Loading

vyncent-t commented Dec 8, 2023 •

edited

Loading

vyncent-t commented Dec 8, 2023 •

edited

Loading

vyncent-t commented Dec 11, 2023 •

edited

Loading

vyncent-t commented Dec 11, 2023 •

edited

Loading

vyncent-t commented Dec 15, 2023 •

edited

Loading

vyncent-t commented Dec 15, 2023

illume commented Dec 28, 2023 •

edited

Loading

vyncent-t commented Jan 2, 2024

vyncent-t commented Nov 12, 2024 •

edited

Loading

vyncent-t commented Nov 21, 2024

sniok Nov 22, 2024

vyncent-t Nov 26, 2024

sniok Nov 27, 2024 •

edited

Loading

sniok Dec 10, 2024

vyncent-t Dec 10, 2024

sniok Nov 27, 2024

vyncent-t Dec 3, 2024

vyncent-t Dec 6, 2024

sniok Nov 27, 2024

vyncent-t Dec 3, 2024

sniok Nov 27, 2024

vyncent-t Dec 3, 2024

vyncent-t commented Dec 3, 2024

sniok Dec 10, 2024

sniok commented Dec 10, 2024

frontend: Add detail drawer mode #1447

Are you sure you want to change the base?

frontend: Add detail drawer mode #1447

Conversation

vyncent-t commented Oct 10, 2023 • edited Loading

Introduce Detail Drawer Mode in Headlamp

Description

Features

Verification

WIP

Progress

Issues

vyncent-t commented Oct 11, 2023

vyncent-t commented Nov 29, 2023

vyncent-t commented Nov 29, 2023

vyncent-t commented Dec 4, 2023 • edited Loading

Progress

Issues

vyncent-t commented Dec 7, 2023 • edited Loading

Progress

Issues

vyncent-t commented Dec 8, 2023 • edited Loading

vyncent-t commented Dec 8, 2023 • edited Loading

vyncent-t commented Dec 11, 2023 • edited Loading

Fixes

Issues

Solved

vyncent-t commented Dec 11, 2023 • edited Loading

Solved

vyncent-t commented Dec 15, 2023 • edited Loading

Solved

vyncent-t commented Dec 15, 2023

ISSUE

illume commented Dec 28, 2023 • edited Loading

vyncent-t commented Jan 2, 2024

vyncent-t commented Nov 12, 2024 • edited Loading

DetailsDrawer

Link

vyncent-t commented Nov 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sniok Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vyncent-t commented Dec 3, 2024

Choose a reason for hiding this comment

sniok commented Dec 10, 2024

vyncent-t commented Oct 10, 2023 •

edited

Loading

vyncent-t commented Dec 4, 2023 •

edited

Loading

vyncent-t commented Dec 7, 2023 •

edited

Loading

vyncent-t commented Dec 8, 2023 •

edited

Loading

vyncent-t commented Dec 8, 2023 •

edited

Loading

vyncent-t commented Dec 11, 2023 •

edited

Loading

vyncent-t commented Dec 11, 2023 •

edited

Loading

vyncent-t commented Dec 15, 2023 •

edited

Loading

illume commented Dec 28, 2023 •

edited

Loading

vyncent-t commented Nov 12, 2024 •

edited

Loading

sniok Nov 27, 2024 •

edited

Loading