# 画面設計書 3-実行中ジョブ一覧

## 概要

本ドキュメントは、Apache Flink Web Dashboardの実行中ジョブ一覧画面の設計仕様を記述したものである。本画面は現在実行中のFlinkジョブを一覧表示し、各ジョブの詳細画面への導線を提供する。

### 本画面の処理概要

実行中ジョブ一覧画面は、Flinkクラスターで現在実行中のジョブを一覧表示する。ユーザーはジョブの状態、開始時刻、実行時間、タスク状況を確認し、個別のジョブ詳細画面にアクセスできる。

**業務上の目的・背景**：ストリーム処理ジョブの運用監視において、現在稼働中のジョブの状態を一覧で把握することは不可欠である。本画面により、運用者は複数のジョブの健全性を効率的に確認し、問題のあるジョブを迅速に特定できる。

**画面へのアクセス方法**：ナビゲーションメニューの「Running Jobs」をクリックするか、`/job/running`パスに直接アクセスする。

**主要な操作・処理内容**：
1. 実行中ジョブ一覧の自動取得・表示
2. ジョブ名、開始時刻、実行時間、状態でのソート
3. ジョブ行クリックによる詳細画面への遷移
4. タスク状態バッジによる視覚的な状態確認

**画面遷移**：
- 遷移元：ナビゲーションメニュー、オーバービュー画面
- 遷移先：ジョブ詳細画面（`/job/running/:jobId`）

**権限による表示制御**：本画面に関しては、特別な権限制御は実装されていない。REST APIへのアクセス権があれば全ての情報が表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 32 | REST API | 主機能 | 実行中ジョブ一覧の取得・表示（/jobs/overview API） |
| 23 | ジョブ管理 | 補助機能 | ジョブステータスのフィルタリングと表示 |

## 画面種別

一覧

## URL/ルーティング

- パス: `/job/running`

## 入出力項目

| 項目名 | 種別 | データ型 | 説明 |
|--------|------|----------|------|
| なし | - | - | 本画面は入力項目を持たない（表示専用） |

## 表示項目

### ジョブ一覧テーブル

| 項目名 | データ型 | 説明 | ソート可能 | 取得元 |
|--------|----------|------|------------|--------|
| Job Name | string | ジョブ名 | 可 | `/jobs/overview` API |
| State | string | ジョブ状態（RUNNING等） | 可 | `/jobs/overview` API |
| Start Time | timestamp | ジョブ開始日時 | 可 | `/jobs/overview` API |
| Duration | duration | 実行時間 | 可 | `/jobs/overview` API |
| Tasks | object | タスク状態別カウント（CREATED/SCHEDULED/DEPLOYING/RUNNING/FINISHED/CANCELING/CANCELED/FAILED/RECONCILING/INITIALIZING/PENDING） | 不可 | `/jobs/overview` API |

## イベント仕様

### 1-画面初期化

**トリガー**: コンポーネント初期化時（ngOnInit）

**処理フロー**:
1. ActivatedRouteからURLパスを解析
2. isCompletedフラグをfalseに設定（running）
3. StatusService.refresh$をサブスクライブ
4. JobService.loadJobs()でジョブ一覧を取得
5. completed=falseでフィルタリングして表示

**API呼び出し**:
- GET `/jobs/overview`

### 2-ジョブ行クリック

**トリガー**: ジョブ一覧の行をクリック

**処理フロー**:
1. ジョブ状態をチェック
2. INITIALIZING状態の場合、メッセージを表示して遷移しない
3. それ以外の場合、ジョブIDを取得してnavigate()を呼び出し
4. 親コンポーネント（JobComponent）がジョブ詳細画面に遷移

**遷移先**: `/job/running/{jobId}`

**制限事項**: INITIALIZING状態のジョブは詳細画面にアクセス不可

### 3-自動リフレッシュ

**トリガー**: StatusServiceのrefresh$イベント発火

**処理フロー**:
1. 定期的にrefresh$イベントが発火
2. 最新のジョブ一覧を再取得
3. フィルタリングを適用して画面表示を更新

### 4-ソート操作

**トリガー**: テーブルヘッダーのソートアイコンクリック

**処理フロー**:
1. 選択されたカラムに応じたソート関数を適用
2. 一覧を並び替えて再表示

