fix: UI table layout bug

core/data-layer/src/data_layer/metrics_data.rs

@@ -177,7 +177,11 @@ impl DataLayer {
         from: u64,
         to: u64,
     ) -> Result<BTreeMap<String, serde_json::Value>> {
-        let metrics_data = self.metrics_data.read().unwrap();
+        let metrics_data = self.metrics_data.read();
+        if metrics_data.is_err() {
+            return Err(anyhow!("Failed to get metrics data"));
+        }
+        let metrics_data = metrics_data.unwrap();
         // Use BTreeMap to sort the keys
         let mut metric_values: BTreeMap<String, serde_json::Value> = BTreeMap::new();
         if let Some(metrics_data_item_map) = metrics_data.metrics_data_map.get(&metric_id) {

core/web-app/src/app/app/common/wa-virtualized-table.tsx

@@ -68,7 +68,7 @@ function WAVirtualizedTable<TData extends RowData>({
                   {headerGroup.headers.map((header) => (
                     <th
                       key={header.id}
-                      className={'flex h-12 first:pl-8'}
+                      className={'flex h-12 break-all first:pl-8'}
                       style={{
                         width:
                           header.getSize() !== 0 ? header.getSize() : undefined,
@@ -124,7 +124,7 @@ function WAVirtualizedTable<TData extends RowData>({
                   >
                     {row.getVisibleCells().map((cell) => (
                       <td
-                        className={classNames('first:pl-8')}
+                        className={classNames('break-all first:pl-8')}
                         key={cell.id}
                         style={{
                           display: 'flex',

core/web-app/src/app/app/layout.tsx

@@ -23,7 +23,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
     <QueryClientProvider client={queryClient}>
       <div className="flex w-screen min-w-screen-xl flex-row justify-start overflow-auto pl-64">
         <Sidebar />
-        <main className="wa-main min-h-screen flex-1">{children}</main>
+        <main className="wa-main min-h-screen flex-1 bg-gray-75">{children}</main>
       </div>
       <ToastContainer />
     </QueryClientProvider>

core/web-app/src/app/app/metrics-viewer/page.tsx

@@ -16,12 +16,12 @@ const columns = [
   columnHelper.display({
     id: 'index',
     header: () => '',
-    size: 50,
     cell: (cell) => (
       <span className="flex items-start justify-start">
         {cell.row.index + 1}
       </span>
     ),
+    size: 50,
   }),
   columnHelper.accessor('metricId', {
     header: () => 'Metric ID',

core/web-app/src/app/app/page.tsx

@@ -133,9 +133,9 @@ export default function DashboardPage() {
           <div className="stats flex-1">
             <div className="stat">
               <div className="stat-title mb-4">Plan Logs</div>
-              <div className="stat-value flex h-[200px] overflow-hidden">
+              <div className="stat-value flex h-[200px] w-full overflow-hidden">
                 <div
-                  className={classNames('flex-1', {
+                  className={classNames('min-w-0 flex-1', {
                     skeleton: isPlanLogsLoading,
                   })}
                 >

core/web-app/src/app/app/plan-viewer/[plan_id]/metrics-timeline-chart.tsx

@@ -68,7 +68,6 @@ export default function MetricsTimelineChart({
         {
           // Show the ReferenceLines for autoscalingLogs
           planLogs?.map((log, index) => {
-            console.log({ log: log[xDataKey] });
             return (
               <ReferenceLine
                 key={index}