bitforge/warehouse13
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate dark theme styling from main branch with Angular Material

Browse Source 
- Apply dark blue color scheme (#0f172a, #1e293b, #334155) throughout UI
- Update header with blue gradient and Obsidian branding
- Add missing toolbar buttons: Auto-refresh, Seed Data, Search filter
- Implement action buttons (Download, Delete) in artifacts table
- Add client-side search/filtering functionality
- Update app to support sim_source_id field in database
- Move quickstart scripts to repository root for easier access
- Apply dark theme to tables, tabs, and all Material components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
pratik
2025-10-15 11:42:34 -05:00
parent f6d1412bc8
commit 6cbdcfbd10
11 changed files with 336 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.claude/settings.local.json
View File

@@ -26,7 +26,12 @@
"Bash(ng serve:*)",
"Bash(if exist .angular rmdir /s /q .angular)",
"Bash(dir:*)",
"Bash(tree:*)"
"Bash(tree:*)",
"Bash(git ls-tree:*)",
"mcp__ide__getDiagnostics",
"Read(//c/Users/Pratik/Desktop/code/**)",
"Bash(cat:*)",
"Bash(git add:*)"
],
"deny": [],
"ask": []

1
app/models/artifact.py
View File

@@ -20,6 +20,7 @@ class Artifact(Base):
test_suite = Column(String(500), index=True)
test_config = Column(JSON)
test_result = Column(String(50), index=True) # pass, fail, skip, error
sim_source_id = Column(String(500), index=True) # SIM source identifier for grouping
# Additional metadata
custom_metadata = Column(JSON)

3
app/schemas/artifact.py
View File

@@ -8,6 +8,7 @@ class ArtifactCreate(BaseModel):
test_suite: Optional[str] = None
test_config: Optional[Dict[str, Any]] = None
test_result: Optional[str] = None
sim_source_id: Optional[str] = None
custom_metadata: Optional[Dict[str, Any]] = None
description: Optional[str] = None
tags: Optional[List[str]] = None
@@ -26,6 +27,7 @@ class ArtifactResponse(BaseModel):
test_suite: Optional[str] = None
test_config: Optional[Dict[str, Any]] = None
test_result: Optional[str] = None
sim_source_id: Optional[str] = None
custom_metadata: Optional[Dict[str, Any]] = None
description: Optional[str] = None
tags: Optional[List[str]] = None
@@ -44,6 +46,7 @@ class ArtifactQuery(BaseModel):
test_name: Optional[str] = None
test_suite: Optional[str] = None
test_result: Optional[str] = None
sim_source_id: Optional[str] = None
tags: Optional[List[str]] = None
start_date: Optional[datetime] = None
end_date: Optional[datetime] = None

0
scripts/dev-start.ps1 → dev-start.ps1
View File

0
scripts/dev-start.sh → dev-start.sh
View File

47
frontend/src/app/app.component.html
View File

