Dashboard Layout Patterns

Application Sidebar Layout

PETCLINIC-MySQL-APP...

Application Dashboard

Dashboard

Applications / PETCLINIC-MySQL
5.1m
Load
7ms
Response Time
0%
Errors
Normal
Health

Backend Flow Map

Flow Map Visualization Area
/* Dashboard Layout Structure */ .dashboard-layout { display: flex; height: 100vh; } .sidebar { width: 220px; background: #ffffff; border-right: 1px solid #e5e7eb; } .main-content { flex: 1; background: #f8f9fa; padding: 20px; } /* Metric Cards in Grid */ .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .metric-card { text-align: center; padding: 16px; } .metric-value { font-size: 24px; font-weight: 700; color: #2563eb; margin-bottom: 4px; } .metric-label { font-size: 11px; color: #6b7280; text-transform: uppercase; }

Spacing & Layout

Component Spacing

Card padding: 20px
Compact card: 12px
Table cells: 10px 12px
Buttons: 8px 16px
Form inputs: 8px 12px
Section margins: 60px

Grid Gaps

Card grids: 20px
Form grids: 20px
Button groups: 12px
Icon + text: 8px
Inline elements: 4px
/* Spacing Scale */ 4px - xs (inline elements) 8px - sm (icon spacing) 12px - md (compact padding) 16px - lg (standard padding) 20px - xl (card padding, grid gaps) 24px - 2xl (section spacing) 32px - 3xl (large section spacing) 40px - 4xl (page margins) 48px - 5xl (header spacing) 64px - 6xl (major section breaks)

Toolbar & Pagination

Table Toolbar

Showing 9 of 9
Showing 1-50 of 2,648 results
1 of 53
/* Toolbar Patterns */ .toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8f9fa; border: 1px solid #e5e7eb; } /* Pagination */ .pagination { display: flex; gap: 4px; align-items: center; } .pagination-info { font-size: 12px; color: #6b7280; margin: 0 8px; }
Monitoring Platform Style Guide

Monitoring Platform Style Guide

Comprehensive design system for clean, minimal monitoring interfaces

Color Palette

Primary Blue

Primary Blue
#2563eb
Primary Blue Light
#3b82f6
Primary Blue Dark
#1d4ed8
Primary Blue 50
#eff6ff

Status Colors

Success
#10b981
Warning
#f59e0b
Error
#ef4444
Info
#06b6d4

Typography

Heading 1 - 32px Bold

Heading 2 - 24px Semibold

Heading 3 - 20px Semibold

Heading 4 - 16px Semibold

Heading 5 - 14px Semibold
Heading 6 - 12px Semibold

Body Large - 16px Regular

Body Medium - 14px Regular

Body Small - 12px Regular

Caption - 11px Regular

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; line-height: 1.5;

Buttons

Primary

Secondary

Outline

Ghost

Button Sizes

Tables

Database Calls Table

Call Avg. Time per Call (ms) Number of Calls Max Time (ms) Snapshots
GET POOLED CONNECTION FROM DATASOURCE 84.8 240,511 2,177
View Snapshots
SELECT PETS0_.OWNER_ID AS OWNER_ID4_1_0_ 14.1 12,009 305
View Snapshots
DB TRANSACTION COMMIT 14.3 990 207 No Snapshots
SELECT OWNER0_.ID AS ID1_0_, OWNER0_.ADDRESS AS ADDRESS2_ 13.9 1,171 74 No Snapshots

Network Requests Table

Network Request Name Average (ms) Average Response Time (ms) Total Requests URL
sap.se80.wb_check 1,347.9 13,902.43 144 https://SAP.SE80.WB_CHECK
sap.se80.wb_dummy 574.78 9,440.51 51 https://SAP.SE80.WB_DUMMY
sap.se80.ef_pretty_print 552.52 13,327.63 115 https://SAP.SE80.EF_PRETTY_PRINT
sap.se80 1,327.26 8,259.67 4,128 https://SAP.SE80.EF

Agent Management Table

Status Type Version Smart Agent ID Application Tier Node Monitoring
● Python 0.0.0.0 320d6d3237ab Enterprise-Se... CISCOBRAIN A... CISCO.API-UI-N... Enabled
● Java 22.9.1.34265 (NULL)-M-82lH BTSocl18 Tier1 Node1 Enabled
● Java 23.8.0.35032 0c6cc27fe6d3 SangrahApp OrderService CustomPojo​Rul... Enabled
● Java 23.9.1.35149 0251b6ce4038 HybridAgentS... Tier1_Springbo... Node1_Springb... Enabled

Compact Metrics Table

Metric Current Average Peak
Response Time 7 ms 12.4 ms 147 ms
Calls per Minute 14,193 12,847 18,230
Errors per Minute 0 2.1 47
CPU Utilization 23.4 % 31.2 % 89.7 %
/* Table Structure */ .data-table th { background: #f8f9fa; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; } .data-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #f1f3f4; } /* Right-aligned numbers */ .text-right { text-align: right; font-family: Monaco, Consolas, monospace; } /* Clickable links in blue */ .text-blue { color: #2563eb; cursor: pointer; }

Cards

Standard Card
With header and body
This is a standard card with header and body content. Note the sharp corners and clean design.
Compact Card
Compact version with reduced padding for dense layouts.
1,735
Active Devices

Form Elements

Charts & Visualizations

Network Throughput
Chart visualization area - 200px height
Performance Metrics
Compact chart - Time series data

Navigation

Home / Applications / Dashboard

Main content area

Data Formatting & Filters

Search & Filter Components

Showing 1-50 of 2,648 results
Rows per page:

Data Formatting Patterns

Time Values

84.8 ms
14.1 ms
2,177 ms
1.5 sec

Count Values

240,511
12,009
1,171
48.5k

Percentage Values

23.4%
100.0%
0.4%
99.9%

Status Patterns

● Enabled
● Warning
● Error
ACTIVE
/* Data Formatting Guidelines */ /* Numbers - Right align, monospace font */ .text-right { text-align: right; font-family: Monaco, Consolas, monospace; font-size: 12px; } /* Large numbers - Use comma separators */ 240,511 (not 240511) 12,009 (not 12009) /* Time values - Include units */ 84.8 ms 2.177 sec 1.5 min /* Percentages - One decimal place */ 23.4% 100.0% 0.4% /* Clickable items - Blue color */ .text-blue { color: #2563eb; cursor: pointer; } /* Status indicators - Uppercase, small */ .status-indicator { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }

Shadows & Effects

Card Shadow
0 1px 3px rgba(0, 0, 0, 0.1)
Focus Ring
0 0 0 2px blue-100

Design Principles

No Rounded Corners

All elements use sharp, clean corners for a technical, precise aesthetic.

Minimal & Clean

Generous white space, subtle borders, and restrained use of color for clarity.

Data-Dense

Compact layouts that efficiently display large amounts of monitoring data.

Blue Accent

Primary blue (#2563eb) replaces purple throughout the interface for brand consistency.