fallback_plots_panel

bencherdev · Nov 25, 2024 · 40d3caf · 40d3caf
1 parent 5a511de
commit 40d3caf
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 30 deletions.
diff --git a/services/console/src/components/console/plots/FallbackPlot.tsx b/services/console/src/components/console/plots/FallbackPlot.tsx
@@ -1,8 +1,8 @@
-const FallbackPlot = () => {
+const FallbackPlot = (props: { spaced?: boolean }) => {
 	return (
 		<div>
 			<div class="columns">
-				<div class="column is-11">
+				<div class={`column${props.spaced ? " is-11" : ""}`}>
 					<div class="panel">
 						<nav class="panel-heading columns is-vcentered">
 							<div class="column">&nbsp;</div>

diff --git a/services/console/src/components/console/plots/FallbackPlots.tsx b/services/console/src/components/console/plots/FallbackPlots.tsx
@@ -4,16 +4,16 @@ const FallbackPlots = () => {
 	return (
 		<div class="columns is-multiline is-vcentered">
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot />
+				<FallbackPlot spaced={true} />
 			</div>
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot />
+				<FallbackPlot spaced={true} />
 			</div>
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot />
+				<FallbackPlot spaced={true} />
 			</div>
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot />
+				<FallbackPlot spaced={true} />
 			</div>
 		</div>
 	);

diff --git a/services/console/src/components/console/plots/FallbackPlotsPanel.tsx b/services/console/src/components/console/plots/FallbackPlotsPanel.tsx
@@ -0,0 +1,18 @@
+import FallbackPlots from "./FallbackPlots";
+
+const FallbackPlotsPanel = () => {
+	return (
+		<>
+			<nav class="level">
+				<div class="level-left">
+					<div class="level-item">
+						<h3 class="title is-3">&nbsp;</h3>
+					</div>
+				</div>
+			</nav>
+			<FallbackPlots />
+		</>
+	);
+};
+
+export default FallbackPlotsPanel;
diff --git a/services/console/src/pages/console/projects/[project]/plots/index.astro b/services/console/src/pages/console/projects/[project]/plots/index.astro
@@ -3,7 +3,7 @@ export const prerender = false;
 
 import ProjectLayout from "../../../../../layouts/console/ProjectLayout.astro";
 import PlotsPanel from "../../../../../components/console/plots/PlotsPanel";
-import FallbackPlots from "../../../../../components/console/plots/FallbackPlots";
+import FallbackPlotsPanel from "../../../../../components/console/plots/FallbackPlotsPanel";
 
 // Using `meta.env` requires `prerender = false`
 const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
@@ -19,15 +19,6 @@ const redirect = `/perf/${params.project}${Astro.url.search}`;
     apiUrl={BENCHER_API_URL}
     params={params}
   >
-    <div slot="fallback">
-      <nav class="level">
-        <div class="level-left">
-          <div class="level-item">
-            <h3 class="title is-3">&nbsp;</h3>
-          </div>
-        </div>
-      </nav>
-      <FallbackPlots />
-    </div>
+    <FallbackPlotsPanel  slot="fallback" />
   </PlotsPanel>
 </ProjectLayout>
diff --git a/services/console/src/pages/perf/[project]/plots/index.astro b/services/console/src/pages/perf/[project]/plots/index.astro
@@ -5,11 +5,9 @@ import PerfLayout from "../../../../layouts/perf/PerfLayout.astro";
 import Tetris from "../../../../components/site/Tetris.astro";
 import { fetchSSR } from "../../../../components/perf/util";
 import * as Sentry from "@sentry/astro";
-import PinnedPlot from "../../../../components/console/plots/PinnedPlot";
-import FallbackPlot from "../../../../components/console/plots/FallbackPlot";
 import type { JsonProject } from "../../../../types/bencher";
 import PlotsPanel from "../../../../components/console/plots/PlotsPanel";
-import FallbackPlots from "../../../../components/console/plots/FallbackPlots";
+import FallbackPlotsPanel from "../../../../components/console/plots/FallbackPlotsPanel";
 
 // Using `meta.env` requires `prerender = false`
 const BENCHER_API_URL = import.meta.env.BENCHER_API_URL;
@@ -75,16 +73,7 @@ if (params.project && params.project !== "undefined") {
     apiUrl={BENCHER_API_URL}
     params={params}
   >
-    <div slot="fallback">
-      <nav class="level">
-        <div class="level-left">
-          <div class="level-item">
-            <h3 class="title is-3">&nbsp;</h3>
-          </div>
-        </div>
-      </nav>
-      <FallbackPlots />
-    </div>
+    <FallbackPlotsPanel  slot="fallback" />
   </PlotsPanel>
 </div>
 </section>