Switch to angular
This commit is contained in:
pratik
@@ -0,0 +1,283 @@
|
||||
<div class="artifacts-section">
|
||||
<!-- Debug Loading State -->
|
||||
<div style="background: red; color: white; padding: 10px; margin: 10px;">
|
||||
LOADING STATE: {{ loading ? 'TRUE (Loading...)' : 'FALSE (Not Loading)' }}
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<mat-card class="toolbar-card">
|
||||
<mat-card-content>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-buttons">
|
||||
<button mat-raised-button color="primary" (click)="loadArtifacts()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
Refresh
|
||||
</button>
|
||||
<button mat-raised-button color="accent" (click)="generateSeedData()">
|
||||
<mat-icon>scatter_plot</mat-icon>
|
||||
Generate Seed Data
|
||||
</button>
|
||||
</div>
|
||||
<mat-chip-set class="count-chip">
|
||||
<mat-chip>
|
||||
<mat-icon matChipAvatar>storage</mat-icon>
|
||||
{{ filteredArtifacts.length }} artifacts
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<div *ngIf="loading" class="loading-container">
|
||||
<mat-spinner diameter="50"></mat-spinner>
|
||||
<p>Loading artifacts...</p>
|
||||
</div>
|
||||
|
||||
<!-- Simple List Test (No Material Components) -->
|
||||
<div *ngIf="!loading" style="background: lightgreen; padding: 20px; margin: 20px;">
|
||||
<h3>Simple List Test</h3>
|
||||
<p><strong>Filtered Artifacts Count:</strong> {{ filteredArtifacts.length }}</p>
|
||||
<div *ngFor="let artifact of filteredArtifacts.slice(0, 5)" style="border: 1px solid black; padding: 10px; margin: 5px;">
|
||||
<strong>ID:</strong> {{ artifact.id }} |
|
||||
<strong>Filename:</strong> {{ artifact.filename }} |
|
||||
<strong>Type:</strong> {{ artifact.file_type }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Material Table -->
|
||||
<mat-card *ngIf="!loading" class="table-card">
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="filteredArtifacts" class="artifacts-table">
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<strong>{{ artifact.id }}</strong>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Event ID Column -->
|
||||
<ng-container matColumnDef="eventId">
|
||||
<th mat-header-cell *matHeaderCellDef>Event ID</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<mat-chip *ngIf="artifact.event_id" color="primary">
|
||||
{{ artifact.event_id }}
|
||||
</mat-chip>
|
||||
<span *ngIf="!artifact.event_id" class="text-muted">{{ artifact.id }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Filename Column -->
|
||||
<ng-container matColumnDef="filename">
|
||||
<th mat-header-cell *matHeaderCellDef>Filename</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<button mat-button (click)="showDetail(artifact)" class="filename-link">
|
||||
<mat-icon>description</mat-icon>
|
||||
{{ artifact.filename }}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Type Column -->
|
||||
<ng-container matColumnDef="type">
|
||||
<th mat-header-cell *matHeaderCellDef>Type</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<mat-chip class="type-chip">{{ artifact.file_type }}</mat-chip>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Size Column -->
|
||||
<ng-container matColumnDef="size">
|
||||
<th mat-header-cell *matHeaderCellDef>Size</th>
|
||||
<td mat-cell *matCellDef="let artifact">{{ formatBytes(artifact.file_size) }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Binaries Column -->
|
||||
<ng-container matColumnDef="binaries">
|
||||
<th mat-header-cell *matHeaderCellDef>Binaries</th>
|
||||
<td mat-cell *matCellDef="let artifact" class="binaries-cell">
|
||||
<div *ngIf="artifact.binaries && artifact.binaries.length > 0; else noBinaries">
|
||||
<mat-chip-set>
|
||||
<mat-chip *ngFor="let binary of getVisibleBinaries(artifact.binaries)" class="binary-chip">
|
||||
<mat-icon matChipAvatar>code</mat-icon>
|
||||
{{ binary }}
|
||||
</mat-chip>
|
||||
<mat-chip
|
||||
*ngIf="getHiddenBinariesCount(artifact.binaries) > 0"
|
||||
(click)="toggleBinariesExpansion(artifact.id)"
|
||||
class="expand-chip">
|
||||
<span *ngIf="!expandedBinaries[artifact.id]">
|
||||
+{{ getHiddenBinariesCount(artifact.binaries) }} more
|
||||
</span>
|
||||
<span *ngIf="expandedBinaries[artifact.id]">- less</span>
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
<mat-chip-set *ngIf="expandedBinaries[artifact.id]" class="expanded-binaries">
|
||||
<mat-chip *ngFor="let binary of artifact.binaries.slice(4)" class="binary-chip">
|
||||
<mat-icon matChipAvatar>code</mat-icon>
|
||||
{{ binary }}
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
<ng-template #noBinaries>
|
||||
<span class="text-muted">-</span>
|
||||
</ng-template>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Test Name Column -->
|
||||
<ng-container matColumnDef="testName">
|
||||
<th mat-header-cell *matHeaderCellDef>Test Name</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<span>{{ artifact.test_name || '-' }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Suite Column -->
|
||||
<ng-container matColumnDef="suite">
|
||||
<th mat-header-cell *matHeaderCellDef>Suite</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<span>{{ artifact.test_suite || '-' }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Result Column -->
|
||||
<ng-container matColumnDef="result">
|
||||
<th mat-header-cell *matHeaderCellDef>Result</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<mat-chip
|
||||
*ngIf="artifact.test_result"
|
||||
[class]="'result-' + artifact.test_result">
|
||||
<mat-icon matChipAvatar>{{ getResultIcon(artifact.test_result) }}</mat-icon>
|
||||
{{ artifact.test_result }}
|
||||
</mat-chip>
|
||||
<span *ngIf="!artifact.test_result" class="text-muted">-</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tags Column -->
|
||||
<ng-container matColumnDef="tags">
|
||||
<th mat-header-cell *matHeaderCellDef>Tags</th>
|
||||
<td mat-cell *matCellDef="let artifact" class="tags-cell">
|
||||
<div *ngIf="artifact.tags && artifact.tags.length > 0; else noTags">
|
||||
<mat-chip-set>
|
||||
<mat-chip *ngFor="let tag of getVisibleTags(artifact.tags)" class="tag-chip">
|
||||
{{ tag }}
|
||||
</mat-chip>
|
||||
<mat-chip
|
||||
*ngIf="getHiddenTagsCount(artifact.tags) > 0"
|
||||
(click)="toggleTagsExpansion(artifact.id)"
|
||||
class="expand-chip">
|
||||
<span *ngIf="!expandedTags[artifact.id]">
|
||||
+{{ getHiddenTagsCount(artifact.tags) }} more
|
||||
</span>
|
||||
<span *ngIf="expandedTags[artifact.id]">- less</span>
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
<mat-chip-set *ngIf="expandedTags[artifact.id]" class="expanded-tags">
|
||||
<mat-chip *ngFor="let tag of artifact.tags.slice(3)" class="tag-chip">
|
||||
{{ tag }}
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
<app-tag-manager
|
||||
[artifactId]="artifact.id"
|
||||
[currentTags]="artifact.tags"
|
||||
(tagsUpdated)="onTagsUpdated()">
|
||||
</app-tag-manager>
|
||||
</div>
|
||||
<ng-template #noTags>
|
||||
<app-tag-manager
|
||||
[artifactId]="artifact.id"
|
||||
[currentTags]="[]"
|
||||
(tagsUpdated)="onTagsUpdated()">
|
||||
</app-tag-manager>
|
||||
</ng-template>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Created Column -->
|
||||
<ng-container matColumnDef="created">
|
||||
<th mat-header-cell *matHeaderCellDef>Created</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<small>{{ formatDate(artifact.created_at) }}</small>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Actions Column -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
||||
<td mat-cell *matCellDef="let artifact">
|
||||
<div class="action-buttons">
|
||||
<button mat-icon-button
|
||||
(click)="downloadArtifact(artifact)"
|
||||
matTooltip="Download"
|
||||
color="primary">
|
||||
<mat-icon>download</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button
|
||||
(click)="deleteArtifact(artifact)"
|
||||
matTooltip="Delete"
|
||||
color="warn">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Table Header and Rows -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
|
||||
<!-- No Data Row -->
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell no-data" [attr.colspan]="displayedColumns.length">
|
||||
<div class="no-data-content">
|
||||
<mat-icon>inbox</mat-icon>
|
||||
<p>No artifacts found. Upload some files to get started!</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
<!-- Pagination -->
|
||||
<mat-card class="pagination-card" *ngIf="!loading">
|
||||
<mat-card-content>
|
||||
<div class="pagination">
|
||||
<button mat-icon-button
|
||||
(click)="previousPage()"
|
||||
[disabled]="currentPage === 1"
|
||||
matTooltip="Previous page">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
</button>
|
||||
<mat-chip>Page {{ currentPage }}</mat-chip>
|
||||
<button mat-icon-button
|
||||
(click)="nextPage()"
|
||||
[disabled]="filteredArtifacts.length < pageSize"
|
||||
matTooltip="Next page">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!-- Artifact Detail Modal (placeholder for now) -->
|
||||
<div *ngIf="showDetailModal && selectedArtifact" class="detail-backdrop" (click)="closeDetailModal()">
|
||||
<mat-card class="detail-modal" (click)="$event.stopPropagation()">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Artifact Details</mat-card-title>
|
||||
<button mat-icon-button (click)="closeDetailModal()" class="close-button">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<!-- Detail content will be added later -->
|
||||
<p>Artifact ID: {{ selectedArtifact.id }}</p>
|
||||
<p>Filename: {{ selectedArtifact.filename }}</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@@ -0,0 +1,281 @@
|
||||
.artifacts-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar-card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.count-chip {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
gap: 16px;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.artifacts-table {
|
||||
width: 100%;
|
||||
|
||||
.mat-mdc-cell,
|
||||
.mat-mdc-header-cell {
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.mat-mdc-header-cell {
|
||||
font-weight: 600;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.mat-mdc-row:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
// Column specific styles
|
||||
.binaries-cell,
|
||||
.tags-cell {
|
||||
max-width: 250px;
|
||||
|
||||
mat-chip-set {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.filename-link {
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
text-transform: none;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Chip styles
|
||||
.type-chip {
|
||||
background-color: #e3f2fd !important;
|
||||
color: #1976d2 !important;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.binary-chip {
|
||||
background-color: #f3e5f5 !important;
|
||||
color: #7b1fa2 !important;
|
||||
font-size: 10px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background-color: #e8f5e8 !important;
|
||||
color: #2e7d32 !important;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.expand-chip {
|
||||
background-color: #fff3e0 !important;
|
||||
color: #f57c00 !important;
|
||||
font-size: 9px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffe0b2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-binaries,
|
||||
.expanded-tags {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// Result chips
|
||||
.result-pass {
|
||||
background-color: #e8f5e8 !important;
|
||||
color: #2e7d32 !important;
|
||||
}
|
||||
|
||||
.result-fail {
|
||||
background-color: #ffebee !important;
|
||||
color: #d32f2f !important;
|
||||
}
|
||||
|
||||
.result-skip {
|
||||
background-color: #fff8e1 !important;
|
||||
color: #f57c00 !important;
|
||||
}
|
||||
|
||||
.result-error {
|
||||
background-color: #fce4ec !important;
|
||||
color: #c2185b !important;
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
// No data state
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px !important;
|
||||
}
|
||||
|
||||
.no-data-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #666;
|
||||
|
||||
mat-icon {
|
||||
font-size: 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
// Detail modal
|
||||
.detail-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.detail-modal {
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.toolbar-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.count-chip {
|
||||
margin-left: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.artifacts-table {
|
||||
font-size: 12px;
|
||||
|
||||
.mat-mdc-cell,
|
||||
.mat-mdc-header-cell {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.binaries-cell,
|
||||
.tags-cell {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// Override Material styles
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-table {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mat-mdc-chip {
|
||||
--mdc-chip-container-height: 24px;
|
||||
--mdc-chip-with-avatar-container-height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mat-mdc-chip-set {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { Artifact } from '../../models/artifact.interface';
|
||||
import { ArtifactService } from '../../services/artifact.service';
|
||||
import { NotificationService } from '../../services/notification.service';
|
||||
import { TagManagerComponent } from '../tag-manager/tag-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-artifacts-table',
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatTableModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatChipsModule,
|
||||
MatCardModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTooltipModule,
|
||||
MatDialogModule,
|
||||
MatSnackBarModule,
|
||||
TagManagerComponent
|
||||
],
|
||||
templateUrl: './artifacts-table.component.html',
|
||||
styleUrl: './artifacts-table.component.scss'
|
||||
})
|
||||
export class ArtifactsTableComponent implements OnInit, OnChanges {
|
||||
@Input() artifacts: Artifact[] = [];
|
||||
@Input() filters: any = {};
|
||||
|
||||
displayedColumns: string[] = [
|
||||
'id',
|
||||
'eventId',
|
||||
'filename',
|
||||
'type',
|
||||
'size',
|
||||
'binaries',
|
||||
'testName',
|
||||
'suite',
|
||||
'result',
|
||||
'tags',
|
||||
'created',
|
||||
'actions'
|
||||
];
|
||||
|
||||
expandedBinaries: { [key: number]: boolean } = {};
|
||||
expandedTags: { [key: number]: boolean } = {};
|
||||
|
||||
currentPage = 1;
|
||||
pageSize = 25;
|
||||
loading = false; // Start with false to show content immediately
|
||||
|
||||
selectedArtifact: Artifact | null = null;
|
||||
showDetailModal = false;
|
||||
|
||||
filteredArtifacts: Artifact[] = [];
|
||||
|
||||
constructor(
|
||||
private artifactService: ArtifactService,
|
||||
private notificationService: NotificationService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('ArtifactsTableComponent ngOnInit - artifacts count:', this.artifacts.length);
|
||||
console.log('Initial loading state:', this.loading);
|
||||
// Always load artifacts on init
|
||||
this.loadArtifacts();
|
||||
// Force show after a delay to debug
|
||||
setTimeout(() => {
|
||||
console.log('Timeout - forcing loading to false');
|
||||
this.loading = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
console.log('ArtifactsTableComponent ngOnChanges - artifacts:', changes['artifacts']?.currentValue?.length || 0);
|
||||
// Re-apply filters when artifacts or filters input changes
|
||||
if (changes['artifacts'] || changes['filters']) {
|
||||
this.applyFilters();
|
||||
}
|
||||
}
|
||||
|
||||
loadArtifacts(): void {
|
||||
console.log('Loading artifacts...');
|
||||
this.loading = true;
|
||||
this.artifactService.getArtifacts(this.pageSize, (this.currentPage - 1) * this.pageSize)
|
||||
.subscribe({
|
||||
next: (artifacts) => {
|
||||
console.log('Loaded artifacts:', artifacts.length);
|
||||
this.artifacts = artifacts;
|
||||
this.applyFilters();
|
||||
this.loading = false;
|
||||
console.log('Loading complete. loading =', this.loading);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading artifacts:', error);
|
||||
this.loading = false;
|
||||
console.log('Error occurred. loading =', this.loading);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
applyFilters(): void {
|
||||
console.log('Applying filters to', this.artifacts.length, 'artifacts');
|
||||
this.filteredArtifacts = this.artifacts.filter(artifact => {
|
||||
if (this.filters.filename && !artifact.filename.toLowerCase().includes(this.filters.filename.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
if (this.filters.fileType && artifact.file_type !== this.filters.fileType) {
|
||||
return false;
|
||||
}
|
||||
if (this.filters.testName && !artifact.test_name?.toLowerCase().includes(this.filters.testName.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
if (this.filters.testSuite && !artifact.test_suite?.toLowerCase().includes(this.filters.testSuite.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
if (this.filters.testResult && artifact.test_result !== this.filters.testResult) {
|
||||
return false;
|
||||
}
|
||||
if (this.filters.tags && this.filters.tags.length > 0) {
|
||||
const hasMatchingTag = this.filters.tags.some((tag: string) =>
|
||||
artifact.tags.some(artifactTag => artifactTag.toLowerCase().includes(tag.toLowerCase()))
|
||||
);
|
||||
if (!hasMatchingTag) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
console.log('Filtered artifacts count:', this.filteredArtifacts.length);
|
||||
}
|
||||
|
||||
toggleBinariesExpansion(artifactId: number): void {
|
||||
this.expandedBinaries[artifactId] = !this.expandedBinaries[artifactId];
|
||||
}
|
||||
|
||||
toggleTagsExpansion(artifactId: number): void {
|
||||
this.expandedTags[artifactId] = !this.expandedTags[artifactId];
|
||||
}
|
||||
|
||||
showDetail(artifact: Artifact): void {
|
||||
this.selectedArtifact = artifact;
|
||||
this.showDetailModal = true;
|
||||
}
|
||||
|
||||
closeDetailModal(): void {
|
||||
this.showDetailModal = false;
|
||||
this.selectedArtifact = null;
|
||||
}
|
||||
|
||||
downloadArtifact(artifact: Artifact): void {
|
||||
this.artifactService.downloadArtifact(artifact.id).subscribe({
|
||||
next: (blob) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = artifact.filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error downloading artifact:', error);
|
||||
this.notificationService.showError('Error downloading artifact: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async deleteArtifact(artifact: Artifact): Promise<void> {
|
||||
const confirmed = await this.notificationService.showConfirmation(
|
||||
`Are you sure you want to delete "${artifact.filename}"? This cannot be undone.`,
|
||||
'Delete'
|
||||
);
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.artifactService.deleteArtifact(artifact.id).subscribe({
|
||||
next: () => {
|
||||
this.notificationService.showSuccess('Artifact deleted successfully');
|
||||
this.loadArtifacts();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting artifact:', error);
|
||||
this.notificationService.showError('Error deleting artifact: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
generateSeedData(): void {
|
||||
const count = prompt('How many artifacts to generate? (1-100)', '10');
|
||||
if (!count) return;
|
||||
|
||||
const num = parseInt(count);
|
||||
if (isNaN(num) || num < 1 || num > 100) {
|
||||
this.notificationService.showWarning('Please enter a number between 1 and 100');
|
||||
return;
|
||||
}
|
||||
|
||||
this.artifactService.generateSeedData(num).subscribe({
|
||||
next: (result) => {
|
||||
this.notificationService.showSuccess(result.message || 'Seed data generated successfully');
|
||||
this.loadArtifacts();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error generating seed data:', error);
|
||||
this.notificationService.showError('Error generating seed data: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
getVisibleBinaries(binaries: string[] | undefined): string[] {
|
||||
if (!binaries) return [];
|
||||
return binaries.slice(0, 4);
|
||||
}
|
||||
|
||||
getHiddenBinariesCount(binaries: string[] | undefined): number {
|
||||
if (!binaries) return 0;
|
||||
return Math.max(0, binaries.length - 4);
|
||||
}
|
||||
|
||||
getVisibleTags(tags: string[]): string[] {
|
||||
return tags.slice(0, 3);
|
||||
}
|
||||
|
||||
getHiddenTagsCount(tags: string[]): number {
|
||||
return Math.max(0, tags.length - 3);
|
||||
}
|
||||
|
||||
previousPage(): void {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.loadArtifacts();
|
||||
}
|
||||
}
|
||||
|
||||
nextPage(): void {
|
||||
this.currentPage++;
|
||||
this.loadArtifacts();
|
||||
}
|
||||
|
||||
onTagsUpdated(): void {
|
||||
this.loadArtifacts();
|
||||
}
|
||||
|
||||
getResultIcon(result: string): string {
|
||||
switch (result) {
|
||||
case 'pass': return 'check_circle';
|
||||
case 'fail': return 'cancel';
|
||||
case 'skip': return 'skip_next';
|
||||
case 'error': return 'error';
|
||||
default: return 'help';
|
||||
}
|
||||
}
|
||||
}
|
||||
197
frontend/src/app/components/query-form/query-form.component.html
Normal file
197
frontend/src/app/components/query-form/query-form.component.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<mat-card class="query-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon>search</mat-icon>
|
||||
Query Artifacts
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
Search and filter your artifact collection
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<form (ngSubmit)="queryArtifacts()" #queryFormRef="ngForm" class="query-form">
|
||||
<!-- Basic Search Section -->
|
||||
<div class="form-section">
|
||||
<h3>Basic Search</h3>
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Filename</mat-label>
|
||||
<input
|
||||
matInput
|
||||
name="filename"
|
||||
[(ngModel)]="queryForm.filename"
|
||||
(input)="onFilterChange()"
|
||||
placeholder="Search filename...">
|
||||
<mat-icon matSuffix>description</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>File Type</mat-label>
|
||||
<mat-select
|
||||
name="file_type"
|
||||
[(ngModel)]="queryForm.file_type"
|
||||
(selectionChange)="onFilterChange()">
|
||||
<mat-option value="">All Types</mat-option>
|
||||
<mat-option *ngFor="let type of fileTypes" [value]="type">
|
||||
{{ type.toUpperCase() }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix>category</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Information Section -->
|
||||
<div class="form-section">
|
||||
<h3>Test Information</h3>
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Test Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
name="test_name"
|
||||
[(ngModel)]="queryForm.test_name"
|
||||
(input)="onFilterChange()"
|
||||
placeholder="Search test name...">
|
||||
<mat-icon matSuffix>quiz</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Test Suite</mat-label>
|
||||
<input
|
||||
matInput
|
||||
name="test_suite"
|
||||
[(ngModel)]="queryForm.test_suite"
|
||||
(input)="onFilterChange()"
|
||||
placeholder="e.g., integration">
|
||||
<mat-icon matSuffix>folder</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Test Result</mat-label>
|
||||
<mat-select
|
||||
name="test_result"
|
||||
[(ngModel)]="queryForm.test_result"
|
||||
(selectionChange)="onFilterChange()">
|
||||
<mat-option value="">All Results</mat-option>
|
||||
<mat-option *ngFor="let result of testResults" [value]="result">
|
||||
<mat-icon>{{ getResultIcon(result) }}</mat-icon>
|
||||
{{ result | titlecase }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix>assignment_turned_in</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Tags</mat-label>
|
||||
<input
|
||||
matInput
|
||||
name="tags"
|
||||
[(ngModel)]="tagsInput"
|
||||
(input)="onFilterChange()"
|
||||
placeholder="e.g., regression, smoke">
|
||||
<mat-icon matSuffix>label</mat-icon>
|
||||
<mat-hint>Comma-separated tags</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Section -->
|
||||
<div class="form-section">
|
||||
<h3>Date Range</h3>
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="startPicker"
|
||||
name="start_date"
|
||||
[(ngModel)]="queryForm.start_date">
|
||||
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>End Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="endPicker"
|
||||
name="end_date"
|
||||
[(ngModel)]="queryForm.end_date">
|
||||
<mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Progress -->
|
||||
<div class="search-progress" *ngIf="searching">
|
||||
<mat-spinner diameter="24"></mat-spinner>
|
||||
<span>Searching artifacts...</span>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
type="submit"
|
||||
[disabled]="searching"
|
||||
class="search-button">
|
||||
<mat-icon>{{ searching ? 'hourglass_empty' : 'search' }}</mat-icon>
|
||||
{{ searching ? 'Searching...' : 'Search Artifacts' }}
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
(click)="clearQuery()"
|
||||
[disabled]="searching">
|
||||
<mat-icon>clear</mat-icon>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Active Filters Display -->
|
||||
<mat-card class="filters-card" *ngIf="queryForm.filename || queryForm.file_type || queryForm.test_name || queryForm.test_suite || queryForm.test_result || tagsInput">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon>filter_list</mat-icon>
|
||||
Active Filters
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<mat-chip-set class="filter-chips">
|
||||
<mat-chip *ngIf="queryForm.filename" color="primary">
|
||||
<mat-icon matChipAvatar>description</mat-icon>
|
||||
Filename: {{ queryForm.filename }}
|
||||
</mat-chip>
|
||||
<mat-chip *ngIf="queryForm.file_type" color="accent">
|
||||
<mat-icon matChipAvatar>category</mat-icon>
|
||||
Type: {{ queryForm.file_type }}
|
||||
</mat-chip>
|
||||
<mat-chip *ngIf="queryForm.test_name" color="primary">
|
||||
<mat-icon matChipAvatar>quiz</mat-icon>
|
||||
Test: {{ queryForm.test_name }}
|
||||
</mat-chip>
|
||||
<mat-chip *ngIf="queryForm.test_suite" color="accent">
|
||||
<mat-icon matChipAvatar>folder</mat-icon>
|
||||
Suite: {{ queryForm.test_suite }}
|
||||
</mat-chip>
|
||||
<mat-chip *ngIf="queryForm.test_result" color="primary">
|
||||
<mat-icon matChipAvatar>assignment_turned_in</mat-icon>
|
||||
Result: {{ queryForm.test_result }}
|
||||
</mat-chip>
|
||||
<mat-chip *ngIf="tagsInput" color="accent">
|
||||
<mat-icon matChipAvatar>label</mat-icon>
|
||||
Tags: {{ tagsInput }}
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
207
frontend/src/app/components/query-form/query-form.component.scss
Normal file
207
frontend/src/app/components/query-form/query-form.component.scss
Normal file
@@ -0,0 +1,207 @@
|
||||
.query-card {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.filters-card {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.query-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 16px 0;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #424242;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
color: #666;
|
||||
|
||||
mat-spinner {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
|
||||
.search-button {
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
mat-chip {
|
||||
--mdc-chip-container-height: 36px;
|
||||
|
||||
mat-icon[matChipAvatar] {
|
||||
background-color: transparent !important;
|
||||
color: currentColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material Design overrides
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-mdc-form-field-hint {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-select-panel {
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
.mat-mdc-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-chip {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button {
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datepicker-toggle {
|
||||
.mat-icon-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
.mat-mdc-button-touch-target {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card title styling
|
||||
:host ::ng-deep .mat-mdc-card-header {
|
||||
.mat-mdc-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mat-mdc-card-subtitle {
|
||||
margin-top: 4px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: 768px) {
|
||||
.query-card,
|
||||
.filters-card {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.search-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-chips {
|
||||
gap: 6px;
|
||||
|
||||
mat-chip {
|
||||
--mdc-chip-container-height: 32px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.query-card,
|
||||
.filters-card {
|
||||
margin: 0 8px 12px;
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
137
frontend/src/app/components/query-form/query-form.component.ts
Normal file
137
frontend/src/app/components/query-form/query-form.component.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
import { Component, Output, EventEmitter } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { ArtifactQuery, Artifact } from '../../models/artifact.interface';
|
||||
import { ArtifactService } from '../../services/artifact.service';
|
||||
import { NotificationService } from '../../services/notification.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-query-form',
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatCardModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatChipsModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatDatepickerModule,
|
||||
MatNativeDateModule
|
||||
],
|
||||
templateUrl: './query-form.component.html',
|
||||
styleUrl: './query-form.component.scss'
|
||||
})
|
||||
export class QueryFormComponent {
|
||||
@Output() queryResults = new EventEmitter<Artifact[]>();
|
||||
@Output() filtersChange = new EventEmitter<any>();
|
||||
|
||||
queryForm: ArtifactQuery = {
|
||||
filename: '',
|
||||
file_type: '',
|
||||
test_name: '',
|
||||
test_suite: '',
|
||||
test_result: '',
|
||||
tags: [],
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
limit: 100,
|
||||
offset: 0
|
||||
};
|
||||
|
||||
searching = false;
|
||||
fileTypes = ['csv', 'json', 'binary', 'pcap'];
|
||||
testResults = ['pass', 'fail', 'skip', 'error'];
|
||||
|
||||
tagsInput = '';
|
||||
|
||||
constructor(
|
||||
private artifactService: ArtifactService,
|
||||
private notificationService: NotificationService
|
||||
) {}
|
||||
|
||||
queryArtifacts(): void {
|
||||
this.searching = true;
|
||||
|
||||
const query: ArtifactQuery = { ...this.queryForm };
|
||||
|
||||
if (this.tagsInput) {
|
||||
query.tags = this.tagsInput.split(',').map(t => t.trim()).filter(t => t);
|
||||
}
|
||||
|
||||
if (query.start_date) {
|
||||
query.start_date = new Date(query.start_date).toISOString();
|
||||
}
|
||||
|
||||
if (query.end_date) {
|
||||
query.end_date = new Date(query.end_date).toISOString();
|
||||
}
|
||||
|
||||
this.artifactService.queryArtifacts(query).subscribe({
|
||||
next: (artifacts) => {
|
||||
this.queryResults.emit(artifacts);
|
||||
this.searching = false;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Query failed:', error);
|
||||
this.notificationService.showError('Query failed: ' + error.message);
|
||||
this.searching = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
clearQuery(): void {
|
||||
this.queryForm = {
|
||||
filename: '',
|
||||
file_type: '',
|
||||
test_name: '',
|
||||
test_suite: '',
|
||||
test_result: '',
|
||||
tags: [],
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
limit: 100,
|
||||
offset: 0
|
||||
};
|
||||
this.tagsInput = '';
|
||||
this.emitFilters();
|
||||
}
|
||||
|
||||
emitFilters(): void {
|
||||
const filters = {
|
||||
filename: this.queryForm.filename,
|
||||
fileType: this.queryForm.file_type,
|
||||
testName: this.queryForm.test_name,
|
||||
testSuite: this.queryForm.test_suite,
|
||||
testResult: this.queryForm.test_result,
|
||||
tags: this.tagsInput ? this.tagsInput.split(',').map(t => t.trim()).filter(t => t) : []
|
||||
};
|
||||
this.filtersChange.emit(filters);
|
||||
}
|
||||
|
||||
onFilterChange(): void {
|
||||
this.emitFilters();
|
||||
}
|
||||
|
||||
getResultIcon(result: string): string {
|
||||
switch (result) {
|
||||
case 'pass': return 'check_circle';
|
||||
case 'fail': return 'cancel';
|
||||
case 'skip': return 'skip_next';
|
||||
case 'error': return 'error';
|
||||
default: return 'help';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<mat-tab-group
|
||||
[(selectedIndex)]="selectedIndex"
|
||||
(selectedTabChange)="onTabChange($event)"
|
||||
animationDuration="300ms"
|
||||
color="primary">
|
||||
|
||||
<!-- Artifacts Tab -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">view_list</mat-icon>
|
||||
Artifacts
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Upload Tab -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">cloud_upload</mat-icon>
|
||||
Upload
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Query Tab -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">search</mat-icon>
|
||||
Query
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
@@ -0,0 +1,44 @@
|
||||
.tab-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-tab-group {
|
||||
.mat-mdc-tab-header {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.mat-mdc-tab {
|
||||
min-width: 120px;
|
||||
|
||||
.mat-mdc-tab-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-tab {
|
||||
min-width: 80px;
|
||||
|
||||
.mat-mdc-tab-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
export type TabType = 'artifacts' | 'upload' | 'query';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tab-navigation',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatTabsModule,
|
||||
MatIconModule
|
||||
],
|
||||
templateUrl: './tab-navigation.component.html',
|
||||
styleUrl: './tab-navigation.component.scss'
|
||||
})
|
||||
export class TabNavigationComponent {
|
||||
@Output() tabChange = new EventEmitter<TabType>();
|
||||
|
||||
selectedIndex = 0;
|
||||
|
||||
tabs = [
|
||||
{ id: 'artifacts' as TabType, label: 'Artifacts', icon: 'view_list' },
|
||||
{ id: 'upload' as TabType, label: 'Upload', icon: 'cloud_upload' },
|
||||
{ id: 'query' as TabType, label: 'Query', icon: 'search' }
|
||||
];
|
||||
|
||||
onTabChange(event: any): void {
|
||||
const selectedTab = this.tabs[event.index];
|
||||
this.tabChange.emit(selectedTab.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
<div class="tag-manager">
|
||||
<!-- Current Tags Display -->
|
||||
<div class="current-tags-section" *ngIf="currentTags.length > 0">
|
||||
<mat-chip-set>
|
||||
<mat-chip
|
||||
*ngFor="let tag of currentTags"
|
||||
class="current-tag"
|
||||
[removable]="true"
|
||||
(removed)="removeTag(tag)">
|
||||
<mat-icon matChipAvatar>label</mat-icon>
|
||||
{{ tag }}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
|
||||
<!-- Add Tag Button -->
|
||||
<div class="add-tag-section">
|
||||
<button
|
||||
mat-fab
|
||||
color="primary"
|
||||
class="add-tag-fab"
|
||||
(click)="toggleAddTag()"
|
||||
[matTooltip]="showAddTag ? 'Close tag manager' : 'Add new tag'">
|
||||
<mat-icon>{{ showAddTag ? 'close' : 'add' }}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Tag Form -->
|
||||
<mat-card class="add-tag-card" *ngIf="showAddTag">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon>new_label</mat-icon>
|
||||
Add New Tag
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<form class="tag-form">
|
||||
<!-- Tag Name Input -->
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Tag Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="newTagName"
|
||||
name="tagName"
|
||||
placeholder="Enter tag name"
|
||||
(keyup.enter)="addTag()">
|
||||
<mat-icon matSuffix>label</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Scope Section -->
|
||||
<div class="scope-section">
|
||||
<button
|
||||
mat-button
|
||||
color="accent"
|
||||
type="button"
|
||||
(click)="toggleScopeInput()">
|
||||
<mat-icon>{{ showScopeInput ? 'expand_less' : 'expand_more' }}</mat-icon>
|
||||
{{ showScopeInput ? 'Hide Scope Options' : 'Add Scope' }}
|
||||
</button>
|
||||
|
||||
<div class="scope-inputs" *ngIf="showScopeInput">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Predefined Scope</mat-label>
|
||||
<mat-select [(ngModel)]="newTagScope" name="scopeSelect">
|
||||
<mat-option value="">No scope</mat-option>
|
||||
<mat-option *ngFor="let scope of predefinedScopes" [value]="scope">
|
||||
{{ scope | titlecase }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Custom Scope</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="newTagScope"
|
||||
name="customScope"
|
||||
placeholder="Enter custom scope">
|
||||
<mat-icon matSuffix>category</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="addTag()"
|
||||
[disabled]="!newTagName.trim()">
|
||||
<mat-icon>add</mat-icon>
|
||||
Add Tag
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
(click)="resetForm()">
|
||||
<mat-icon>clear</mat-icon>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Available Tags (Quick Add) -->
|
||||
<mat-expansion-panel class="available-tags-panel" *ngIf="showAddTag && availableTags.length > 0">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<mat-icon>library_add</mat-icon>
|
||||
Quick Add Existing Tags
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
Click to add existing tags
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<!-- Unscoped Tags -->
|
||||
<div class="tag-group" *ngIf="getTagsByScope().length > 0">
|
||||
<h4>General Tags</h4>
|
||||
<mat-chip-set class="available-chip-set">
|
||||
<mat-chip
|
||||
*ngFor="let tag of getTagsByScope()"
|
||||
class="available-tag"
|
||||
[class.attached]="isTagAttached(tag.name)"
|
||||
[disabled]="isTagAttached(tag.name)"
|
||||
(click)="!isTagAttached(tag.name) && addExistingTag(tag)">
|
||||
{{ tag.name }}
|
||||
<mat-icon *ngIf="isTagAttached(tag.name)" matChipTrailingIcon>check</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
|
||||
<!-- Scoped Tags -->
|
||||
<div class="tag-group" *ngFor="let scope of getUniqueScopes()">
|
||||
<h4>{{ scope | titlecase }} Tags</h4>
|
||||
<mat-chip-set class="available-chip-set">
|
||||
<mat-chip
|
||||
*ngFor="let tag of getTagsByScope(scope)"
|
||||
class="available-tag scoped"
|
||||
[class.attached]="isTagAttached(tag.name)"
|
||||
[disabled]="isTagAttached(tag.name)"
|
||||
(click)="!isTagAttached(tag.name) && addExistingTag(tag)">
|
||||
{{ tag.name }}
|
||||
<mat-icon *ngIf="isTagAttached(tag.name)" matChipTrailingIcon>check</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
@@ -0,0 +1,198 @@
|
||||
.tag-manager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.current-tags-section {
|
||||
margin-bottom: 8px;
|
||||
|
||||
mat-chip-set {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.current-tag {
|
||||
background-color: #e3f2fd !important;
|
||||
color: #1976d2 !important;
|
||||
|
||||
mat-icon[matChipAvatar] {
|
||||
background-color: #1976d2 !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-tag-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 16px 0;
|
||||
|
||||
.add-tag-fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-tag-card {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
|
||||
mat-card-header {
|
||||
margin-bottom: 16px;
|
||||
|
||||
mat-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scope-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.scope-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.available-tags-panel {
|
||||
margin-top: 16px;
|
||||
|
||||
.tag-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #424242;
|
||||
margin: 0 0 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #2196f3;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.available-chip-set {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.available-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:not(.attached):hover {
|
||||
background-color: #e8f5e8 !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
&.attached {
|
||||
background-color: #c8e6c9 !important;
|
||||
color: #2e7d32 !important;
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.scoped {
|
||||
border-left: 3px solid #ff9800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material Design overrides
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-chip {
|
||||
--mdc-chip-container-height: 32px;
|
||||
font-size: 12px;
|
||||
|
||||
&.current-tag {
|
||||
--mdc-chip-with-avatar-container-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-chip-set {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-fab {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-body {
|
||||
padding: 16px 24px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: 768px) {
|
||||
.tag-manager {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.add-tag-card {
|
||||
margin: 0 8px;
|
||||
|
||||
.tag-form .scope-inputs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-group {
|
||||
.available-chip-set {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.add-tag-card .tag-form .form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
173
frontend/src/app/components/tag-manager/tag-manager.component.ts
Normal file
173
frontend/src/app/components/tag-manager/tag-manager.component.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { Tag } from '../../models/artifact.interface';
|
||||
import { ArtifactService } from '../../services/artifact.service';
|
||||
import { NotificationService } from '../../services/notification.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tag-manager',
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatChipsModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatCardModule,
|
||||
MatTooltipModule,
|
||||
MatExpansionModule
|
||||
],
|
||||
templateUrl: './tag-manager.component.html',
|
||||
styleUrl: './tag-manager.component.scss'
|
||||
})
|
||||
export class TagManagerComponent implements OnInit {
|
||||
@Input() artifactId!: number;
|
||||
@Input() currentTags: string[] = [];
|
||||
@Output() tagsUpdated = new EventEmitter<void>();
|
||||
|
||||
availableTags: Tag[] = [];
|
||||
newTagName = '';
|
||||
newTagScope = '';
|
||||
showAddTag = false;
|
||||
showScopeInput = false;
|
||||
|
||||
predefinedScopes = ['project', 'environment', 'priority', 'category', 'status'];
|
||||
|
||||
constructor(
|
||||
private artifactService: ArtifactService,
|
||||
private notificationService: NotificationService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadAvailableTags();
|
||||
}
|
||||
|
||||
loadAvailableTags(): void {
|
||||
this.artifactService.getAllTags().subscribe({
|
||||
next: (tags) => {
|
||||
this.availableTags = tags;
|
||||
},
|
||||
error: (error) => {
|
||||
// Tags endpoint not implemented yet - silently ignore
|
||||
if (error.status === 404) {
|
||||
console.log('Tags API not implemented yet');
|
||||
this.availableTags = [];
|
||||
} else {
|
||||
console.error('Error loading tags:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleAddTag(): void {
|
||||
this.showAddTag = !this.showAddTag;
|
||||
if (!this.showAddTag) {
|
||||
this.resetForm();
|
||||
}
|
||||
}
|
||||
|
||||
toggleScopeInput(): void {
|
||||
this.showScopeInput = !this.showScopeInput;
|
||||
}
|
||||
|
||||
resetForm(): void {
|
||||
this.newTagName = '';
|
||||
this.newTagScope = '';
|
||||
this.showScopeInput = false;
|
||||
}
|
||||
|
||||
addTag(): void {
|
||||
if (!this.newTagName.trim()) return;
|
||||
|
||||
const tag: Tag = {
|
||||
name: this.newTagName.trim(),
|
||||
scope: this.newTagScope.trim() || undefined
|
||||
};
|
||||
|
||||
this.artifactService.createTag(tag).subscribe({
|
||||
next: (createdTag) => {
|
||||
this.artifactService.addTag(this.artifactId, createdTag).subscribe({
|
||||
next: () => {
|
||||
this.loadAvailableTags();
|
||||
this.tagsUpdated.emit();
|
||||
this.resetForm();
|
||||
this.showAddTag = false;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error adding tag to artifact:', error);
|
||||
this.notificationService.showError('Error adding tag to artifact: ' + error.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating tag:', error);
|
||||
this.notificationService.showError('Error creating tag: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
removeTag(tag: string): void {
|
||||
const tagToRemove = this.availableTags.find(t => t.name === tag);
|
||||
if (!tagToRemove?.id) return;
|
||||
|
||||
this.artifactService.removeTag(this.artifactId, tagToRemove.id).subscribe({
|
||||
next: () => {
|
||||
this.tagsUpdated.emit();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error removing tag:', error);
|
||||
this.notificationService.showError('Error removing tag: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addExistingTag(tag: Tag): void {
|
||||
this.artifactService.addTag(this.artifactId, tag).subscribe({
|
||||
next: () => {
|
||||
this.tagsUpdated.emit();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error adding existing tag:', error);
|
||||
this.notificationService.showError('Error adding tag: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
isTagAttached(tagName: string): boolean {
|
||||
return this.currentTags.includes(tagName);
|
||||
}
|
||||
|
||||
getTagsByScope(scope?: string): Tag[] {
|
||||
return this.availableTags.filter(tag => tag.scope === scope);
|
||||
}
|
||||
|
||||
getUniqueScopes(): string[] {
|
||||
const scopes = this.availableTags
|
||||
.map(tag => tag.scope)
|
||||
.filter((scope, index, arr) => scope && arr.indexOf(scope) === index) as string[];
|
||||
return scopes.sort();
|
||||
}
|
||||
|
||||
getTagColor(tag: Tag): string {
|
||||
if (tag.color) return tag.color;
|
||||
|
||||
const colors = ['#e0e7ff', '#fef3c7', '#d1fae5', '#fee2e2', '#f3e8ff', '#dbeafe'];
|
||||
const hash = tag.name.split('').reduce((a, b) => {
|
||||
a = ((a << 5) - a) + b.charCodeAt(0);
|
||||
return a & a;
|
||||
}, 0);
|
||||
return colors[Math.abs(hash) % colors.length];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
<mat-card class="upload-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<mat-icon>cloud_upload</mat-icon>
|
||||
Upload Artifact
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<form (ngSubmit)="uploadArtifact()" #uploadForm="ngForm" class="upload-form">
|
||||
<!-- File Upload Section -->
|
||||
<div class="file-upload-section">
|
||||
<div class="file-input-container">
|
||||
<input
|
||||
#fileInput
|
||||
type="file"
|
||||
id="file"
|
||||
name="file"
|
||||
(change)="onFileSelected($event)"
|
||||
required
|
||||
style="display: none;">
|
||||
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Select File</mat-label>
|
||||
<input matInput
|
||||
[value]="selectedFile?.name || ''"
|
||||
placeholder="No file selected"
|
||||
readonly>
|
||||
<button mat-icon-button
|
||||
matSuffix
|
||||
type="button"
|
||||
(click)="fileInput.click()"
|
||||
[attr.aria-label]="'Select file'">
|
||||
<mat-icon>folder_open</mat-icon>
|
||||
</button>
|
||||
<mat-hint>Supported: CSV, JSON, binary files, PCAP</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="selectedFile" class="selected-file-info">
|
||||
<mat-chip-set>
|
||||
<mat-chip color="primary">
|
||||
<mat-icon matChipAvatar>description</mat-icon>
|
||||
{{ selectedFile.name }}
|
||||
</mat-chip>
|
||||
<mat-chip color="accent">
|
||||
<mat-icon matChipAvatar>data_usage</mat-icon>
|
||||
{{ selectedFile.size | number }} bytes
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event ID and Test Name -->
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Event ID</mat-label>
|
||||
<input matInput
|
||||
name="eventId"
|
||||
[(ngModel)]="formData.eventId"
|
||||
placeholder="e.g., EVENT_001">
|
||||
<mat-icon matSuffix>event</mat-icon>
|
||||
<mat-hint>Groups multiple artifacts under the same event</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Test Name</mat-label>
|
||||
<input matInput
|
||||
name="testName"
|
||||
[(ngModel)]="formData.testName"
|
||||
placeholder="e.g., login_test">
|
||||
<mat-icon matSuffix>quiz</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Test Suite and Result -->
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Test Suite</mat-label>
|
||||
<input matInput
|
||||
name="testSuite"
|
||||
[(ngModel)]="formData.testSuite"
|
||||
placeholder="e.g., integration">
|
||||
<mat-icon matSuffix>category</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Test Result</mat-label>
|
||||
<mat-select name="testResult" [(ngModel)]="formData.testResult">
|
||||
<mat-option value="">-- Select --</mat-option>
|
||||
<mat-option *ngFor="let result of testResults" [value]="result">
|
||||
<mat-icon>{{ getResultIcon(result) }}</mat-icon>
|
||||
{{ result | titlecase }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-icon matSuffix>assignment_turned_in</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Version and Binaries -->
|
||||
<div class="form-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Version</mat-label>
|
||||
<input matInput
|
||||
name="version"
|
||||
[(ngModel)]="formData.version"
|
||||
placeholder="e.g., v1.0.0">
|
||||
<mat-icon matSuffix>tag</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Associated Binaries</mat-label>
|
||||
<input matInput
|
||||
name="binaries"
|
||||
[(ngModel)]="formData.binaries"
|
||||
placeholder="e.g., app.exe, lib.dll, config.json">
|
||||
<mat-icon matSuffix>code</mat-icon>
|
||||
<mat-hint>Comma-separated list of binaries/files</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Tags</mat-label>
|
||||
<input matInput
|
||||
name="tags"
|
||||
[(ngModel)]="formData.tags"
|
||||
placeholder="e.g., regression, smoke, critical">
|
||||
<mat-icon matSuffix>label</mat-icon>
|
||||
<mat-hint>Comma-separated tags</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Description -->
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput
|
||||
name="description"
|
||||
[(ngModel)]="formData.description"
|
||||
rows="3"
|
||||
placeholder="Describe this artifact..."></textarea>
|
||||
<mat-icon matSuffix>description</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- JSON Fields -->
|
||||
<div class="json-section">
|
||||
<h3>Advanced Configuration</h3>
|
||||
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Test Config (JSON)</mat-label>
|
||||
<textarea matInput
|
||||
name="testConfig"
|
||||
[(ngModel)]="formData.testConfig"
|
||||
rows="4"
|
||||
placeholder='{"browser": "chrome", "timeout": 30}'></textarea>
|
||||
<mat-icon matSuffix>settings</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Custom Metadata (JSON)</mat-label>
|
||||
<textarea matInput
|
||||
name="customMetadata"
|
||||
[(ngModel)]="formData.customMetadata"
|
||||
rows="4"
|
||||
placeholder='{"build": "1234", "commit": "abc123"}'></textarea>
|
||||
<mat-icon matSuffix>data_object</mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Upload Progress -->
|
||||
<mat-progress-bar *ngIf="uploading"
|
||||
mode="indeterminate"
|
||||
class="upload-progress"></mat-progress-bar>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="form-actions">
|
||||
<button mat-raised-button
|
||||
color="primary"
|
||||
type="submit"
|
||||
[disabled]="uploading || !selectedFile"
|
||||
class="upload-button">
|
||||
<mat-icon>{{ uploading ? 'hourglass_empty' : 'cloud_upload' }}</mat-icon>
|
||||
{{ uploading ? 'Uploading...' : 'Upload Artifact' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Status Messages -->
|
||||
<div *ngIf="uploadStatus" class="status-section">
|
||||
<mat-chip-set>
|
||||
<mat-chip [class]="uploadStatusType">
|
||||
<mat-icon matChipAvatar>
|
||||
{{ uploadStatusType === 'success' ? 'check_circle' : 'error' }}
|
||||
</mat-icon>
|
||||
{{ uploadStatus }}
|
||||
</mat-chip>
|
||||
</mat-chip-set>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@@ -0,0 +1,124 @@
|
||||
.upload-card {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.upload-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.file-upload-section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.file-input-container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-file-info {
|
||||
margin-top: 12px;
|
||||
|
||||
mat-chip-set {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.json-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #424242;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
padding: 12px 32px;
|
||||
font-size: 16px;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-section {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
mat-chip-set {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: #c8e6c9 !important;
|
||||
color: #2e7d32 !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #ffcdd2 !important;
|
||||
color: #d32f2f !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Material Design overrides
|
||||
:host ::ng-deep {
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-hint {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mat-mdc-chip {
|
||||
--mdc-chip-container-height: 28px;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.upload-card {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.upload-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
176
frontend/src/app/components/upload-form/upload-form.component.ts
Normal file
176
frontend/src/app/components/upload-form/upload-form.component.ts
Normal file
@@ -0,0 +1,176 @@
|
||||
import { Component, Output, EventEmitter } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { ArtifactService } from '../../services/artifact.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-upload-form',
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatCardModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatChipsModule,
|
||||
MatProgressBarModule,
|
||||
MatSnackBarModule
|
||||
],
|
||||
templateUrl: './upload-form.component.html',
|
||||
styleUrl: './upload-form.component.scss'
|
||||
})
|
||||
export class UploadFormComponent {
|
||||
@Output() uploadSuccess = new EventEmitter<void>();
|
||||
|
||||
selectedFile: File | null = null;
|
||||
uploading = false;
|
||||
uploadStatus = '';
|
||||
uploadStatusType: 'success' | 'error' | '' = '';
|
||||
|
||||
formData = {
|
||||
testName: '',
|
||||
testSuite: '',
|
||||
testResult: '',
|
||||
version: '',
|
||||
description: '',
|
||||
tags: '',
|
||||
testConfig: '',
|
||||
customMetadata: '',
|
||||
eventId: '',
|
||||
binaries: ''
|
||||
};
|
||||
|
||||
testResults = ['pass', 'fail', 'skip', 'error'];
|
||||
|
||||
constructor(private artifactService: ArtifactService) {}
|
||||
|
||||
onFileSelected(event: any): void {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.selectedFile = file;
|
||||
}
|
||||
}
|
||||
|
||||
resetForm(): void {
|
||||
this.selectedFile = null;
|
||||
this.formData = {
|
||||
testName: '',
|
||||
testSuite: '',
|
||||
testResult: '',
|
||||
version: '',
|
||||
description: '',
|
||||
tags: '',
|
||||
testConfig: '',
|
||||
customMetadata: '',
|
||||
eventId: '',
|
||||
binaries: ''
|
||||
};
|
||||
|
||||
const fileInput = document.getElementById('file') as HTMLInputElement;
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
showUploadStatus(message: string, success: boolean): void {
|
||||
this.uploadStatus = message;
|
||||
this.uploadStatusType = success ? 'success' : 'error';
|
||||
|
||||
setTimeout(() => {
|
||||
this.uploadStatus = '';
|
||||
this.uploadStatusType = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
uploadArtifact(): void {
|
||||
if (!this.selectedFile) {
|
||||
this.showUploadStatus('Please select a file to upload', false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.uploading = true;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', this.selectedFile);
|
||||
|
||||
const fields = ['testName', 'testSuite', 'testResult', 'version', 'description', 'eventId'];
|
||||
fields.forEach(field => {
|
||||
const key = field === 'testName' ? 'test_name' :
|
||||
field === 'testSuite' ? 'test_suite' :
|
||||
field === 'testResult' ? 'test_result' :
|
||||
field === 'eventId' ? 'event_id' : field;
|
||||
|
||||
const value = this.formData[field as keyof typeof this.formData];
|
||||
if (value) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
});
|
||||
|
||||
if (this.formData.tags) {
|
||||
const tagsArray = this.formData.tags.split(',').map(t => t.trim()).filter(t => t);
|
||||
formData.append('tags', JSON.stringify(tagsArray));
|
||||
}
|
||||
|
||||
if (this.formData.binaries) {
|
||||
const binariesArray = this.formData.binaries.split(',').map(b => b.trim()).filter(b => b);
|
||||
formData.append('binaries', JSON.stringify(binariesArray));
|
||||
}
|
||||
|
||||
if (this.formData.testConfig) {
|
||||
try {
|
||||
JSON.parse(this.formData.testConfig);
|
||||
formData.append('test_config', this.formData.testConfig);
|
||||
} catch (e) {
|
||||
this.showUploadStatus('Invalid Test Config JSON', false);
|
||||
this.uploading = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.formData.customMetadata) {
|
||||
try {
|
||||
JSON.parse(this.formData.customMetadata);
|
||||
formData.append('custom_metadata', this.formData.customMetadata);
|
||||
} catch (e) {
|
||||
this.showUploadStatus('Invalid Custom Metadata JSON', false);
|
||||
this.uploading = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.artifactService.uploadArtifact(formData).subscribe({
|
||||
next: (response) => {
|
||||
this.showUploadStatus(`Successfully uploaded: ${response.filename}`, true);
|
||||
this.resetForm();
|
||||
this.uploadSuccess.emit();
|
||||
this.uploading = false;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Upload error:', error);
|
||||
this.showUploadStatus('Upload failed: ' + (error.error?.detail || error.message), false);
|
||||
this.uploading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getResultIcon(result: string): string {
|
||||
switch (result) {
|
||||
case 'pass': return 'check_circle';
|
||||
case 'fail': return 'cancel';
|
||||
case 'skip': return 'skip_next';
|
||||
case 'error': return 'error';
|
||||
default: return 'help';
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user