display source config details

Signed-off-by: Colorado, Camilo <[email protected]>

Author: camiloHimura

application/ui/src/assets/icons/index.ts

@@ -20,3 +20,4 @@ export { ReactComponent as Webcam } from './webcam.svg';
 export { ReactComponent as Webhook } from './webhook.svg';
 export { ReactComponent as Image } from './image.svg';
 export { ReactComponent as Fireworks } from './fire-works.svg';
+export { ReactComponent as PipelineLink } from './pipeline-link.svg';

application/ui/src/assets/icons/pipeline-link.svg

@@ -1,8 +1,9 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Suspense } from 'react';
+import { CSSProperties, Suspense } from 'react';
 
+import { PipelineLink } from '@geti-inspect/icons';
 import {
     Button,
     Content,
@@ -18,17 +19,21 @@ import {
     View,
 } from '@geti/ui';
 
-import { ReactComponent as Camera } from '../../../assets/icons/pipeline-link.svg';
 import { SourceFactory } from './sources/source-factory.component';
 
+const paddingStyle = {
+    '--spectrum-dialog-padding-x': dimensionValue('size-300'),
+    '--spectrum-dialog-padding-y': dimensionValue('size-300'),
+} as CSSProperties;
+
 export const InputOutputSetup = () => {
     return (
         <DialogTrigger type='popover'>
-            <Button width={'size-3000'} variant={'secondary'} UNSAFE_style={{ gap: dimensionValue('size-125') }}>
-                <Camera fill='white' />
+            <Button variant={'secondary'} UNSAFE_style={{ gap: dimensionValue('size-125') }}>
+                <PipelineLink fill='white' />
                 <Text width={'auto'}>Pipeline configuration</Text>
             </Button>
-            <Dialog minWidth={'size-6000'}>
+            <Dialog minWidth={'size-6000'} UNSAFE_style={paddingStyle}>
                 <Content>
                     <Tabs aria-label='Dataset import tabs' height={'100%'}>
                         <TabList>

application/ui/src/features/inspect/toolbar/pipeline-configuration.component.tsx

@@ -7,7 +7,7 @@ import { isEmpty } from 'lodash-es';
 
 import { $api } from '../../../../api/client';
 import { EditSourceFactory } from './edit-source-factory.component';
-import { SourcesList } from './source-list.component';
+import { SourcesList } from './source-list/source-list.component';
 import { SourceOptions } from './source-options.component';
 import { SourceConfig } from './util';
 

application/ui/src/features/inspect/toolbar/sources/source-factory.component.tsx

@@ -0,0 +1,46 @@
+import { SourceConfig } from '../../util';
+
+import classes from './settings-list.module.scss';
+
+interface SettingsListPops {
+    source: SourceConfig;
+}
+
+export const SettingsList = ({ source }: SettingsListPops) => {
+    if (source.source_type === 'images_folder') {
+        return (
+            <ul className={classes.list}>
+                <li>Folder path: {source.images_folder_path}</li>
+                <li>Ignore existing images: {source.ignore_existing_images ? 'Yes' : 'No'}</li>
+            </ul>
+        );
+    }
+
+    if (source.source_type === 'ip_camera') {
+        return (
+            <ul className={classes.list}>
+                <li>Stream url: {source.stream_url}</li>
+                <li>Auth required: {source.auth_required ? 'Yes' : 'No'}</li>
+            </ul>
+        );
+    }
+
+    if (source.source_type === 'video_file') {
+        console.log('source', source);
+        return (
+            <ul className={classes.list}>
+                <li>Video path: {source.video_path}</li>
+            </ul>
+        );
+    }
+
+    if (source.source_type === 'webcam') {
+        return (
+            <ul className={classes.list}>
+                <li>Device id: {source.device_id}</li>
+            </ul>
+        );
+    }
+
+    return <></>;
+};

application/ui/src/features/inspect/toolbar/sources/source-list.component.tsx

@@ -0,0 +1,4 @@
+.list {
+    margin-left: var(--spectrum-global-dimension-font-size-200);
+    list-style-type: disc;
+}

application/ui/src/features/inspect/toolbar/sources/source-list/settings-list/settings-list.component.tsx

@@ -0,0 +1,25 @@
+import { ImagesFolder, IpCamera, VideoFile, Webcam } from '@geti-inspect/icons';
+
+interface SourceIconProps {
+    type: string;
+}
+
+export const SourceIcon = ({ type }: SourceIconProps) => {
+    if (type === 'webcam') {
+        return <Webcam />;
+    }
+
+    if (type === 'ip_camera') {
+        return <IpCamera />;
+    }
+
+    if (type === 'video_file') {
+        return <VideoFile />;
+    }
+
+    if (type === 'images_folder') {
+        return <ImagesFolder />;
+    }
+
+    return <></>;
+};

application/ui/src/features/inspect/toolbar/sources/source-list/settings-list/settings-list.module.scss

@@ -0,0 +1,71 @@
+import { Add as AddIcon } from '@geti/ui/icons';
+import { clsx } from 'clsx';
+import { isEqual } from 'lodash-es';
+import { Button, Flex, Text } from 'packages/ui';
+import { usePipeline } from 'src/hooks/use-pipeline.hook';
+
+import { SourceMenu } from '../source-menu/source-menu.component';
+import { SourceConfig } from '../util';
+import { SettingsList } from './settings-list/settings-list.component';
+import { SourceIcon } from './source-icon/source-icon.component';
+import { StatusTag } from './status-tag/status-tag.component';
+import { removeUnderscore } from './utils';
+
+import classes from './source-list.module.scss';
+
+type SourcesListProps = {
+    sources: SourceConfig[];
+    onAddSource: () => void;
+    onEditSourceFactory: (config: SourceConfig) => void;
+};
+
+export const SourcesList = ({ sources, onAddSource, onEditSourceFactory }: SourcesListProps) => {
+    const pipeline = usePipeline();
+    const currentSource = pipeline.data.source?.id;
+
+    return (
+        <Flex gap={'size-200'} direction={'column'}>
+            <Button variant='secondary' UNSAFE_className={classes.addSource} onPress={onAddSource}>
+                <AddIcon /> Add new source
+            </Button>
+
+            {sources.map((source) => {
+                const isConnected = isEqual(currentSource, source.id);
+
+                return (
+                    <Flex
+                        key={source.id}
+                        gap='size-200'
+                        direction='column'
+                        UNSAFE_className={clsx(classes.card, {
+                            [classes.activeCard]: isConnected,
+                        })}
+                    >
+                        <Flex alignItems={'center'} gap={'size-200'}>
+                            <SourceIcon type={source.source_type} />
+
+                            <Flex direction={'column'} gap={'size-100'}>
+                                <Text UNSAFE_className={classes.title}>{source.name}</Text>
+                                <Flex gap={'size-100'} alignItems={'center'}>
+                                    <Text UNSAFE_className={classes.type}>{removeUnderscore(source.source_type)}</Text>
+                                    <StatusTag isConnected={isConnected} />
+                                </Flex>
+                            </Flex>
+                        </Flex>
+
+                        <Flex justifyContent={'space-between'}>
+                            <SettingsList source={source} />
+
+                            <SourceMenu
+                                id={String(source.id)}
+                                name={source.name}
+                                isConnected={isConnected}
+                                onEdit={() => onEditSourceFactory(source)}
+                            />
+                        </Flex>
+                    </Flex>
+                );
+            })}
+        </Flex>
+    );
+};

application/ui/src/features/inspect/toolbar/sources/source-list/source-icon/source-icon.component.tsx

@@ -10,7 +10,7 @@
 .card {
     padding: var(--spectrum-global-dimension-size-250);
     background: var(--spectrum-global-color-gray-200);
-    border-radius: var(--spectrum-global-dimension-size-200);
+    border-radius: var(--spectrum-global-dimension-size-65);
 }
 
 .activeCard {
@@ -23,7 +23,6 @@
     font-size: var(--spectrum-global-dimension-font-size-200);
 }
 
-.list {
-    margin-left: var(--spectrum-global-dimension-font-size-200);
-    list-style-type: disc;
+.type {
+    text-transform: capitalize;
 }