Files
gpustack-ui/src/components/version-info/index.tsx
T

95 lines
2.8 KiB
TypeScript

import Logo from '@/assets/images/gpustack-logo.png';
import { GPUStackVersionAtom, UpdateCheckAtom, userAtom } from '@/atoms/user';
import { getAtomStorage } from '@/atoms/utils';
import externalLinks from '@/constants/external-links';
import { Button } from 'antd';
import React from 'react';
import './index.less';
const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
const latestVersion = getAtomStorage(UpdateCheckAtom).latest_version;
const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version;
const isProd =
currentVersion?.indexOf('rc') === -1 &&
currentVersion?.indexOf('0.0.0') === -1;
const uiVersion = document.documentElement.getAttribute('data-version');
return (
<div className="version-box">
<div className="img">
<img src={Logo} alt="logo" />
</div>
<div className="ver">
{isProd && (
<span className="label">
{intl.formatMessage({ id: 'common.footer.version' })}
</span>
)}
{isProd ? (
<span className="val">
{getAtomStorage(GPUStackVersionAtom)?.version ||
getAtomStorage(GPUStackVersionAtom)?.git_commit}
</span>
) : (
<span className="val dev">
<span className="item">
<span className="tl">
{' '}
{intl.formatMessage({ id: 'common.footer.version.server' })}
</span>
{currentVersion.indexOf('0.0.0') > -1
? getAtomStorage(GPUStackVersionAtom)?.git_commit
: getAtomStorage(GPUStackVersionAtom)?.version}
</span>
<span className="item">
<span className="tl">UI</span>
{uiVersion}
</span>
</span>
)}
</div>
{getAtomStorage(userAtom)?.is_admin && isProd && (
<div className="upgrade-text">
<span className="m-l-5">
{latestVersion &&
latestVersion !== currentVersion &&
latestVersion.indexOf('0.0.0') === -1
? intl.formatMessage(
{ id: 'users.version.update' },
{ version: latestVersion }
)
: intl.formatMessage(
{ id: 'users.version.islatest' },
{ version: currentVersion }
)}
</span>
<Button
type="link"
href={externalLinks.release}
target="_blank"
style={{ paddingInline: 0 }}
>
{intl.formatMessage({ id: 'common.text.changelog' })}
</Button>
</div>
)}
</div>
);
};
export const modalConfig = {
icon: null,
centered: false,
maskClosable: true,
footer: null,
style: {
top: '30%'
},
width: 400
};
export default VersionInfo;