User and Project List with 30d filter plus label

- Readable labels for other quick select ranges also
- Note: URL not reformatted for copy-bility
This commit is contained in:
Christoph Kluge 2023-06-19 17:59:44 +02:00
parent c8068f45eb
commit 5ba84efab6
2 changed files with 46 additions and 43 deletions

View File

@ -24,6 +24,16 @@
export let type;
export let filterPresets;
// By default, look at the jobs of the last 30 days:
if (filterPresets?.startTime == null) {
if (filterPresets == null)
filterPresets = {}
const lastMonth = (new Date(Date.now() - (30*24*60*60*1000))).toISOString()
const now = (new Date(Date.now())).toISOString()
filterPresets.startTime = { from: lastMonth, to: now, text: 'Last 30 Days', url: 'last30d' }
}
console.assert(
type == "USER" || type == "PROJECT",
"Invalid list type provided!"

View File

@ -120,7 +120,11 @@
for (let state of filters.states)
opts.push(`state=${state}`)
if (filters.startTime.from && filters.startTime.to)
// if (filters.startTime.url) {
// opts.push(`startTime=${filters.startTime.url}`)
// } else {
opts.push(`startTime=${dateToUnixEpoch(filters.startTime.from)}-${dateToUnixEpoch(filters.startTime.to)}`)
// }
for (let tag of filters.tags)
opts.push(`tag=${tag}`)
if (filters.duration.from && filters.duration.to)
@ -193,16 +197,18 @@
<DropdownItem divider/>
<DropdownItem disabled>Start Time Qick Selection</DropdownItem>
{#each [
{ text: 'Last 6hrs', seconds: 6*60*60 },
{ text: 'Last 12hrs', seconds: 12*60*60 },
{ text: 'Last 24hrs', seconds: 24*60*60 },
{ text: 'Last 48hrs', seconds: 48*60*60 },
{ text: 'Last 7 days', seconds: 7*24*60*60 },
{ text: 'Last 30 days', seconds: 30*24*60*60 }
] as {text, seconds}}
{ text: 'Last 6hrs', url: 'last6h', seconds: 6*60*60 },
// { text: 'Last 12hrs', seconds: 12*60*60 },
{ text: 'Last 24hrs', url: 'last24h', seconds: 24*60*60 },
// { text: 'Last 48hrs', seconds: 48*60*60 },
{ text: 'Last 7 days', url: 'last7d', seconds: 7*24*60*60 },
{ text: 'Last 30 days', url: 'last30d', seconds: 30*24*60*60 }
] as {text, url, seconds}}
<DropdownItem on:click={() => {
filters.startTime.from = (new Date(Date.now() - seconds * 1000)).toISOString()
filters.startTime.to = (new Date(Date.now())).toISOString()
filters.startTime.text = text,
filters.startTime.url = url
update()
}}>
<Icon name="calendar-range"/> {text}
@ -212,27 +218,6 @@
</DropdownMenu>
</ButtonDropdown>
</Col>
<!-- {#if startTimeQuickSelect}
<Col xs="auto">
<TimeSelection customEnabled={false} anyEnabled={true}
from={filters.startTime.from ? new Date(filters.startTime.from) : null}
to={filters.startTime.to ? new Date(filters.startTime.to) : null}
options={{
'Last 6hrs': 6*60*60,
'Last 12hrs': 12*60*60,
'Last 24hrs': 24*60*60,
'Last 48hrs': 48*60*60,
'Last 7 days': 7*24*60*60,
'Last 30 days': 30*24*60*60}}
on:change={({ detail: { from, to } }) => {
filters.startTime.from = from?.toISOString()
filters.startTime.to = to?.toISOString()
// console.log(filters.startTime)
update()
}}
/>
</Col>
{/if} -->
<Col xs="auto">
{#if filters.cluster}
<Info icon="cpu" on:click={() => (isClusterOpen = true)}>
@ -251,7 +236,11 @@
{#if filters.startTime.from || filters.startTime.to}
<Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
{#if filters.startTime.text}
{filters.startTime.text}
{:else}
{new Date(filters.startTime.from).toLocaleString()} - {new Date(filters.startTime.to).toLocaleString()}
{/if}
</Info>
{/if}
@ -307,7 +296,11 @@
bind:isOpen={isStartTimeOpen}
bind:from={filters.startTime.from}
bind:to={filters.startTime.to}
on:update={() => update()} />
on:update={() => {
delete filters.startTime['text']
delete filters.startTime['url']
update()
}} />
<Duration
bind:isOpen={isDurationOpen}