fix(ui): carry over state when using full screen mode button (#20022)

Author: linghaoSu

ui/src/app/applications/components/pod-logs-viewer/fullscreen-button.tsx

@@ -12,10 +12,15 @@ export const FullscreenButton = ({
     kind,
     name,
     namespace,
-    podName
+    podName,
+    viewPodNames,
+    viewTimestamps,
+    follow,
+    showPreviousLogs
 }: PodLogsProps & {fullscreen?: boolean}) => {
     const fullscreenURL =
-        `/applications/${applicationNamespace}/${applicationName}/${namespace}/${containerName}/logs?` + `podName=${podName}&group=${group}&kind=${kind}&name=${name}`;
+        `/applications/${applicationNamespace}/${applicationName}/${namespace}/${containerName}/logs?` +
+        `podName=${podName}&group=${group}&kind=${kind}&name=${name}&viewPodNames=${viewPodNames}&viewTimestamps=${viewTimestamps}&follow=${follow}&showPreviousLogs=${showPreviousLogs}`;
     return (
         !fullscreen && (
             <Link to={fullscreenURL} target='_blank' rel='noopener noreferrer'>

ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx

@@ -40,6 +40,10 @@ export interface PodLogsProps {
     containerGroups?: any[];
     onClickContainer?: (group: any, i: number, tab: string) => void;
     fullscreen?: boolean;
+    viewPodNames?: boolean;
+    viewTimestamps?: boolean;
+    follow?: boolean;
+    showPreviousLogs?: boolean;
 }
 
 // ansi colors, see https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
@@ -86,11 +90,29 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
     const [logs, setLogs] = useState<LogEntry[]>([]);
     const logsContainerRef = useRef(null);
 
-    useEffect(() => {
-        if (viewPodNames) {
-            setViewTimestamps(false);
+    const setWithQueryParams = <T extends (val: any) => void>(key: string, cb: T) => {
+        history.replaceState(null, '', `${location.pathname}?${queryParams}`);
+
+        return (val => {
+            cb(val);
+            queryParams.set(key, val.toString());
+            history.replaceState(null, '', `${location.pathname}?${queryParams}`);
+        }) as T;
+    };
+
+    const setViewPodNamesWithQueryParams = setWithQueryParams('viewPodNames', setViewPodNames);
+    const setViewTimestampsWithQueryParams = setWithQueryParams('viewTimestamps', setViewTimestamps);
+    const setFollowWithQueryParams = setWithQueryParams('follow', setFollow);
+    const setPreviousLogsWithQueryParams = setWithQueryParams('showPreviousLogs', setPreviousLogs);
+    const setTailWithQueryParams = setWithQueryParams('tail', setTail);
+    const setFilterWithQueryParams = setWithQueryParams('filterText', setFilter);
+
+    const onToggleViewPodNames = (val: boolean) => {
+        setViewPodNamesWithQueryParams(val);
+        if (val) {
+            setViewTimestampsWithQueryParams(false);
         }
-    }, [viewPodNames]);
+    };
 
     useEffect(() => {
         // https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
@@ -165,32 +187,32 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
                     <React.Fragment>
                         <div className='pod-logs-viewer__settings'>
                             <span>
-                                <FollowToggleButton follow={follow} setFollow={setFollow} />
+                                <FollowToggleButton follow={follow} setFollow={setFollowWithQueryParams} />
                                 {follow && <AutoScrollButton scrollToBottom={scrollToBottom} setScrollToBottom={setScrollToBottom} />}
-                                <ShowPreviousLogsToggleButton setPreviousLogs={setPreviousLogs} showPreviousLogs={previous} />
+                                <ShowPreviousLogsToggleButton setPreviousLogs={setPreviousLogsWithQueryParams} showPreviousLogs={previous} />
                                 <Spacer />
                                 <ContainerSelector containerGroups={containerGroups} containerName={containerName} onClickContainer={onClickContainer} />
                                 <Spacer />
                                 {!follow && (
                                     <>
                                         <SinceSecondsSelector sinceSeconds={sinceSeconds} setSinceSeconds={n => setSinceSeconds(n)} />
-                                        <TailSelector tail={tail} setTail={setTail} />
+                                        <TailSelector tail={tail} setTail={setTailWithQueryParams} />
                                     </>
                                 )}
-                                <LogMessageFilter filterText={filter} setFilterText={setFilter} />
+                                <LogMessageFilter filterText={filter} setFilterText={setFilterWithQueryParams} />
                             </span>
                             <Spacer />
                             <span>
                                 <WrapLinesButton prefs={prefs} />
-                                <PodNamesToggleButton viewPodNames={viewPodNames} setViewPodNames={setViewPodNames} />
-                                <TimestampsToggleButton setViewTimestamps={setViewTimestamps} viewTimestamps={viewTimestamps} timestamp={timestamp} />
+                                <PodNamesToggleButton viewPodNames={viewPodNames} setViewPodNames={onToggleViewPodNames} />
+                                <TimestampsToggleButton setViewTimestamps={setViewTimestampsWithQueryParams} viewTimestamps={viewTimestamps} timestamp={timestamp} />
                                 <DarkModeToggleButton prefs={prefs} />
                             </span>
                             <Spacer />
                             <span>
                                 <CopyLogsButton logs={logs} />
                                 <DownloadLogsButton {...props} />
-                                <FullscreenButton {...props} />
+                                <FullscreenButton {...props} viewPodNames={viewPodNames} viewTimestamps={viewTimestamps} follow={follow} showPreviousLogs={previous} />
                             </span>
                         </div>
                         <div className={classNames('pod-logs-viewer', {'pod-logs-viewer--inverted': prefs.appDetails.darkMode})} onWheel={handleScroll}>