removed '/details' route for resource 'Overview' tab

frontend/__tests__/components/cloud-services/catalog.spec.tsx

@@ -138,7 +138,7 @@ describe(CatalogAppRow.displayName, () => {
     succeededNamespaces.forEach((ns, i) => {
       const csv = clusterServiceVersions[i];
 
-      expect(ns.find(Link).props().to).toEqual(`/ns/${csv.metadata.namespace}/clusterserviceversion-v1s/${csv.metadata.name}/details`);
+      expect(ns.find(Link).props().to).toEqual(`/ns/${csv.metadata.namespace}/clusterserviceversion-v1s/${csv.metadata.name}`);
     });
   });
 

frontend/__tests__/components/cloud-services/clusterserviceversion-resource.spec.tsx

@@ -381,10 +381,11 @@ describe(ClusterServiceVersionResourceStatus.displayName, () => {
 
 describe(ClusterServiceVersionResourcesDetailsPage.displayName, () => {
   let wrapper: ShallowWrapper<ClusterServiceVersionResourcesDetailsPageProps>;
+  let match: match<any>;
 
   beforeEach(() => {
-    const match: match<any> = {
-      params: {appName: 'etcd', plural: 'etcdclusters', name: 'my-etcd'},
+    match = {
+      params: {appName: 'etcd', plural: 'etcdclusters', name: 'my-etcd', ns: 'example'},
       isExact: false,
       url: '/ns/example/clusterserviceversion-v1s/etcd/etcdclusters/my-etcd',
       path: '/ns/:ns/clusterserviceversion-v1s/:appName/:plural/:name',
@@ -398,7 +399,7 @@ describe(ClusterServiceVersionResourcesDetailsPage.displayName, () => {
 
     expect(detailsPage.exists()).toBe(true);
     expect(detailsPage.props().pages[0].name).toEqual('Overview');
-    expect(detailsPage.props().pages[0].href).toEqual('details');
+    expect(detailsPage.props().pages[0].href).toEqual('');
     expect(detailsPage.props().pages[1].name).toEqual('YAML');
     expect(detailsPage.props().pages[1].href).toEqual('yaml');
   });
@@ -413,8 +414,21 @@ describe(ClusterServiceVersionResourcesDetailsPage.displayName, () => {
     const detailsPage = wrapper.find(DetailsPage);
 
     expect(detailsPage.props().breadcrumbs).toEqual([
-      {name: 'etcd', path: '/ns/example/clusterserviceversion-v1s/etcd/details'},
-      {name: `${testResourceInstance.kind} Details`, path: '/ns/example/clusterserviceversion-v1s/etcd/etcdclusters/my-etcd/details'},
+      {name: 'etcd', path: '/ns/example/clusterserviceversion-v1s/etcd'},
+      {name: `${testResourceInstance.kind} Details`, path: '/ns/example/clusterserviceversion-v1s/etcd/etcdclusters/my-etcd'},
+    ]);
+  });
+
+  it('passes correct breadcrumbs even if `namespace`, `plural`, `appName`, and `name` URL parameters are the same', () => {
+    match.params = Object.keys(match.params).reduce((params, name) => Object.assign(params, {[name]: 'example'}), {});
+    match.url = '/ns/example/clusterserviceversion-v1s/example/example/example';
+
+    wrapper.setProps({match});
+    const detailsPage = wrapper.find(DetailsPage);
+
+    expect(detailsPage.props().breadcrumbs).toEqual([
+      {name: 'example', path: '/ns/example/clusterserviceversion-v1s/example'},
+      {name: `${testResourceInstance.kind} Details`, path: '/ns/example/clusterserviceversion-v1s/example/example/example'},
     ]);
   });
 });

frontend/__tests__/components/cloud-services/clusterserviceversion.spec.tsx

@@ -64,7 +64,7 @@ describe(ClusterServiceVersionListItem.displayName, () => {
 
     expect(detailsButton.props().title).toEqual('View details');
     expect(detailsButton.childAt(0).text()).toEqual('View details');
-    expect(detailsButton.props().to).toEqual(`/ns/${testClusterServiceVersion.metadata.namespace}/clusterserviceversion-v1s/${testClusterServiceVersion.metadata.name}/details`);
+    expect(detailsButton.props().to).toEqual(`/ns/${testClusterServiceVersion.metadata.namespace}/clusterserviceversion-v1s/${testClusterServiceVersion.metadata.name}`);
     expect(detailsButton.hasClass('btn')).toBe(true);
   });
 
@@ -281,7 +281,7 @@ describe(ClusterServiceVersionsDetailsPage.displayName, () => {
 
     expect(detailsPage.exists()).toBe(true);
     expect(detailsPage.props().pages[0].name).toEqual('Overview');
-    expect(detailsPage.props().pages[0].href).toEqual('details');
+    expect(detailsPage.props().pages[0].href).toEqual('');
     expect(detailsPage.props().pages[0].component).toEqual(ClusterServiceVersionDetails);
     expect(detailsPage.props().pages[1].name).toEqual('YAML');
     expect(detailsPage.props().pages[1].href).toEqual('yaml');

frontend/integration-tests/tests/crud.js

@@ -88,7 +88,7 @@ const createExamples = (page, browser) => {
       }
       console.log('Resource created');
       //with verify(), when an assertion fails, the test logs the failure and continues with other assertions.
-      browser.verify.urlContains('/example/details');
+      browser.verify.urlContains('/example');
     });
 };
 

frontend/public/components/RBAC/edit-rule.jsx

@@ -157,7 +157,7 @@ const EditRule = connect(state => state.k8s.get('RESOURCES') || {}, {getResource
       }
       this.handlePromise(k8sUpdate(this.kind, role))
         .then(() => {
-          history.push(`${resourceObjPath(role, this.kind.kind)}/details`);
+          history.push(`${resourceObjPath(role, this.kind.kind)}`);
         });
     }
 
@@ -412,7 +412,7 @@ const EditRule = connect(state => state.k8s.get('RESOURCES') || {}, {getResource
               <div className="col-xs-12">
                 <ButtonBar errorMessage={this.state.errorMessage} inProgress={this.state.inProgress}>
                   <button type="submit" className="btn btn-primary" onClick={this.save}>Save Rule</button>
-                  {role && <Link to={`${resourceObjPath(role, this.kind.kind)}/details`}>Cancel</Link>}
+                  {role && <Link to={`${resourceObjPath(role, this.kind.kind)}`}>Cancel</Link>}
                 </ButtonBar>
               </div>
             </div>

frontend/public/components/RBAC/role.jsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import * as fuzzy from 'fuzzysearch';
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import { ColHead, DetailsPage, List, ListHeader, MultiListPage, ResourceRow, TextFilter } from '../factory';
-import { Cog, Firehose, Heading, MsgBox, NavBar, navFactory, NavTitle, ResourceCog, ResourceLink, Timestamp } from '../utils';
+import { Cog, Heading, MsgBox, navFactory, ResourceCog, ResourceLink, Timestamp } from '../utils';
 import { BindingName, BindingsList, RulesList } from './index';
 import { registerTemplate } from '../../yaml-templates';
 import { flatten as bindingsFlatten } from './bindings';
@@ -109,8 +108,6 @@ class Details extends React.Component {
   }
 }
 
-const pages = () => [navFactory.details(Details), navFactory.editYaml(), {href: 'bindings', name: 'Role Bindings'}];
-
 const BindingHeader = props => <ListHeader>
   <ColHead {...props} className="col-xs-4" sortField="metadata.name">Name</ColHead>
   <ColHead {...props} className="col-xs-2" sortField="subject.kind">Subject Kind</ColHead>
@@ -133,15 +130,9 @@ const BindingRow = ({obj: binding}) => <ResourceRow obj={binding}>
   </div>
 </ResourceRow>;
 
-export const BindingsForRolePage = ({match: {params: {name, ns}}, kind}) => <div>
-  <Helmet>
-    <title>{`${name} · Bindings`}</title>
-  </Helmet>
-  <Firehose resources={[{kind: kind, name: name, namespace: ns, isList: false}]}>
-    <NavTitle detail={true} kind={kind} menuActions={menuActions} title={name} />
-  </Firehose>
-  <NavBar pages={pages()} />
-  <MultiListPage
+export const BindingsForRolePage = (props) => {
+  const {match: {params: {name, ns}}, kind} = props;
+  return <MultiListPage
     canCreate={true}
     createButtonText="Create Binding"
     createProps={{to: `/rolebindings/new?${ns ? `ns=${ns}&` : ''}rolekind=${kind}&rolename=${name}`}}
@@ -154,10 +145,14 @@ export const BindingsForRolePage = ({match: {params: {name, ns}}, kind}) => <div
     textFilter="role-binding"
     filterLabel="Role Bindings by role or subject"
     namespace={ns}
-    flatten={bindingsFlatten} />
-</div>;
+    flatten={bindingsFlatten} />;
+};
+
+export const RolesDetailsPage = props => <DetailsPage
+  {...props}
+  pages={[navFactory.details(Details), navFactory.editYaml(), {href: 'bindings', name: 'Role Bindings', component: BindingsForRolePage}]}
+  menuActions={menuActions} />;
 
-export const RolesDetailsPage = props => <DetailsPage {...props} pages={pages()} menuActions={menuActions} />;
 export const ClusterRolesDetailsPage = RolesDetailsPage;
 
 const EmptyMsg = () => <MsgBox title="No Roles Found" detail="Roles grant access to types of objects in the cluster. Roles are applied to a team or user via a Role Binding." />;
@@ -174,13 +169,6 @@ export const roleType = role => {
   return role.metadata.namespace ? 'namespace' : 'cluster';
 };
 
-const resources = [
-  {kind: 'Role', namespaced: true},
-  {kind: 'ClusterRole', namespaced: false},
-];
-
-const flatten = resources => _.flatMap(resources, 'data').filter(r => !!r);
-
 export const RolesPage = ({namespace, showTitle}) => <MultiListPage
   ListComponent={RolesList}
   canCreate={true}
@@ -189,8 +177,11 @@ export const RolesPage = ({namespace, showTitle}) => <MultiListPage
   createButtonText="Create Role"
   createProps={{to: `/ns/${namespace || 'default'}/roles/new`}}
   filterLabel="Roles by name"
-  flatten={flatten}
-  resources={resources}
+  flatten={resources => _.flatMap(resources, 'data').filter(r => !!r)}
+  resources={[
+    {kind: 'Role', namespaced: true},
+    {kind: 'ClusterRole', namespaced: false},
+  ]}
   rowFilters={[{
     type: 'role-kind',
     selected: ['cluster', 'namespace'],

frontend/public/components/app.jsx

@@ -22,7 +22,7 @@ import { NamespaceSelector } from './namespace';
 import { Nav } from './nav';
 import { ProfilePage } from './profile';
 import { ResourceDetailsPage, ResourceListPage } from './resource-list';
-import { BindingsForRolePage, CopyRoleBinding, CreateRoleBinding, EditRoleBinding, EditRulePage } from './RBAC';
+import { CopyRoleBinding, CreateRoleBinding, EditRoleBinding, EditRulePage } from './RBAC';
 import { StartGuidePage } from './start-guide';
 import { SearchPage } from './search';
 import { history, Loading, getNamespace } from './utils';
@@ -112,13 +112,11 @@ class App extends React.PureComponent {
             <Route path="/catalog" exact component={CatalogsDetailsPage} />
 
             <Route path="/clusterroles/:name/add-rule" exact component={EditRulePage} />
-            <Route path="/clusterroles/:name/bindings" exact component={props => <BindingsForRolePage {...props} kind="ClusterRole" />} />
             <Route path="/clusterroles/:name/:rule/edit" exact component={EditRulePage} />
             <Route path="/clusterroles/:name" component={props => <ResourceDetailsPage {...props} plural="clusterroles" />} />
 
             <Route path="/ns/:ns/roles/:name/add-rule" exact component={EditRulePage} />
             <Route path="/ns/:ns/roles/:name/:rule/edit" exact component={EditRulePage} />
-            <Route path="/ns/:ns/roles/:name/bindings" exact component={props => <BindingsForRolePage {...props} kind="Role" />} />
             <Route path="/ns/:ns/roles" exact component={rolesListPage} />
 
             <Route path="/rolebindings/new" exact component={props => <CreateRoleBinding {...props} kind="RoleBinding" />} />
@@ -128,7 +126,7 @@ class App extends React.PureComponent {
             <Route path="/clusterrolebindings/:name/copy" exact component={props => <CopyRoleBinding {...props} kind="ClusterRoleBinding" />} />
             <Route path="/clusterrolebindings/:name/edit" exact component={props => <EditRoleBinding {...props} kind="ClusterRoleBinding" />} />
 
-            <Redirect from="/ns/:ns/rolebindings/:name/details" to="/all-namespaces/rolebindings" />
+            <Redirect from="/ns/:ns/rolebindings/:name" to="/all-namespaces/rolebindings" />
 
             <Route path="/namespaces/:name" component={props => <ResourceDetailsPage {...props} plural="namespaces" />} />
             <Route path="/namespaces" exact component={namespacesListPage} />

frontend/public/components/cloud-services/catalog.tsx

@@ -70,7 +70,7 @@ export const BreakdownDetail: React.StatelessComponent<BreakdownDetailProps> = (
       switch (csv.status.phase) {
         case ClusterServiceVersionPhase.CSVPhaseSucceeded:
           return <li className="co-catalog-breakdown__ns-list__item" key={i}>
-            <Link className="text-muted" to={`/ns/${csv.metadata.namespace}/clusterserviceversion-v1s/${csv.metadata.name}/details`}>{csv.metadata.namespace}</Link>
+            <Link className="text-muted" to={`/ns/${csv.metadata.namespace}/clusterserviceversion-v1s/${csv.metadata.name}`}>{csv.metadata.namespace}</Link>
           </li>;
         case ClusterServiceVersionPhase.CSVPhaseFailed:
           return <li className="co-catalog-breakdown__ns-list__item co-error" key={i}>{`${csv.metadata.namespace}: ${csv.status.reason}`}</li>;

frontend/public/components/cloud-services/clusterserviceversion-resource.tsx

@@ -76,7 +76,7 @@ export const ClusterServiceVersionResourceLink = connectToKinds()((props: Cluste
 
   return <span className="co-resource-link">
     <ResourceIcon kind={props.obj.kind} />
-    <Link to={`/ns/${namespace}/clusterserviceversion-v1s/${appName}/${props.kindObj.plural}/${name}/details`}>{name}</Link>
+    <Link to={`/ns/${namespace}/clusterserviceversion-v1s/${appName}/${props.kindObj.plural}/${name}`}>{name}</Link>
   </span>;
 });
 
@@ -293,10 +293,9 @@ export const ClusterServiceVersionResourceDetails = connectToPlural(
 export const ClusterServiceVersionResourcesDetailsPage: React.StatelessComponent<ClusterServiceVersionResourcesDetailsPageProps> = (props) => <DetailsPage
   {...props}
   menuActions={Cog.factory.common}
-  isList={false}
   breadcrumbs={[
-    {name: props.match.params.appName, path: `${props.match.url.split('/').slice(0, 5).join('/')}/details`},
-    {name: `${props.kind} Details`, path: `${props.match.url}/details`},
+    {name: props.match.params.appName, path: `${props.match.url.split('/').filter((_, i) => i <= props.match.path.split('/').indexOf(':appName')).join('/')}`},
+    {name: `${props.kind} Details`, path: `${props.match.url}`},
   ]}
   pages={[
     navFactory.details((props) => <ClusterServiceVersionResourceDetails {...props} appName={props.match.params.appName} />),

frontend/public/components/cloud-services/clusterserviceversion.tsx

@@ -27,8 +27,8 @@ export const ClusterServiceVersionListItem: React.StatelessComponent<ClusterServ
         ? <Dropdown
           title="View namespace"
           items={namespaces.reduce((acc, ns) => ({...acc, [ns]: ns}), {})}
-          onChange={(ns) => history.push(`${route(appType.metadata.name, ns)}/details`)} />
-        : <Link to={`${route(appType.metadata.name, appType.metadata.namespace)}/details`} title="View details" className="btn btn-default">View details</Link> }
+          onChange={(ns) => history.push(`${route(appType.metadata.name, ns)}`)} />
+        : <Link to={`${route(appType.metadata.name, appType.metadata.namespace)}`} title="View details" className="btn btn-default">View details</Link> }
       { namespaces.length === 1 && <Link to={`${route(appType.metadata.name, appType.metadata.namespace)}/resources`} title="View resources">View resources</Link> }
     </div>
   </div>;
@@ -47,7 +47,7 @@ export const ClusterServiceVersionRow: React.StatelessComponent<ClusterServiceVe
       <ResourceLink kind={appType.kind} namespace={appType.metadata.namespace} title={appType.metadata.name} name={appType.metadata.name} />
     </div>
     <div className="col-xs-4">
-      <Link to={`${route}/details`} title="View details" className="btn btn-default">View details</Link>
+      <Link to={`${route}`} title="View details" className="btn btn-default">View details</Link>
       <Link to={`${route}/resources`} title="View resources">View resources</Link>
     </div>
   </div>;
@@ -205,7 +205,7 @@ export const ClusterServiceVersionsDetailsPage: React.StatelessComponent<Cluster
     <ClusterServiceVersionResourcesPage loaded={true} obj={obj} />
   </div>;
 
-  return <DetailsPage {...props} isList={false} pages={[details(ClusterServiceVersionDetails), editYaml(), {href: 'resources', name: 'Resources', component: Resources}]} />;
+  return <DetailsPage {...props} pages={[details(ClusterServiceVersionDetails), editYaml(), {href: 'resources', name: 'Resources', component: Resources}]} />;
 };
 
 export type ClusterServiceVersionsPageProps = {

frontend/public/components/container.jsx

@@ -167,7 +167,7 @@ const Details = (props) => {
           <h1 className="co-section-title">Network</h1>
           <dl>
             <dt>Node</dt>
-            <dd><Link to={`/nodes/${pod.spec.nodeName}/details`}>{pod.spec.nodeName}</Link></dd>
+            <dd><Link to={`/nodes/${pod.spec.nodeName}`}>{pod.spec.nodeName}</Link></dd>
             <dt>Pod IP</dt>
             <dd>{pod.status.podIP || '-'}</dd>
           </dl>
@@ -208,8 +208,8 @@ export const ContainersDetailsPage = (props) => <div>
     title={props.match.params.name}
     kind="Container"
     breadcrumbs={[
-      {name: props.match.params.podName, path: `${props.match.url.split('/').slice(0, 5).join('/')}/details`},
-      {name: 'Container Details', path: `${props.match.url}/details`},
+      {name: props.match.params.podName, path: `${props.match.url.split('/').filter((_, i) => i <= props.match.path.split('/').indexOf(':podName')).join('/')}`},
+      {name: 'Container Details', path: `${props.match.url}`},
     ]} />
   <Firehose resources={[{
     name: props.match.params.podName,
@@ -218,6 +218,6 @@ export const ContainersDetailsPage = (props) => <div>
     isList: false,
     prop: 'obj',
   }]}>
-    <VertNav hideNav={true} pages={[{name: 'container', href: 'details', component: Details}]} match={props.match}/>
+    <VertNav hideNav={true} pages={[{name: 'container', href: '', component: Details}]} match={props.match}/>
   </Firehose>
 </div>;

frontend/public/components/edit-yaml.jsx

@@ -188,7 +188,7 @@ export class EditYAML extends SafetyFirst {
       action(ko, obj, namespace, name)
         .then(o => {
           if (redirect) {
-            history.push(this.props.redirectURL || `${resourcePath(ko.kind, newName, newNamespace)}/details`);
+            history.push(this.props.redirectURL || `${resourcePath(ko.kind, newName, newNamespace)}`);
             // TODO: (ggreer). show message on new page. maybe delete old obj?
             return;
           }

frontend/public/components/etcd-cluster.jsx

@@ -39,7 +39,7 @@ const menuActions = [UpdateCount, Edit, Delete];
 
 const EtcdClusterLink = (props) => {
   const {uid, name, namespace} = props.metadata;
-  const path = `/ns/${namespace}/etcdclusters/${name}/details`;
+  const path = `/ns/${namespace}/etcdclusters/${name}`;
 
   return <span className="co-resource-link">
     <ResourceIcon kind="EtcdCluster" />

frontend/public/components/events.jsx

@@ -53,7 +53,7 @@ class SysEvent extends React.PureComponent {
           <small className="co-sysevent__meta-source">
             Generated from <span>{this.props.source.component}</span>
             {this.props.source.component === 'kubelet' &&
-              <span> on <Link to={`/nodes/${this.props.source.host}/details`}>{this.props.source.host}</Link></span>
+              <span> on <Link to={`/nodes/${this.props.source.host}`}>{this.props.source.host}</Link></span>
             }
           </small>
         </div>

frontend/public/components/factory/details.tsx

@@ -25,7 +25,6 @@ export type DetailsPageProps = {
   label?: string;
   name?: string;
   namespace?: string;
-  isList: boolean;
   breadcrumbs?: {name: string, path: string}[];
 };
 

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

@@ -46,7 +46,7 @@ class CreateNamespaceModal extends PromiseComponent {
 
     this.handlePromise(promise).then(() => {
       this.props.close();
-      history.push(`namespaces/${name}/details`);
+      history.push(`namespaces/${name}`);
     });
   }
 

frontend/public/components/pod.jsx

@@ -89,10 +89,10 @@ const PodHeader = props => <ListHeader>
 
 const ContainerLink = ({pod, name}) => <span className="co-resource-link">
   <ResourceIcon kind="Container" />
-  <Link to={`/ns/${pod.metadata.namespace}/pods/${pod.metadata.name}/containers/${name}/details`}>{name}</Link>
+  <Link to={`/ns/${pod.metadata.namespace}/pods/${pod.metadata.name}/containers/${name}`}>{name}</Link>
 </span>;
 
-const NodeLink = ({name}) => name ? <Link to={`/nodes/${name}/details`}>{name}</Link> : <span>-</span>;
+const NodeLink = ({name}) => name ? <Link to={`/nodes/${name}`}>{name}</Link> : <span>-</span>;
 
 export const ContainerRow = ({pod, container}) => {
   const cstatus = getContainerStatus(pod, container.name);