@@ -1,18 +1,18 @@
<div class="app-container">
<!-- Material Toolbar Header -->
<mat-toolbar color="primary" class="app-toolbar">
<mat-icon class="app-icon">storage</mat-icon>
<span class="app-title">{{ title }}</span>
<mat-icon class="app-icon">diamond</mat-icon>
<span class="app-title">◆ Obsidian</span>
<span class="spacer"></span>
<div class="header-info" *ngIf="apiInfo">
<mat-chip-set>
<mat-chip>
<mat-icon matChipAvatar>settings</mat-icon>
{{ apiInfo.deployment_mode }}
Mode: {{ apiInfo.deployment_mode }}
</mat-chip>
<mat-chip>
<mat-icon matChipAvatar>folder</mat-icon>
{{ apiInfo.storage_backend }}
Storage: {{ apiInfo.storage_backend }}
</mat-chip>
</mat-chip-set>
</div>
@@ -24,18 +24,30 @@
<mat-tab label="Artifacts">
<ng-template matTabContent>
<div class="tab-content-wrapper">
<div class="content-header">
<h2>
<mat-icon>storage</mat-icon>
Artifacts ({{ artifacts.length }})
</h2>
<div class="toolbar">
<button mat-raised-button color="primary" (click)="loadArtifacts()">
<mat-icon>refresh</mat-icon>
Refresh
</button>
<button mat-raised-button [color]="autoRefreshEnabled ? 'accent' : ''" (click)="toggleAutoRefresh()">
Auto-refresh: {{ autoRefreshEnabled ? 'ON' : 'OFF' }}
</button>
<button mat-raised-button (click)="generateSeedData()">
<mat-icon>auto_awesome</mat-icon>
Generate Seed Data
</button>
<span class="count-badge">{{ artifacts.length }} artifacts</span>
<mat-form-field appearance="outline" class="filter-search">
<mat-label>Search</mat-label>
<input matInput [(ngModel)]="searchTerm" (input)="filterTable()" placeholder="Search...">
<mat-icon matPrefix>search</mat-icon>
<button mat-icon-button matSuffix *ngIf="searchTerm" (click)="clearSearch()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
<table mat-table [dataSource]="artifacts" class="artifacts-table mat-elevation-z4">
<table mat-table [dataSource]="filteredArtifacts" class="artifacts-table mat-elevation-z4">
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
@@ -82,6 +94,21 @@
</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">
<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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

198
frontend/src/app/app.component.scss
View File

