diff --git a/frontend/packages/console-shared/src/components/dashboard/details-card/DetailItem.tsx b/frontend/packages/console-shared/src/components/dashboard/details-card/DetailItem.tsx index 863375845f7..8b9c80cefd4 100644 --- a/frontend/packages/console-shared/src/components/dashboard/details-card/DetailItem.tsx +++ b/frontend/packages/console-shared/src/components/dashboard/details-card/DetailItem.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; +import * as classNames from 'classnames'; import { LoadingInline } from '@console/internal/components/utils/status-box'; -const DetailItem: React.FC = React.memo( - ({ title, isLoading = false, children, error = false }) => { +export const DetailItem: React.FC = React.memo( + ({ title, isLoading = false, children, error = false, valueClassName }) => { let status: React.ReactNode; if (error) { status = Not available; @@ -14,7 +15,7 @@ const DetailItem: React.FC = React.memo( return ( <>
{title}
-
{status}
+
{status}
); }, @@ -24,7 +25,8 @@ export default DetailItem; type DetailItemProps = { title: string; + children: React.ReactNode; isLoading?: boolean; error?: boolean; - children: React.ReactNode; + valueClassName?: string; }; diff --git a/frontend/packages/console-shared/src/selectors/infrastructure.ts b/frontend/packages/console-shared/src/selectors/infrastructure.ts index 5a1caef21a2..318965c498e 100644 --- a/frontend/packages/console-shared/src/selectors/infrastructure.ts +++ b/frontend/packages/console-shared/src/selectors/infrastructure.ts @@ -1,5 +1,6 @@ -import * as _ from 'lodash'; import { K8sResourceKind } from '@console/internal/module/k8s'; export const getInfrastructurePlatform = (infrastructure: K8sResourceKind): string => - _.get(infrastructure, 'status.platform'); + infrastructure && infrastructure.status ? infrastructure.status.platform : undefined; +export const getInfrastructureAPIURL = (infrastructure: K8sResourceKind): string => + infrastructure && infrastructure.status ? infrastructure.status.apiServerURL : undefined; diff --git a/frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-details-card.tsx b/frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-details-card.tsx index ad8e4df1f81..f5a668b1285 100644 --- a/frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-details-card.tsx +++ b/frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-details-card.tsx @@ -48,7 +48,7 @@ export const VMDetailsCard: React.FC = () => { - + {name} @@ -64,7 +64,12 @@ export const VMDetailsCard: React.FC = () => { > {launcherPod && } - + {ipAddrs} diff --git a/frontend/public/components/dashboard/dashboards-page/overview-dashboard/details-card.tsx b/frontend/public/components/dashboard/dashboards-page/overview-dashboard/details-card.tsx index 78227e4a8b5..917e6668c05 100644 --- a/frontend/public/components/dashboard/dashboards-page/overview-dashboard/details-card.tsx +++ b/frontend/public/components/dashboard/dashboards-page/overview-dashboard/details-card.tsx @@ -1,13 +1,16 @@ import * as React from 'react'; import * as _ from 'lodash-es'; import { connect } from 'react-redux'; -import { getInfrastructurePlatform } from '@console/shared'; +import { Button } from '@patternfly/react-core'; +import { ArrowCircleUpIcon, InProgressIcon } from '@patternfly/react-icons'; +import { getInfrastructureAPIURL, getInfrastructurePlatform } from '@console/shared'; import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard'; import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody'; import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader'; import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle'; import DetailsBody from '@console/shared/src/components/dashboard/details-card/DetailsBody'; import DetailItem from '@console/shared/src/components/dashboard/details-card/DetailItem'; +import DashboardCardLink from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardLink'; import { DashboardItemProps, withDashboardResources } from '../../with-dashboard-resources'; import { InfrastructureModel, ClusterVersionModel } from '../../../../models'; import { @@ -17,11 +20,63 @@ import { getK8sGitVersion, ClusterVersionKind, getClusterID, + getDesiredClusterVersion, + getLastCompletedUpdate, + getClusterUpdateStatus, + getClusterVersionChannel, + ClusterUpdateStatus, + getOCMLink, } from '../../../../module/k8s'; import { FLAGS } from '../../../../const'; import { flagPending, featureReducerName } from '../../../../reducers/features'; -import { FirehoseResource } from '../../../utils'; +import { FirehoseResource, ExternalLink } from '../../../utils'; import { RootState } from '../../../../redux'; +import { clusterUpdateModal } from '../../../modals'; +import { Link } from 'react-router-dom'; + +const ClusterVersion: React.FC = ({ cv }) => { + const desiredVersion = getDesiredClusterVersion(cv); + const lastVersion = getLastCompletedUpdate(cv); + const status = getClusterUpdateStatus(cv); + + switch (status) { + case ClusterUpdateStatus.Updating: + return ( + <> + {desiredVersion} +
+ + + Updating + +
+ + ); + case ClusterUpdateStatus.UpdatesAvailable: + return ( + <> + {desiredVersion} +
+ +
+ + ); + default: + return lastVersion ? ( + {lastVersion} + ) : ( + Not available + ); + } +}; const clusterVersionResource: FirehoseResource = { kind: referenceForModel(ClusterVersionModel), @@ -76,11 +131,13 @@ export const DetailsCard_ = connect(mapStateToProps)( const clusterVersionData = _.get(resources.cv, 'data') as ClusterVersionKind; const clusterId = getClusterID(clusterVersionData); const openShiftVersion = getOpenShiftVersion(clusterVersionData); + const cvChannel = getClusterVersionChannel(clusterVersionData); const infrastructureLoaded = _.get(resources.infrastructure, 'loaded', false); const infrastructureError = _.get(resources.infrastructure, 'loadError'); const infrastructureData = _.get(resources.infrastructure, 'data') as K8sResourceKind; const infrastructurePlatform = getInfrastructurePlatform(infrastructureData); + const infrastuctureApiUrl = getInfrastructureAPIURL(infrastructureData); const kubernetesVersionData = urlResults.getIn(['version', 'data']); const kubernetesVersionError = urlResults.getIn(['version', 'loadError']); @@ -90,34 +147,50 @@ export const DetailsCard_ = connect(mapStateToProps)( Details + View settings {openshiftFlag ? ( <> + {infrastuctureApiUrl} + + - {clusterId} +
{clusterId}
+
{infrastructurePlatform} - {openShiftVersion} + + + + {cvChannel} ) : ( @@ -126,6 +199,7 @@ export const DetailsCard_ = connect(mapStateToProps)( title="Kubernetes version" error={!!kubernetesVersionError || (kubernetesVersionData && !k8sGitVersion)} isLoading={!kubernetesVersionData} + valueClassName="co-select-to-copy" > {k8sGitVersion} @@ -142,3 +216,7 @@ export const DetailsCard = withDashboardResources(DetailsCard_); type DetailsCardProps = DashboardItemProps & { openshiftFlag: boolean; }; + +type ClusterVersionProps = { + cv: ClusterVersionKind; +}; diff --git a/frontend/public/module/k8s/cluster-settings.ts b/frontend/public/module/k8s/cluster-settings.ts index 6c5481a9e36..7c611429abc 100644 --- a/frontend/public/module/k8s/cluster-settings.ts +++ b/frontend/public/module/k8s/cluster-settings.ts @@ -36,6 +36,9 @@ export const getDesiredClusterVersion = (cv: ClusterVersionKind): string => { return _.get(cv, 'status.desired.version'); }; +export const getClusterVersionChannel = (cv: ClusterVersionKind): string => + cv && cv.spec ? cv.spec.channel : undefined; + export const getLastCompletedUpdate = (cv: ClusterVersionKind): string => { const history: UpdateHistory[] = _.get(cv, 'status.history', []); const lastCompleted: UpdateHistory = history.find((update) => update.state === 'Completed');