From b057484cb17d60aa301d48099051eabaa00f9d24 Mon Sep 17 00:00:00 2001
From: Jon Jackson <jonjacks@redhat.com>
Date: Mon, 25 Mar 2019 12:53:27 -0400
Subject: [PATCH] Move overview group and filter state to redux

---
 .../public/components/overview/constants.ts   |  14 +
 frontend/public/components/overview/index.tsx | 301 +++++++++---------
 frontend/public/ui/ui-actions.js              |   9 +
 frontend/public/ui/ui-reducers.js             |  16 +
 4 files changed, 187 insertions(+), 153 deletions(-)
 create mode 100644 frontend/public/components/overview/constants.ts

diff --git a/frontend/public/components/overview/constants.ts b/frontend/public/components/overview/constants.ts
new file mode 100644
index 00000000000..e6fa1c48560
--- /dev/null
+++ b/frontend/public/components/overview/constants.ts
@@ -0,0 +1,14 @@
+/* eslint-disable no-undef */
+
+// Keys for special 'group by' options
+// Should not be valid label keys to avoid conflicts. https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/#syntax-and-character-set
+export enum OverviewSpecialGroup {
+  GROUP_BY_APPLICATION = '#GROUP_BY_APPLICATION#',
+  GROUP_BY_RESOURCE = '#GROUP_BY_RESOURCE#',
+}
+
+// View options for overview page
+export enum OverviewViewOption {
+  RESOURCES = 'resources',
+  DASHBOARD = 'dashboard',
+}
diff --git a/frontend/public/components/overview/index.tsx b/frontend/public/components/overview/index.tsx
index facac15cfd6..f1314ab3465 100644
--- a/frontend/public/components/overview/index.tsx
+++ b/frontend/public/components/overview/index.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-vars, no-undef */
-
 import * as _ from 'lodash-es';
 import * as classnames from 'classnames';
 import * as fuzzy from 'fuzzysearch';
@@ -14,6 +13,7 @@ import { coFetchJSON } from '../../co-fetch';
 import { getBuildNumber } from '../../module/k8s/builds';
 import { prometheusTenancyBasePath } from '../graphs';
 import { TextFilter } from '../factory';
