UI improvements (#2489)

* [Feature] Implemented improvements on the UI

* [Feature] Show Run metrics on the UI

Author: olgenn

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

@@ -23,6 +23,7 @@ export const EnterpriseLogin: React.FC = () => {
     const entraEnabled = entraData?.enabled;
 
     const isLoading = isLoadingOkta || isLoadingEntra;
+    const isShowTokenForm = !oktaEnabled && !entraEnabled;
 
     return (
         <UnauthorizedLayout>
@@ -32,11 +33,11 @@ export const EnterpriseLogin: React.FC = () => {
                         {t('auth.sign_in_to_dstack_enterprise')}
                     </Box>
 
-                    {!isLoading && !oktaEnabled && <LoginByTokenForm />}
+                    {!isLoading && isShowTokenForm && <LoginByTokenForm />}
                     {!isLoadingOkta && oktaEnabled && <LoginByOkta className={styles.okta} />}
                     {!isLoadingEntra && entraEnabled && <LoginByEntraID className={styles.entra} />}
 
-                    {!isLoading && (oktaEnabled || entraEnabled) && (
+                    {!isLoading && !isShowTokenForm && (
                         <Box color="text-body-secondary">
                             <NavigateLink href={ROUTES.AUTH.TOKEN}>{t('auth.login_by_token')}</NavigateLink>
                         </Box>

frontend/src/layouts/AppLayout/hooks.ts

@@ -22,6 +22,7 @@ export const useSideNavigation = () => {
 
     const isPoolDetails = Boolean(useMatch(ROUTES.FLEETS.DETAILS.TEMPLATE));
     const billingUrl = ROUTES.USER.BILLING.LIST.FORMAT(userName);
+    const userProjectsUrl = ROUTES.USER.PROJECTS.FORMAT(userName);
 
     const generalLinks = [
         { type: 'link', text: t('navigation.runs'), href: ROUTES.RUNS.LIST },
@@ -49,6 +50,11 @@ export const useSideNavigation = () => {
             text: t('navigation.billing'),
             href: billingUrl,
         },
+        {
+            type: 'link',
+            text: t('users.projects'),
+            href: userProjectsUrl,
+        },
     ].filter(Boolean);
 
     const navLinks: SideNavigationProps['items'] = [
@@ -93,7 +99,8 @@ export const useSideNavigation = () => {
 
         {
             type: 'link',
-            text: `dstack version: ${serverInfoData?.server_version}`,
+            href: '#version',
+            text: `dstack version: ${serverInfoData?.server_version ?? 'No version'}`,
         },
     ].filter(Boolean) as SideNavigationProps['items'];
 

frontend/src/layouts/AppLayout/index.module.scss

@@ -18,13 +18,9 @@
 
 [class^='awsui_navigation'] {
     [class^='awsui_list-container'] {
-        [class*='awsui_list-variant-root--last'] {
-            [class^='awsui_list-item']:last-child {
-                a {
-                    pointer-events: none;
-                    color: awsui.$color-text-status-inactive !important;
-                }
-            }
+        a[href='#version'] {
+            pointer-events: none;
+            color: awsui.$color-text-status-inactive !important;
         }
     }
 }

frontend/src/locale/en.json

@@ -337,6 +337,7 @@
       "provider_name": "Provider",
       "status": "Status",
       "submitted_at": "Submitted",
+      "finished_at": "Finished",
       "metrics": {
         "title": "Metrics",
         "show_metrics": "Show metrics",

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

@@ -433,12 +433,12 @@ export const ModelDetails: React.FC = () => {
                                     activeTabId={codeTab}
                                     tabs={[
                                         {
-                                            label: 'Python',
+                                            label: 'python',
                                             id: CodeTab.Python,
                                             content: <Code>{pythonCode}</Code>,
                                         },
                                         {
-                                            label: 'Curl',
+                                            label: 'curl',
                                             id: CodeTab.Curl,
                                             content: <Code>{curlCode}</Code>,
                                         },

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

@@ -49,7 +49,6 @@ export const BackendsTable: React.FC<IProps> = ({
 
     const { columns } = useColumnsDefinitions({
         ...(editBackend ? { onEditClick: (backend) => editBackend(backend) } : {}),
-        ...(deleteBackends ? { onDeleteClick: (backend) => deleteBackends([backend]) } : {}),
     });
 
     const renderCounter = () => {

frontend/src/pages/Project/Details/Settings/constants.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const CLI_INFO = {
+    header: <h2>CLI</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};

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

@@ -11,6 +11,7 @@ import {
     Container,
     Header,
     Hotspot,
+    InfoLink,
     Loader,
     Popover,
     SelectCSD,
@@ -19,7 +20,7 @@ import {
 } from 'components';
 import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
 
-import { useBreadcrumbs, useNotifications } from 'hooks';
+import { useBreadcrumbs, useHelpPanel, useNotifications } from 'hooks';
 import { riseRouterException } from 'libs';
 import { ROUTES } from 'routes';
 import { useGetProjectQuery, useUpdateProjectMembersMutation } from 'services/project';
@@ -33,6 +34,7 @@ import { useBackendsTable } from '../../Backends/hooks';
 import { BackendsTable } from '../../Backends/Table';
 import { GatewaysTable } from '../../Gateways';
 import { useGatewaysTable } from '../../Gateways/hooks';
+import { CLI_INFO } from './constants';
 
 import styles from './styles.module.scss';
 
@@ -41,7 +43,9 @@ export const ProjectSettings: React.FC = () => {
     const params = useParams();
     const navigate = useNavigate();
     const paramProjectName = params.projectName ?? '';
+    const [openHelpPanel] = useHelpPanel();
     const [configCliCommand, copyCliCommand] = useConfigProjectCliCommand({ projectName: paramProjectName });
+
     const { isAvailableDeletingPermission, isProjectManager, isProjectAdmin, isAvailableProjectManaging } =
         useCheckAvailableProjectPermission();
 
@@ -132,22 +136,7 @@ export const ProjectSettings: React.FC = () => {
                 <SpaceBetween size="l">
                     <Container
                         header={
-                            <Header
-                                variant="h2"
-                                actions={
-                                    <Popover
-                                        dismissButton={false}
-                                        position="top"
-                                        size="small"
-                                        triggerType="custom"
-                                        content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
-                                    >
-                                        <Button formAction="none" iconName="copy" variant="normal" onClick={copyCliCommand}>
-                                            {t('common.copy')}
-                                        </Button>
-                                    </Popover>
-                                }
-                            >
+                            <Header variant="h2" info={<InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />}>
                                 {t('projects.edit.cli')}
                             </Header>
                         }
@@ -157,9 +146,28 @@ export const ProjectSettings: React.FC = () => {
                                 Run the following commands to set up the CLI for this project
                             </Box>
 
-                            <Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
-                                <Code>{configCliCommand}</Code>
-                            </Hotspot>
+                            <div className={styles.codeWrapper}>
+                                <Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
+                                    <Code className={styles.code}>{configCliCommand}</Code>
+
+                                    <div className={styles.copy}>
+                                        <Popover
+                                            dismissButton={false}
+                                            position="top"
+                                            size="small"
+                                            triggerType="custom"
+                                            content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
+                                        >
+                                            <Button
+                                                formAction="none"
+                                                iconName="copy"
+                                                variant="normal"
+                                                onClick={copyCliCommand}
+                                            />
+                                        </Popover>
+                                    </div>
+                                </Hotspot>
+                            </div>
                         </SpaceBetween>
                     </Container>
 

frontend/src/pages/Project/Details/Settings/styles.module.scss

@@ -7,3 +7,17 @@
 .dangerSectionField {
     width: 300px;
 }
+
+.codeWrapper {
+    position: relative;
+
+    .code {
+        padding: 16px 12px;
+    }
+
+    .copy {
+        position: absolute;
+        top: 10px;
+        right: 8px;
+    }
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const GATEWAYS_INFO = {
+    header: <h2>Gateways</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};