feat: add version display

src/components/Navigation/UserInformation.tsx

@@ -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) => ({
@@ -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>
     );
 };

src/components/Navigation/VersionDisplayModal.tsx

@@ -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>
+    );
+};

src/components/hooks/useVersion.ts

@@ -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
+    });
+}

src/models/Common/api.ts

@@ -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,
@@ -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.

src/models/Common/types.ts

@@ -203,3 +203,7 @@ export interface SystemStatus {
     message?: string;
     status: StatusString;
 }
+
+export interface GetVersionResponse extends Admin.GetVersionResponse {
+    controlPlaneVersion: Admin.IVersion | null;
+}