diff --git a/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx b/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx
index f50285000b..52194284fc 100644
--- a/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx
+++ b/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx
@@ -1,15 +1,53 @@
import React from 'react';
-
+import { Button, Grid, makeStyles, Tooltip } from '@material-ui/core';
+import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
import { useCluster } from '../ClusterContext';
import { TableCardFromData } from '../TableCardFromData';
+const useStyles = makeStyles({
+ button: {
+ textTransform: 'none',
+ borderRadius: 16,
+ margin: '0px',
+ paddingLeft: '4px',
+ paddingRight: '4px',
+ },
+});
+
export const ClusterInfoCard = () => {
const { data } = useCluster();
+ const classes = useStyles();
if (!data) {
return null;
}
+ data.openshiftVersion = (
+ <>
+ {data.update?.available ? (
+
+ {data.openshiftVersion}
+
+
+ }
+ className={classes.button}
+ href={data.update?.url}
+ size="small"
+ >
+ Upgrade available
+
+
+
+
+ ) : (
+ data.openshiftVersion
+ )}
+ >
+ ) as any;
+
const nameMap = new Map([
['name', 'Name'],
['kubernetesVersion', 'Kubernetes version'],
diff --git a/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx b/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx
index 31716c852a..bc5ac408d6 100644
--- a/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx
+++ b/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx
@@ -18,7 +18,7 @@ const valueFormatter = (value: any): any => {
return {value};
}
}
- return value.toString();
+ return value;
};
export const TableCardFromData = ({
@@ -30,12 +30,12 @@ export const TableCardFromData = ({
title: string;
nameMap: Map;
}) => {
- const parsedData: { name: string; value: string }[] = [];
+ const parsedData: { name: string; value: any }[] = [];
const entries = Object.entries(data);
nameMap.forEach((_, key) => {
const entry = entries.find(e => e[0] === key)!;
- // If key of the map doesnt have an prop in the cluster object, continue
+ // If key of the map doesn't have an prop in the cluster object, continue
if (entry === undefined) {
return;
}