feat: make quick select starttimes url copyable

ClusterCockpit · Oct 10, 2024 · 2f0460d · 2f0460d
1 parent 37f4ed7
commit 2f0460d
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 40 deletions.
diff --git a/api/schema.graphqls b/api/schema.graphqls
@@ -253,7 +253,7 @@ type Mutation {
 }
 
 type IntRangeOutput { from: Int!, to: Int! }
-type TimeRangeOutput { from: Time!, to: Time! }
+type TimeRangeOutput { range: String, from: Time!, to: Time! }
 
 input JobFilter {
   tags:        [ID!]
@@ -300,8 +300,8 @@ input StringInput {
   in:         [String!]
 }
 
-input IntRange   { from: Int!,   to: Int! }
-input TimeRange  { from: Time,   to: Time }
+input IntRange   { from: Int!, to: Int! }
+input TimeRange  { range: String, from: Time, to: Time }
 
 input FloatRange {
   from: Float!

diff --git a/internal/graph/generated/generated.go b/internal/graph/generated/generated.go
diff --git a/internal/graph/model/models_gen.go b/internal/graph/model/models_gen.go
diff --git a/internal/graph/schema.resolvers.go b/internal/graph/schema.resolvers.go
diff --git a/internal/repository/jobQuery.go b/internal/repository/jobQuery.go
@@ -218,6 +218,23 @@ func buildTimeCondition(field string, cond *schema.TimeRange, query sq.SelectBui
 		return query.Where("? <= "+field, cond.From.Unix())
 	} else if cond.To != nil {
 		return query.Where(field+" <= ?", cond.To.Unix())
+	} else if cond.Range != "" {
+		now := time.Now().Unix()
+		var then int64
+		switch cond.Range {
+		case "last6h":
+			then = now - (60 * 60 * 6)
+		case "last24h":
+			then = now - (60 * 60 * 24)
+		case "last7d":
+			then = now - (60 * 60 * 24 * 7)
+		case "last30d":
+			then = now - (60 * 60 * 24 * 30)
+		default:
+			log.Debugf("No known named timeRange: startTime.range = %s", cond.Range)
+			return query
+		}
+		return query.Where(field+" BETWEEN ? AND ?", then, now)
 	} else {
 		return query
 	}

diff --git a/internal/routerConfig/routes.go b/internal/routerConfig/routes.go
@@ -255,7 +255,7 @@ func buildFilterPresets(query url.Values) map[string]interface{} {
 	}
 	if query.Get("startTime") != "" {
 		parts := strings.Split(query.Get("startTime"), "-")
-		if len(parts) == 2 {
+		if len(parts) == 2 { // Time in seconds, from - to
 			a, e1 := strconv.ParseInt(parts[0], 10, 64)
 			b, e2 := strconv.ParseInt(parts[1], 10, 64)
 			if e1 == nil && e2 == nil {
@@ -264,6 +264,10 @@ func buildFilterPresets(query url.Values) map[string]interface{} {
 					"to":   time.Unix(b, 0).Format(time.RFC3339),
 				}
 			}
+		} else { // named range
+			filterPresets["startTime"] = map[string]string{
+				"range": query.Get("startTime"),
+			}
 		}
 	}
 

diff --git a/pkg/schema/config.go b/pkg/schema/config.go
@@ -53,8 +53,9 @@ type IntRange struct {
 }
 
 type TimeRange struct {
-	From *time.Time `json:"from"`
-	To   *time.Time `json:"to"`
+	Range string     `json:"range,omitempty"` // Optional, e.g. 'last6h'
+	From  *time.Time `json:"from"`
+	To    *time.Time `json:"to"`
 }
 
 type FilterRanges struct {

diff --git a/web/frontend/src/List.root.svelte b/web/frontend/src/List.root.svelte
@@ -40,15 +40,9 @@
   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,
+      range: "last30d",
       text: "Last 30 Days",
-      url: "last30d",
     };
   }
 

diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte
@@ -106,6 +106,10 @@
       items.push({
         startTime: { from: filters.startTime.from, to: filters.startTime.to },
       });
+    if (filters.startTime.range)
+      items.push({
+        startTime: { range: filters.startTime.range },
+      });
     if (filters.tags.length != 0) items.push({ tags: filters.tags });
     if (filters.duration.from || filters.duration.to)
       items.push({
@@ -167,13 +171,12 @@
     if (filters.states.length != allJobStates.length)
       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)}`,
       );
-    // }
+    if (filters.startTime.range) {
+        opts.push(`startTime=${filters.startTime.range}`)
+    }
     if (filters.jobId.length != 0)
       if (filters.jobIdMatch != "in") {
         opts.push(`jobId=${filters.jobId}`);
@@ -259,14 +262,11 @@
       {#if startTimeQuickSelect}
         <DropdownItem divider />
         <DropdownItem disabled>Start Time Quick Selection</DropdownItem>
-        {#each [{ text: "Last 6hrs", url: "last6h", seconds: 6 * 60 * 60 }, { text: "Last 24hrs", url: "last24h", seconds: 24 * 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 }}
+        {#each [{ text: "Last 6hrs", range: "last6h" }, { text: "Last 24hrs", range: "last24h" }, { text: "Last 7 days", range: "last7d" }, { text: "Last 30 days", range: "last30d" }] as { text, range }}
           <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);
+              filters.startTime.range = range;
+              filters.startTime.text = text;
               updateFilters();
             }}
           >
@@ -302,13 +302,15 @@
 
 {#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}
+    {new Date(filters.startTime.from).toLocaleString()} - {new Date(
+      filters.startTime.to,
+    ).toLocaleString()}
+  </Info>
+{/if}
+
+{#if filters.startTime.range}
+  <Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
+    {filters?.startTime?.text ? filters.startTime.text : filters.startTime.range }
   </Info>
 {/if}
 
@@ -406,9 +408,10 @@
   bind:isOpen={isStartTimeOpen}
   bind:from={filters.startTime.from}
   bind:to={filters.startTime.to}
+  bind:range={filters.startTime.range}
   on:set-filter={() => {
     delete filters.startTime["text"];
-    delete filters.startTime["url"];
+    delete filters.startTime["range"];
     updateFilters();
   }}
 />

diff --git a/web/frontend/src/generic/filters/StartTime.svelte b/web/frontend/src/generic/filters/StartTime.svelte
@@ -6,6 +6,7 @@
     - `isOpen Bool?`: Is this filter component opened [Default: false]
     - `from Object?`: The currently selected from startime [Default: null]
     - `to Object?`: The currently selected to starttime (i.e. subCluster) [Default: null]
+    - `range String?`: The currently selected starttime range as string [Default: ""]
 
     Events:
     - `set-filter, {String?, String?}`: Set 'from, to' filter in upstream component
@@ -16,6 +17,7 @@
   import { parse, format, sub } from "date-fns";
   import {
     Row,
+    Col,
     Button,
     Input,
     Modal,
@@ -31,6 +33,7 @@
   export let isOpen = false;
   export let from = null;
   export let to = null;
+  export let range = "";
 
   let pendingFrom, pendingTo;
 
@@ -86,6 +89,14 @@
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
   <ModalHeader>Select Start Time</ModalHeader>
   <ModalBody>
+    {#if range !== ""}
+      <h4>Current Range</h4>
+      <Row>
+        <Col>
+          <Input type="text" value={range} disabled/>
+        </Col>
+      </Row>
+    {/if}
     <h4>From</h4>
     <Row>
       <FormGroup class="col">