feat: job 진행율 기능 및 UI 추가

Author: zoe-seo

.github/workflows/deploy-dev.yml

@@ -46,6 +46,11 @@ jobs:
           export NGINX_CONF=react_nginx.conf
           docker compose -f docker-compose.yml -f docker-compose.build.yml build
 
+          echo "🗄️ DB 마이그레이션 실행..."
+          # 인자 없이 실행 → 미적용된 모든 migration을 자동으로 반영
+          docker compose -f docker-compose.yml -f docker-compose.build.yml \
+            run --rm cvat_server python manage.py migrate
+
           echo "🚀 Starting services..."
           export CVAT_HOST=172.16.0.172
           docker compose -f docker-compose.yml -f docker-compose.build.yml up -d

.github/workflows/deploy-single.yml

@@ -147,7 +147,14 @@ jobs:
               -f docker-compose.single.yml \
               pull
 
-            echo "🚀 서비스 기동..."
+            echo "�️ DB 마이그레이션 실행..."
+            # 인자 없이 실행 → 미적용된 모든 migration을 자동으로 반영
+            docker compose \
+              -f docker-compose.yml \
+              -f docker-compose.single.yml \
+              run --rm cvat_server python manage.py migrate
+
+            echo "�🚀 서비스 기동..."
             docker compose \
               -f docker-compose.yml \
               -f docker-compose.single.yml \

cvat-core/src/server-response-types.ts

@@ -156,6 +156,8 @@ export interface SerializedJob {
     frame_count: number;
     start_frame: number;
     stop_frame: number;
+    // Save 버튼 클릭 시 저장된 마지막 프레임 번호. null이면 아직 Save한 적 없음
+    last_frame?: number | null;
     task_id: number;
     task_name: string;
     updated_date: string;
@@ -591,5 +593,5 @@ export interface SerializedTaskValidationLayout extends SerializedJobValidationL
     disabled_frames?: number[];
 }
 
-export interface APIOrganizationMembersFilter extends APICommonFilterParams {}
+export interface APIOrganizationMembersFilter extends APICommonFilterParams { }
 export type OrganizationMembersFilter = Camelized<APIOrganizationMembersFilter>;

cvat-core/src/session-implementation.ts

