Merge branch 'development' into fix/file-inport

Author: PolinaGurinovich97

apps/ai-dial-admin/src/app/[lang]/deployment-images/[id]/page.tsx

@@ -1,12 +1,13 @@
 import { notFound } from 'next/navigation';
 
-import { getImage, getImageVersions } from '@/src/app/actions/deployments';
+import { getContainers, getImage, getImageVersions } from '@/src/app/actions/deployments';
 import ImageView from '@/src/components/Images/View/ImageView';
 import { SaveValidationContextProvider } from '@/src/context/SaveValidationContext';
 import { Image, ImageVersion } from '@/src/models/deployments/images';
 import { errorObjLog } from '@/src/server/logger';
 import { getRouteByType } from '@/src/utils/deployments/entity';
 import { getImageType } from '@/src/utils/deployments/images';
+import { Container } from '@/src/models/deployments/containers';
 
 export const dynamic = 'force-dynamic';
 
@@ -18,15 +19,16 @@ interface Params {
 export default async function Page(params: Params) {
   let image: Image | null = null;
   let versions: ImageVersion[] | null = null;
+  let containers: Container[] | null = null;
 
   try {
     const imageResponse = await getImage((await params.params).id);
-
+    const containersResponse = await getContainers();
     const versionsResponse = await getImageVersions(
       imageResponse.response.name,
       getImageType(getRouteByType(imageResponse.response.$type)),
     );
-
+    containers = containersResponse.response as Container[];
     image = imageResponse.response as Image;
     versions = versionsResponse.response as ImageVersion[];
   } catch (e) {
@@ -37,9 +39,11 @@ export default async function Page(params: Params) {
     notFound();
   }
 
+  const names = containers?.map((container) => container.name || '') || [];
+
   return (
     <SaveValidationContextProvider>
-      <ImageView image={image} versions={versions || []} />
+      <ImageView image={image} versions={versions || []} containerNames={names} />
     </SaveValidationContextProvider>
   );
 }

apps/ai-dial-admin/src/components/Common/Lists/CheckboxList.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import NewItem from '@/src/components/Common/Multiselect/Modal/NewItem';
 import { DialCheckbox, DialNeutralButton } from '@epam/ai-dial-ui-kit';
 import { IconPlus } from '@tabler/icons-react';
@@ -23,6 +23,8 @@ const CheckboxList: FC<Props> = ({
   addTitle,
   addPlaceholder,
 }) => {
+  const newItemsContainer = useRef<HTMLUListElement | null>(null);
+
   const [list, setList] = useState<string[]>(items);
   const [newList, setNewList] = useState<string[]>([]);
 
@@ -73,9 +75,21 @@ const CheckboxList: FC<Props> = ({
     setNewList((prev) => [...prev, '']);
   }, []);
 
+  useEffect(() => {
+    const container = newItemsContainer.current;
+    if (container && container.scrollHeight > container.clientHeight) {
+      setTimeout(() => {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: 'smooth',
+        });
+      });
+    }
+  }, [newList.length]);
+
   return (
     <>
-      <ul className="flex flex-col gap-y-2 overflow-auto flex-1 min-h-0">
+      <ul className="flex flex-col gap-y-2 overflow-auto flex-1 min-h-0" ref={newItemsContainer}>
         {list.map((item, index) => (
           <li key={`item_${index}`}>
             <DialCheckbox

apps/ai-dial-admin/src/components/Containers/View/ExecutionLog/ExecutionLog.tsx

@@ -1,11 +1,11 @@
 import { FC, useCallback, useEffect, useState } from 'react';
-import { DialCollapsibleSidebar, DialNoDataContent, DialTabs, TabModel, TabOrientation } from '@epam/ai-dial-ui-kit';
+import { DialCollapsibleSidebar, DialTabs, TabModel, TabOrientation } from '@epam/ai-dial-ui-kit';
 
 import { Pod } from '@/src/models/deployments/containers';
-import { ContainersI18nKey, EntitiesI18nKey, EntityFieldsI18nKey } from '@/src/constants/i18n';
+import { ContainersI18nKey, EntityFieldsI18nKey } from '@/src/constants/i18n';
 import { EntityViewTab } from '@/src/utils/tabs/utils';
 import { ApplicationRoute } from '@/src/types/routes';
-import { getTranslatedDeploymentType } from '@/src/utils/deployments/entity';
+
 import { useI18n } from '@/src/locales/client';
 
 import PodView from '@/src/components/Containers/View/ExecutionLog/PodView';
@@ -58,11 +58,7 @@ const ExecutionLog: FC<Props> = ({ containerId, route, pods }) => {
 
   return (
     <div className="flex flex-col h-full w-full">
-      {!tabs.length ? (
-        <DialNoDataContent
-          title={t(EntitiesI18nKey.NoContainerLogs, { entityType: getTranslatedDeploymentType(route, t) })}
-        />
-      ) : (
+      {!!tabs.length && (
         <div className="flex h-full min-h-0 gap-8">
           {tabs.length > 1 && (
             <DialCollapsibleSidebar
@@ -80,7 +76,11 @@ const ExecutionLog: FC<Props> = ({ containerId, route, pods }) => {
               />
             </DialCollapsibleSidebar>
           )}
-          <PodView pod={pods.find((pod) => pod.name === activeTab) ?? pods[0]} containerId={containerId} />
+          <PodView
+            pod={pods.find((pod) => pod.name === activeTab) ?? pods[0]}
+            containerId={containerId}
+            route={route}
+          />
         </div>
       )}
     </div>

apps/ai-dial-admin/src/components/Containers/View/ExecutionLog/PodView.tsx

@@ -1,22 +1,25 @@
 import { FC, useEffect, useState } from 'react';
-
+import { DialNoDataContent } from '@epam/ai-dial-ui-kit';
 import { Pod } from '@/src/models/deployments/containers';
-import { ErrorI18nKey, EntityFieldsI18nKey, DeploymentsI18nKey } from '@/src/constants/i18n';
+import { ErrorI18nKey, EntityFieldsI18nKey, DeploymentsI18nKey, EntitiesI18nKey } from '@/src/constants/i18n';
 import { formatDateTimeToLocalString } from '@/src/utils/formatting/date';
 import { RESTART_REASONS } from '@/src/constants/deployments/containers';
 import { useI18n } from '@/src/locales/client';
 import { useNotification } from '@/src/context/NotificationContext';
 import { getErrorNotification } from '@/src/utils/notification';
+import { getTranslatedDeploymentType } from '@/src/utils/deployments/entity';
 
 import LogViewer from '@/src/components/Common/LogViewer/LogViewer';
 import LabelledText from '@/src/components/Common/LabelledText/LabelledText';
+import { ApplicationRoute } from '@/src/types/routes';
 
 interface Props {
   pod: Pod;
   containerId?: string;
+  route: ApplicationRoute;
 }
 
-const PodView: FC<Props> = ({ pod, containerId }) => {
+const PodView: FC<Props> = ({ pod, containerId, route }) => {
   const t = useI18n();
   const { showNotification } = useNotification();
   const [logs, setLogs] = useState('');
@@ -78,7 +81,13 @@ const PodView: FC<Props> = ({ pod, containerId }) => {
         </div>
       )}
       <div className="flex flex-1 min-h-0 h-full">
-        <LogViewer logs={logs} />
+        {logs.length ? (
+          <LogViewer logs={logs} />
+        ) : (
+          <DialNoDataContent
+            title={t(EntitiesI18nKey.NoContainerLogs, { entityType: getTranslatedDeploymentType(route, t) })}
+          />
+        )}
       </div>
     </div>
   );

apps/ai-dial-admin/src/components/Containers/View/ExecutionLog/tests/ExecutionLog.spec.tsx

@@ -1,13 +1,37 @@
-import { describe, expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import ExecutionLog from '../ExecutionLog';
-import { EntitiesI18nKey } from '@/src/constants/i18n';
+import { describe, expect, test, vi } from 'vitest';
+import { render } from '@testing-library/react';
 import { ApplicationRoute } from '@/src/types/routes';
 
-describe('ExecutionLog', () => {
-  test('renders with empty logs', () => {
-    render(<ExecutionLog containerId="" pods={[]} route={ApplicationRoute.McpContainers} />);
+import ExecutionLog from '../ExecutionLog';
 
-    expect(screen.getByText(EntitiesI18nKey.NoContainerLogs)).toBeInTheDocument();
+vi.mock('@epam/ai-dial-ui-kit', () => ({
+  DialCollapsibleSidebar: ({ children, title }: any) => (
+    <div role="complementary" aria-label={title}>
+      {children}
+    </div>
+  ),
+  DialTabs: ({ tabs, activeTab, onClick }: any) => (
+    <div role="tablist">
+      {tabs.map((tab: any) => (
+        <button key={tab.id} role="tab" aria-selected={tab.id === activeTab} onClick={() => onClick(tab.id)}>
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  ),
+  TabOrientation: { Vertical: 'vertical' },
+}));
+
+vi.mock('@/src/components/Containers/View/ExecutionLog/PodView', () => ({
+  __esModule: true,
+  default: ({ pod, containerId }: any) => (
+    <div data-testid="pod-view" data-pod-name={pod?.name} data-container-id={containerId} />
+  ),
+}));
+
+describe('ExecutionLog', () => {
+  test('renders nothing when pods list is empty', () => {
+    const { container } = render(<ExecutionLog containerId="c1" pods={[]} route={ApplicationRoute.McpContainers} />);
+    expect(container.firstChild).toBeEmptyDOMElement();
   });
 });

apps/ai-dial-admin/src/components/Containers/View/ExecutionLog/tests/PodView.spec.tsx

@@ -0,0 +1,84 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+const mockAddEventListener = vi.fn();
+const mockRemoveEventListener = vi.fn();
+const mockClose = vi.fn();
+
+class MockEventSource {
+  constructor(public url: string) {
+    MockEventSource.instances.push(this);
+  }
+  static instances: MockEventSource[] = [];
+  addEventListener = mockAddEventListener;
+  removeEventListener = mockRemoveEventListener;
+  close = mockClose;
+}
+
+vi.stubGlobal('EventSource', MockEventSource);
+
+vi.mock('@epam/ai-dial-ui-kit', () => ({
+  DialNoDataContent: ({ title }: any) => <div data-testid="no-data">{title}</div>,
+}));
+
+vi.mock('@/src/components/Common/LogViewer/LogViewer', () => ({
+  __esModule: true,
+  default: ({ logs }: any) => <div data-testid="log-viewer">{logs}</div>,
+}));
+
+vi.mock('@/src/components/Common/LabelledText/LabelledText', () => ({
+  __esModule: true,
+  default: ({ label, text }: any) => <div data-testid={`label-${label}`}>{text}</div>,
+}));
+
+import PodView from '../PodView';
+import { EntityFieldsI18nKey } from '@/src/constants/i18n';
+import { ApplicationRoute } from '@/src/types/routes';
+import type { Pod } from '@/src/models/deployments/containers';
+
+const makePod = (name: string, overrides?: Partial<Pod>): Pod => ({
+  name,
+  createdAt: Date.now(),
+  ...overrides,
+});
+
+describe('PodView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    MockEventSource.instances = [];
+  });
+
+  test('shows no-data placeholder when there are no logs', () => {
+    render(<PodView pod={makePod('pod-1')} containerId="c1" route={ApplicationRoute.McpContainers} />);
+    expect(screen.getByTestId('no-data')).toBeInTheDocument();
+  });
+
+  test('opens EventSource with correct URL', () => {
+    render(<PodView pod={makePod('pod-1')} containerId="c1" route={ApplicationRoute.McpContainers} />);
+    expect(MockEventSource.instances).toHaveLength(1);
+    expect(MockEventSource.instances[0].url).toBe('/api/sse?entity=container&id=c1&podName=pod-1');
+  });
+
+  test('does not open EventSource when containerId is missing', () => {
+    render(<PodView pod={makePod('pod-1')} route={ApplicationRoute.McpContainers} />);
+    expect(MockEventSource.instances).toHaveLength(0);
+  });
+
+  test('displays restart info when pod has restarts', () => {
+    render(
+      <PodView
+        pod={makePod('pod-1', { restartCount: 5, lastFinishedAt: 1700000000000, lastTerminationReason: 'OOMKilled' })}
+        containerId="c1"
+        route={ApplicationRoute.McpContainers}
+      />,
+    );
+    expect(screen.getByTestId(`label-${EntityFieldsI18nKey.Restarts}`)).toHaveTextContent('5');
+    expect(screen.getByTestId(`label-${EntityFieldsI18nKey.LastRestartedAt}`)).toBeInTheDocument();
+    expect(screen.getByTestId(`label-${EntityFieldsI18nKey.LastReason}`)).toBeInTheDocument();
+  });
+
+  test('hides restart info when restartCount is absent', () => {
+    render(<PodView pod={makePod('pod-1')} containerId="c1" route={ApplicationRoute.McpContainers} />);
+    expect(screen.queryByTestId(`label-${EntityFieldsI18nKey.Restarts}`)).not.toBeInTheDocument();
+  });
+});

apps/ai-dial-admin/src/components/Containers/View/Prompts/Prompts.tsx

@@ -37,7 +37,7 @@ const Prompts: FC<Props> = ({ containerId }) => {
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-col mt-6">
+      <div className="flex flex-col gap-6">
         {prompts?.map((prompt, index) => {
           return <PromptComponent prompt={prompt} key={index} />;
         })}

apps/ai-dial-admin/src/constants/file.ts

@@ -57,6 +57,12 @@ export const contentTypes: Record<string, string> = {
   '.csv': 'text/csv',
   // pdf
   '.pdf': 'application/pdf',
+  // audio/video
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.ogg': 'audio/ogg',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
 };
 // same as bodySizeLimit in server config
 export const MAX_FILE_SIZE_MB = 4;