**ソート関数**:
- sortJobNameFn: ジョブ名でソート（文字列比較）
- sortStartTimeFn: 開始時刻でソート（数値比較）
- sortDurationFn: 実行時間でソート（数値比較）
- sortStateFn: 状態でソート（文字列比較）

## データベース更新仕様

本画面はデータ参照のみを行い、データベースへの更新処理は発生しない。

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 該当なし | - | SELECT | 全ての操作は参照のみ |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| initializing-warning | 情報 | "Job detail page is not available while it is in state INITIALIZING." | INITIALIZING状態のジョブをクリック時 |

## 例外処理

| 例外種別 | 発生条件 | 処理内容 |
|----------|----------|----------|
| API通信エラー | REST APIへの接続失敗 | catchError演算子でEMPTYを返却 |
| データ取得エラー | サーバーからのレスポンスエラー | 同上 |

## 備考

- 本画面はJobComponentとJobListComponentの組み合わせで構成される
- JobComponentはコンテナとして機能し、子ルートでジョブ詳細を表示
- URLセグメントによりrunning/completedを判別
- TaskBadgeComponentでタスク状態を視覚的に表示
- JobBadgeComponentでジョブ状態を色分け表示

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、プログラム間で受け渡されるデータ構造を理解することが重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | job-overview.ts | `src/app/interfaces/job-overview.ts` | JobsItem型、TaskStatus型の定義。ジョブ一覧のデータ構造を把握する |

**読解のコツ**: TaskStatusの各プロパティ（RUNNING, FINISHED等）がタスクの状態別カウントを表すことを理解する。

#### Step 2: エントリーポイントを理解する

処理の起点となるファイル・関数を特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | job.component.ts | `src/app/pages/job/job.component.ts` | 親コンポーネント。URLパスの解析とルーティング制御 |
| 2-2 | job-list.component.ts | `src/app/components/job-list/job-list.component.ts` | ジョブ一覧表示コンポーネント |

**主要処理フロー**:
1. **51-60行目** (job.component.ts): ngOnInit()でURL解析とイベント監視
2. **72-77行目** (job.component.ts): updateJobIdSelected()でrunning/completedを判別
3. **94-105行目** (job-list.component.ts): ジョブ一覧取得とフィルタリング

#### Step 3: サービス層を理解する

データ取得を担当するサービスクラスを解析する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | job.service.ts | `src/app/services/job.service.ts` | loadJobs()メソッドでREST API呼び出し |

**主要処理フロー**:
- **66-81行目**: loadJobs() - `/jobs/overview`エンドポイントへのGETリクエストとデータ変換

### プログラム呼び出し階層図

```
JobComponent（親）
    │
    ├─ ActivatedRoute（URLパス解析）
    │      └─ running/completed判別
    │
    └─ JobListComponent（子）
           │
           ├─ StatusService.refresh$（イベント監視）
           │
           └─ JobService.loadJobs()
                  └─ HttpClient.get('/jobs/overview')
```

### データフロー図

```
[入力]                    [処理]                           [出力]

URLパス ───────────────▶ JobComponent ──────────▶ isCompleted判定
                              │
                              ▼
StatusService.refresh$ ───▶ JobListComponent
                              │
                              ▼
                        JobService.loadJobs()
                              │
                              ▼
                        /jobs/overview
                              │
                              ▼
                        completed=falseでフィルタ ──▶ ジョブ一覧表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| job.component.ts | `src/app/pages/job/job.component.ts` | ソース | 親コンテナコンポーネント |
| job.component.html | `src/app/pages/job/job.component.html` | テンプレート | 条件分岐とルーターアウトレット |
| job-list.component.ts | `src/app/components/job-list/job-list.component.ts` | ソース | ジョブ一覧コンポーネント |
| job-list.component.html | `src/app/components/job-list/job-list.component.html` | テンプレート | 一覧テーブルレイアウト |
| job.service.ts | `src/app/services/job.service.ts` | ソース | ジョブ情報サービス |
| job-overview.ts | `src/app/interfaces/job-overview.ts` | 型定義 | ジョブ型定義 |
| job-badge.component.ts | `src/app/components/job-badge/job-badge.component.ts` | ソース | 状態バッジコンポーネント |
| task-badge.component.ts | `src/app/components/task-badge/task-badge.component.ts` | ソース | タスクバッジコンポーネント |
| status.service.ts | `src/app/services/status.service.ts` | ソース | リフレッシュ管理サービス |