@@ -76,6 +76,8 @@ export function implementJob(Job: typeof JobClass): typeof JobClass {
                     ...('assignee' in fields ? { assignee: fields.assignee } : {}),
                     ...('stage' in fields ? { stage: fields.stage } : {}),
                     ...('state' in fields ? { state: fields.state } : {}),
+                    // Save 시점의 마지막 프레임 번호 - serverProxy에 전달하여 BE에 저장
+                    ...('last_frame' in fields ? { last_frame: fields.last_frame } : {}),
                 };
 
                 if (jobData.assignee) {
@@ -790,7 +792,7 @@ export function implementTask(Task: typeof TaskClass): typeof TaskClass {
             const { taskID, rqID } = await serverProxy.tasks.create(
                 taskSpec,
                 taskDataSpec,
-                options?.updateStatusCallback || (() => {}),
+                options?.updateStatusCallback || (() => { }),
             );
 
             await requestsManager.listen(rqID, {

cvat-core/src/session.ts

@@ -536,6 +536,8 @@ export class Job extends Session {
         target_storage: Storage,
         parent_job_id: number | null;
         consensus_replicas: number;
+        // Save 버튼 클릭 시 FE에서 BE로 전달되는 마지막 프레임 번호
+        last_frame: number | null;
     };
 
     constructor(initialData: InitializerType) {
@@ -566,6 +568,8 @@ export class Job extends Session {
             target_storage: undefined,
             parent_job_id: null,
             consensus_replicas: undefined,
+            // Save하기 전에는 null로 초기화
+            last_frame: null,
         };
 
         this.#data.id = initialData.id ?? this.#data.id;
@@ -583,6 +587,10 @@ export class Job extends Session {
         this.#data.created_date = initialData.created_date ?? this.#data.created_date;
         this.#data.parent_job_id = initialData.parent_job_id ?? this.#data.parent_job_id;
         this.#data.consensus_replicas = initialData.consensus_replicas ?? this.#data.consensus_replicas;
+        // last_frame은 undefined는 무시, null은 '새 저장 없음' 의미로 유지
+        if (initialData.last_frame !== undefined) {
+            this.#data.last_frame = initialData.last_frame;
+        }
 
         if (Array.isArray(initialData.labels)) {
             this.#data.labels = initialData.labels.map((labelData) => {
@@ -637,6 +645,10 @@ export class Job extends Session {
         this.#data.guide_id = data.guide_id ?? this.#data.guide_id;
         this.#data.updated_date = data.updated_date ?? this.#data.updated_date;
         this.#data.bug_tracker = data.bug_tracker ?? this.#data.bug_tracker;
+        // reinit 시에도 last_frame 동기화 (save 후 응답에서 갱신)
+        if (data.last_frame !== undefined) {
+            this.#data.last_frame = data.last_frame;
+        }
 
         // TODO: labels also may get changed, but it will affect many code within the application
         // so, need to think on this additionally
@@ -730,6 +742,21 @@ export class Job extends Session {
         return this.#data.updated_date;
     }
 
+    // Save 버튼으로 저장된 마지막 프레임 번호. null이면 아직 Save한 적 없는 Job
+    public get lastFrame(): number | null {
+        return this.#data.last_frame;
+    }
+
+    // last_frame 기반으로 계산한 진행율 (0~100, 정수). null이면 미표시
+    public get annotationProgress(): number | null {
+        if (this.#data.last_frame == null) return null;
+        const totalFrames = this.#data.stop_frame - this.#data.start_frame + 1;
+        if (totalFrames <= 0) return null;
+        return Math.round(
+            ((this.#data.last_frame - this.#data.start_frame + 1) / totalFrames) * 100
+        );
+    }
+
     public get sourceStorage(): Storage {
         return this.#data.source_storage;
     }
@@ -955,6 +982,8 @@ export class Task extends Session {
                     source_storage: initialData.source_storage,
                     parent_job_id: job.parent_job_id,
                     consensus_replicas: job.consensus_replicas,
+                    // Task API 응답의 embedded jobs에도 last_frame 전달 (job-item 진행율 표시용)
+                    last_frame: job.last_frame,
                 });
                 data.jobs.push(jobInstance);
             }

cvat-ui/src/actions/annotation-actions.ts

@@ -1055,9 +1055,15 @@ export function saveAnnotationsAsync(): ThunkAction {
             await saveJobEvent.close();
             dispatch(saveLogsAsync());
 
+            // Save 시점의 현재 프레임 번호를 Redux store에서 읽어 last_frame으로 저장
+            const currentFrameNumber = getStore().getState().annotation.player.frame.number;
+            const fieldsToUpdate: Record<string, any> = { last_frame: currentFrameNumber };
+
+            // Job이 NEW 상태이면 IN_PROGRESS로 함께 변경 (API 호출 1회로 통합)
             if (jobInstance instanceof cvat.classes.Job && jobInstance.state === cvat.enums.JobState.NEW) {
-                await dispatch(updateJobAsync(jobInstance, { state: JobState.IN_PROGRESS }));
+                fieldsToUpdate.state = JobState.IN_PROGRESS;
             }
+            await dispatch(updateJobAsync(jobInstance, fieldsToUpdate));
 
             dispatch({
                 type: AnnotationActionTypes.SAVE_ANNOTATIONS_SUCCESS,

cvat-ui/src/components/job-item/job-item.tsx

@@ -20,6 +20,7 @@ import {
     LoadingOutlined, MoreOutlined, QuestionCircleOutlined,
 } from '@ant-design/icons/lib/icons';
 import { DurationIcon, FramesIcon } from 'icons';
+import Progress from 'antd/lib/progress';
 import {
     Job, JobStage, JobState, JobType, Task, User,
 } from 'cvat-core-wrapper';
@@ -55,7 +56,7 @@ function ReviewSummaryComponent({ jobInstance }: Readonly<{ jobInstance: Job }>)
     useEffect(() => {
         setError(null);
         jobInstance
-            .issues(jobInstance.id)
+            .issues()
             .then((issues: any[]) => {
                 if (isMounted()) {
                     setSummary({
@@ -284,6 +285,28 @@ function JobItem(props: Readonly<Props>): JSX.Element {
                     </Row>
                 </Col>
             </Row>
+            {/* Save 이력이 있을 때만 하단 progress bar 섹션 표시 */}
+            {job.annotationProgress != null && (
+                <div className='cvat-job-item-progress-section'>
+                    <Row justify='space-between' align='middle'>
+                        <Col>
+                            <Text type='secondary'>
+                                {/* 마지막 작업 프레임 번호와 전체 프레임 범위를 함께 표시 */}
+                                {`Frame ${job.lastFrame} / ${job.stopFrame}`}
+                            </Text>
+                        </Col>
+                        <Col>
+                            <Text type='secondary'>{`${job.annotationProgress}%`}</Text>
+                        </Col>
+                    </Row>
+                    <Progress
+                        percent={job.annotationProgress}
+                        showInfo={false}
+                        strokeColor='#1890ff'
+                        size='small'
+                    />
+                </div>
+            )}
             <div
                 onClick={handleContextMenuClick}
                 className='cvat-job-item-more-button cvat-actions-menu-button'

cvat-ui/src/components/job-item/styles.scss

@@ -85,6 +85,15 @@
         top: $grid-unit-size * 6.5;
     }
 
+    // Save 이력이 있을 때 표시되는 하단 progress bar 섹션
+    .cvat-job-item-progress-section {
+        margin-top: $grid-unit-size * 1.5;
+
+        .ant-progress {
+            margin-top: $grid-unit-size * 0.5;
+        }
+    }
+
 }
 
 .ant-menu.cvat-job-item-menu {

cvat-ui/src/components/jobs-page/job-card.tsx

@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import Card from 'antd/lib/card';
 import Descriptions from 'antd/lib/descriptions';
+import Progress from 'antd/lib/progress';
 import { MoreOutlined } from '@ant-design/icons';
 
 import { Job, JobType } from 'cvat-core-wrapper';
@@ -21,7 +22,7 @@ const useCardHeight = useCardHeightHOC({
     siblingClassNames: ['cvat-jobs-page-pagination', 'cvat-jobs-page-top-bar'],
     paddings: 80,
     minHeight: 200,
-    numberOfRows: 3,
+    numberOfRows: 2,
 });
 
 interface Props {
@@ -88,7 +89,7 @@ function JobCardComponent(props: Readonly<Props>): JSX.Element {
                                 previewClassName='cvat-jobs-page-job-item-card-preview'
                             />
                             <div className='cvat-job-page-list-item-id'>
-                        ID:
+                                ID:
                                 {` ${job.id}`}
                             </div>
                             {tag && <div className='cvat-job-page-list-item-type'>{tag}</div>}
@@ -101,14 +102,32 @@ function JobCardComponent(props: Readonly<Props>): JSX.Element {
                     <Descriptions column={1} size='small'>
                         <Descriptions.Item label='Task'>{job.taskName}</Descriptions.Item>
                         <Descriptions.Item label='Stage and state'>{`${job.stage} ${job.state}`}</Descriptions.Item>
-                        <Descriptions.Item label='Frames'>{job.stopFrame - job.startFrame + 1}</Descriptions.Item>
+                        {/* Frames 항목은 progress bar 섹션으로 대체 - save 이력 있을 때 */}
+                        {job.annotationProgress == null && (
+                            <Descriptions.Item label='Frames'>{job.stopFrame - job.startFrame + 1}</Descriptions.Item>
+                        )}
                         <Descriptions.Item label='Created'>{new Date(job.createdDate).toLocaleDateString()}</Descriptions.Item>
                         {job.assignee ? (
                             <Descriptions.Item label='Assignee'>{job.assignee.username}</Descriptions.Item>
                         ) : (
                             <Descriptions.Item label='Assignee'> </Descriptions.Item>
                         )}
                     </Descriptions>
+                    {/* Save 이력이 있을 때만 progress bar 섹션 표시 */}
+                    {job.annotationProgress != null && (
+                        <div className='cvat-job-card-progress-section'>
+                            <div className='cvat-job-card-progress-info'>
+                                <span>{`Frame ${job.lastFrame} / ${job.stopFrame - job.startFrame + 1}`}</span>
+                                <span>{`${job.annotationProgress}%`}</span>
+                            </div>
+                            <Progress
+                                percent={job.annotationProgress}
+                                showInfo={false}
+                                strokeColor='#1890ff'
+                                size='small'
+                            />
+                        </div>
+                    )}
                     <div
                         onClick={handleContextMenuClick}
                         className='cvat-job-card-more-button cvat-actions-menu-button'

cvat-ui/src/components/jobs-page/styles.scss

@@ -11,11 +11,11 @@
     .cvat-jobs-page-top-bar {
         margin-bottom: $grid-unit-size;
 
-        > div {
+        >div {
             display: flex;
             justify-content: space-between;
 
-            > div {
+            >div {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -25,8 +25,8 @@
                     width: $grid-unit-size * 32;
                 }
 
-                > div {
-                    > *:not(:last-child) {
+                >div {
+                    >*:not(:last-child) {
                         margin-right: $grid-unit-size;
                     }
 
@@ -85,7 +85,7 @@
             height: 100%;
             width: 100%;
 
-            > .cvat-jobs-page-job-item-card-preview {
+            >.cvat-jobs-page-job-item-card-preview {
                 .ant-empty-image {
                     height: $grid-unit-size * 10;
                 }
@@ -166,16 +166,36 @@
             width: 100%;
             margin-bottom: $grid-unit-size;
 
-            > div:not(:first-child) {
+            >div:not(:first-child) {
                 padding-left: $grid-unit-size;
             }
         }
     }
 
+    // Save 이력이 있을 때 표시되는 progress bar 섹션
+    // padding-right로 우하단 ··· 버튼과 겹치지 않도록 여백 확보
+    .cvat-job-card-progress-section {
+        margin-top: $grid-unit-size;
+        padding-right: $grid-unit-size * 4;
+
+        .cvat-job-card-progress-info {
+            display: flex;
+            justify-content: space-between;
+            font-size: 12px;
+            color: rgba(0, 0, 0, 0.45);
+            margin-bottom: 0;
+        }
+
+        .ant-progress {
+            line-height: 0;
+        }
+    }
+
+    // ··· 버튼 위치 (카드 우하단 고정)
     .cvat-job-card-more-button {
         position: absolute;
         bottom: $grid-unit-size * 2;
         right: $grid-unit-size;
         font-size: 16px;
     }
-}
+}