Skip to content

Commit

Permalink
smooth_loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@epompeii
epompeii committed Nov 25, 2024
1 parent 5c01795 commit 31e3aca
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 65 deletions.
12 changes: 7 additions & 5 deletions services/console/src/components/console/perf/FallbackPerfPanel.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ import Pagination, { PaginationSize } from "../../site/Pagination";
<div class="columns">
<div class="column">
<div class="panel">
<nav class="panel-heading columns is-vcentered">
<div class="column">
&nbsp;
<br/>
&nbsp;
<nav class="panel-heading">
<div class="columns is-vcentered">
<div class="column">
&nbsp;
<br/>
&nbsp;
</div>
</div>
</nav>
<div class="panel-block">
Expand Down
78 changes: 40 additions & 38 deletions services/console/src/components/console/perf/plot/PlotHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,53 +140,55 @@ const FullPlotHeader = (props: Props) => {
};

return (
<nav class="panel-heading columns is-vcentered">
<div class="column">
<div class="level is-mobile" style="margin-bottom: 0.5rem;">
<div class="level-left">
<div class="level-item">
<p id={BENCHER_MEASURE_ID} class="level-item">
Measure
</p>
<Show when={measure() && measure()?.uuid !== BENCHER_MEASURE}>
<a
class="level-item button is-small is-rounded"
style="margin-left: 1rem;"
title={`${props.isConsole ? "Manage" : "View"} ${
measure()?.name
}`}
href={`
<nav class="panel-heading">
<div class="columns is-vcentered">
<div class="column">
<div class="level is-mobile" style="margin-bottom: 0.5rem;">
<div class="level-left">
<div class="level-item">
<p id={BENCHER_MEASURE_ID} class="level-item">
Measure
</p>
<Show when={measure() && measure()?.uuid !== BENCHER_MEASURE}>
<a
class="level-item button is-small is-rounded"
style="margin-left: 1rem;"
title={`${props.isConsole ? "Manage" : "View"} ${
measure()?.name
}`}
href={`
${resourcePath(
props.isConsole,
)}/${props.project_slug()}/measures/${
measure()?.slug
}?${BACK_PARAM}=${encodePath()}`}
>
<small>{props.isConsole ? "Manage" : "View"}</small>
</a>
</Show>
>
<small>{props.isConsole ? "Manage" : "View"}</small>
</a>
</Show>
</div>
</div>
</div>
<select
class="card-header-title level-item"
style="color: black;"
title="Select Measure"
onInput={(e) => handleInput(e.currentTarget.value)}
>
<For each={measures() ?? []}>
{(measure: { name: string; uuid: string }) => (
<option
value={measure.uuid}
selected={measure.uuid === selected()}
>
{measure.name}
</option>
)}
</For>
</select>
</div>
<select
class="card-header-title level-item"
style="color: black;"
title="Select Measure"
onInput={(e) => handleInput(e.currentTarget.value)}
>
<For each={measures() ?? []}>
{(measure: { name: string; uuid: string }) => (
<option
value={measure.uuid}
selected={measure.uuid === selected()}
>
{measure.name}
</option>
)}
</For>
</select>
<SharedPlot {...props} />
</div>
<SharedPlot {...props} />
</nav>
);
};
Expand Down
52 changes: 48 additions & 4 deletions services/console/src/components/console/plots/FallbackPlot.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
const FallbackPlot = (props: { spaced?: boolean }) => {
const FallbackPlot = () => {
return (
<div>
<div class="columns">
<div class={`column${props.spaced ? " is-11" : ""}`}>
<div class="column">
<div class="panel">
<nav class="panel-heading columns is-vcentered">
<div class="column">&nbsp;</div>
<nav class="panel-heading">
<div class="columns is-mobile is-centered is-vcentered is-gapless">
<div class="column">&nbsp;</div>
</div>
</nav>
<div class="panel-block">
<progress
Expand All @@ -14,6 +16,48 @@ const FallbackPlot = (props: { spaced?: boolean }) => {
max="100"
/>
</div>
<div class="box">
<nav class="level is-mobile">
<div class="level-left">
<div class="level is-mobile">
<div class="level-item">
<button
type="button"
class="button is-small is-rounded"
title="Move plot"
disabled={true}
>
&nbsp;
</button>
</div>
</div>
</div>
<div class="level-right">
<div class="buttons">
<button
type="button"
class="button is-small"
disabled={true}
title="View plot"
>
<span class="icon is-small">
<i class="fas fa-external-link-alt" />
</span>
</button>
<button
type="button"
class="button is-small"
disabled={true}
title="Plot settings"
>
<span class="icon is-small">
<i class="fas fa-cog" />
</span>
</button>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions services/console/src/components/console/plots/FallbackPlots.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 spaced={true} />
<FallbackPlot />
</div>
<div class="column is-11-tablet is-12-desktop is-6-widescreen">
<FallbackPlot spaced={true} />
<FallbackPlot />
</div>
<div class="column is-11-tablet is-12-desktop is-6-widescreen">
<FallbackPlot spaced={true} />
<FallbackPlot />
</div>
<div class="column is-11-tablet is-12-desktop is-6-widescreen">
<FallbackPlot spaced={true} />
<FallbackPlot />
</div>
</div>
);
Expand Down
49 changes: 35 additions & 14 deletions services/console/src/components/console/plots/PlotsPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
import bencher_valid_init, { type InitOutput } from "bencher_valid";
import * as Sentry from "@sentry/astro";
import { debounce } from "@solid-primitives/scheduled";
import type { Params } from "astro";
import type { JsonPlot, JsonProject } from "../../../types/bencher";
import bencher_valid_init, { type InitOutput } from "bencher_valid";
import {
type Accessor,
For,
Show,
createEffect,
createMemo,
createResource,
type Accessor,
createSignal,
} from "solid-js";
import { setPageTitle } from "../../../util/resource";
import { createStore } from "solid-js/store";
import { perfPath } from "../../../config/util";
import type { JsonPlot, JsonProject } from "../../../types/bencher";
import {
authUser,
isAllowedProjectCreate,
isAllowedProjectDelete,
isAllowedProjectEdit,
} from "../../../util/auth";
import { httpGet } from "../../../util/http";
import Pinned from "./Pinned";
import { DEBOUNCE_DELAY, validJwt } from "../../../util/valid";
import { createStore } from "solid-js/store";
import { setPageTitle } from "../../../util/resource";
import { useSearchParams } from "../../../util/url";
import PlotsHeader from "./PlotsHeader";
import { debounce } from "@solid-primitives/scheduled";
import { DEBOUNCE_DELAY, validJwt } from "../../../util/valid";
import FallbackPlots from "./FallbackPlots";
import * as Sentry from "@sentry/astro";
import { perfPath } from "../../../config/util";
import Pinned from "./Pinned";
import PlotsHeader from "./PlotsHeader";

const SEARCH_PARAM = "search";
const MAX_PLOTS = 64;
Expand Down Expand Up @@ -139,20 +140,35 @@ const PlotsPanel = (props: Props) => {
return await httpGet(props.apiUrl, path, fetcher.token)
.then((resp) => {
setPlots(resp?.data as JsonPlot[]);
handlePlotsInit();
return resp?.data as JsonPlot[];
})
.catch((error) => {
console.error(error);
Sentry.captureException(error);
handlePlotsInit();
return EMPTY_ARRAY;
});
};
const [projectPlots, { refetch }] = createResource<JsonPlot[]>(
plotsFetcher,
getPlots,
);
const handleRefresh = () => {
refetch();
setPlotsInit(false);
};

const [plots, setPlots] = createStore<JsonPlot[]>([]);
const plotsLength = createMemo(() => plots?.length);
const [plotsInit, setPlotsInit] = createSignal(false);
const handlePlotsInit = () => {
// This lets the plots have a chance to start to render
// to prevent the "flashing" of the view-only component
setTimeout(() => {
setPlotsInit(true);
}, 1);
};

const movePlot = (from: number, to: number) => {
const newPlots = [...plots];
Expand Down Expand Up @@ -210,10 +226,10 @@ const PlotsPanel = (props: Props) => {
project={project}
search={search}
isAllowedCreate={isAllowedCreate}
handleRefresh={refetch}
handleRefresh={handleRefresh}
handleSearch={handleSearch}
/>
<Show when={projectPlots.loading}>
<Show when={projectPlots.loading || !plotsInit()}>
<FallbackPlots />
</Show>
<div class="columns is-multiline is-vcentered">
Expand Down Expand Up @@ -249,7 +265,12 @@ const PlotsPanel = (props: Props) => {
</div>
</Show>
<Show
when={(!props.isConsole || !isAllowedCreate()) && plotsLength() === 0}
when={
(!props.isConsole || !isAllowedCreate()) &&
!projectPlots.loading &&
plotsInit() &&
plotsLength() === 0
}
>
<div class="column is-11-tablet is-12-desktop is-6-widescreen">
<div class="box">
Expand Down

0 comments on commit 31e3aca

Please sign in to comment.