+import { PodStatus } from '../pod';
 import { UIActions, formatNamespacedRouteForResource } from '../../ui/ui-actions';
 import {
   apiVersionForModel,
@@ -48,31 +48,40 @@ import {
 import { overviewMenuActions, OverviewNamespaceDashboard } from './namespace-overview';
 import { ProjectOverview } from './project-overview';
 import { ResourceOverviewPage } from './resource-overview-page';
-import { PodStatus } from '../pod';
+import { OverviewViewOption, OverviewSpecialGroup } from './constants';
 
-enum View {
-  Resources = 'resources',
-  Dashboard = 'dashboard',
-}
 
-// The following values should not be valid label keys to avoid conflicts.
-// https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/#syntax-and-character-set
-const GROUP_BY_APPLICATION = '#GROUP_BY_APPLICATION#';
-const GROUP_BY_RESOURCE = '#GROUP_BY_RESOURCE#';
-const EMPTY_GROUP_NAME = 'other resources';
+// List of container status waiting reason values that we should call out as errors in project status rows.
+const CONTAINER_WAITING_STATE_ERROR_REASONS = ['CrashLoopBackOff', 'ErrImagePull', 'ImagePullBackOff'];
 
-const DEPLOYMENT_REVISION_ANNOTATION = 'deployment.kubernetes.io/revision';
+// Annotation key for deployment config latest version
 const DEPLOYMENT_CONFIG_LATEST_VERSION_ANNOTATION = 'openshift.io/deployment-config.latest-version';
+
+// Annotation key for deployment phase
 const DEPLOYMENT_PHASE_ANNOTATION = 'openshift.io/deployment.phase';
-const TRIGGERS_ANNOTATION = 'image.openshift.io/triggers';
+
+// Annotaton key for deployment revision
+const DEPLOYMENT_REVISION_ANNOTATION = 'deployment.kubernetes.io/revision';
+
+// Display name for default overview group.
+// Should not be a valid label key to avoid conflicts. https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/#syntax-and-character-setexport
+const DEFAULT_GROUP_NAME = 'other resources';
+
+// Interval at which metrics are retrieved and updated
 const METRICS_POLL_INTERVAL = 30 * 1000;
 
+// Namespace prefixes that are reserved and should not have calls to action on empty state
+const RESERVED_NS_PREFIXES = ['openshift-', 'kube-', 'kubernetes-'];
+
+// Annotation key for image triggers
+const TRIGGERS_ANNOTATION = 'image.openshift.io/triggers';
+
 const asOverviewGroups = (keyedItems: { [name: string]: OverviewItem[] }): OverviewGroup[] => {
   const compareGroups = (a: OverviewGroup, b: OverviewGroup) => {
-    if (a.name === EMPTY_GROUP_NAME) {
+    if (a.name === DEFAULT_GROUP_NAME) {
       return 1;
     }
-    if (b.name === EMPTY_GROUP_NAME) {
+    if (b.name === DEFAULT_GROUP_NAME) {
       return -1;
     }
     return a.name.localeCompare(b.name);
@@ -88,7 +97,7 @@ const asOverviewGroups = (keyedItems: { [name: string]: OverviewItem[] }): Overv
 
 const getApplication = (item: OverviewItem): string => {
   const labels = _.get(item, 'obj.metadata.labels') || {};
-  return labels['app.kubernetes.io/part-of'] || labels['app.kubernetes.io/name'] || labels.app || EMPTY_GROUP_NAME;
+  return labels['app.kubernetes.io/part-of'] || labels['app.kubernetes.io/name'] || labels.app || DEFAULT_GROUP_NAME;
 };
 
 const groupByApplication = (items: OverviewItem[]): OverviewGroup[] => {
@@ -102,24 +111,21 @@ const groupByResource = (items: OverviewItem[]): OverviewGroup[] => {
 };
 
 const groupByLabel = (items: OverviewItem[], label: string): OverviewGroup[] => {
-  const byLabel = _.groupBy(items, (item): string => _.get(item, ['obj', 'metadata', 'labels', label]) || EMPTY_GROUP_NAME);
+  const byLabel = _.groupBy(items, (item): string => _.get(item, ['obj', 'metadata', 'labels', label]) || DEFAULT_GROUP_NAME);
   return asOverviewGroups(byLabel);
 };
 
 const groupItems = (items: OverviewItem[], selectedGroup: string): OverviewGroup[] => {
   switch (selectedGroup) {
-    case GROUP_BY_APPLICATION:
+    case OverviewSpecialGroup.GROUP_BY_APPLICATION:
       return groupByApplication(items);
-    case GROUP_BY_RESOURCE:
+    case OverviewSpecialGroup.GROUP_BY_RESOURCE:
       return groupByResource(items);
     default:
       return groupByLabel(items, selectedGroup);
   }
 };
 
-// List of container status waiting reason values that we should call out as errors in overview rows.
-const CONTAINER_WAITING_STATE_ERROR_REASONS = ['CrashLoopBackOff', 'ErrImagePull', 'ImagePullBackOff'];
-
 const getAnnotation = (obj: K8sResourceKind, annotation: string): string => {
   return _.get(obj, ['metadata', 'annotations', annotation]);
 };
@@ -293,8 +299,7 @@ const sortBuilds = (builds: K8sResourceKind[]): K8sResourceKind[] => {
   return builds.sort(byBuildNumber);
 };
 
-const reservedNSPrefixes = ['openshift-', 'kube-', 'kubernetes-'];
-const isReservedNamespace = (ns: string) => ns === 'default' || ns === 'openshift' || reservedNSPrefixes.some(prefix => _.startsWith(ns, prefix));
+const isReservedNamespace = (ns: string) => ns === 'default' || ns === 'openshift' || RESERVED_NS_PREFIXES.some(prefix => _.startsWith(ns, prefix));
 
 const OverviewItemReadiness: React.SFC<OverviewItemReadinessProps> = ({desired = 0, ready = 0, resource}) => {
   const href = `${resourceObjPath(resource, resource.kind)}/pods`;
@@ -337,106 +342,114 @@ const OverviewEmptyState = connect(overviewEmptyStateToProps)(({activeNamespace,
 });
 
 const headingStateToProps = ({UI}): OverviewHeadingPropsFromState => {
-  const selectedView = UI.getIn(['overview', 'selectedView']);
-  return { selectedView };
+  const {selectedView, selectedGroup, groupOptions, filterValue} = UI.get('overview').toJS();
+  return {groupOptions, selectedGroup, selectedView, filterValue};
 };
 
 const headingDispatchToProps = (dispatch): OverviewHeadingPropsFromDispatch => ({
-  selectView: (view: View) => dispatch(UIActions.selectOverviewView(view)),
+  selectView: (view: OverviewViewOption) => dispatch(UIActions.selectOverviewView(view)),
+  selectGroup: (group: string) => dispatch(UIActions.updateOverviewSelectedGroup(group)),
+  changeFilter: (value: string) => dispatch(UIActions.updateOverviewFilterValue(value)),
 });
 
-const OverviewHeading_: React.SFC<OverviewHeadingProps> = ({disabled, firstLabel = '', groupOptions, handleFilterChange = _.noop, handleGroupChange = _.noop, selectedGroup = '', selectView, selectedView, title, project}) => (
-  <div className={classnames('co-m-nav-title co-m-nav-title--overview', { 'overview-filter-group': selectedView === View.Resources })}>
-    {
-      title &&
-      <h1 className="co-m-pane__heading co-m-pane__heading--overview">
-        <div className="co-m-pane__name co-m-pane__name--overview">{title}</div>
-      </h1>
-    }
-    {!_.isEmpty(project) && <div className={classnames('overview-view-selector', {'selected-view__resources': selectedView === View.Resources })}>
-      <div className="form-group btn-group">
-        <button
-          type="button"
-          className={classnames('btn btn-default', { 'btn-primary': selectedView === View.Resources })}
-          aria-label="Resources"
-          title="Resources"
-          disabled={disabled}
-          onClick={() => selectView(View.Resources)}
-        >
-          <i className="fa fa-list-ul" aria-hidden="true" />
-          Resources
-        </button>
-        <button
-          type="button"
-          className={classnames('btn btn-default', { 'btn-primary': selectedView === View.Dashboard })}
-          aria-label="Dashboard"
-          title="Dashboard"
-          disabled={disabled}
-          onClick={() => selectView(View.Dashboard)}
-        >
-          <i className="fa fa-dashboard" aria-hidden="true" />
-          Dashboard
-        </button>
-      </div>
-      <Toolbar className="overview-toolbar" preventSubmit>
-        <Toolbar.RightContent>
-          {selectedView === View.Resources && <React.Fragment>
-            <div className="form-group overview-toolbar__form-group">
-              <Dropdown
-                className="overview-toolbar__dropdown"
-                menuClassName="dropdown-menu--text-wrap"
-                items={groupOptions}
-                onChange={handleGroupChange}
-                titlePrefix="Group by"
-                title={groupOptions[selectedGroup]}
-                spacerBefore={new Set([firstLabel])}
-                headerBefore={{[firstLabel]: 'Label'}}
-              />
-            </div>
-            <div className="form-group overview-toolbar__form-group">
-              <div className="overview-toolbar__text-filter">
-                <TextFilter
-                  autoFocus={!disabled}
-                  defaultValue={''}
-                  label="by name"
-                  onChange={handleFilterChange}
+class OverviewHeading_ extends React.Component<OverviewHeadingProps> {
+  componentWillUnmount() {
+    // Resets the filter value so that it is not retained when navigating to other pages.
+    this.props.changeFilter('');
+  }
+
+  render() {
+    const {changeFilter, disabled, filterValue, firstLabel = '', groupOptions, selectGroup, selectedGroup, selectView, selectedView, title, project} = this.props;
+    return <div className={classnames('co-m-nav-title co-m-nav-title--overview', { 'overview-filter-group': selectedView === OverviewViewOption.RESOURCES })}>
+      {
+        title &&
+        <h1 className="co-m-pane__heading co-m-pane__heading--overview">
+          <div className="co-m-pane__name co-m-pane__name--overview">{title}</div>
+        </h1>
+      }
+      {!_.isEmpty(project) && <div className={classnames('overview-view-selector', {'selected-view__resources': selectedView === OverviewViewOption.RESOURCES })}>
+        <div className="form-group btn-group">
+          <button
+            type="button"
+            className={classnames('btn btn-default', { 'btn-primary': selectedView === OverviewViewOption.RESOURCES })}
+            aria-label="Resources"
+            title="Resources"
+            disabled={disabled}
+            onClick={() => selectView(OverviewViewOption.RESOURCES)}
+          >
+            <i className="fa fa-list-ul" aria-hidden="true" />
+            Resources
+          </button>
+          <button
+            type="button"
+            className={classnames('btn btn-default', { 'btn-primary': selectedView === OverviewViewOption.DASHBOARD })}
+            aria-label="Dashboard"
+            title="Dashboard"
+            disabled={disabled}
+            onClick={() => selectView(OverviewViewOption.DASHBOARD)}
+          >
+            <i className="fa fa-dashboard" aria-hidden="true" />
+            Dashboard
+          </button>
+        </div>
+        <Toolbar className="overview-toolbar" preventSubmit>
+          <Toolbar.RightContent>
+            {selectedView === OverviewViewOption.RESOURCES && <React.Fragment>
+              <div className="form-group overview-toolbar__form-group">
+                <Dropdown
+                  className="overview-toolbar__dropdown"
+                  menuClassName="dropdown-menu--text-wrap"
+                  items={groupOptions}
+                  onChange={selectGroup}
+                  titlePrefix="Group by"
+                  title={groupOptions[selectedGroup] || 'Select Category'}
+                  spacerBefore={new Set([firstLabel])}
+                  headerBefore={{[firstLabel]: 'Label'}}
                 />
               </div>
-            </div>
-          </React.Fragment>}
-          {selectedView === View.Dashboard && !_.isEmpty(project) && <div className="form-group">
-            <ActionsMenu actions={overviewMenuActions.map((a: KebabAction) => a(ProjectModel, project))} />
-          </div>}
-        </Toolbar.RightContent>
-      </Toolbar>
-    </div>}
-  </div>
-);
+              <div className="form-group overview-toolbar__form-group">
+                <div className="overview-toolbar__text-filter">
+                  <TextFilter
+                    autoFocus={!disabled}
+                    defaultValue={filterValue}
+                    label="by name"
+                    onChange={(e) => changeFilter(e.target.value)}
+                  />
+                </div>
+              </div>
+            </React.Fragment>}
+            {selectedView === OverviewViewOption.DASHBOARD && !_.isEmpty(project) && <div className="form-group">
+              <ActionsMenu actions={overviewMenuActions.map((a: KebabAction) => a(ProjectModel, project))} />
+            </div>}
+          </Toolbar.RightContent>
+        </Toolbar>
+      </div>}
+    </div>;
+  }
+}
 
 const OverviewHeading = connect<OverviewHeadingPropsFromState, OverviewHeadingPropsFromDispatch, OverviewHeadingOwnProps>(headingStateToProps, headingDispatchToProps)(OverviewHeading_);
 
 const mainContentStateToProps = ({UI}): OverviewMainContentPropsFromState => {
-  const metrics = UI.getIn(['overview', 'metrics']);
-  const selectedView = UI.getIn(['overview', 'selectedView']);
-  return { metrics, selectedView };
+  const {filterValue, metrics, selectedView, selectedGroup, groupOptions} = UI.get('overview').toJS();
+  return {filterValue, groupOptions, metrics, selectedGroup, selectedView};
 };
 
 const mainContentDispatchToProps = (dispatch): OverviewMainContentPropsFromDispatch => ({
+  updateGroupOptions: (groups: { [key: string]: string }) => dispatch(UIActions.updateOverviewGroupOptions(groups)),
   updateMetrics: (metrics: OverviewMetrics) => dispatch(UIActions.updateOverviewMetrics(metrics)),
   updateResources: (items: OverviewItem[]) => dispatch(UIActions.updateOverviewResources(items)),
+  updateSelectedGroup: (group: string) => dispatch(UIActions.updateOverviewSelectedGroup(group)),
 });
 
 class OverviewMainContent_ extends React.Component<OverviewMainContentProps, OverviewMainContentState> {
   private metricsInterval: any = null;
 
   readonly state: OverviewMainContentState = {
-    filterValue: '',
     items: [],
     filteredItems: [],
     groupedItems: [],
     firstLabel: '',
-    groupOptions: {},
-    selectedGroup: '',
   };
 
   componentDidMount(): void {
@@ -454,6 +467,7 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
       daemonSets,
       deployments,
       deploymentConfigs,
+      filterValue,
       loaded,
       namespace,
       pods,
@@ -462,9 +476,8 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
       routes,
       services,
       statefulSets,
-      selectedView,
+      selectedGroup,
     } = this.props;
-    const {filterValue, selectedGroup} = this.state;
 
     if (namespace !== prevProps.namespace
       || loaded !== prevProps.loaded
@@ -480,20 +493,16 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
       || !_.isEqual(services, prevProps.services)
       || !_.isEqual(statefulSets, prevProps.statefulSets)) {
       this.createOverviewData();
-    } else if (filterValue !== prevState.filterValue) {
+    } else if (filterValue !== prevProps.filterValue) {
       const filteredItems = this.filterItems(this.state.items);
       this.setState({
         filteredItems,
         groupedItems: groupItems(filteredItems, selectedGroup),
       });
-    } else if (selectedGroup !== prevState.selectedGroup) {
+    } else if (selectedGroup !== prevProps.selectedGroup) {
       this.setState({
         groupedItems: groupItems(this.state.filteredItems, selectedGroup),
       });
-    } else if (selectedView !== prevProps.selectedView && selectedView === View.Dashboard) {
-      // TODO: Preserve filter when switching to dashboard view and back.
-      // OverviewHeading doesn't keep the value in state.
-      this.setState({ filterValue: '' });
     }
 
     // Fetch new metrics when the namespace changes.
@@ -542,8 +551,7 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
   }
 
   filterItems(items: OverviewItem[]): OverviewItem[] {
-    const {selectedItem} = this.props;
-    const {filterValue} = this.state;
+    const {filterValue, selectedItem} = this.props;
 
     if (!filterValue) {
       return items;
@@ -558,8 +566,8 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
 
   getGroupOptionsFromLabels(items: OverviewItem[]): any {
     const specialGroups = {
-      [GROUP_BY_APPLICATION]: 'Application',
-      [GROUP_BY_RESOURCE]: 'Resource',
+      [OverviewSpecialGroup.GROUP_BY_APPLICATION]: 'Application',
+      [OverviewSpecialGroup.GROUP_BY_RESOURCE]: 'Resource',
     };
 
     const labelKeys = _.flatMap(items, item => _.keys(_.get(item, 'obj.metadata.labels'))).sort();
@@ -672,7 +680,7 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
     const triggers = _.unionWith(nativeTriggers, annotatedTriggers, _.isEqual);
     return _.flatMap(triggers, (trigger) => {
       const triggerFrom = trigger.from || _.get(trigger, 'imageChangeParams.from', {});
-      if ( triggerFrom.kind !== 'ImageStreamTag') {
+      if (triggerFrom.kind !== 'ImageStreamTag') {
         return [];
       }
       return _.reduce(buildConfigs.data, (acc, buildConfig) => {
@@ -866,7 +874,7 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
   }
 
   createOverviewData(): void {
-    const {loaded, mock, updateResources} = this.props;
+    const {loaded, mock, selectedGroup, updateGroupOptions, updateSelectedGroup, updateResources} = this.props;
 
     if (!loaded) {
       return;
@@ -888,55 +896,40 @@ class OverviewMainContent_ extends React.Component<OverviewMainContentProps, Ove
 
     const filteredItems = this.filterItems(items);
     const { firstLabel, groupOptions } = this.getGroupOptionsFromLabels(filteredItems);
-    const selectedGroup = GROUP_BY_APPLICATION;
+    if (!_.has(groupOptions, selectedGroup)) {
+      updateSelectedGroup(OverviewSpecialGroup.GROUP_BY_APPLICATION);
+    }
+
+    updateGroupOptions(groupOptions);
     const groupedItems = groupItems(filteredItems, selectedGroup);
     this.setState({
       filteredItems,
       groupedItems,
       firstLabel,
-      groupOptions,
       items,
-      selectedGroup,
     });
   }
 
-  handleFilterChange = (event: any): void => {
-    this.setState({filterValue: event.target.value});
-  };
-
-  handleGroupChange = (selectedGroup: string): void => {
-    this.setState({selectedGroup});
-  };
-
-  clearFilter = (): void => {
-    this.setState({filterValue: ''});
-  };
-
   render() {
     const {loaded, loadError, mock, title, project = {}, selectedView} = this.props;
-    const {filteredItems, groupedItems, firstLabel, groupOptions, selectedGroup} = this.state;
+    const {filteredItems, groupedItems, firstLabel} = this.state;
     return <div className="co-m-pane">
       <OverviewHeading
         disabled={mock}
         firstLabel={firstLabel}
-        groupOptions={groupOptions}
-        handleFilterChange={this.handleFilterChange}
-        handleGroupChange={this.handleGroupChange}
-        selectedGroup={selectedGroup}
-        selectedView={selectedView}
         title={title}
         project={project.data}
       />
       <div className="co-m-pane__body co-m-pane__body--no-top-margin">
         <StatusBox
-          data={selectedView === View.Resources ? filteredItems : project}
+          data={selectedView === OverviewViewOption.RESOURCES ? filteredItems : project}
           label="Resources"
           loaded={loaded}
           loadError={loadError}
           EmptyMsg={OverviewEmptyState}
         >
-          {selectedView === View.Resources && <ProjectOverview groups={groupedItems} />}
-          {selectedView === View.Dashboard && <OverviewNamespaceDashboard obj={project.data} />}
+          {selectedView === OverviewViewOption.RESOURCES && <ProjectOverview groups={groupedItems} />}
+          {selectedView === OverviewViewOption.DASHBOARD && <OverviewNamespaceDashboard obj={project.data} />}
         </StatusBox>
       </div>
     </div>;
@@ -949,18 +942,18 @@ const overviewStateToProps = ({UI}): OverviewPropsFromState => {
   const selectedUID = UI.getIn(['overview', 'selectedUID']);
   const resources = UI.getIn(['overview', 'resources']);
   const selectedItem = !!resources && resources.get(selectedUID);
-  const selectedView = UI.getIn(['overview', 'selectedView'], View.Resources);
+  const selectedView = UI.getIn(['overview', 'selectedView'], OverviewViewOption.RESOURCES);
   return { selectedItem, selectedView };
 };
 
-const overviewDispatchToProps = (dispatch) => {
+const overviewDispatchToProps = (dispatch): OverviewPropsFromDispatch => {
   return {
     dismissDetails: () => dispatch(UIActions.dismissOverviewDetails()),
   };
 };
 
-const Overview_: React.SFC<OverviewProps> = (({mock, namespace, selectedItem, selectedView, title, dismissDetails}) => {
-  const sidebarOpen = !_.isEmpty(selectedItem) && selectedView !== View.Dashboard;
+const Overview_: React.SFC<OverviewProps> = ({mock, namespace, selectedItem, selectedView, title, dismissDetails}) => {
+  const sidebarOpen = !_.isEmpty(selectedItem) && selectedView !== OverviewViewOption.DASHBOARD;
   const className = classnames('overview', {'overview--sidebar-shown': sidebarOpen});
   // TODO: Update resources for native Kubernetes clusters.
   const resources = [
@@ -1067,7 +1060,7 @@ const Overview_: React.SFC<OverviewProps> = (({mock, namespace, selectedItem, se
       </CSSTransition>
     }
   </div>;
-});
+};
 
 export const Overview = connect<OverviewPropsFromState, OverviewPropsFromDispatch, OverviewOwnProps>(overviewStateToProps, overviewDispatchToProps)(Overview_);
 
@@ -1151,21 +1144,21 @@ type OverviewItemReadinessProps = {
 };
 
 type OverviewHeadingPropsFromState = {
-  selectedView: View;
+  filterValue: string;
+  groupOptions: {[key: string]: string};
+  selectedGroup: string;
+  selectedView: OverviewViewOption;
 };
 
 type OverviewHeadingPropsFromDispatch = {
-  selectView: (view: View) => void;
+  selectView: (view: OverviewViewOption) => void;
+  selectGroup: (selectedLabel: string) => void;
+  changeFilter: (value: string) => void;
 };
 
 type OverviewHeadingOwnProps = {
   disabled?: boolean;
   firstLabel?: string;
-  groupOptions?: any;
-  handleFilterChange?: (event: any) => void;
-  handleGroupChange?: (selectedLabel: string) => void;
-  selectedGroup?: string;
-  selectedView?: string;
   title: string;
   project: K8sResourceKind;
 };
@@ -1173,13 +1166,18 @@ type OverviewHeadingOwnProps = {
 type OverviewHeadingProps = OverviewHeadingPropsFromState & OverviewHeadingPropsFromDispatch & OverviewHeadingOwnProps;
 
 type OverviewMainContentPropsFromState = {
+  filterValue: string;
+  groupOptions: {[key: string]: string};
   metrics: OverviewMetrics;
-  selectedView: View;
+  selectedGroup: string;
+  selectedView: OverviewViewOption;
 };
 
 type OverviewMainContentPropsFromDispatch = {
+  updateGroupOptions: (groups: {[key: string]:string}) => void;
   updateMetrics: (metrics: OverviewMetrics) => void;
   updateResources: (items: OverviewItem[]) => void;
+  updateSelectedGroup: (group: string) => void;
 };
 
 type OverviewMainContentOwnProps = {
@@ -1206,18 +1204,15 @@ type OverviewMainContentOwnProps = {
 type OverviewMainContentProps = OverviewMainContentPropsFromState & OverviewMainContentPropsFromDispatch & OverviewMainContentOwnProps;
 
 type OverviewMainContentState = {
-  readonly filterValue: string;
   readonly items: any[];
   readonly filteredItems: any[];
   readonly groupedItems: any[];
   readonly firstLabel: string;
-  readonly groupOptions: any;
-  readonly selectedGroup: string;
 };
 
 type OverviewPropsFromState = {
   selectedItem: any;
-  selectedView: View;
+  selectedView: OverviewViewOption;
 };
 
 type OverviewPropsFromDispatch = {
diff --git a/frontend/public/ui/ui-actions.js b/frontend/public/ui/ui-actions.js
index 118f8d9cb15..0fda8dc4965 100644
--- a/frontend/public/ui/ui-actions.js
+++ b/frontend/public/ui/ui-actions.js
@@ -82,6 +82,9 @@ export const types = {
   stopImpersonate: 'stopImpersonate',
   updateOverviewMetrics: 'updateOverviewMetrics',
   updateOverviewResources: 'updateOverviewResources',
+  updateOverviewSelectedGroup: 'updateOverviewSelectedGroup',
+  updateOverviewGroupOptions: 'updateOverviewGroupOptions',
+  updateOverviewFilterValue: 'updateOverviewFilterValue',
 };
 
 /** @type {{[key: string]: function}} */
@@ -183,6 +186,12 @@ export const UIActions = {
 
   [types.dismissOverviewDetails]: () => ({type: types.dismissOverviewDetails}),
 
+  [types.updateOverviewSelectedGroup]: (group) => ({type: types.updateOverviewSelectedGroup, group}),
+
+  [types.updateOverviewGroupOptions]: (groups) => ({type: types.updateOverviewGroupOptions, groups}),
+
+  [types.updateOverviewFilterValue]: (value) => ({type: types.updateOverviewFilterValue, value}),
+
   monitoringLoading: key => ({type: types.setMonitoringData, key, data: {loaded: false, loadError: null, data: null}}),
 
   monitoringLoaded: (key, data) => ({type: types.setMonitoringData, key, data: {loaded: true, loadError: null, data}}),
diff --git a/frontend/public/ui/ui-reducers.js b/frontend/public/ui/ui-reducers.js
index e5d584e0417..dbbfce91b52 100644
--- a/frontend/public/ui/ui-reducers.js
+++ b/frontend/public/ui/ui-reducers.js
@@ -5,6 +5,7 @@ import { types } from './ui-actions';
 import { ALL_NAMESPACES_KEY, LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY, NAMESPACE_LOCAL_STORAGE_KEY } from '../const';
 import { AlertStates, isSilenced, SilenceStates } from '../monitoring';
 import { legalNamePattern, getNamespace } from '../components/utils/link';
+import { OverviewSpecialGroup } from '../components/overview/constants';
 
 export default (state, action) => {
   if (!state) {
@@ -31,6 +32,9 @@ export default (state, action) => {
         selectedDetailsTab: '',
         selectedUID: '',
         selectedView: 'resources',
+        selectedGroup: OverviewSpecialGroup.GROUP_BY_APPLICATION,
+        groupOptions: new ImmutableMap(),
+        filterValue: '',
       }),
       user: {},
       clusterID: '',
@@ -118,6 +122,18 @@ export default (state, action) => {
       return state.setIn(['overview', 'resources'], newResources);
     }
 
+    case types.updateOverviewSelectedGroup: {
+      return state.setIn(['overview', 'selectedGroup'], action.group);
+    }
+
+    case types.updateOverviewGroupOptions: {
+      return state.setIn(['overview', 'groupOptions'], new ImmutableMap(action.groups));
+    }
+
+    case types.updateOverviewFilterValue: {
+      return state.setIn(['overview', 'filterValue'], action.value);
+    }
+
     default:
       break;
   }