argoproj / argoproj/argo-workflows

Feature Request: Support HTML preview for directory artifacts with previewPath

Open
#14,760 2 comments 0 reactions 0 assignees View on GitHub
area/ui
Dominant language
Go
Stars
17k
Forks
3.7k
Avg merge
1d 20h
Merged PRs (30d)
138

Description

### **Problem Statement**
When using `archive: none: {}` to save directory artifacts containing HTML reports, the Argo UI cannot preview HTML files within the directory, which creates inconvenience for viewing test reports and similar use cases.

### **Use Case**
I encountered this issue when generating Playwright test reports:

**Playwright Report Structure:**
```
playwright-report/
├── index.html # Main report file
├── data/ # Test data zip files
│ ├── 7c5cc25bbfc8a999055e8198ded3e650523af867.zip
│ └── 9a302936ee338de3179e9cb5d654aae316cd8005.zip
└── trace/ # Failed test case trace viewer
├── index.html # Trace viewer entry point
├── assets/ # JS modules
├── *.css # Style files
├── *.js # Script files
└── *.html # Other pages
```

**Current Configuration:**
```yaml
outputs:
artifacts:
- name: playwright-report
path: /playwright-report
archive:
none: {}
```

### **Current Behavior**
- Directory artifacts are displayed as folders in the UI with no preview capability for `index.html`
- If HTML files are output separately, the entire directory structure is lost, preventing access to:
- Trace files for failed test cases (stored in `data/` zip files)
- The trace viewer (`trace/index.html`) and its dependencies
- All interactive report functionality

### **Proposed Solution**
Add support for HTML preview in directory artifacts while preserving the complete directory structure.

**1. Extend Artifact Specification** with a `previewPath` field:
```yaml
outputs:
artifacts:
- name: playwright-report
path: /playwright-report
archive:
none: {}
previewPath: index.html # Specify preview entry file
```

**2. UI Logic Updates:**
- Detect the `artifact.previewPath` field in `artifact-panel.tsx`
- Display preview button when `previewPath` exists
- Access preview via `{artifact-base-url}/{previewPath}`

**3. Backend Support:**
- Ensure artifact service can access relative path files within directories
- Support relative path references within directory artifacts

### **Implementation Details**
**Current code** in `ui/src/workflows/components/workflow-details/artifact-panel.tsx:40-41`:
```typescript
const tgz = \!input && \!artifact.archive?.none;
const supported = \!tgz && (isDir || ['gif', 'jpg', 'jpeg', 'json', 'html', 'png', 'txt'].includes(ext));
```

**Suggested modification:**
```typescript
const tgz = \!input && \!artifact.archive?.none;
const hasPreviewPath = artifact.previewPath && \!tgz;
const supported = \!tgz && (hasPreviewPath || isDir || ['gif', 'jpg', 'jpeg', 'json', 'html', 'png', 'txt'].includes(ext));
```

### **Benefits**
- **Backward Compatible:** Does not affect existing artifacts
- **Flexible:** Users can specify any preview entry file
- **Preserves Functionality:** Maintains directory structure and file references
- **General Solution:** Useful for various HTML report types (test reports, documentation, etc.)

### **Alternative Considered**
Auto-detecting `index.html` in directories was considered, but the explicit `previewPath` approach provides more flexibility and clearer intent.

Contributor guide

Open the contributing guide

Research direction

Start in ui/src/workflows/components/workflow-details/artifact-panel.tsx at the current preview support logic, then trace the artifact specification and backend artifact service described in the issue. Done means a directory artifact can declare previewPath, the UI offers its preview, and relative files and dependencies remain accessible.

Written by the indexing model from the issue text.

Assessment

Tech stack
go, kubernetes, typescript
Domain
backend, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.