UI build flags and landing updates

frontend/package.json

@@ -9,8 +9,10 @@
   "scripts": {
     "start": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",
     "start-sky": "cross-env NODE_ENV=development UI_VERSION=sky webpack serve --config webpack.config.js",
+    "start-factory": "cross-env NODE_ENV=development UI_VERSION=factory webpack serve --config webpack.config.js",
     "build": "cross-env NODE_ENV=production webpack build --config webpack.config.js",
     "build-sky": "cross-env NODE_ENV=production UI_VERSION=sky webpack build --config webpack.config.js",
+    "build-factory": "cross-env NODE_ENV=production UI_VERSION=factory webpack build --config webpack.config.js",
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "eslint-fix": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",
     "test": "jest",

frontend/src/App/Login/LoginByGithub/index.tsx

@@ -382,11 +382,11 @@ function OtherVersions() {
                         </SpaceBetween>
                     </Container>
                 </li>
-                <li className={styles.productCardsListItem} aria-label="dstack Enterprise">
+                <li className={styles.productCardsListItem} aria-label="dstack Factory">
                     <Container>
                         <SpaceBetween direction="vertical" size="s">
                             <SpaceBetween direction="vertical" size="xxs">
-                                <Box variant="h3">dstack Enterprise</Box>
+                                <Box variant="h3">dstack Factory</Box>
                                 <Box variant="small">Self-hosted</Box>
                             </SpaceBetween>
                             <Box variant="p">Single sign-on, advanced governance controls, and dedicated support.</Box>

frontend/src/App/Login/EnterpriseLogin/index.tsx → frontend/src/App/Login/SelfHostedLogin/index.tsx

@@ -15,7 +15,7 @@ import { LoginByTokenForm } from '../LoginByTokenForm';
 
 import styles from './styles.module.scss';
 
-export const EnterpriseLogin: React.FC = () => {
+export const SelfHostedLogin: React.FC = () => {
     const { t } = useTranslation();
     const { data: oktaData, isLoading: isLoadingOkta } = useGetOktaInfoQuery();
     const { data: entraData, isLoading: isLoadingEntra } = useGetEntraInfoQuery();
@@ -33,7 +33,7 @@ export const EnterpriseLogin: React.FC = () => {
             <div className={cn(styles.form)}>
                 <SpaceBetween size="xl" alignItems="center">
                     <Box variant="h1" textAlign="center">
-                        {t('auth.sign_in_to_dstack_enterprise')}
+                        {t('auth.sign_in_to_dstack')}
                     </Box>
 
                     {!isLoading && isShowTokenForm && <LoginByTokenForm />}

frontend/src/App/Login/TokenLogin/index.tsx

@@ -19,7 +19,7 @@ export const TokenLogin: React.FC = () => {
             <div className={cn(styles.form)}>
                 <SpaceBetween size="xl" alignItems="center">
                     <Box variant="h1" textAlign="center">
-                        {t('auth.sign_in_to_dstack_enterprise')}
+                        {t('auth.sign_in_to_dstack')}
                     </Box>
 
                     <LoginByTokenForm />

frontend/src/App/index.tsx

@@ -7,8 +7,8 @@ import AppLayout from 'layouts/AppLayout';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { useGetUserDataQuery } from 'services/user';
 
-import { EnterpriseLogin } from './Login/EnterpriseLogin';
 import { LoginByGithub } from './Login/LoginByGithub';
+import { SelfHostedLogin } from './Login/SelfHostedLogin';
 import { ROUTES } from '../routes';
 import { AuthErrorMessage } from './AuthErrorMessage';
 import { selectAuthToken, setUserData } from './slice';
@@ -23,7 +23,7 @@ const IGNORED_AUTH_PATHS = [
     ROUTES.AUTH.TOKEN,
 ];
 
-const LoginFormComponent = process.env.UI_VERSION === 'enterprise' ? EnterpriseLogin : LoginByGithub;
+const LoginFormComponent = process.env.UI_VERSION === 'sky' ? LoginByGithub : SelfHostedLogin;
 
 const App: React.FC = () => {
     const { t } = useTranslation();

frontend/src/layouts/AppLayout/hooks.ts

@@ -30,7 +30,11 @@ export const useSideNavigation = () => {
         { type: 'link', text: t('navigation.volumes'), href: ROUTES.VOLUMES.LIST },
         { type: 'link', text: t('navigation.models'), href: ROUTES.MODELS.LIST },
         process.env.UI_VERSION === 'sky' && { type: 'link', text: t('navigation.presets'), href: ROUTES.PRESETS.LIST },
-        { type: 'link', text: t('navigation.events'), href: ROUTES.EVENTS.LIST },
+        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && {
+            type: 'link',
+            text: t('navigation.events'),
+            href: ROUTES.EVENTS.LIST,
+        },
         { type: 'link', text: t('navigation.project_other'), href: ROUTES.PROJECT.LIST },
 
         isGlobalAdmin && {

frontend/src/layouts/AppLayout/index.tsx

@@ -124,7 +124,7 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
     const isVisibleInfoTab = helpPanelContent.header || helpPanelContent.footer || helpPanelContent.body;
 
-    const avatarProps = process.env.UI_VERSION === 'enterprise' ? { name: userName } : { githubHandle: userName };
+    const avatarProps = process.env.UI_VERSION === 'sky' ? { githubHandle: userName } : { name: userName };
 
     const onChangeSystemModeToggle: SideNavigationProps['onFollow'] = (event) => {
         event.preventDefault();

frontend/src/locale/en.json

@@ -62,8 +62,8 @@
         "invalid_token": "Invalid token",
         "you_are_not_logged_in": "You are not logged in",
         "contact_to_administrator": "For getting the authorization token, contact to the administrator",
-        "sign_in_to_dstack": "Welcome to dstack Sky",
-        "sign_in_to_dstack_enterprise": "Welcome to dstack",
+        "sign_in_to_dstack_sky": "Welcome to dstack Sky",
+        "sign_in_to_dstack": "Welcome to dstack",
         "authorization_failed": "Authorization is failed",
         "try_again": "Please try again",
         "login_by_token": "Sign in via a token",

frontend/src/pages/Fleets/Details/Events/index.tsx

@@ -46,7 +46,13 @@ export const EventsList = () => {
             loading={isLoading}
             loadingText={t('common.loading')}
             header={
-                <Header actions={<Button onClick={goToFullView}>{t('common.full_view')}</Button>}>
+                <Header
+                    actions={
+                        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && (
+                            <Button onClick={goToFullView}>{t('common.full_view')}</Button>
+                        )
+                    }
+                >
                     {t('navigation.events')}
                 </Header>
             }

frontend/src/pages/Instances/Details/Events/index.tsx

@@ -46,7 +46,13 @@ export const EventsList = () => {
             loading={isLoading}
             loadingText={t('common.loading')}
             header={
-                <Header actions={<Button onClick={goToFullView}>{t('common.full_view')}</Button>}>
+                <Header
+                    actions={
+                        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && (
+                            <Button onClick={goToFullView}>{t('common.full_view')}</Button>
+                        )
+                    }
+                >
                     {t('navigation.events')}
                 </Header>
             }

frontend/src/pages/Project/Backends/Table/constants.tsx

@@ -28,7 +28,7 @@ export const BACKENDS_HELP_SKY = {
     ),
 };
 
-export const BACKENDS_HELP_ENTERPRISE = {
+export const BACKENDS_HELP_SELF_HOSTED = {
     header: <h2>Backends</h2>,
     body: (
         <>

frontend/src/pages/Project/Backends/Table/index.tsx

@@ -5,11 +5,11 @@ import { Button, ButtonWithConfirmation, Header, InfoLink, ListEmptyMessage, Spa
 
 import { useCollection, useHelpPanel } from 'hooks';
 
-import { BACKENDS_HELP_ENTERPRISE, BACKENDS_HELP_SKY } from './constants';
+import { BACKENDS_HELP_SELF_HOSTED, BACKENDS_HELP_SKY } from './constants';
 import { useColumnsDefinitions } from './hooks';
 
 import { IProps } from './types';
-const INFO = process.env.UI_VERSION === 'enterprise' ? BACKENDS_HELP_ENTERPRISE : BACKENDS_HELP_SKY;
+const INFO = process.env.UI_VERSION === 'sky' ? BACKENDS_HELP_SKY : BACKENDS_HELP_SELF_HOSTED;
 
 export const BackendsTable: React.FC<IProps> = ({
     backends,

frontend/src/pages/Project/Backends/YAMLForm/constants.tsx

@@ -48,7 +48,7 @@ export const CONFIG_YAML_HELP_SKY = {
     ),
 };
 
-export const CONFIG_YAML_HELP_ENTERPRISE = {
+export const CONFIG_YAML_HELP_SELF_HOSTED = {
     header: <h2>Backend config</h2>,
     body: (
         <>

frontend/src/pages/Project/Backends/YAMLForm/index.tsx

@@ -7,11 +7,11 @@ import { Button, FormCodeEditor, FormUI, InfoLink, SpaceBetween } from 'componen
 import { useHelpPanel, useNotifications } from 'hooks';
 import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 
-import { CONFIG_YAML_HELP_ENTERPRISE, CONFIG_YAML_HELP_SKY } from './constants';
+import { CONFIG_YAML_HELP_SELF_HOSTED, CONFIG_YAML_HELP_SKY } from './constants';
 
 import { FieldPath } from 'react-hook-form/dist/types/path';
 
-const INFO = process.env.UI_VERSION === 'enterprise' ? CONFIG_YAML_HELP_ENTERPRISE : CONFIG_YAML_HELP_SKY;
+const INFO = process.env.UI_VERSION === 'sky' ? CONFIG_YAML_HELP_SKY : CONFIG_YAML_HELP_SELF_HOSTED;
 
 export interface IProps {
     initialValues?: IBackendConfigYaml;

frontend/src/pages/Project/Details/index.tsx

@@ -16,22 +16,22 @@ export const ProjectDetails: React.FC = () => {
     const matchSettings = useMatch(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(paramProjectName));
     const matchEvents = useMatch(ROUTES.PROJECT.DETAILS.EVENTS.FORMAT(paramProjectName));
 
-    const tabs: {
-        label: string;
-        id: string;
-        href: string;
-    }[] = [
+    const tabs = [
         {
             label: t('projects.settings'),
             id: 'settings',
             href: ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(paramProjectName),
         },
-        {
+        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && {
             label: t('projects.events'),
             id: 'events',
             href: ROUTES.PROJECT.DETAILS.EVENTS.FORMAT(paramProjectName),
         },
-    ].filter(Boolean);
+    ].filter(Boolean) as {
+        label: string;
+        id: string;
+        href: string;
+    }[];
 
     const showTabs = useMemo<boolean>(() => {
         return Boolean(matchSettings) || Boolean(matchEvents);

frontend/src/pages/Runs/Details/Events/List/index.tsx

@@ -51,7 +51,13 @@ export const EventsList = () => {
             loading={isLoading}
             loadingText={t('common.loading')}
             header={
-                <Header actions={<Button onClick={goToFullView}>{t('common.full_view')}</Button>}>
+                <Header
+                    actions={
+                        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && (
+                            <Button onClick={goToFullView}>{t('common.full_view')}</Button>
+                        )
+                    }
+                >
                     {t('navigation.events')}
                 </Header>
             }

frontend/src/pages/Runs/Details/Jobs/Events/index.tsx

@@ -64,9 +64,11 @@ export const EventsList = () => {
             header={
                 <Header
                     actions={
-                        <Button onClick={goToFullView} disabled={!jobId}>
-                            {t('common.full_view')}
-                        </Button>
+                        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && (
+                            <Button onClick={goToFullView} disabled={!jobId}>
+                                {t('common.full_view')}
+                            </Button>
+                        )
                     }
                 >
                     {t('navigation.events')}

frontend/src/pages/User/Details/index.tsx

@@ -72,7 +72,7 @@ export const UserDetails: React.FC = () => {
             id: UserDetailsTabTypeEnum.PROJECTS,
             href: ROUTES.USER.PROJECTS.FORMAT(paramUserName),
         },
-        {
+        (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && {
             label: t('users.events'),
             id: UserDetailsTabTypeEnum.EVENTS,
             href: ROUTES.USER.EVENTS.FORMAT(paramUserName),

frontend/src/router.tsx

@@ -82,7 +82,7 @@ export const router = createBrowserRouter([
                         index: true,
                         element: <ProjectSettings />,
                     },
-                    {
+                    (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && {
                         path: ROUTES.PROJECT.DETAILS.EVENTS.TEMPLATE,
                         element: <ProjectEvents />,
                     },
@@ -102,7 +102,7 @@ export const router = createBrowserRouter([
                         path: ROUTES.PROJECT.GATEWAY.EDIT.TEMPLATE,
                         element: <EditGateway />,
                     },
-                ],
+                ].filter(Boolean) as RouteObject[],
             },
             {
                 path: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.TEMPLATE,
@@ -191,11 +191,13 @@ export const router = createBrowserRouter([
                 element: <ModelDetails />,
             },
 
-            // Events
-            {
-                path: ROUTES.EVENTS.LIST,
-                element: <EventList />,
-            },
+            // Events, Factory and Sky only
+            ...([
+                (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && {
+                    path: ROUTES.EVENTS.LIST,
+                    element: <EventList />,
+                },
+            ].filter(Boolean) as RouteObject[]),
 
             // Fleets
             {
@@ -302,7 +304,7 @@ export const router = createBrowserRouter([
                         path: ROUTES.USER.PROJECTS.TEMPLATE,
                         element: <UserProjects />,
                     },
-                    {
+                    (process.env.UI_VERSION === 'factory' || process.env.UI_VERSION === 'sky') && {
                         path: ROUTES.USER.EVENTS.TEMPLATE,
                         element: <UserEvents />,
                     },

frontend/src/types/global.d.ts

@@ -23,7 +23,7 @@ declare interface HashMap<T = any> {
 declare namespace NodeJS {
     interface ProcessEnv {
         readonly NODE_ENV: 'development' | 'production' | 'test';
-        readonly UI_VERSION: 'sky' | 'enterprise';
+        readonly UI_VERSION: 'sky' | 'factory' | 'oss';
         readonly PUBLIC_URL: string;
         readonly API_URL: string;
     }

frontend/webpack/env.js

@@ -15,9 +15,9 @@ const buildDir = join(__dirname, '../build');
 const publicDir = join(__dirname, '../public');
 const apiUrl = process.env.API_URL || apiURLs;
 const publicUrl = process.env.PUBLIC_URL || publicURLs;
-const uiVersion = process.env.UI_VERSION === 'sky' ? 'sky' : 'enterprise';
+const uiVersion = ['sky', 'factory'].includes(process.env.UI_VERSION) ? process.env.UI_VERSION : 'oss';
 
-const title = uiVersion === 'enterprise' ? 'dstack' : 'dstack Sky';
+const title = uiVersion === 'sky' ? 'dstack Sky' : 'dstack';
 const description =
     'Get GPUs at the best prices and availability from a wide range of providers. No cloud ' +
     'account of your own is required.\n';