fix: Make zoom level a user preference (argoproj#7183)

Signed-off-by: Keith Chong <kykchong@redhat.com>
keithchong · Mar 10, 2022 · eed035b · eed035b
1 parent f905145
commit eed035b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -34,7 +34,6 @@ interface ApplicationDetailsState {
     revision?: string;
     groupedResources?: ResourceStatus[];
     slidingPanelPage?: number;
-    zoom?: number;
     filteredGraph?: any[];
 }
 
@@ -70,7 +69,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
 
     constructor(props: RouteComponentProps<{name: string}>) {
         super(props);
-        this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, zoom: 1.0, filteredGraph: []};
+        this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, filteredGraph: []};
     }
 
     private get showOperationState() {
@@ -213,15 +212,15 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                     )
                                 );
                             const {Tree, Pods, Network, List} = AppsDetailsViewKey;
-                            const zoomNum = (this.state.zoom * 100).toFixed(0);
+                            const zoomNum = ((pref.zoom || 1.0) * 100).toFixed(0);
                             const setZoom = (s: number) => {
-                                let targetZoom: number = this.state.zoom + s;
+                                let targetZoom: number = pref.zoom + s;
                                 if (targetZoom <= 0.05) {
                                     targetZoom = 0.1;
                                 } else if (targetZoom > 2.0) {
                                     targetZoom = 2.0;
                                 }
-                                this.setState({zoom: targetZoom});
+                                services.viewPreferences.updatePreferences({appDetails: {...pref, zoom: targetZoom}});
                             };
                             const setFilterGraph = (filterGraph: any[]) => {
                                 this.setState({filteredGraph: filterGraph});
@@ -322,7 +321,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                                         useNetworkingHierarchy={pref.view === 'network'}
                                                         onClearFilter={clearFilter}
                                                         onGroupdNodeClick={groupdedNodeIds => openGroupNodeDetails(groupdedNodeIds)}
-                                                        zoom={this.state.zoom}
+                                                        zoom={pref.zoom || 1.0}
                                                         filters={pref.resourceFilter}
                                                         setTreeFilterGraph={setFilterGraph}
                                                     />

diff --git a/ui/src/app/shared/services/view-preferences-service.ts b/ui/src/app/shared/services/view-preferences-service.ts
@@ -24,6 +24,7 @@ export interface AppDetailsPreferences {
     hideFilters: boolean;
     wrapLines: boolean;
     groupNodes?: boolean;
+    zoom?: number;
 }
 
 export interface PodViewPreferences {
@@ -110,7 +111,8 @@ const DEFAULT_PREFERENCES: ViewPreferences = {
         },
         darkMode: false,
         followLogs: false,
-        wrapLines: false
+        wrapLines: false,
+        zoom: 1.0
     },
     appList: {
         view: 'tiles' as AppsListViewType,