@@ -2,14 +2,18 @@
display: flex;
flex-direction: column;
height: 100vh;
background: #f5f5f5;
background: #1e293b;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.app-toolbar {
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 100%) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.app-icon {
@@ -39,22 +43,24 @@
}
}
// Tab Group Styling
// Tab Group Styling - Dark Theme
.main-tabs {
flex: 1;
display: flex;
flex-direction: column;
background: white;
background: #1e293b;
::ng-deep {
.mat-mdc-tab-body-wrapper {
flex: 1;
padding: 0;
background: #1e293b;
}
.mat-mdc-tab-header {
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
background: #0f172a;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
border-bottom: 2px solid #334155;
}
.mat-mdc-tab-labels {
@@ -67,28 +73,47 @@
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #94a3b8;
&:hover {
background: #1e293b;
color: #e2e8f0;
}
}
.mat-mdc-tab.mdc-tab--active {
.mdc-tab__text-label {
color: #60a5fa;
}
}
.mat-mdc-tab-indicator {
.mdc-tab-indicator__content--underline {
background-color: #60a5fa;
height: 3px;
}
}
}
}
// Tab Content Wrapper
// Tab Content Wrapper - Dark Theme
.tab-content-wrapper {
padding: 24px;
padding: 30px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
min-height: calc(100vh - 180px);
background: #1e293b;
}
// Content Header
// Content Header - Dark Theme
.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
h2 {
display: flex;
@@ -97,10 +122,10 @@
margin: 0;
font-size: 24px;
font-weight: 500;
color: #333;
color: #e2e8f0;
mat-icon {
color: #3f51b5;
color: #60a5fa;
font-size: 28px;
width: 28px;
height: 28px;
@@ -114,36 +139,109 @@
}
}
// Artifacts Table Styling
// Toolbar styling
.toolbar {
display: flex;
gap: 10px;
margin-bottom: 20px;
align-items: center;
flex-wrap: wrap;
}
.count-badge {
background: #1e3a8a;
color: #93c5fd;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
margin-left: auto;
}
// Filter Search Styling
.filter-search {
min-width: 250px;
::ng-deep {
.mat-mdc-text-field-wrapper {
background: #0f172a;
border-radius: 6px;
}
.mat-mdc-form-field-input-control {
color: #e2e8f0;
}
.mat-mdc-form-field-label {
color: #94a3b8;
}
.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
border-color: #334155 !important;
}
.mat-mdc-form-field:hover .mdc-notched-outline__leading,
.mat-mdc-form-field:hover .mdc-notched-outline__notch,
.mat-mdc-form-field:hover .mdc-notched-outline__trailing {
border-color: #60a5fa !important;
}
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
color: #64748b;
}
}
}
// Action buttons styling
.action-buttons {
display: flex;
gap: 4px;
button {
color: #94a3b8;
&:hover {
color: #e2e8f0;
background: #334155;
}
}
}
// Artifacts Table Styling - Dark Theme
.artifacts-table {
width: 100%;
background: white;
background: #0f172a;
border-radius: 8px;
overflow: hidden;
border: 1px solid #334155;
th.mat-mdc-header-cell {
background: #f8f9fa;
color: #333;
background: #1e293b;
color: #94a3b8;
font-weight: 600;
font-size: 14px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 16px 12px;
border-bottom: 2px solid #e0e0e0;
padding: 14px 12px;
border-bottom: 2px solid #334155;
}
td.mat-mdc-cell {
padding: 16px 12px;
font-size: 14px;
color: #555;
border-bottom: 1px solid #f0f0f0;
color: #cbd5e1;
border-bottom: 1px solid #1e293b;
}
tr.mat-mdc-row {
transition: background-color 0.2s ease;
background: #0f172a;
&:hover {
background-color: #f8f9fa;
background-color: #1e293b;
}
}
@@ -154,7 +252,7 @@
font-weight: 500;
.file-icon {
color: #3f51b5;
color: #60a5fa;
font-size: 20px;
width: 20px;
height: 20px;
@@ -162,42 +260,58 @@
}
.type-chip {
background-color: #e3f2fd !important;
color: #1976d2 !important;
font-weight: 500;
font-size: 12px;
padding: 4px 12px;
height: 28px;
background-color: #1e3a8a !important;
color: #93c5fd !important;
font-weight: 600;
font-size: 11px;
padding: 4px 8px;
height: auto;
}
.text-muted {
color: #999;
color: #64748b;
}
}
// Result Chips
// Result Chips - Dark Theme
.result-pass {
background-color: #e8f5e9 !important;
color: #2e7d32 !important;
background-color: #064e3b !important;
color: #6ee7b7 !important;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
text-transform: uppercase;
}
.result-fail {
background-color: #ffebee !important;
color: #c62828 !important;
background-color: #7f1d1d !important;
color: #fca5a5 !important;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
text-transform: uppercase;
}
.result-skip {
background-color: #fff3e0 !important;
color: #ef6c00 !important;
background-color: #78350f !important;
color: #fcd34d !important;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
text-transform: uppercase;
}
.result-error {
background-color: #fce4ec !important;
color: #c2185b !important;
background-color: #7f1d1d !important;
color: #fca5a5 !important;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
text-transform: uppercase;
}
// Responsive Design

136
frontend/src/app/app.component.ts
View File

