Skip to content

Commit

Permalink
Refactor fetchAllEvents to the workflow-history-layout. Fix timeline …
Browse files Browse the repository at this point in the history
…issue with json. Add loading to timeline
  • Loading branch information
Alex-Tideman committed Oct 16, 2023
1 parent faba28d commit 509294c
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 66 deletions.
26 changes: 18 additions & 8 deletions src/lib/components/event/event-history-timeline.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import Accordion from '$lib/holocene/accordion.svelte';
import Icon from '$lib/holocene/icon/icon.svelte';
import Loading from '$lib/holocene/loading.svelte';
import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
import { translate } from '$lib/i18n/translate';
Expand Down Expand Up @@ -197,12 +198,17 @@
$workflowRun.workflow &&
history.length &&
visualizationRef;
const drawTimeline = () => {
if (timeline) {
timeline.destroy();
}
buildTimeline(category);
};
$: {
if (readyToDraw) {
if (timeline) {
timeline.destroy();
}
buildTimeline(category);
drawTimeline();
}
}
</script>
Expand All @@ -221,20 +227,24 @@
<ToggleButtons>
<ToggleButton
data-testid="zoom-in"
on:click={() => timeline.zoomIn(1)}>+</ToggleButton
on:click={() => timeline?.zoomIn(1)}>+</ToggleButton
>
<ToggleButton
data-testid="zoom-in"
on:click={() => timeline.zoomOut(1)}>-</ToggleButton
on:click={() => timeline?.zoomOut(1)}>-</ToggleButton
>
<ToggleButton
data-testid="zoom-in"
on:click={() => timeline.focus('workflow')}>Fit</ToggleButton
on:click={() => timeline?.focus('workflow')}>Fit</ToggleButton
>
</ToggleButtons>
</div>
</div>
<div class="timeline" bind:this={visualizationRef} />
<div class="timeline" bind:this={visualizationRef}>
{#if !timeline}
<Loading title="Building Timeline..." />
{/if}
</div>
</div>
</Accordion>

Expand Down
39 changes: 2 additions & 37 deletions src/lib/components/event/event-summary.svelte
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
<script lang="ts">
import { page } from '$app/stores';
import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
import Pagination from '$lib/holocene/pagination.svelte';
import { translate } from '$lib/i18n/translate';
import { groupEvents } from '$lib/models/event-groups';
import { CATEGORIES } from '$lib/models/event-history/get-event-categorization';
import { fetchAllEvents } from '$lib/services/events-service';
import {
eventFilterSort,
type EventSortOrder,
expandAllEvents,
} from '$lib/stores/event-view';
import { eventFilterSort, expandAllEvents } from '$lib/stores/event-view';
import { eventHistory, fullEventHistory } from '$lib/stores/events';
import { eventCategoryFilter } from '$lib/stores/filters';
import { refresh } from '$lib/stores/workflow-run';
import type {
CommonHistoryEvent,
EventTypeCategory,
Expand All @@ -27,33 +19,6 @@
export let compact = false;
$: ({ namespace, workflow: workflowId, run: runId } = $page.params);
let loading = true;
const resetFullHistory = () => {
$fullEventHistory = [];
loading = true;
};
const fetchEvents = async (
namespace: string,
workflowId: string,
runId: string,
sort: EventSortOrder,
) => {
resetFullHistory();
$fullEventHistory = await fetchAllEvents({
namespace,
workflowId,
runId,
sort: compact ? 'ascending' : sort,
});
loading = false;
};
$: $refresh, fetchEvents(namespace, workflowId, runId, $eventFilterSort);
function handleExpandChange(event: CustomEvent) {
$expandAllEvents = event.detail.expanded;
}
Expand Down Expand Up @@ -112,7 +77,7 @@
onRowClick={() => setActiveRowIndex(index)}
/>
{:else}
<EventEmptyRow {loading} />
<EventEmptyRow />
{/each}
</EventSummaryTable>
</Pagination>
2 changes: 1 addition & 1 deletion src/lib/components/workflow/workflow-json-navigator.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
<slot name="decode" />
</div>
{#if decodeEventHistory}
{#key index}
{#key [index, decodeEventHistory]}
<PayloadDecoder value={events[index - 1]} let:decodedValue>
<CodeBlock
content={decodedValue}
Expand Down
33 changes: 31 additions & 2 deletions src/lib/layouts/workflow-history-layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,22 @@
import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
import { translate } from '$lib/i18n/translate';
import { eventViewType } from '$lib/stores/event-view';
import { fetchAllEvents } from '$lib/services/events-service';
import {
eventFilterSort,
type EventSortOrder,
eventViewType,
} from '$lib/stores/event-view';
import { eventHistory, fullEventHistory } from '$lib/stores/events';
import { namespaces } from '$lib/stores/namespaces';
import { workflowRun } from '$lib/stores/workflow-run';
import { refresh, workflowRun } from '$lib/stores/workflow-run';
import type { EventView } from '$lib/types/events';
import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
import { exportHistory } from '$lib/utilities/export-history';
import { getWorkflowStartedCompletedAndTaskFailedEvents } from '$lib/utilities/get-started-completed-and-task-failed-events';
import { getWorkflowRelationships } from '$lib/utilities/get-workflow-relationships';
$: ({ namespace, workflow: workflowId, run: runId } = $page.params);
let showShortcuts = false;
$: workflowEvents =
Expand All @@ -35,6 +41,29 @@
$namespaces,
);
const resetFullHistory = () => {
$fullEventHistory = [];
};
const fetchEvents = async (
namespace: string,
workflowId: string,
runId: string,
view: EventView,
sort: EventSortOrder,
) => {
resetFullHistory();
$fullEventHistory = await fetchAllEvents({
namespace,
workflowId,
runId,
sort: view === 'compact' ? 'ascending' : sort,
});
};
$: $refresh,
fetchEvents(namespace, workflowId, runId, $eventViewType, $eventFilterSort);
const onViewClick = (view: EventView) => {
if ($page.url.searchParams.get('page')) {
$page.url.searchParams.delete('page');
Expand Down
20 changes: 2 additions & 18 deletions src/lib/pages/workflow-history-json.svelte
Original file line number Diff line number Diff line change
@@ -1,28 +1,12 @@
<script lang="ts">
import { page } from '$app/stores';
import WorkflowJsonNavigator from '$lib/components/workflow/workflow-json-navigator.svelte';
import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
import { fetchRawEvents } from '$lib/services/events-service';
import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
const { namespace, workflow: workflowId, run: runId } = $page.params;
import { fullEventHistory } from '$lib/stores/events';
let decodeEventHistory = true;
let events = [];
const fetchEvents = async () => {
events = await fetchRawEvents({
namespace: decodeURIForSvelte(namespace),
workflowId: decodeURIForSvelte(workflowId),
runId: decodeURIForSvelte(runId),
sort: 'ascending',
});
};
$: decodeEventHistory, fetchEvents();
</script>

<WorkflowJsonNavigator {events} {decodeEventHistory}>
<WorkflowJsonNavigator events={$fullEventHistory} {decodeEventHistory}>
<ToggleSwitch
slot="decode"
label="View decoded event history"
Expand Down

0 comments on commit 509294c

Please sign in to comment.