Issue #337 - remember my resource filtering preferences

Author: Alexander Matyushentsev

src/app/app.tsx

@@ -4,8 +4,10 @@ import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import { Redirect, Route, RouteComponentProps, Router, Switch } from 'react-router';
 
+import { services } from './shared/services';
 import requests from './shared/services/requests';
 
+services.viewPreferences.init();
 export const history = createHistory();
 
 import applications from './applications';

src/app/applications/components/application-details/application-details.tsx

@@ -24,18 +24,19 @@ import * as AppUtils from '../utils';
 
 require('./application-details.scss');
 
-export class ApplicationDetails extends React.Component<RouteComponentProps<{ name: string; namespace: string; }>, { application: appModels.Application }> {
+export class ApplicationDetails extends React.Component<RouteComponentProps<{ name: string; }>, { application: appModels.Application; defaultKindFilter: string[]}> {
 
     public static contextTypes = {
         apis: PropTypes.object,
     };
 
     private changesSubscription: Subscription;
+    private viewPrefSubscription: Subscription;
     private formApi: FormApi;
 
-    constructor(props: RouteComponentProps<{ name: string; namespace: string; }>) {
+    constructor(props: RouteComponentProps<{ name: string; }>) {
         super(props);
-        this.state = { application: null};
+        this.state = { application: null, defaultKindFilter: [] };
     }
 
     private get showOperationState() {
@@ -82,6 +83,11 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
         this.changesSubscription = appUpdates.subscribe((application) => {
             this.setState({ application });
         });
+        this.viewPrefSubscription = services.viewPreferences.getPreferences()
+            .map((preferences) => preferences.appDetails.defaultKindFilter)
+            .subscribe((filter) => {
+                this.setState({ defaultKindFilter: filter });
+            });
     }
 
     public componentWillUnmount() {
@@ -106,6 +112,11 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
             selectedValues: kindsFilter,
             selectionChanged: (items) => {
                 this.appContext.apis.navigation.goto('.', { kinds: `${items.join(',')}`});
+                services.viewPreferences.updatePreferences({
+                    appDetails: {
+                        defaultKindFilter: items,
+                    },
+                });
             },
         };
 
@@ -233,7 +244,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
     private getKindsFilter() {
         let kinds = new URLSearchParams(this.props.history.location.search).get('kinds');
         if (kinds === null) {
-            kinds = 'Deployment,Service,Pod,StatefulSet';
+            kinds = this.state.defaultKindFilter.join(',');
         }
         return kinds.split(',').filter((item) => !!item);
     }
@@ -387,5 +398,9 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
             this.changesSubscription.unsubscribe();
         }
         this.changesSubscription = null;
+        if (this.viewPrefSubscription) {
+            this.viewPrefSubscription.unsubscribe();
+            this.viewPrefSubscription = null;
+        }
     }
 }

src/app/shared/services/index.ts

@@ -4,6 +4,7 @@ import { ClustersService } from './clusters-service';
 import { ProjectsService } from './projects-service';
 import { RepositoriesService } from './repo-service';
 import { UserService } from './user-service';
+import { ViewPreferencesService } from './view-preferences-service';
 
 export interface Services {
     applications: ApplicationsService;
@@ -12,6 +13,7 @@ export interface Services {
     reposService: RepositoriesService;
     clustersService: ClustersService;
     projects: ProjectsService;
+    viewPreferences: ViewPreferencesService;
 }
 
 export const services: Services = {
@@ -21,4 +23,5 @@ export const services: Services = {
     userService: new UserService(),
     reposService: new RepositoriesService(),
     projects: new ProjectsService(),
+    viewPreferences: new ViewPreferencesService(),
 };

src/app/shared/services/view-preferences-service.ts

@@ -0,0 +1,49 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export interface ViewPreferences {
+    appDetails: { defaultKindFilter: string[] };
+}
+
+const VIEW_PREFERENCES_KEY = 'view_preferences';
+
+const DEFAULT_PREFERENCES = {
+    appDetails: { defaultKindFilter: ['Deployment', 'Service', 'Pod', 'StatefulSet', 'Ingress', 'ConfigMap'] },
+};
+
+export class ViewPreferencesService {
+    private preferencesSubj: BehaviorSubject<ViewPreferences>;
+
+    public init() {
+        if (!this.preferencesSubj) {
+            this.preferencesSubj = new BehaviorSubject(this.loadPreferences());
+            window.addEventListener('storage', () => {
+                this.preferencesSubj.next(this.loadPreferences());
+            });
+        }
+    }
+
+    public getPreferences(): Observable<ViewPreferences> {
+        return this.preferencesSubj;
+    }
+
+    public updatePreferences(change: Partial<ViewPreferences>) {
+        const nextPref = Object.assign({}, this.preferencesSubj.getValue(), change);
+        window.localStorage.setItem(VIEW_PREFERENCES_KEY, JSON.stringify(nextPref));
+        this.preferencesSubj.next(nextPref);
+    }
+
+    private loadPreferences(): ViewPreferences {
+        let preferences: ViewPreferences;
+        const preferencesStr = window.localStorage.getItem(VIEW_PREFERENCES_KEY);
+        if (preferencesStr) {
+            try {
+                preferences = JSON.parse(preferencesStr);
+            } catch (e) {
+                preferences = DEFAULT_PREFERENCES;
+            }
+        } else {
+            preferences = DEFAULT_PREFERENCES;
+        }
+        return preferences;
+    }
+}