@@ -1,11 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTooltipModule } from '@angular/material/tooltip';
import { UploadFormComponent } from './components/upload-form/upload-form.component';
import { QueryFormComponent } from './components/query-form/query-form.component';
import { ApiService } from './services/api.service';
@@ -16,24 +20,32 @@ import { ApiInfo, Artifact } from './models/artifact.interface';
selector: 'app-root',
imports: [
CommonModule,
FormsModule,
MatToolbarModule,
MatTableModule,
MatTabsModule,
MatChipsModule,
MatIconModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule,
MatTooltipModule,
UploadFormComponent,
QueryFormComponent
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
title = 'Test Artifact Data Lake';
export class AppComponent implements OnInit, OnDestroy {
title = 'Obsidian - Test Artifact Data Lake';
apiInfo: ApiInfo | null = null;
artifacts: Artifact[] = [];
displayedColumns: string[] = ['id', 'filename', 'file_type', 'file_size', 'test_name', 'test_result'];
filteredArtifacts: Artifact[] = [];
displayedColumns: string[] = ['id', 'filename', 'file_type', 'file_size', 'test_name', 'test_result', 'actions'];
selectedTabIndex = 0;
searchTerm: string = '';
autoRefreshEnabled: boolean = true;
private autoRefreshInterval: any;
constructor(
private apiService: ApiService,
@@ -43,6 +55,11 @@ export class AppComponent implements OnInit {
ngOnInit(): void {
this.loadApiInfo();
this.loadArtifacts();
this.startAutoRefresh();
}
ngOnDestroy(): void {
this.stopAutoRefresh();
}
loadApiInfo(): void {
@@ -61,6 +78,7 @@ export class AppComponent implements OnInit {
next: (artifacts) => {
console.log('Loaded artifacts:', artifacts.length);
this.artifacts = artifacts;
this.filterTable();
},
error: (error) => {
console.error('Error loading artifacts:', error);
@@ -68,18 +86,122 @@ export class AppComponent implements OnInit {
});
}
filterTable(): void {
if (!this.searchTerm) {
this.filteredArtifacts = this.artifacts;
return;
}
const term = this.searchTerm.toLowerCase();
this.filteredArtifacts = this.artifacts.filter(artifact => {
return (
artifact.filename?.toLowerCase().includes(term) ||
artifact.test_name?.toLowerCase().includes(term) ||
artifact.test_suite?.toLowerCase().includes(term) ||
artifact.file_type?.toLowerCase().includes(term)
);
});
}
clearSearch(): void {
this.searchTerm = '';
this.filterTable();
}
toggleAutoRefresh(): void {
this.autoRefreshEnabled = !this.autoRefreshEnabled;
if (this.autoRefreshEnabled) {
this.startAutoRefresh();
} else {
this.stopAutoRefresh();
}
}
startAutoRefresh(): void {
this.stopAutoRefresh();
if (this.autoRefreshEnabled) {
this.autoRefreshInterval = setInterval(() => {
if (this.selectedTabIndex === 0) {
this.loadArtifacts();
}
}, 5000);
}
}
stopAutoRefresh(): void {
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = null;
}
}
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) {
alert('Please enter a number between 1 and 100');
return;
}
this.artifactService.generateSeedData(num).subscribe({
next: (result: any) => {
alert(result.message || `Successfully generated ${num} artifacts`);
this.loadArtifacts();
},
error: (error) => {
alert('Error generating seed data: ' + error.message);
}
});
}
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) => {
alert('Error downloading artifact: ' + error.message);
}
});
}
deleteArtifact(artifact: Artifact): void {
if (!confirm(`Are you sure you want to delete "${artifact.filename}"? This cannot be undone.`)) {
return;
}
this.artifactService.deleteArtifact(artifact.id).subscribe({
next: () => {
alert('Artifact deleted successfully');
this.loadArtifacts();
},
error: (error) => {
alert('Error deleting artifact: ' + error.message);
}
});
}
onUploadSuccess(): void {
this.loadArtifacts();
this.selectedTabIndex = 0; // Switch back to artifacts tab
this.selectedTabIndex = 0;
}
onQueryResults(artifacts: Artifact[]): void {
this.artifacts = artifacts;
this.selectedTabIndex = 0; // Switch to artifacts tab to show results
this.filterTable();
this.selectedTabIndex = 0;
}
onFiltersChange(filters: any): void {
// Filters will be handled by the query component
console.log('Filters changed:', filters);
}

7
frontend/src/styles.scss
View File

@@ -1,4 +1,4 @@
/* Global styles for the Test Artifact Data Lake Angular app with Material Design */
/* Global styles for Obsidian - Dark Theme inspired from main branch */
* {
margin: 0;
@@ -7,10 +7,11 @@
}
body {
font-family: Roboto, "Helvetica Neue", sans-serif;
background: linear-gradient(135deg, #3f51b5 0%, #9c27b0 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0f172a;
min-height: 100vh;
padding: 20px;
color: #e2e8f0;
}
.container {

0
scripts/quickstart.ps1 → quickstart.ps1
View File

0
scripts/quickstart.sh → quickstart.sh
View File