-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add event filters, lock view from start to end * Make it better with tooltips, collapse vertical, event filters, label improvements * Don't follow mouse * Add togglebuttons group, add displayName to group, cleanup * Add Timeline to Accordion, use start/endOfMinute for min/max to provide a little zoomout ability to see all events * Remove paginated-table changes * Update snapshots and pass testid * Fix float tests * Remove event type filter in timeline * Add types * Fix strings to single quotes
- Loading branch information
1 parent
5e14b40
commit 94b1b9b
Showing
24 changed files
with
412 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
src/lib/components/event/event-history-timeline-helpers.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
import { get } from 'svelte/store'; | ||
|
||
import { endOfMinute, startOfMinute } from 'date-fns'; | ||
import type { TimelineOptionsZoomKey } from 'vis-timeline'; | ||
|
||
import { relativeTime, timeFormat } from '$lib/stores/time-format'; | ||
import type { WorkflowExecution } from '$lib/types/workflows'; | ||
import { formatDate } from '$lib/utilities/format-date'; | ||
import { formatDistanceAbbreviated } from '$lib/utilities/format-time'; | ||
|
||
type TimelineOptionsTooltipOverflow = 'flip' | 'none' | 'cap'; | ||
|
||
export const getTimelineOptions = (workflow: WorkflowExecution) => ({ | ||
stackSubgroups: true, | ||
maxHeight: 520, | ||
min: startOfMinute(new Date(workflow.startTime)), | ||
max: workflow?.endTime | ||
? endOfMinute(new Date(workflow?.endTime)) | ||
: Date.now(), | ||
horizontalScroll: true, | ||
verticalScroll: true, | ||
zoomKey: 'ctrlKey' as TimelineOptionsZoomKey, | ||
orientation: { | ||
axis: 'both', | ||
item: 'center', | ||
}, | ||
tooltip: { | ||
delay: 0, | ||
overflowMethod: 'flip' as TimelineOptionsTooltipOverflow, | ||
followMouse: false, | ||
template: tooltipTemplate, | ||
}, | ||
rollingMode: { | ||
follow: false, | ||
}, | ||
format: { | ||
majorLabels: { | ||
millisecond: 'D MMMM HH:mm:ss', | ||
second: 'D MMMM HH:mm', | ||
minute: 'ddd D MMMM', | ||
hour: 'ddd D MMMM', | ||
weekday: 'MMMM YYYY', | ||
day: 'MMMM YYYY', | ||
week: 'MMMM YYYY', | ||
month: 'YYYY', | ||
year: '', | ||
}, | ||
}, | ||
xss: { | ||
disabled: true, | ||
filterOptions: { | ||
whiteList: { | ||
div: ['class'], | ||
}, | ||
}, | ||
}, | ||
}); | ||
|
||
export const tooltipTemplate = (item, _parsedItems): string => { | ||
if (!item?.data?.eventList) return workflowExecutionTooltipTemplate(item); | ||
if (item?.data.eventList.length === 1) | ||
return singleEventTooltipTemplate(item); | ||
return groupEventTooltipTemplate(item); | ||
}; | ||
|
||
const workflowExecutionTooltipTemplate = (item): string => { | ||
return `<div class="flex flex-col gap-1"> | ||
<div class="flex gap-2"><div class="font-bold w-16">Start</div> | ||
<div>${formatDate(item.start, get(timeFormat), { | ||
relative: get(relativeTime), | ||
})} | ||
</div> | ||
</div> | ||
<div class="flex gap-2"> | ||
<div class="font-bold w-16">End</div> | ||
<div>${formatDate(item.end, get(timeFormat), { | ||
relative: get(relativeTime), | ||
})}</div> | ||
</div> | ||
<div class="flex gap-2"><div class="font-bold w-16">Duration</div><div>${formatDistanceAbbreviated( | ||
{ | ||
start: item.start, | ||
end: item.end, | ||
includeMilliseconds: true, | ||
}, | ||
)}</div> | ||
</div> | ||
</div>`; | ||
}; | ||
|
||
const singleEventTooltipTemplate = (item): string => { | ||
return `<div class="flex flex-col gap-1"> | ||
<div class="flex gap-2"><div class="font-bold w-16">Event Time</div> | ||
<div>${formatDate(item.start, get(timeFormat), { | ||
relative: get(relativeTime), | ||
})} | ||
</div> | ||
</div> | ||
</div> | ||
</div>`; | ||
}; | ||
|
||
const groupEventTooltipTemplate = (item): string => { | ||
return `<div class="flex flex-col gap-1"> | ||
<div class="flex gap-2"><div class="font-bold w-16">Start</div> | ||
<div>${formatDate(item.start, get(timeFormat), { | ||
relative: get(relativeTime), | ||
})} | ||
</div> | ||
</div> | ||
<div class="flex gap-2"> | ||
<div class="font-bold w-16">End</div> | ||
<div>${formatDate(item.end, get(timeFormat), { | ||
relative: get(relativeTime), | ||
})}</div> | ||
</div> | ||
<div class="flex gap-2"><div class="font-bold w-16">Duration</div><div>${formatDistanceAbbreviated( | ||
{ | ||
start: item.start, | ||
end: item.end, | ||
includeMilliseconds: true, | ||
}, | ||
)}</div> | ||
</div> | ||
</div>`; | ||
}; |
Oops, something went wrong.
94b1b9b
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
holocene – ./
holocene.preview.thundergun.io
holocene-git-main.preview.thundergun.io