Visualisierung in main.ts verdrahtet, Chart/Dashboard CSS
Dashboard-View registriert, Ribbon-Icon, Befehl und logfire-dashboard Block-Prozessor eingebunden. CSS fuer SVG-Charts, Legenden, Dashboard-Grid und Widgets ergaenzt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
aba060f3a5
commit
2f7ee27e9b
2 changed files with 283 additions and 2 deletions
40
src/main.ts
40
src/main.ts
|
|
@ -13,9 +13,10 @@ import { LogfireSettingTab } from './ui/settings-tab';
|
|||
import { InitialScanModal } from './ui/initial-scan-modal';
|
||||
import { StatusBar } from './ui/status-bar';
|
||||
import { EventStreamView, EVENT_STREAM_VIEW_TYPE } from './ui/event-stream-view';
|
||||
import { registerLogfireBlock, registerLogfireSqlBlock, cleanupAllRefreshTimers } from './query/processor';
|
||||
import { registerLogfireBlock, registerLogfireSqlBlock, registerLogfireDashboardBlock, cleanupAllRefreshTimers } from './query/processor';
|
||||
import { QueryModal } from './query/query-modal';
|
||||
import { VirtualTableManager } from './query/virtual-tables';
|
||||
import { DashboardView, DASHBOARD_VIEW_TYPE } from './viz/dashboard';
|
||||
|
||||
export default class LogfirePlugin extends Plugin {
|
||||
settings!: LogfireSettings;
|
||||
|
|
@ -90,6 +91,12 @@ export default class LogfirePlugin extends Plugin {
|
|||
(leaf) => new EventStreamView(leaf, this.eventBus),
|
||||
);
|
||||
|
||||
// UI: Dashboard view
|
||||
this.registerView(
|
||||
DASHBOARD_VIEW_TYPE,
|
||||
(leaf) => new DashboardView(leaf, this),
|
||||
);
|
||||
|
||||
// UI: Status bar
|
||||
this.statusBar = new StatusBar(this);
|
||||
this.statusBar.start();
|
||||
|
|
@ -101,11 +108,17 @@ export default class LogfirePlugin extends Plugin {
|
|||
registerLogfireSqlBlock(this.db, (lang, handler) => {
|
||||
this.registerMarkdownCodeBlockProcessor(lang, handler);
|
||||
});
|
||||
registerLogfireDashboardBlock(this, this.db, (lang, handler) => {
|
||||
this.registerMarkdownCodeBlockProcessor(lang, handler);
|
||||
});
|
||||
|
||||
// Ribbon icon
|
||||
// Ribbon icons
|
||||
this.addRibbonIcon('activity', 'Logfire: Event-Stream', () => {
|
||||
this.activateEventStream();
|
||||
});
|
||||
this.addRibbonIcon('layout-dashboard', 'Logfire: Dashboard', () => {
|
||||
this.activateDashboard();
|
||||
});
|
||||
|
||||
// Commands
|
||||
this.registerCommands();
|
||||
|
|
@ -298,6 +311,12 @@ export default class LogfirePlugin extends Plugin {
|
|||
},
|
||||
});
|
||||
|
||||
this.addCommand({
|
||||
id: 'show-dashboard',
|
||||
name: 'Dashboard anzeigen',
|
||||
callback: () => this.activateDashboard(),
|
||||
});
|
||||
|
||||
this.addCommand({
|
||||
id: 'open-query',
|
||||
name: 'Query-Editor \u00f6ffnen',
|
||||
|
|
@ -340,6 +359,23 @@ export default class LogfirePlugin extends Plugin {
|
|||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Dashboard view
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
private async activateDashboard(): Promise<void> {
|
||||
const existing = this.app.workspace.getLeavesOfType(DASHBOARD_VIEW_TYPE);
|
||||
if (existing.length > 0) {
|
||||
this.app.workspace.revealLeaf(existing[0]);
|
||||
return;
|
||||
}
|
||||
const leaf = this.app.workspace.getRightLeaf(false);
|
||||
if (leaf) {
|
||||
await leaf.setViewState({ type: DASHBOARD_VIEW_TYPE, active: true });
|
||||
this.app.workspace.revealLeaf(leaf);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Settings
|
||||
// ---------------------------------------------------------------------------
|
||||
|
|
|
|||
245
styles.css
245
styles.css
|
|
@ -679,3 +679,248 @@
|
|||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
Charts — SVG Visualization
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.logfire-chart-wrapper {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.logfire-chart-title {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
padding: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.logfire-chart-svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.logfire-chart-svg text {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 10px;
|
||||
fill: var(--text-muted);
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-label {
|
||||
font-size: 9.5px;
|
||||
fill: var(--text-faint);
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-axis-label {
|
||||
font-size: 9px;
|
||||
fill: var(--text-faint);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-value {
|
||||
font-size: 10px;
|
||||
fill: var(--text-normal);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-center {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
fill: var(--text-normal);
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-gauge-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
fill: var(--text-normal);
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-bar {
|
||||
transition: opacity 100ms ease;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-bar:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-point {
|
||||
transition: r 100ms ease;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-point:hover {
|
||||
r: 5.5;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-slice {
|
||||
transition: opacity 100ms ease;
|
||||
}
|
||||
|
||||
.logfire-chart-svg .logfire-chart-slice:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Chart Legend
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.logfire-chart-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 12px;
|
||||
padding: 6px 0 0 0;
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.logfire-legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.logfire-legend-swatch {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
Dashboard — View & Inline
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.logfire-dashboard-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--background-primary);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Dashboard Header
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.logfire-dash-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
background: var(--background-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logfire-dash-title {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.logfire-dash-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.logfire-dash-btn {
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 100ms ease, color 100ms ease;
|
||||
}
|
||||
|
||||
.logfire-dash-btn:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Dashboard Content & Grid
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.logfire-dash-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.logfire-dash-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Dashboard Widget
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.logfire-dash-widget {
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 4px;
|
||||
background: var(--background-primary);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logfire-dash-widget-title {
|
||||
padding: 5px 10px;
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
background: var(--background-secondary);
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.logfire-dash-widget-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.logfire-dash-widget-content::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.logfire-dash-widget-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.logfire-dash-widget-content::-webkit-scrollbar-thumb {
|
||||
background: var(--background-modifier-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Dashboard Inline (Code-Block Rendering)
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
.logfire-dash-inline {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.logfire-dash-inline-title {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
padding: 0 0 8px 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue