Skip to content

Commit

Permalink
feat: add version display (#216)
Browse files Browse the repository at this point in the history
Signed-off-by: Pianist038801 <steven@union.ai>

Co-authored-by: Pianist038801 <steven@union.ai>
  • Loading branch information
Pianist038801 and Pianist038801 authored Sep 28, 2021
1 parent e494a42 commit eac7069
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 7 deletions.
40 changes: 34 additions & 6 deletions src/components/Navigation/UserInformation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
import { WaitForData } from 'components/common/WaitForData';
import { useUserProfile } from 'components/hooks/useUserProfile';
import { getLoginUrl } from 'models/AdminEntity/utils';
import { VersionDisplayModal } from './VersionDisplayModal';
import * as React from 'react';

const useStyles = makeStyles((theme: Theme) => ({
Expand All @@ -20,19 +21,46 @@ const LoginLink: React.FC = () => (
/** Displays user info if logged in, or a login link otherwise. */
export const UserInformation: React.FC<{}> = () => {
const profile = useUserProfile();
const [showVersionInfo, setShowVersionInfo] = React.useState(false);

let modalContent: JSX.Element | null = null;
if (showVersionInfo) {
const onClose = () => setShowVersionInfo(false);
modalContent = <VersionDisplayModal onClose={onClose} />;
}
return (
<WaitForData spinnerVariant="none" {...profile}>
<div className={useStyles().container}>
{profile.value == null ? (
<LoginLink />
) : profile.value.preferredUsername == null ||
profile.value.preferredUsername == '' ? (
profile.value.name
) : (
profile.value.preferredUsername == null || profile.value.preferredUsername == "" ? (
profile.value.name
) : (
profile.value.preferredUsername
)
)}
profile.value.preferredUsername
)}
</div>
<div
onClick={() => setShowVersionInfo(true)}
style={{
cursor: 'pointer',
display: 'flex',
marginLeft: '5px'
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
</svg>
</div>
{modalContent}
</WaitForData>
);
};
110 changes: 110 additions & 0 deletions src/components/Navigation/VersionDisplayModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Dialog, DialogContent } from '@material-ui/core';
import Link from '@material-ui/core/Link';
import { makeStyles, Theme } from '@material-ui/core/styles';
import { ClosableDialogTitle } from 'components/common/ClosableDialogTitle';
import { useVersion } from 'components/hooks/useVersion';
import * as React from 'react';

const { version: platformVersion } = require('../../../package.json');

const useStyles = makeStyles((theme: Theme) => ({
content: {
paddingTop: theme.spacing(2),
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
},
dialog: {
maxWidth: `calc(100% - ${theme.spacing(12)}px)`,
maxHeight: `calc(100% - ${theme.spacing(12)}px)`,
height: theme.spacing(36),
width: theme.spacing(38)
},
versionWrapper: {
minWidth: theme.spacing(20),
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
fontFamily: 'Apple SD Gothic Neo',
fontWeight: 'normal',
fontSize: '14px',
lineHeight: '17px',
color: '#636379',
marginBottom: '6px'
},
title: {
fontFamily: 'Open Sans',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '22px',
margin: '7px 0 26px 0',
color: '#000'
},
link: {
fontFamily: 'Apple SD Gothic Neo',
fontWeight: 'normal',
fontSize: '14px',
lineHeight: '17px',
color: '#636379',
margin: '17px 0 2px 0'
}
}));

interface VersionDisplayModalProps {
onClose(): void;
}

export const VersionDisplayModal: React.FC<VersionDisplayModalProps> = ({
onClose
}) => {
const styles = useStyles();
const version = useVersion();

return (
<Dialog
PaperProps={{ className: styles.dialog }}
maxWidth={false}
open={true}
onClose={onClose}
>
<ClosableDialogTitle onClose={onClose}>{}</ClosableDialogTitle>
<DialogContent className={styles.content}>
<svg height={32} viewBox="100 162 200 175">
<path
fill="#40119C"
d="M152.24 254.36S106 214.31 106 174.27c0 0 6.79-6.89 33.93-8.55l-.31 8.55c0 40.04 12.62 80.09 12.62 80.09zm46.24-80.09s-6.8-6.89-33.92-8.55l.31 8.55c0 40-12.63 80.09-12.63 80.09s46.24-40.05 46.24-80.09zm-16.69 131.07l-7.55 4c15 22.68 24.36 25.11 24.36 25.11 34.68-20 46.24-80.09 46.24-80.09s-28.37 30.96-63.05 50.98zm-29.43-51a11 11 0 00-.23 2.62c0 4.25 1.27 13.94 9.79 31l7.24-4.54c34.69-20 75.68-29.11 75.68-29.11s-25.69-8.9-53.09-8.9c-13.7 0-27.83 2.23-39.39 8.9zm121.69-50.8l7.24 4.54c8.53-17.1 9.79-26.78 9.79-31a11.34 11.34 0 00-.22-2.62c-11.57-6.68-25.69-8.9-39.4-8.9-27.4 0-53.09 8.89-53.09 8.89s41 9.08 75.68 29.11zm-29.44 51c.85-.22 10.08-3.52 24.37-25.11l-7.56-4c-34.68-20-63.05-51-63.05-51s11.56 60.08 46.24 80.1z"
/>
</svg>
<div className={styles.title}>Flyte Console</div>
<div className={styles.versionWrapper}>
<span>UI Version</span>
<span>0.1.1</span>
</div>
<div className={styles.versionWrapper}>
<span>Platform Version</span>
<span>{platformVersion}</span>
</div>
<div className={styles.versionWrapper}>
<span>Admin Version</span>
<span>
{version &&
version.value &&
version.value.controlPlaneVersion
? version.value.controlPlaneVersion.Version
: null}
</span>
</div>
<div className={styles.link}>Documentation Link:</div>
<Link
href="https://docs.flyte.org/en/latest/"
style={{
color: '#1982E3',
fontSize: '12px'
}}
>
https://docs.flyte.org/en/latest/
</Link>
</DialogContent>
</Dialog>
);
};
14 changes: 14 additions & 0 deletions src/components/hooks/useVersion.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { useAPIContext } from 'components/data/apiContext';
import { GetVersionResponse } from 'models/Common/types';
import { useFetchableData } from './useFetchableData';

/** State hook that returns the version information */
export function useVersion() {
const { getVersion } = useAPIContext();
return useFetchableData<GetVersionResponse | null>({
debugName: 'Version',
defaultValue: null,
doFetch: getVersion,
useCache: true
});
}
20 changes: 19 additions & 1 deletion src/models/Common/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ import {
PaginatedEntityResponse,
RequestConfig
} from 'models/AdminEntity/types';
import { getProfileUrl } from 'models/AdminEntity/utils';
import { adminApiUrl, getProfileUrl } from 'models/AdminEntity/utils';
import {
defaultAxiosConfig,
defaultSystemStatus,
identifierPrefixes
} from './constants';
import {
GetVersionResponse,
IdentifierScope,
LiteralMap,
NamedEntity,
Expand Down Expand Up @@ -134,6 +135,23 @@ export const getUserProfile = async () => {
}
};

/** Fetches the current admin version.
*/
export const getVersion = async () => {
const path = adminApiUrl('/version');
try {
const { data } = await axios.get<GetVersionResponse>(
path,
defaultAxiosConfig
);
return data;
} catch (e) {
const { message } = transformRequestError(e, path);
log.error(`Failed to fetch version: ${message}`);
return null;
}
};

/** If env.STATUS_URL is set, will issue a fetch to retrieve the current system
* status. If not, will resolve immediately with a default value indicating
* normal system status.
Expand Down
4 changes: 4 additions & 0 deletions src/models/Common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -203,3 +203,7 @@ export interface SystemStatus {
message?: string;
status: StatusString;
}

export interface GetVersionResponse extends Admin.GetVersionResponse {
controlPlaneVersion: Admin.IVersion | null;
}

0 comments on commit eac7069

Please sign in to comment.