From fbb1dfa67bfb6fbf8443f005fa82a5da1a045224 Mon Sep 17 00:00:00 2001 From: pratik Date: Wed, 15 Oct 2025 11:42:34 -0500 Subject: [PATCH] Integrate dark theme styling from main branch with Angular Material MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .claude/settings.local.json | 7 +- app/models/artifact.py | 1 + app/schemas/artifact.py | 3 + scripts/dev-start.ps1 => dev-start.ps1 | 0 scripts/dev-start.sh => dev-start.sh | 0 frontend/src/app/app.component.html | 47 ++++-- frontend/src/app/app.component.scss | 198 ++++++++++++++++++----- frontend/src/app/app.component.ts | 136 +++++++++++++++- frontend/src/styles.scss | 7 +- scripts/quickstart.ps1 => quickstart.ps1 | 0 scripts/quickstart.sh => quickstart.sh | 0 11 files changed, 336 insertions(+), 63 deletions(-) rename scripts/dev-start.ps1 => dev-start.ps1 (100%) rename scripts/dev-start.sh => dev-start.sh (100%) rename scripts/quickstart.ps1 => quickstart.ps1 (100%) rename scripts/quickstart.sh => quickstart.sh (100%) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 2649fcb..4207065 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -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": [] diff --git a/app/models/artifact.py b/app/models/artifact.py index 39886f7..70127bd 100644 --- a/app/models/artifact.py +++ b/app/models/artifact.py @@ -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) diff --git a/app/schemas/artifact.py b/app/schemas/artifact.py index 0ffa82f..9ab1338 100644 --- a/app/schemas/artifact.py +++ b/app/schemas/artifact.py @@ -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 diff --git a/scripts/dev-start.ps1 b/dev-start.ps1 similarity index 100% rename from scripts/dev-start.ps1 rename to dev-start.ps1 diff --git a/scripts/dev-start.sh b/dev-start.sh similarity index 100% rename from scripts/dev-start.sh rename to dev-start.sh diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 6c8bb29..1da2cdb 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,18 +1,18 @@
- storage - {{ title }} + diamond + â—† Obsidian
settings - {{ apiInfo.deployment_mode }} + Mode: {{ apiInfo.deployment_mode }} folder - {{ apiInfo.storage_backend }} + Storage: {{ apiInfo.storage_backend }}
@@ -24,18 +24,30 @@
-
-

- storage - Artifacts ({{ artifacts.length }}) -

+
+ + + {{ artifacts.length }} artifacts + + Search + + search + +
- +
@@ -82,6 +94,21 @@ + + + + + +
ID Actions +
+ + +
+
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index e0a91b5..9454dc5 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -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 diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 7c709f2..e8ed161 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -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); } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index d83a444..4f56776 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -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 { diff --git a/scripts/quickstart.ps1 b/quickstart.ps1 similarity index 100% rename from scripts/quickstart.ps1 rename to quickstart.ps1 diff --git a/scripts/quickstart.sh b/quickstart.sh similarity index 100% rename from scripts/quickstart.sh rename to quickstart.sh