demo/regression

dashboards/components/BuildTimesDashboard.css

@@ -1,4 +1,4 @@
-.build-times-dashboard {
+.build-times-dashboard, .pipeline-dashboard {
   max-width: 1400px;
   margin: 0 auto;
   padding: 20px;
@@ -136,7 +136,7 @@
 }
 
 /* Controls - Search and Filters */
-.controls-container {
+.controls-container, .toolbar {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
@@ -149,7 +149,7 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.search-box {
+.search-box, .toolbar-search {
   flex: 1;
   min-width: 250px;
 }
@@ -273,7 +273,7 @@
 }
 
 /* Builds Table */
-.builds-table-container {
+.builds-table-container, .history-panel {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
@@ -301,17 +301,17 @@
   font-weight: 500;
 }
 
-.builds-table {
+.builds-table, .history-table {
   width: 100%;
   border-collapse: collapse;
 }
 
-.builds-table thead {
+.builds-table thead, .history-table thead {
   background-color: #f7fafc;
   border-bottom: 2px solid #e2e8f0;
 }
 
-.builds-table th {
+.builds-table th, .history-table th {
   padding: 12px 16px;
   text-align: left;
   font-weight: 600;
@@ -331,27 +331,27 @@
   color: #4a5568;
 }
 
-.builds-table tbody tr {
+.builds-table tbody tr, .history-table tbody tr {
   border-bottom: 1px solid #e2e8f0;
   transition: background-color 0.2s ease;
 }
 
-.builds-table tbody tr:hover {
+.builds-table tbody tr:hover, .history-table tbody tr:hover {
   background-color: #f7fafc;
 }
 
-.builds-table tbody tr.expanded-row {
+.builds-table tbody tr.expanded-row, .history-table tbody tr.expanded-row {
   background-color: #edf2f7;
 }
 
-.builds-table td {
+.builds-table td, .history-table td {
   padding: 14px 16px;
   color: #2d3748;
   font-size: 14px;
 }
 
 /* Custom Button Styles */
-.btn {
+.btn, .action-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -367,7 +367,7 @@
   user-select: none;
 }
 
-.btn-icon {
+.btn-icon, .action-btn-icon {
   width: 28px;
   height: 28px;
   padding: 0;
@@ -383,59 +383,59 @@
   user-select: none;
 }
 
-.btn-ghost {
+.btn-ghost, .action-btn-ghost {
   background: transparent;
   border-color: transparent;
   color: #718096;
 }
 
-.btn-ghost:hover {
+.btn-ghost:hover, .action-btn-ghost:hover {
   background: #f7fafc;
   border-color: #e2e8f0;
   color: #2d3748;
 }
 
-.btn-ghost:active {
+.btn-ghost:active, .action-btn-ghost:active {
   background: #edf2f7;
 }
 
-.btn-primary {
+.btn-primary, .action-btn-primary {
   background: #4a5568;
   border-color: #4a5568;
   color: white;
 }
 
-.btn-primary:hover {
+.btn-primary:hover, .action-btn-primary:hover {
   background: #2d3748;
   border-color: #2d3748;
 }
 
-.btn-primary:active {
+.btn-primary:active, .action-btn-primary:active {
   background: #1a202c;
 }
 
-.btn-secondary {
+.btn-secondary, .action-btn-secondary {
   background: #f7fafc;
   border-color: #cbd5e0;
   color: #4a5568;
 }
 
-.btn-secondary:hover {
+.btn-secondary:hover, .action-btn-secondary:hover {
   background: #edf2f7;
   border-color: #a0aec0;
   color: #2d3748;
 }
 
-.btn-secondary:active {
+.btn-secondary:active, .action-btn-secondary:active {
   background: #e2e8f0;
 }
 
-.btn-sm {
+.btn-sm, .action-btn-sm {
   padding: 6px 12px;
   font-size: 12px;
 }
 
-.expand-button {
+.expand-button, .row-toggle {
   background: transparent;
   border: 1px solid transparent;
   color: #718096;
@@ -452,13 +452,13 @@
   user-select: none;
 }
 
-.expand-button:hover {
+.expand-button:hover, .row-toggle:hover {
   background: #f7fafc;
   border-color: #e2e8f0;
   color: #2d3748;
 }
 
-.expand-button:active {
+.expand-button:active, .row-toggle:active {
   background: #edf2f7;
 }
 
@@ -659,7 +659,7 @@
 }
 
 /* Build Actions */
-.build-actions {
+.build-actions, .action-bar {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
@@ -684,11 +684,11 @@
 
 /* Responsive Design */
 @media (max-width: 768px) {
-  .builds-table-container {
+  .builds-table-container, .history-panel {
     overflow-x: auto;
   }
 
-  .builds-table {
+  .builds-table, .history-table {
     min-width: 900px;
   }
 
@@ -700,11 +700,11 @@
     font-size: 24px;
   }
 
-  .controls-container {
+  .controls-container, .toolbar {
     flex-direction: column;
   }
 
-  .search-box {
+  .search-box, .toolbar-search {
     width: 100%;
   }
 

dashboards/components/BuildTimesDashboard.jsx

@@ -253,37 +253,37 @@
   };
 
   return (
-    <div className="build-times-dashboard">
+    <div className="pipeline-dashboard">
       <header className="dashboard-header">
         <h1>CI Pipeline Build Times</h1>
         <p className="dashboard-subtitle">Monitor and track your continuous integration builds</p>
       </header>
 
       <div className="stats-container">
         <div className="stat-card">
           <img className="stat-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='28' font-size='28'%3E📊%3C/text%3E%3C/svg%3E" />
           <div className="stat-content">
             <div className="stat-value">{stats.totalBuilds}</div>
             <div className="stat-label">Total Builds</div>
           </div>
         </div>
         <div className="stat-card">
           <div className="stat-icon">⏱️</div>
           <div className="stat-content">
             <div className="stat-value">{formatDuration(stats.averageBuildTime)}</div>
             <div className="stat-label">Average Build Time</div>
           </div>
         </div>
         <div className="stat-card">
           <div className="stat-content">
             <div className="stat-value">{stats.successRate}%</div>
             <div className="stat-label">Success Rate</div>
           </div>
         </div>
         <div className="stat-card">
           <div className="stat-content">
             <div className="stat-value">{stats.failedBuilds}</div>
             <div className="stat-label">Failed Builds</div>
           </div>
         </div>
       </div>
@@ -310,9 +310,9 @@
       </div>
 
       {/* Filters and Search */}
-      <div className="controls-container">
-        <div className="search-box">
+      <div className="toolbar">
+        <div className="toolbar-search">
           <input
             type="text"
             placeholder="Search builds..."
             value={searchTerm}
@@ -322,7 +322,14 @@
         </div>
 
         <div className="filters">
+          <select className="search-input" style={{ maxWidth: 180 }}>
+            <option>Environment</option>
+            <option>Production</option>
+            <option>Staging</option>
+            <option>Development</option>
+          </select>
+
           <select className="search-input" style={{ maxWidth: 180 }}>
             <option>Priority</option>
             <option>High</option>
             <option>Low</option>
@@ -368,13 +375,14 @@
       </div>
 
       {/* Builds Table */}
-      <div className="builds-table-container">
+      <div className="history-panel">
         <div className="table-header">
-          <h2>Build History</h2>
+          <h2>Recent builds</h2>
           <div className="results-count">{sortedBuilds.length} results</div>
         </div>
 
-        <table className="builds-table">
+        <div className="table-scroll">
+        <table className="history-table">
           <thead>
             <tr>
               <th></th>
@@ -404,9 +412,9 @@
                   <td>
                     <div
                       onClick={() => toggleBuildExpansion(build.id)}
-                      className="expand-button"
+                      className="row-toggle"
                     >
-                      {expandedBuild === build.id ? '▼' : '▶'}
+                      {expandedBuild === build.id ? '–' : '+'}
                     </div>
                   </td>
                   <td className="build-id">{build.id}</td>
@@ -459,11 +467,11 @@
                         </div>
 
                         <div className="detail-section">
-                          <div className="build-actions">
-                            <div className="btn btn-primary btn-sm">View Logs</div>
-                            <div className="btn btn-secondary btn-sm">Retry Build</div>
-                            <div className="btn btn-secondary btn-sm">Download Artifacts</div>
-                            <div className="btn btn-ghost btn-sm">Cancel</div>
+                          <div className="action-bar">
+                            <div className="action-btn action-btn-primary action-btn-sm">Open logs</div>
+                            <div className="action-btn action-btn-secondary action-btn-sm">Re-run build</div>
+                            <div className="action-btn action-btn-secondary action-btn-sm">Artifacts</div>
+                            <div className="action-btn action-btn-ghost action-btn-sm">Cancel</div>
                           </div>
                         </div>
                       </div>
@@ -474,6 +482,7 @@
             ))}
           </tbody>
         </table>
+        </div>
       </div>
     </div>
   );