kubenav · ricoberger · Mar 2, 2020 · Mar 2, 2020
diff --git a/src/components/resources/ListPage.tsx b/src/components/resources/ListPage.tsx
@@ -2,8 +2,11 @@ import {
   IonButton,
   IonButtons,
   IonContent,
-  IonHeader, IonIcon,
+  IonHeader,
+  IonIcon,
+  IonLabel,
   IonList,
+  IonListHeader,
   IonMenuButton,
   IonPage,
   IonProgressBar,
@@ -13,7 +16,7 @@ import {
   isPlatform,
 } from '@ionic/react';
 import { refresh } from 'ionicons/icons';
-import React, {useContext, useEffect, useState} from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 
 import { IContext } from '../../declarations';
@@ -27,23 +30,36 @@ import NamespacePopover from './misc/NamespacePopover';
 interface IMatchParams {
   section: string;
   type: string;
-  namespace: string;
-  name: string;
 }
 
 interface IListPageProps extends RouteComponentProps<IMatchParams> {}
 
+// ListPage shows a list of the selected resource. The list can be filtered by namespace and each item contains a status
+// indicator, to get an overview of problems in the cluster.
 const ListPage: React.FunctionComponent<IListPageProps> = ({ match }) => {
   const context = useContext<IContext>(AppContext);
 
+  // namespace and showNamespace is used to group all items by namespace and to only show the namespace once via the
+  // IonListHeader component.
+  let namespace = '';
+  let showNamespace = false;
+
+  // Determine one which page we are currently (which items for a resource do we want to show) by the section and type
+  // parameter. Get the component 'ResourceItem' we want to render.
   const page = resources[match.params.section].pages[match.params.type];
   const Component = page.listItemComponent;
 
+  // The error state is used to show error message to the user, when the Kubernetes API request fails. showLoading is
+  // the indicator the the items are currently loaded/reloaded.
+  // HACK: url is used to avoid unnecessary rendering. We should try to remove this and test if it is really required in
+  // the current version. Maybe it's already improved and not needed.
   const [error, setError] = useState<string>('');
   const [showLoading, setShowLoading] = useState<boolean>(false);
   const [items, setItems] = useState<any>();
   const [url, setUrl] = useState<string>('');
 
+  // When the component is rendered the first time and on every change route change or a modification to the context
+  // object we are loading all items for the corresponding resource.
   useEffect(() => {
     (async() => {
       setItems(undefined);
@@ -54,11 +70,16 @@ const ListPage: React.FunctionComponent<IListPageProps> = ({ match }) => {
     return () => {};
   }, [match, context.clusters, context.cluster]); /* eslint-disable-line */
 
+  // The doRefresh method is used for a manual reload of the items for the corresponding resource. The
+  // event.detail.complete() call is required to finish the animation of the IonRefresher component.
   const doRefresh = async (event) => {
     event.detail.complete();
     await load();
   };
 
+  // load loads all the items for the corresponding resource. If the clusters or cluster property of the context is
+  // undefined we are returning an error. If everything is defined we are getting the selected namespace of the current
+  // cluster and trying to get all the items.
   const load = async () => {
     setShowLoading(true);
 
@@ -103,17 +124,31 @@ const ListPage: React.FunctionComponent<IListPageProps> = ({ match }) => {
         {error === '' && context.clusters && context.cluster && context.clusters.hasOwnProperty(context.cluster) ? (
           <IonList>
             {match.url === url && items ? items.map((item, index) => {
+              if (isNamespaced(match.params.type) && item.metadata && item.metadata.namespace
+                && item.metadata.namespace !== namespace) {
+                namespace = item.metadata.namespace;
+                showNamespace = true;
+              } else {
+                showNamespace = false;
+              }
+
               return (
-                <ItemOptions
-                  key={index}
-                  item={item}
-                  url={page.detailsURL(
-                    item.metadata ? item.metadata.namespace : '',
-                    item.metadata ? item.metadata.name : ''
-                  )}
-                >
-                  <Component key={index} item={item} section={match.params.section} type={match.params.type} />
-                </ItemOptions>
+                <React.Fragment key={index}>
+                  {showNamespace ? (
+                    <IonListHeader>
+                      <IonLabel>{namespace}</IonLabel>
+                    </IonListHeader>
+                  ) : null}
+                  <ItemOptions
+                    item={item}
+                    url={page.detailsURL(
+                      item.metadata ? item.metadata.namespace : '',
+                      item.metadata ? item.metadata.name : ''
+                    )}
+                  >
+                    <Component key={index} item={item} section={match.params.section} type={match.params.type} />
+                  </ItemOptions>
+                </React.Fragment>
               )
             }) : null}
           </IonList>

diff --git a/src/components/resources/cluster/customResourceDefinitions/CustomResourceItem.tsx b/src/components/resources/cluster/customResourceDefinitions/CustomResourceItem.tsx
@@ -27,7 +27,6 @@ const CustomResourceItem: React.FunctionComponent<ICustomResourceItemProps> = ({
       <IonItem button={true} onClick={() => setShowModal(true)}>
         <IonLabel>
           <h2>{item.metadata ? item.metadata.name : ''}</h2>
-          <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
         </IonLabel>
       </IonItem>
 

diff --git a/src/components/resources/configAndStorage/configMaps/ConfigMapItem.tsx b/src/components/resources/configAndStorage/configMaps/ConfigMapItem.tsx
@@ -17,7 +17,6 @@ const ConfigMapItem: React.FunctionComponent<IConfigMapItemProps> = ({ item, sec
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/...omponents/resources/configAndStorage/persistentVolumeClaims/PersistentVolumeClaimItem.tsx b/...omponents/resources/configAndStorage/persistentVolumeClaims/PersistentVolumeClaimItem.tsx
@@ -21,7 +21,7 @@ const PersistentVolumeClaimItem: React.FunctionComponent<IPersistentVolumeClaimI
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}{item.status ? ` | Phase: ${item.status.phase}` : ''}{item.status && item.status.capacity ? ` | Capacity: ${item.status.capacity.storage}` : ''}</p>
+        <p>{item.status ? ` | Phase: ${item.status.phase}` : ''}{item.status && item.status.capacity ? ` | Capacity: ${item.status.capacity.storage}` : ''}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/configAndStorage/secrets/SecretItem.tsx b/src/components/resources/configAndStorage/secrets/SecretItem.tsx
@@ -17,7 +17,6 @@ const SecretItem: React.FunctionComponent<ISecretItemProps> = ({ item, section,
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/configAndStorage/serviceAccounts/ServiceAccountItem.tsx b/src/components/resources/configAndStorage/serviceAccounts/ServiceAccountItem.tsx
@@ -17,7 +17,6 @@ const ServiceAccountItem: React.FunctionComponent<IServiceAccountItemProps> = ({
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/discoveryAndLoadbalancing/ingresses/IngressItem.tsx b/src/components/resources/discoveryAndLoadbalancing/ingresses/IngressItem.tsx
@@ -17,7 +17,6 @@ const IngressItem: React.FunctionComponent<IIngressItemProps> = ({ item, section
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/discoveryAndLoadbalancing/services/ServiceItem.tsx b/src/components/resources/discoveryAndLoadbalancing/services/ServiceItem.tsx
@@ -17,7 +17,6 @@ const ServiceItem: React.FunctionComponent<IServiceItemProps> = ({ item, section
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/rbac/roleBindings/RoleBindingItem.tsx b/src/components/resources/rbac/roleBindings/RoleBindingItem.tsx
@@ -17,7 +17,6 @@ const RoleBindingItem: React.FunctionComponent<IRoleBindingItemProps> = ({ item,
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/rbac/roles/RoleItem.tsx b/src/components/resources/rbac/roles/RoleItem.tsx
@@ -17,7 +17,6 @@ const RoleItem: React.FunctionComponent<IRoleItemProps> = ({ item, section, type
     <IonItem routerLink={`/resources/${section}/${type}/${item.metadata ? item.metadata.namespace : ''}/${item.metadata ? item.metadata.name : ''}`} routerDirection="forward">
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/cronJobs/CronJobItem.tsx b/src/components/resources/workloads/cronJobs/CronJobItem.tsx
@@ -20,8 +20,7 @@ const CronJobItem: React.FunctionComponent<ICronJobItemProps> = ({ item, section
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
         <p>
-          Namespace: {item.metadata ? item.metadata.namespace : '-'}
-          | Last Time Schedule : {item.status && item.status.lastScheduleTime
+          Last Time Schedule : {item.status && item.status.lastScheduleTime
           ? timeDifference(new Date().getTime(), new Date(item.status.lastScheduleTime.toString()).getTime()) : '-'}
         </p>
       </IonLabel>

diff --git a/src/components/resources/workloads/daemonSets/DaemonSetItem.tsx b/src/components/resources/workloads/daemonSets/DaemonSetItem.tsx
@@ -46,7 +46,6 @@ const DaemonSetItem: React.FunctionComponent<IDaemonSetItemProps> = ({ item, sec
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/deployments/DeploymentItem.tsx b/src/components/resources/workloads/deployments/DeploymentItem.tsx
@@ -39,7 +39,6 @@ const DeploymentItem: React.FunctionComponent<IDeploymentItemProps> = ({ item, s
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/jobs/JobItem.tsx b/src/components/resources/workloads/jobs/JobItem.tsx
@@ -30,7 +30,6 @@ const JobItem: React.FunctionComponent<IJobItemProps> = ({ item, section, type }
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/pods/PodItem.tsx b/src/components/resources/workloads/pods/PodItem.tsx
@@ -58,7 +58,6 @@ const PodItem: React.FunctionComponent<IPodItemProps> = ({ item, section, type }
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/replicaSets/ReplicaSetItem.tsx b/src/components/resources/workloads/replicaSets/ReplicaSetItem.tsx
@@ -35,7 +35,6 @@ const ReplicaSetItem: React.FunctionComponent<IReplicaSetItemProps> = ({ item, s
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/replicationControllers/ReplicationControllerItem.tsx b/src/components/resources/workloads/replicationControllers/ReplicationControllerItem.tsx
@@ -39,7 +39,6 @@ const ReplicationControllerItem: React.FunctionComponent<IReplicationControllerI
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )

diff --git a/src/components/resources/workloads/statefulSets/StatefulSetItem.tsx b/src/components/resources/workloads/statefulSets/StatefulSetItem.tsx
@@ -32,7 +32,6 @@ const StatefulSetItem: React.FunctionComponent<IStatefulSetItemProps> = ({ item,
       <ItemStatus status={status} />
       <IonLabel>
         <h2>{item.metadata ? item.metadata.name : ''}</h2>
-        <p>Namespace: {item.metadata ? item.metadata.namespace : '-'}</p>
       </IonLabel>
     </IonItem>
   )