Show / hide resources on diagnostics screen (#1046)

* Show / hide resources on diagnostics screen * Lint
aptible · Feb 11, 2025 · 1cd0e34 · 1cd0e34
1 parent e65d5a6
commit 1cd0e34
Showing 1 changed file with 90 additions and 72 deletions.
diff --git a/src/ui/shared/diagnostics/resource.tsx b/src/ui/shared/diagnostics/resource.tsx
@@ -81,85 +81,103 @@ export const DiagnosticsResource = ({
   endTime: string;
   synchronizedHoverContext: React.Context<HoverState>;
 }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
   return (
     <div className="border rounded-lg p-4">
-      <h3 className="font-medium text-xl flex gap-2 items-center bg-gray-50 p-4 -m-4 mb-4 border-b rounded-t-lg">
-        <ResourceIcon type={resource.type} />
-        <span className="font-mono text-lg font-bold">{resourceId}</span>
+      <h3
+        className={`font-medium text-xl flex gap-2 items-center justify-between bg-gray-50 p-4 -m-4 ${!isCollapsed ? "mb-4 border-b" : ""} rounded-t-lg`}
+      >
+        <div className="flex gap-2 items-center">
+          <ResourceIcon type={resource.type} />
+          <span className="font-mono text-lg font-bold">{resourceId}</span>
+        </div>
+        <button
+          type="button"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="text-gray-500 hover:text-gray-700 px-2 py-1 rounded text-xs"
+          aria-label={isCollapsed ? "Expand" : "Collapse"}
+        >
+          {isCollapsed ? "Show" : "Hide"}
+        </button>
       </h3>
 
-      {/* Operations */}
-      {resource.operations && resource.operations.length > 0 && (
-        <div className="mt-2">
-          <div className="border rounded-lg bg-white shadow-sm animate-fade-in">
-            <h4 className="font-medium text-gray-900 p-3 rounded-t-lg border-b">
-              Operations
-            </h4>
-            <div className="p-6">
-              <OperationsTimeline
-                operations={resource.operations}
-                startTime={startTime}
-                endTime={endTime}
-                synchronizedHoverContext={synchronizedHoverContext}
-              />
+      {!isCollapsed && (
+        <>
+          {/* Operations */}
+          {resource.operations && resource.operations.length > 0 && (
+            <div className="mt-2">
+              <div className="border rounded-lg bg-white shadow-sm animate-fade-in">
+                <h4 className="font-medium text-gray-900 p-3 rounded-t-lg border-b">
+                  Operations
+                </h4>
+                <div className="p-6">
+                  <OperationsTimeline
+                    operations={resource.operations}
+                    startTime={startTime}
+                    endTime={endTime}
+                    synchronizedHoverContext={synchronizedHoverContext}
+                  />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
+          )}
 
-      {/* Plots */}
-      {resource.plots && Object.entries(resource.plots).length > 0 && (
-        <div className="mt-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-            {Object.entries(resource.plots)
-              .filter(([_, plot]) =>
-                // Only show plots that have data
-                plot.series.some(
-                  (series) => series.points && series.points.length > 0,
-                ),
-              )
-              .map(([plotId, plot]) => (
-                <div
-                  key={plotId}
-                  className="border rounded-lg bg-white shadow-sm animate-fade-in"
-                >
-                  <h4 className="font-medium text-gray-900 p-3 rounded-t-lg border-b">
-                    {plot.title}
-                  </h4>
-                  <div className="pb-6 px-6">
-                    <div className="mt-2 min-h-[200px]">
-                      <DiagnosticsLineChart
-                        showLegend={true}
-                        keyId={plot.id}
-                        chart={{
-                          title: " ",
-                          labels:
-                            plot.series[0]?.points.map(
-                              (point) => point.timestamp,
-                            ) || [],
-                          datasets: plot.series.map((series) => ({
-                            label: series.label,
-                            data: series.points.map((point) => ({
-                              x: point.timestamp,
-                              y: point.value,
-                            })),
-                          })),
-                        }}
-                        xAxisMin={plot.x_axis_range[0]}
-                        xAxisMax={plot.x_axis_range[1]}
-                        xAxisUnit="minute"
-                        yAxisLabel={undefined}
-                        yAxisUnit={plot.unit}
-                        annotations={plot.annotations}
-                        synchronizedHoverContext={synchronizedHoverContext}
-                      />
+          {/* Plots */}
+          {resource.plots && Object.entries(resource.plots).length > 0 && (
+            <div className="mt-2">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                {Object.entries(resource.plots)
+                  .filter(([_, plot]) =>
+                    // Only show plots that have data
+                    plot.series.some(
+                      (series) => series.points && series.points.length > 0,
+                    ),
+                  )
+                  .map(([plotId, plot]) => (
+                    <div
+                      key={plotId}
+                      className="border rounded-lg bg-white shadow-sm animate-fade-in"
+                    >
+                      <h4 className="font-medium text-gray-900 p-3 rounded-t-lg border-b">
+                        {plot.title}
+                      </h4>
+                      <div className="pb-6 px-6">
+                        <div className="mt-2 min-h-[200px]">
+                          <DiagnosticsLineChart
+                            showLegend={true}
+                            keyId={plot.id}
+                            chart={{
+                              title: " ",
+                              labels:
+                                plot.series[0]?.points.map(
+                                  (point) => point.timestamp,
+                                ) || [],
+                              datasets: plot.series.map((series) => ({
+                                label: series.label,
+                                data: series.points.map((point) => ({
+                                  x: point.timestamp,
+                                  y: point.value,
+                                })),
+                              })),
+                            }}
+                            xAxisMin={plot.x_axis_range[0]}
+                            xAxisMax={plot.x_axis_range[1]}
+                            xAxisUnit="minute"
+                            yAxisLabel={undefined}
+                            yAxisUnit={plot.unit}
+                            annotations={plot.annotations}
+                            synchronizedHoverContext={synchronizedHoverContext}
+                          />
+                        </div>
+                        <AnalysisSection analysis={plot.analysis} />
+                      </div>
                     </div>
-                    <AnalysisSection analysis={plot.analysis} />
-                  </div>
-                </div>
-              ))}
-          </div>
-        </div>
+                  ))}
+              </div>
+            </div>
+          )}
+        </>
       )}
     </div>
   );