User and Project List with 30d filter plus label

- Readable labels for other quick select ranges also
- Note: URL not reformatted for copy-bility

web/frontend/src/List.root.svelte

@@ -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!"

web/frontend/src/filters/Filters.svelte

@@ -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 6hrs', url: 'last6h',   seconds: 6*60*60 },
-                        { text: 'Last 12hrs',   seconds: 12*60*60 },
+                        // { text: 'Last 12hrs',   seconds: 12*60*60 },
-                        { text: 'Last 24hrs',   seconds: 24*60*60 },
+                        { text: 'Last 24hrs', url: 'last24h',  seconds: 24*60*60 },
-                        { text: 'Last 48hrs',   seconds: 48*60*60 },
+                        // { text: 'Last 48hrs',   seconds: 48*60*60 },
-                        { text: 'Last 7 days',  seconds: 7*24*60*60 },
+                        { text: 'Last 7 days', url: 'last7d', seconds: 7*24*60*60 },
-                        { text: 'Last 30 days', seconds: 30*24*60*60 }
+                        { text: 'Last 30 days', url: 'last30d', seconds: 30*24*60*60 }
-                    ] as {text, seconds}}
+                    ] 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}