Improve type specificity for overview related comoponents

frontend/public/components/overview/build-configs-overview.tsx

@@ -8,7 +8,13 @@ import { errorModal } from '../modals/error-modal';
 import { fromNow } from '../utils/datetime';
 import { K8sResourceKind } from '../../module/k8s';
 import { startBuild, getBuildNumber } from '../../module/k8s/builds';
-import { ResourceLink, resourcePath, SidebarSectionHeading } from '../utils';
+import {
+ ResourceLink,
+ resourcePath,
+ SidebarSectionHeading
+} from '../utils';
+
+import { BuildConfigOverviewItem } from '.';
 
 const conjugateBuildPhase = (phase: string): string => {
  switch (phase) {
@@ -94,10 +100,6 @@ type BuildOverviewItemProps = {
  build: K8sResourceKind;
 };
 
-type BuildConfigOverviewItem = K8sResourceKind & {
- builds: K8sResourceKind[];
-};
-
 type BuildConfigOverviewListProps = {
  buildConfig: BuildConfigOverviewItem;
 };

frontend/public/components/overview/daemon-set-overview.tsx

@@ -2,16 +2,17 @@ import * as React from 'react';
 
 import { DaemonSetModel } from '../../models';
 import { ResourceSummary } from '../utils';
-import { ResourceOverviewDetails } from './resource-overview-details';
 import {
  menuActions,
  DaemonSetDetailsList
 } from '../daemon-set';
 
-import { NetworkingOverview } from './networking-overview';
-import { BuildConfigsOverview } from './build-configs-overview';
 
-const DaemonSetOverviewDetails: React.SFC<{item:any}> = ({item}) =>
+import { OverviewDetailsResourcesTab } from './resource-overview-page';
+import { OverviewItem } from '.';
+import { ResourceOverviewDetails } from './resource-overview-details';
+
+const DaemonSetOverviewDetails: React.SFC<DaemonSetOverviewDetailsProps> = ({item}) =>
  <div className="co-m-pane__body resource-overview__body">
  <div className="resource-overview__summary">
  <ResourceSummary resource={item.obj} />
@@ -21,28 +22,31 @@ const DaemonSetOverviewDetails: React.SFC<{item:any}> = ({item}) =>
  </div>
  </div>;
 
-const DaemonSetResourceOverview: React.SFC<{item: any}> = ({item: {buildConfigs, routes, services}}) => (
- <div className="overview__sidebar-pane-body">
- <BuildConfigsOverview buildConfigs={buildConfigs} />
- <NetworkingOverview services={services} routes={routes} />
- </div>
-);
-
 const tabs = [
  {
  name: 'Overview',
  component: DaemonSetOverviewDetails
  },
  {
  name: 'Resources',
- component: DaemonSetResourceOverview
+ component: OverviewDetailsResourcesTab
  }
 ];
 
-export const DaemonSetOverview: React.SFC<{item: any}> = ({item}) =>
+export const DaemonSetOverview: React.SFC<DaemonSetOverviewProps> = ({item}) =>
  <ResourceOverviewDetails
  item={item}
  kindObj={DaemonSetModel}
  menuActions={menuActions}
  tabs={tabs}
  />;
+
+/* eslint-disable no-unused-vars, no-undef */
+type DaemonSetOverviewDetailsProps = {
+ item: OverviewItem;
+};
+
+type DaemonSetOverviewProps = {
+ item: OverviewItem;
+};
+/* eslint-enable no-unused-vars, no-undef */

frontend/public/components/overview/deployment-config-overview.tsx

@@ -11,11 +11,11 @@ import {
  ResourceSummary,
 } from '../utils';
 
-import { BuildConfigsOverview } from './build-configs-overview';
-import { NetworkingOverview } from './networking-overview';
+import { OverviewDetailsResourcesTab } from './resource-overview-page';
+import { OverviewItem } from '.';
 import { ResourceOverviewDetails } from './resource-overview-details';
 
-const DeploymentConfigOverviewDetails: React.SFC<{item:any}> = ({item: {obj: dc}}) => {
+const DeploymentConfigOverviewDetails: React.SFC<DeploymentConfigOverviewDetailsProps> = ({item: {obj: dc}}) => {
  return <div className="overview__sidebar-pane-body resource-overview__body">
  <div className="resource-overview__pod-counts">
  <DeploymentPodCounts resource={dc} resourceKind={DeploymentConfigModel} />
@@ -40,28 +40,31 @@ const DeploymentConfigOverviewDetails: React.SFC<{item:any}> = ({item: {obj: dc}
  </div>;
 };
 
-const DeploymentConfigResources: React.SFC<{item:any}> = ({item: {buildConfigs, routes, services}}) => (
- <div className="overview__sidebar-pane-body">
- <BuildConfigsOverview buildConfigs={buildConfigs} />
- <NetworkingOverview routes={routes} services={services} />
- </div>
-);
-
 const tabs = [
  {
  name: 'Overview',
  component: DeploymentConfigOverviewDetails
  },
  {
  name: 'Resources',
- component: DeploymentConfigResources
+ component: OverviewDetailsResourcesTab
  }
 ];
 
-export const DeploymentConfigOverviewPage: React.SFC<{item:any}> = ({item}) =>
+export const DeploymentConfigOverviewPage: React.SFC<DeploymentConfigOverviewProps> = ({item}) =>
  <ResourceOverviewDetails
  item={item}
  kindObj={DeploymentConfigModel}
  menuActions={menuActions}
  tabs={tabs}
  />;
+
+/* eslint-disable no-unused-vars, no-undef */
+type DeploymentConfigOverviewDetailsProps = {
+ item: OverviewItem;
+};
+
+type DeploymentConfigOverviewProps = {
+ item: OverviewItem;
+};
+/* eslint-enable no-unused-vars, no-undef */

frontend/public/components/overview/deployment-overview.tsx

@@ -11,21 +11,21 @@ import {
  ResourceSummary,
 } from '../utils';
 
-import { NetworkingOverview } from './networking-overview';
+import { OverviewDetailsResourcesTab } from './resource-overview-page';
+import { OverviewItem } from '.';
 import { ResourceOverviewDetails } from './resource-overview-details';
-import { BuildConfigsOverview } from './build-configs-overview';
 
-const DeploymentOverviewDetails: React.SFC<{item: any}> = ({item: {obj: deployment}}) => {
+const DeploymentOverviewDetails: React.SFC<DeploymentOverviewDetailsProps> = ({item}) => {
  return <div className="overview__sidebar-pane-body resource-overview__body">
  <div className="resource-overview__pod-counts">
- <DeploymentPodCounts resource={deployment} resourceKind={DeploymentModel} />
+ <DeploymentPodCounts resource={item.obj} resourceKind={DeploymentModel} />
  </div>
  <div className="resource-overview__summary">
- <ResourceSummary resource={deployment}>
+ <ResourceSummary resource={item.obj}>
  <dt>Status</dt>
  <dd>
  {
- deployment.status.availableReplicas === deployment.status.updatedReplicas
+ item.obj.status.availableReplicas === item.obj.status.updatedReplicas
  ? 'Active'
  : <div>
  <span className="co-icon-space-r"><LoadingInline /></span> Updating
@@ -35,33 +35,36 @@ const DeploymentOverviewDetails: React.SFC<{item: any}> = ({item: {obj: deployme
  </ResourceSummary>
  </div>
  <div className="resource-overview__details">
- <DeploymentDetailsList deployment={deployment} />
+ <DeploymentDetailsList deployment={item.obj} />
  </div>
  </div>;
 };
 
-const DeploymentResourceOverview: React.SFC<{item: any}>= ({item: {buildConfigs, routes, services}}) => (
- <div className="overview__sidebar-pane-body">
- <BuildConfigsOverview buildConfigs={buildConfigs} />
- <NetworkingOverview services={services} routes={routes} />
- </div>
-);
-
 const tabs = [
  {
  name: 'Overview',
  component: DeploymentOverviewDetails
  },
  {
  name: 'Resources',
- component: DeploymentResourceOverview
+ component: OverviewDetailsResourcesTab
  }
 ];
 
-export const DeploymentOverviewPage: React.SFC<{item:any}> = ({item}) =>
+export const DeploymentOverviewPage: React.SFC<DeploymentOverviewProps> = ({item}) =>
  <ResourceOverviewDetails
  item={item}
  kindObj={DeploymentModel}
  menuActions={menuActions}
  tabs={tabs}
  />;
+
+/* eslint-disable no-unused-vars, no-undef */
+type DeploymentOverviewDetailsProps = {
+ item: OverviewItem;
+};
+
+type DeploymentOverviewProps = {
+ item: OverviewItem;
+};
+/* eslint-enable no-unused-vars, no-undef */

frontend/public/components/overview/index.tsx

@@ -450,7 +450,7 @@ class OverviewDetails extends SafetyFirst<OverviewDetailsProps, OverviewDetailsS
  });
  }
 
- toReplicationControllerItem(rc: K8sResourceKind): OverviewItem {
+ toReplicationControllerItem(rc: K8sResourceKind): PodControllerOverviewItem {
  const pods = this.getPodsForResource(rc);
  const alerts = {
  ...combinePodAlerts(pods),
@@ -478,21 +478,12 @@ class OverviewDetails extends SafetyFirst<OverviewDetailsProps, OverviewDetailsS
  return _.filter(ownedRC, rc => _.get(rc, 'status.replicas') || getDeploymentConfigVersion(rc) === currentVersion);
  }
 
- getReplicationControllersForResource(resource: K8sResourceKind): ReplicatorOverviewItem {
+ getReplicationControllersForResource(resource: K8sResourceKind): PodControllerOverviewItem[] {
  const replicationControllers = this.getActiveReplicationControllers(resource);
- const rcItems = sortReplicationControllersByRevision(replicationControllers).map(rc => this.toReplicationControllerItem(rc));
- const current: any = _.first(rcItems);
- const previous: any = _.nth(rcItems, 1);
- const isRollingOut = current && previous && current.phase !== 'Cancelled' && current.phase !== 'Failed';
-
- return {
- current,
- previous,
- isRollingOut,
- };
+ return sortReplicationControllersByRevision(replicationControllers).map(rc => this.toReplicationControllerItem(rc));
  }
 
- toReplicaSetItem(rs: K8sResourceKind): OverviewItem {
+ toReplicaSetItem(rs: K8sResourceKind): PodControllerOverviewItem {
  const obj = {
  ...rs,
  kind: ReplicaSetModel.kind,
@@ -514,17 +505,9 @@ class OverviewDetails extends SafetyFirst<OverviewDetailsProps, OverviewDetailsS
  return _.filter(ownedRS, rs => _.get(rs, 'status.replicas') || getDeploymentRevision(rs) === currentRevision);
  }
 
- getReplicaSetsForResource(deployment: K8sResourceKind): ReplicatorOverviewItem {
+ getReplicaSetsForResource(deployment: K8sResourceKind): PodControllerOverviewItem[] {
  const replicaSets = this.getActiveReplicaSets(deployment);
- const rsItems = sortReplicaSetsByRevision(replicaSets).map(rs => this.toReplicaSetItem(rs));
- const current = _.first(rsItems);
- const previous = _.nth(rsItems, 1);
- const isRollingOut = !!current && !!previous;
- return {
- current,
- previous,
- isRollingOut,
- };
+ return sortReplicaSetsByRevision(replicaSets).map(rs => this.toReplicaSetItem(rs));
  }
 
  getBuildsForResource(buildConfig: K8sResourceKind): K8sResourceKind[] {
@@ -595,7 +578,10 @@ class OverviewDetails extends SafetyFirst<OverviewDetailsProps, OverviewDetailsS
  createDeploymentItems(): OverviewItem[] {
  const {deployments} = this.props;
  return _.map(deployments.data, d => {
- const {current, previous, isRollingOut} = this.getReplicaSetsForResource(d);
+ const replicaSets = this.getReplicaSetsForResource(d);
+ const current = _.head(replicaSets);
+ const previous = _.nth(replicaSets, 1);
+ const isRollingOut = !!current && !!previous;
  const buildConfigs = this.getBuildConfigsForResource(d);
  const services = this.getServicesForResource(d);
  const routes = this.getRoutesForServices(services);
@@ -624,7 +610,10 @@ class OverviewDetails extends SafetyFirst<OverviewDetailsProps, OverviewDetailsS
  createDeploymentConfigItems(): OverviewItem[] {
  const {deploymentConfigs} = this.props;
  return _.map(deploymentConfigs.data, dc => {
- const {current, previous, isRollingOut} = this.getReplicationControllersForResource(dc);
+ const replicationControllers = this.getReplicationControllersForResource(dc);
+ const current = _.head(replicationControllers);
+ const previous = _.nth(replicationControllers, 1);
+ const isRollingOut = current && previous && current.phase !== 'Cancelled' && current.phase !== 'Failed';
  const buildConfigs = this.getBuildConfigsForResource(dc);
  const services = this.getServicesForResource(dc);
  const routes = this.getRoutesForServices(services);
@@ -664,12 +653,16 @@ class OverviewDetails extends SafetyFirst<OverviewDetailsProps, OverviewDetailsS
  };
  const pods = this.getPodsForResource(ss);
  const alerts = combinePodAlerts(pods);
+ const services = this.getServicesForResource(ss);
+ const routes = this.getRoutesForServices(services);
  return {
  alerts,
  buildConfigs,
  obj,
  pods,
  readiness,
+ routes,
+ services,
  };
  });
  }
@@ -885,24 +878,44 @@ export const OverviewPage = withStartGuide(
 );
 
 /* eslint-disable no-unused-vars, no-undef */
+type OverviewItemAlerts = {
+ [key: string]: {
+ message: string;
+ severity: string;
+ }
+};
 
-// TODO (jon) Improve overview item type to be more specific
-type OverviewItem = {
+export type PodControllerOverviewItem = {
+ alerts: OverviewItemAlerts;
+ revision: number;
  obj: K8sResourceKind;
- [key: string]: any;
+ phase?: string;
+ pods: K8sResourceKind[];
 };
 
-type ReplicatorOverviewItem = {
- current: OverviewItem;
- previous: OverviewItem;
- isRollingOut: boolean;
+type OverviewItemReadiness = {
+ desired: string | number;
+ ready: string | number;
 };
 
-type BuildConfigOverviewItem = K8sResourceKind & {
+export type BuildConfigOverviewItem = K8sResourceKind & {
  builds: K8sResourceKind[];
 };
 
-type OverviewGroup = {
+export type OverviewItem = {
+ alerts?: OverviewItemAlerts;
+ buildConfigs: BuildConfigOverviewItem[];
+ current?: PodControllerOverviewItem;
+ isRollingOut?: boolean;
+ obj: K8sResourceKind;
+ pods?: K8sResourceKind[];
+ previous?: PodControllerOverviewItem;
+ readiness: OverviewItemReadiness;
+ routes: K8sResourceKind[];
+ services: K8sResourceKind[];
+};
+
+export type OverviewGroup = {
  name?: string;
  items: OverviewItem[];
 };

frontend/public/components/overview/networking-overview.tsx

@@ -3,8 +3,8 @@ import * as _ from 'lodash-es';
 import { Icon, ListGroup } from 'patternfly-react';
 
 import { K8sResourceKind } from '../../module/k8s';
-import { ResourceLink, SidebarSectionHeading } from '../utils';
 import { RouteLocation } from '../routes';
+import { ResourceLink, SidebarSectionHeading } from '../utils';
 
 const ServicePortList: React.SFC<ServicePortListProps> = ({service}) => {
  const ports = _.get(service, 'spec.ports', []);