Remove Status and move view to Projects > Workloads

frontend/integration-tests/tests/deploy-image.scenario.ts

@@ -37,7 +37,7 @@ describe('Deploy Image', () => {
     it('can be used to create an app based on an image', async() => {
       await $('.co-m-btn-bar .btn-primary').click();
       await browser.wait(until.presenceOf($('.overview')));
-      expect($('.co-m-pane__name').getText()).toEqual('Project Status');
+      expect($('.project-overview').isPresent());
       await browser.get(`${appHost}/k8s/ns/${testName}/deploymentconfigs/${appName}`);
       await browser.wait(until.presenceOf(crudView.actionsButton));
       expect(browser.getCurrentUrl()).toContain(`/${appName}`);

frontend/integration-tests/tests/overview/overview.scenario.ts

@@ -20,7 +20,7 @@ describe('Visiting Overview page', () => {
   });
 
   beforeAll(async() => {
-    await browser.get(`${appHost}/overview/ns/${testName}`);
+    await browser.get(`${appHost}/k8s/cluster/projects/${testName}/workloads`);
     await crudView.isLoaded();
   });
 

frontend/integration-tests/tests/performance.scenario.ts

@@ -28,7 +28,6 @@ const chunkedRoutes = OrderedMap<string, {section: string, name: string}>()
   .set('image-stream', {section: 'Builds', name: 'Image Streams'})
   .set('node', {section: 'Compute', name: 'Nodes'})
   .set('service-account', {section: 'Administration', name: 'Service Accounts'})
-  .set('resource-quota', {section: 'Administration', name: 'Resource Quotas'})
   .set('limit-range', {section: 'Administration', name: 'Limit Ranges'})
   .set('custom-resource-definition', {section: 'Administration', name: 'Custom Resource Definitions'})
   .set('catalog', {section: 'Catalog', name: 'Developer Catalog'})
@@ -48,17 +47,6 @@ describe('Performance test', () => {
     expect(resources.length).not.toEqual(0);
   });
 
-  it('downloads new bundle for "Overview" route', async() => {
-    await browser.get(`${appHost}/status/all-namespaces`);
-    await browser.wait(until.presenceOf(crudView.resourceTitle));
-
-    const overviewChunk = await browser.executeScript<any>(() => performance.getEntriesByType('resource')
-      .find(({name}) => name.endsWith('.js') && name.indexOf('cluster-overview') > -1));
-
-    expect(overviewChunk).not.toBeNull();
-    expect(overviewChunk.decodedBodySize).toBeLessThan(100000);
-  });
-
   it('downloads new bundle for YAML editor route', async() => {
     await browser.get(`${appHost}/k8s/ns/openshift-console/configmaps`);
     await crudView.isLoaded();

frontend/package.json

@@ -96,7 +96,7 @@
     "react-linkify": "^0.2.2",
     "react-modal": "3.x",
     "react-redux": "5.x",
-    "react-router-dom": "4.x",
+    "react-router-dom": "4.3.x",
     "react-tagsinput": "3.19.x",
     "react-transition-group": "2.3.x",
     "react-virtualized": "9.x",

frontend/public/actions/ui.ts

@@ -19,7 +19,6 @@ export enum ActionType {
   DismissOverviewDetails = 'dismissOverviewDetails',
   SelectOverviewDetailsTab = 'selectOverviewDetailsTab',
   SelectOverviewItem = 'selectOverviewItem',
-  SelectOverviewView = 'selectOverviewView',
   SetActiveNamespace = 'setActiveNamespace',
   SetActivePerspective = 'setActivePerspective',
   SetCreateProjectMessage = 'setCreateProjectMessage',
@@ -182,7 +181,6 @@ export const sortList = (listId: string, field: string, func: any, orderBy: stri
 };
 export const setCreateProjectMessage = (message: string) => action(ActionType.SetCreateProjectMessage, {message});
 export const setUser = (user: any) => action(ActionType.SetUser, {user});
-export const selectOverviewView = (view: string) => action(ActionType.SelectOverviewView, {view});
 export const selectOverviewItem = (uid: string) => action(ActionType.SelectOverviewItem, {uid});
 export const selectOverviewDetailsTab = (tab: string) => action(ActionType.SelectOverviewDetailsTab, {tab});
 export const updateOverviewMetrics = (metrics: any) => action(ActionType.UpdateOverviewMetrics, {metrics});
@@ -207,7 +205,6 @@ const uiActions = {
   sortList,
   setCreateProjectMessage,
   setUser,
-  selectOverviewView,
   selectOverviewItem,
   selectOverviewDetailsTab,
   updateOverviewMetrics,

frontend/public/components/app-contents.tsx

@@ -100,14 +100,10 @@ const AppContents = withRouter(React.memo(() => (
 
           <LazyRoute path="/dashboards" exact loader={() => import('./dashboards-page/dashboards' /* webpackChunkName: "dashboards" */).then(m => m.DashboardsPage)} />
           <LazyRoute path="/cluster-status" exact loader={() => import('./cluster-overview' /* webpackChunkName: "cluster-overview" */).then(m => m.ClusterOverviewPage)} />
-          <LazyRoute path="/overview/all-namespaces" exact loader={() => import('./cluster-overview' /* webpackChunkName: "cluster-overview" */).then(m => m.ClusterOverviewPage)} />
-          <LazyRoute path="/overview/ns/:ns" exact loader={() => import('./overview' /* webpackChunkName: "overview" */).then(m => m.OverviewPage)} />
+          <Redirect from="/overview/all-namespaces" to="/cluster-status" />
+          <Redirect from="/overview/ns/:ns" to="/k8s/cluster/projects/:ns/workloads" />
           <Route path="/overview" exact component={NamespaceRedirect} />
 
-          <LazyRoute path="/status/all-namespaces" exact loader={() => import('./cluster-overview' /* webpackChunkName: "cluster-overview" */).then(m => m.ClusterOverviewPage)} />
-          <LazyRoute path="/status/ns/:ns" exact loader={() => import('./cluster-overview' /* webpackChunkName: "cluster-overview" */).then(m => m.ClusterOverviewPage)} />
-          <Route path="/status" exact component={NamespaceRedirect} />
-
           <LazyRoute path="/start-guide" exact loader={() => import('./start-guide' /* webpackChunkName: "start-guide" */).then(m => m.StartGuidePage)} />
 
           <LazyRoute path="/operatorhub/all-namespaces" exact loader={() => import('./operator-hub/operator-hub-page' /* webpackChunkName: "operator-hub" */).then(m => m.OperatorHubPage)} />

frontend/public/components/deploy-image.tsx

@@ -303,7 +303,7 @@ export class DeployImage extends React.Component<DeployImageProps, DeployImageSt
       .then(() => {
         this.setState({inProgress: false});
         if (!this.state.error) {
-          history.push(`/overview/ns/${this.state.namespace}`);
+          history.push(`/k8s/cluster/projects/${this.state.namespace}/workloads`);
         }
       });
   };

frontend/public/components/modals/create-namespace-modal.jsx

@@ -83,12 +83,7 @@ const CreateNamespaceModal = connect(null, mapDispatchToProps)(class CreateNames
 
     this.handlePromise(promise).then(obj => {
       close();
-      if (createProject) {
-        // Redirect to the overview instead of the project details page.
-        history.push(`/overview/ns/${obj.metadata.name}`);
-      } else {
-        history.push(resourceObjPath(obj, referenceFor(obj)));
-      }
+      history.push(resourceObjPath(obj, referenceFor(obj)));
     });
   }
 

frontend/public/components/namespace.jsx

@@ -11,7 +11,7 @@ import { NamespaceModel, ProjectModel, SecretModel } from '../models';
 import { k8sGet } from '../module/k8s';
 import * as UIActions from '../actions/ui';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceIcon, ResourceLink, ResourceSummary, MsgBox, StatusIconAndText, ExternalLink, humanizeCpuCores, humanizeDecimalBytes } from './utils';
+import { Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, MsgBox, StatusIconAndText, ExternalLink, humanizeCpuCores, humanizeDecimalBytes } from './utils';
 import { createNamespaceModal, createProjectModal, deleteNamespaceModal, configureNamespacePullSecretModal } from './modals';
 import { RoleBindingsPage } from './RBAC';
 import { Bar, Area, requirePrometheus } from './graphs';
@@ -20,6 +20,8 @@ import { featureReducerName, flagPending, connectToFlags } from '../reducers/fea
 import { setFlag } from '../actions/features';
 import { openshiftHelpBase } from './utils/documentation';
 import { createProjectMessageStateToProps } from '../reducers/ui';
+import { Overview } from './overview';
+import { OverviewNamespaceDashboard } from './overview/namespace-overview';
 
 const getModel = useProjects => useProjects ? ProjectModel : NamespaceModel;
 const getDisplayName = obj => _.get(obj, ['metadata', 'annotations', 'openshift.io/display-name']);
@@ -134,17 +136,13 @@ const ProjectTableHeader = () => {
 };
 ProjectTableHeader.displayName = 'ProjectTableHeader';
 
-
 const ProjectTableRow = ({obj: project, index, key, style}) => {
-  const name = project.metadata.name;
-  const displayName = getDisplayName(project);
   const requester = getRequester(project);
   return (
     <TableRow id={project.metadata.uid} index={index} trKey={key} style={style}>
       <TableData className={projectColumnClasses[0]}>
         <span className="co-resource-item">
-          <ResourceIcon kind="Project" />
-          <Link to={`/overview/ns/${name}`} title={displayName} className="co-resource-item__resource-name">{project.metadata.name}</Link>
+          <ResourceLink kind="Project" name={project.metadata.name} title={project.metadata.uid} />
         </span>
       </TableData>
       <TableData className={projectColumnClasses[1]}>
@@ -390,5 +388,5 @@ export const NamespacesDetailsPage = props => <DetailsPage
 export const ProjectsDetailsPage = props => <DetailsPage
   {...props}
   menuActions={projectMenuActions}
-  pages={[navFactory.details(Details), navFactory.editYaml(), navFactory.roles(RolesPage)]}
+  pages={[navFactory.details(OverviewNamespaceDashboard), navFactory.editYaml(), navFactory.workloads(Overview), navFactory.roles(RolesPage)]}
 />;

frontend/public/components/nav/admin-nav.tsx

@@ -85,12 +85,6 @@ const AdminNav = () => (
   <React.Fragment>
     <NavSection title="Home">
       <ResourceClusterLink resource="projects" name="Projects" required={FLAGS.OPENSHIFT} />
-      {
-        // Show different status pages based on OpenShift vs native Kubernetes.
-        // TODO: Make Overview work on native Kubernetes. It currently assumes OpenShift resources.
-      }
-      <HrefLink href="/overview" name="Status" activePath="/overview/" required={FLAGS.OPENSHIFT} />
-      <HrefLink href="/status" name="Status" activePath="/status/" disallowed={FLAGS.OPENSHIFT} />
       <HrefLink href="/search" name="Search" startsWith={searchStartsWith} />
       <ResourceNSLink resource="events" name="Events" />
     </NavSection>

frontend/public/components/overview/_overview.scss

@@ -1,162 +1,12 @@
-.co-m-nav-title--overview {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  min-height: 113px; // Positions skeleton screen at appropriate height since .overview-view-selector elements are loaded afterwards
-}
-
-.overview-toolbar {
-  margin: 0 0 ($grid-gutter-width / 2) 0;
-  min-width: 0;
-  padding: 0;
-  @media (max-width: $screen-xs-max) {
-    // Stack toggle buttons above resource filter options at mobile
-    .selected-view__resources & {
-      width: 100%;
-    }
-  }
-
-  .toolbar-pf-actions {
-    margin: 0;
-  }
-
-  // Override pf and make toolbar a flex object to control positioning
-  .toolbar-pf-action-right {
-    align-items: flex-end;
-    display: flex;
-    float: none;
-
-    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
-      // switch to stacked fields when side open but still at desktop widths
-      .overview--sidebar-shown & {
-        align-items: initial;
-        display: flex;
-        flex-direction: column;
-        float: none;
-        min-width: 160px;
-        width: calc(100% - 535px);
-      }
-    }
-  }
-}
-
-.overview-toolbar__dropdown {
-  display: inline-block;
-  max-width: 100%; // enable text-overflow: ellipsis
-
-  @media (max-width: $screen-sm-max) {
-    min-width: 100%;
-  }
-
-  .overview--sidebar-shown & {
-    @media (max-width: $screen-md-max) {
-      min-width: 100%; // stack selections
-    }
-  }
-
-  .btn-dropdown {
-    width: 100%;
-  }
-
-  .btn-link__titlePrefix {
-    color: lighten($btn-default-color, 15%);
-    font-weight: normal;
-    margin-right: 2px;
-  }
-
-  .dropdown-menu {
-    min-width: 250px;
-  }
-}
-
-.overview-toolbar__form-group {
-  flex: 1 1 auto;
-  min-width: 0; // enable truncation
-
-  @media (min-width: $screen-xs-min) {
-    padding-right: 15px;
-  }
-
-  &:first-child {
-    border-right: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-    padding-right: 10px;
-
-    @media (max-width: $screen-md-max) {
-      .overview--sidebar-shown & {
-        padding-right: 0;
-      }
-    }
-
-    @media (min-width: $screen-lg-min) and (max-width: ($screen-lg-min + 200)) {
-      .overview--sidebar-shown & {
-        max-width: 200px; // prevents group by select from pushing filter input behind the sidebar
-      }
-    }
-  }
-
-  + .overview-toolbar__form-group {
-    border-left: 1px solid $color-pf-black-300;
-    padding-left: 10px;
-
-    .overview--sidebar-shown & {
-      @media (max-width: $screen-md-max) {
-        border: 0;
-        padding-left: 0;
-        padding-top: 5px;
-      }
-
-    }
-  }
-
-  .co-actions-menu {
-    margin-left: 0;
-  }
-}
-
-.co-m-pane__heading--overview {
-  justify-content: flex-start;
-  margin: 0 20px ($grid-gutter-width / 2) 0;
-}
-
-.co-m-pane__name--overview {
-  flex: 0 1 auto;
-}
-
-.overview-toolbar__label {
-  margin: 0 10px 0 0;
-  vertical-align: middle;
-  white-space: nowrap;
-  @media (max-width: $screen-md-max) {
-    margin-bottom: 0;
-    margin-right: 10px;
-  }
-}
-
-.overview-toolbar__text-filter .co-text-filter {
-  min-width: 100%;
-  width: 100%;
-
-  .overview--sidebar-shown & {
-    width: auto;
-  }
-}
+$overview-sidebar-width: 550px;
 
 .overview {
-  bottom: 0;
-  display: flex;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+  overflow: hidden; // hide .overview__sidebar box-shadow at top
+  position: relative;
 
   .overview__main-column {
-    height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    width: 100%;
     -webkit-overflow-scrolling: touch;
   }
 
@@ -169,10 +19,10 @@
     right: 0;
     top: 0;
     width: calc(100% - 15px);
+    z-index: 5;
     @media(min-width: $screen-sm-min) {
-      max-width: 550px;
+      max-width: $overview-sidebar-width;
     }
-    z-index: 5;
   }
 
   .overview__sidebar-appear {
@@ -196,16 +46,7 @@
 
     @media(min-width: $screen-lg-min) {
       .overview__main-column {
-        width: calc(100% - 500px);
-
-        .co-m-pane__body {
-          padding-right: 0;
-        }
-      }
-
-      .overview__sidebar {
-        min-height: 0;
-        overflow: hidden;
+        margin-right: $overview-sidebar-width;
       }
     }
   }
@@ -247,27 +88,6 @@
   }
 }
 
-.overview-view-selector {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  @media (max-width: $screen-md-max) {
-    .overview--sidebar-shown & {
-      flex-direction: column;
-    }
-  }
-
-  .btn-group {
-    button+button {
-      margin-left: 0;
-    }
-    i.fa {
-      margin-right: 6px;
-    }
-  }
-}
-
 .resource-overview {
   height: 100%;
   min-height: 0;