Add details card

frontend/__tests__/components/utils/firehose.spec.tsx

@@ -4,9 +4,9 @@ import { Map as ImmutableMap } from 'immutable';
 import Spy = jasmine.Spy;
 
 import { Firehose } from '../../../public/components/utils/firehose';
-import { FirehoseResource } from '../../../public/components/factory';
 import { K8sKind, K8sResourceKindReference } from '../../../public/module/k8s';
 import { PodModel, ServiceModel } from '../../../public/models';
+import { FirehoseResource } from '../../../public/components/utils';
 
 // TODO(alecmerdler): Use these once `Firehose` is converted to TypeScript
 type FirehoseProps = {

frontend/public/components/about-modal.tsx

@@ -8,29 +8,29 @@ import { connectToFlags } from '../reducers/features';
 import { getBrandingDetails } from './masthead';
 import { Firehose } from './utils';
 import { ClusterVersionModel } from '../models';
-import { ClusterVersionKind, referenceForModel, UpdateHistory } from '../module/k8s';
+import { ClusterVersionKind, referenceForModel } from '../module/k8s';
 import { k8sVersion } from '../module/status';
-import { hasAvailableUpdates } from '../module/k8s/cluster-settings';
+import { hasAvailableUpdates, getK8sGitVersion, getOpenShiftVersion } from '../module/k8s/cluster-settings';
 
 const AboutModalItems: React.FC<AboutModalItemsProps> = ({closeAboutModal, cv}) => {
   const [kubernetesVersion, setKubernetesVersion] = React.useState('');
   React.useEffect(() => {
     k8sVersion()
-      .then(({gitVersion}) => setKubernetesVersion(gitVersion))
+      .then(response => setKubernetesVersion(getK8sGitVersion(response) || '-'))
       .catch(() => setKubernetesVersion('unknown'));
   }, []);
   const clusterID: string = _.get(cv, 'data.spec.clusterID');
   const channel: string = _.get(cv, 'data.spec.channel');
-  const lastUpdate: UpdateHistory = _.get(cv, 'data.status.history[0]');
+  const openshiftVersion = getOpenShiftVersion(_.get(cv, 'data'));
   return (
     <React.Fragment>
       {hasAvailableUpdates(cv.data) && <Alert className="co-about-modal__alert" variant="info" title={<React.Fragment>Update available. <Link to="/settings/cluster" onClick={closeAboutModal}>View Cluster Settings</Link></React.Fragment>} />}
       <TextContent>
         <TextList component="dl">
-          {lastUpdate && (
+          {openshiftVersion && (
             <React.Fragment>
               <TextListItem component="dt">OpenShift Version</TextListItem>
-              <TextListItem component="dd">{lastUpdate.state === 'Partial' ? `Updating to ${lastUpdate.version}` : lastUpdate.version}</TextListItem>
+              <TextListItem component="dd">{openshiftVersion}</TextListItem>
             </React.Fragment>
           )}
           <TextListItem component="dt">Kubernetes Version</TextListItem>

frontend/public/components/dashboard/details-card/detail-item.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as _ from 'lodash-es';
+import { OverlayTrigger, Tooltip } from 'patternfly-react';
+
+import { LoadingInline } from '../../utils';
+
+export const DetailItem: React.FC<DetailItemProps> = React.memo(({ title, value, isLoading }) => {
+  const description = value ? (
+    <OverlayTrigger
+      overlay={<Tooltip id={_.uniqueId('tooltip-for-')}>{value}</Tooltip>}
+      placement="top"
+      trigger={['hover', 'focus']}
+      rootClose={false}
+    >
+      <span>{value}</span>
+    </OverlayTrigger>
+  ) : (
+    '-'
+  );
+  return (
+    <React.Fragment>
+      <dt className="co-details-card__item-title">{title}</dt>
+      <dd className="co-details-card__item-value">{isLoading ? <LoadingInline /> : description}</dd>
+    </React.Fragment>
+  );
+});
+
+type DetailItemProps = {
+  title: string;
+  value?: string;
+  isLoading: boolean;
+};

frontend/public/components/dashboard/details-card/details-body.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const DetailsBody: React.FC<DetailsBodyProps> = ({ children }) => (
+  <dl className="co-details-card__body">{children}</dl>
+);
+
+type DetailsBodyProps = {
+  children: React.ReactNode;
+}

frontend/public/components/dashboard/details-card/details-card.scss

@@ -0,0 +1,23 @@
+.co-details-card {
+  margin-bottom: 1rem;
+}
+
+.co-details-card__body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.co-details-card__item-title {
+  flex-basis: 100%;
+  font-size: 0.875rem;
+  text-transform: capitalize;
+}
+
+.co-details-card__item-value {
+  flex-basis: 100%;
+  font-size: 0.875rem;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

frontend/public/components/dashboard/details-card/index.ts

@@ -0,0 +1,2 @@
+export * from './detail-item';
+export * from './details-body';

frontend/public/components/dashboards-page/dashboards.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import { connect } from 'react-redux';
 
 import { OverviewDashboard } from './overview-dashboard/overview-dashboard';
-import { HorizontalNav, PageHeading } from '../utils';
+import { HorizontalNav, PageHeading, LoadingBox } from '../utils';
 
 const tabs = [
   {
@@ -12,9 +13,23 @@ const tabs = [
   },
 ];
 
-export const DashboardsPage: React.FC<RouteComponentProps> = ({ match }) => (
-  <React.Fragment>
-    <PageHeading title="Dashboards" detail={true} />
-    <HorizontalNav match={match} pages={tabs} noStatusBox />
-  </React.Fragment>
-);
+const _DashboardsPage: React.FC<DashboardsPageProps> = ({ match, kindsInFlight }) => {
+  return kindsInFlight
+    ? <LoadingBox />
+    : (
+      <>
+        <PageHeading title="Dashboards" detail={true} />
+        <HorizontalNav match={match} pages={tabs} noStatusBox />
+      </>
+    );
+};
+
+const mapStateToProps = ({k8s}) => ({
+  kindsInFlight: k8s.getIn(['RESOURCES', 'inFlight']),
+});
+
+export const DashboardsPage = connect(mapStateToProps)(_DashboardsPage);
+
+type DashboardsPageProps = RouteComponentProps & {
+  kindsInFlight: boolean;
+};

frontend/public/components/dashboards-page/overview-dashboard/details-card.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import * as _ from 'lodash-es';
+
+import {
+  DashboardCard,
+  DashboardCardBody,
+  DashboardCardHeader,
+  DashboardCardTitle,
+} from '../../dashboard/dashboard-card';
+import { DetailsBody, DetailItem } from '../../dashboard/details-card';
+import { withDashboardResources, DashboardItemProps } from '../with-dashboard-resources';
+import { InfrastructureModel, ClusterVersionModel } from '../../../models';
+import { referenceForModel, K8sResourceKind, getOpenShiftVersion, getK8sGitVersion, getClusterName, ClusterVersionKind } from '../../../module/k8s';
+import { FLAGS } from '../../../const';
+import { flagPending, connectToFlags } from '../../../reducers/features';
+import { FirehoseResource } from '../../utils';
+
+const getInfrastructurePlatform = (infrastructure: K8sResourceKind): string => _.get(infrastructure, 'status.platform');
+
+const clusterVersionResource: FirehoseResource = {
+  kind: referenceForModel(ClusterVersionModel),
+  namespaced: false,
+  name: 'version',
+  isList: false,
+  prop: 'cv',
+};
+
+const infrastructureResource: FirehoseResource = {
+  kind: referenceForModel(InfrastructureModel),
+  namespaced: false,
+  name: 'cluster',
+  isList: false,
+  prop: 'infrastructure',
+};
+
+export const DetailsCard_: React.FC<DetailsCardProps> = ({
+  watchURL,
+  stopWatchURL,
+  watchK8sResource,
+  stopWatchK8sResource,
+  resources,
+  urlResults,
+  flags,
+}) => {
+  const openshiftFlag = flags[FLAGS.OPENSHIFT];
+  React.useEffect(() => {
+    if (flagPending(openshiftFlag)) {
+      return;
+    }
+    if (openshiftFlag) {
+      watchK8sResource(clusterVersionResource);
+      watchK8sResource(infrastructureResource);
+      return () => {
+        stopWatchK8sResource(clusterVersionResource);
+        stopWatchK8sResource(infrastructureResource);
+      };
+    }
+    watchURL('version');
+    return () => {
+      stopWatchURL('version');
+    };
+  }, [openshiftFlag, watchK8sResource, stopWatchK8sResource, watchURL, stopWatchURL]);
+
+  const clusterVersion = _.get(resources, 'cv');
+  const clusterVersionLoaded = _.get(clusterVersion, 'loaded', false);
+  const openshiftVersion = getOpenShiftVersion(_.get(clusterVersion, 'data') as ClusterVersionKind);
+
+  const infrastructure = _.get(resources, 'infrastructure');
+  const infrastructureLoaded = _.get(infrastructure, 'loaded', false);
+  const infrastructureData = _.get(infrastructure, 'data') as K8sResourceKind;
+
+
+  const kubernetesVersionResponse = urlResults.getIn(['version', 'result']);
+
+  return (
+    <DashboardCard className="co-details-card">
+      <DashboardCardHeader>
+        <DashboardCardTitle>Details</DashboardCardTitle>
+      </DashboardCardHeader>
+      <DashboardCardBody isLoading={flagPending(openshiftFlag)}>
+        <DetailsBody>
+          {openshiftFlag ? (
+            <>
+              <DetailItem
+                key="name"
+                title="Name"
+                value={getClusterName()}
+                isLoading={false}
+              />
+              <DetailItem
+                key="provider"
+                title="Provider"
+                value={getInfrastructurePlatform(infrastructureData)}
+                isLoading={!infrastructureLoaded}
+              />
+              <DetailItem
+                key="openshift"
+                title="OpenShift version"
+                value={openshiftVersion}
+                isLoading={!clusterVersionLoaded}
+              />
+            </>
+          ) : (
+            <DetailItem
+              key="kubernetes"
+              title="Kubernetes version"
+              value={getK8sGitVersion(kubernetesVersionResponse)}
+              isLoading={!kubernetesVersionResponse}
+            />
+          )}
+        </DetailsBody>
+      </DashboardCardBody>
+    </DashboardCard>
+  );
+};
+
+type DetailsCardProps = DashboardItemProps & {
+  flags: {[FLAGS.OPENSHIFT]: boolean};
+}
+
+export const DetailsCard = withDashboardResources(connectToFlags(FLAGS.OPENSHIFT)(DetailsCard_));

frontend/public/components/dashboards-page/overview-dashboard/health-card.tsx

@@ -66,7 +66,7 @@ const fetchK8sHealth = async(url) => {
   return response.text();
 };
 
-const _HealthCard: React.FC<HealthProps> = ({
+const HealthCard_: React.FC<HealthProps> = ({
   watchURL,
   stopWatchURL,
   watchPrometheus,
@@ -153,7 +153,7 @@ const _HealthCard: React.FC<HealthProps> = ({
   );
 };
 
-export const HealthCard = withDashboardResources(connect(mapStateToProps)(_HealthCard));
+export const HealthCard = withDashboardResources(connect(mapStateToProps)(HealthCard_));
 
 type ClusterHealth = {
   state: HealthState;

frontend/public/components/dashboards-page/overview-dashboard/overview-dashboard.tsx

@@ -2,15 +2,20 @@ import * as React from 'react';
 
 import { Dashboard, DashboardGrid } from '../../dashboard';
 import { HealthCard } from './health-card';
+import { DetailsCard } from './details-card';
 
 export const OverviewDashboard: React.FC<{}> = () => {
   const mainCards = [
     <HealthCard key="health" />,
   ];
 
+  const leftCards = [
+    <DetailsCard key="details" />,
+  ];
+
   return (
     <Dashboard>
-      <DashboardGrid mainCards={mainCards} />
+      <DashboardGrid mainCards={mainCards} leftCards={leftCards} />
     </Dashboard>
   );
 };