Add minTime and maxTime to query parameters

Signed-off-by: Prem Kumar <[email protected]>
thanos-io · Aug 10, 2020 · 1726882 · 1726882
1 parent a581191
commit 1726882
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 74 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/package.json b/pkg/ui/react-app/package.json
@@ -30,6 +30,7 @@
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.23",
     "popper.js": "^1.14.3",
+    "query-string": "^6.13.1",
     "rc-slider": "^9.3.1",
     "react": "^16.7.0",
     "react-copy-to-clipboard": "^5.0.1",
@@ -41,7 +42,8 @@
     "sanitize-html": "^1.20.1",
     "tempusdominus-bootstrap-4": "^5.1.2",
     "tempusdominus-core": "^5.0.3",
-    "typescript": "^3.3.3"
+    "typescript": "^3.3.3",
+    "use-query-params": "^1.1.6"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/pkg/ui/react-app/src/App.tsx b/pkg/ui/react-app/src/App.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Container } from 'reactstrap';
-import { Router, Redirect } from '@reach/router';
+import { Router, Redirect, globalHistory } from '@reach/router';
+import { QueryParamProvider } from 'use-query-params';
 
 import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
 import PathPrefixProps from './types/PathPrefixProps';
@@ -26,25 +27,27 @@ const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosCom
         defaultRoute={defaultRouteConfig[thanosComponent]}
       />
       <Container fluid style={{ paddingTop: 70 }}>
-        <Router basepath={`${pathPrefix}/new`}>
-          <Redirect from="/" to={`${pathPrefix}/new${defaultRouteConfig[thanosComponent]}`} />
+        <QueryParamProvider reachHistory={globalHistory}>
+          <Router basepath={`${pathPrefix}/new`}>
+            <Redirect from="/" to={`${pathPrefix}/new${defaultRouteConfig[thanosComponent]}`} />
 
-          {/*
-            NOTE: Any route added here needs to also be added to the list of
-            React-handled router paths ("reactRouterPaths") in /web/web.go.
+            {/*
+              NOTE: Any route added here needs to also be added to the list of
+              React-handled router paths ("reactRouterPaths") in /web/web.go.
           */}
-          <PanelList path="/graph" pathPrefix={pathPrefix} />
-          <Alerts path="/alerts" pathPrefix={pathPrefix} />
-          <Config path="/config" pathPrefix={pathPrefix} />
-          <Flags path="/flags" pathPrefix={pathPrefix} />
-          <Rules path="/rules" pathPrefix={pathPrefix} />
-          <ServiceDiscovery path="/service-discovery" pathPrefix={pathPrefix} />
-          <Status path="/status" pathPrefix={pathPrefix} />
-          <TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
-          <Targets path="/targets" pathPrefix={pathPrefix} />
-          <Stores path="/stores" pathPrefix={pathPrefix} />
-          <Blocks path="/blocks" pathPrefix={pathPrefix} />
-        </Router>
+            <PanelList path="/graph" pathPrefix={pathPrefix} />
+            <Alerts path="/alerts" pathPrefix={pathPrefix} />
+            <Config path="/config" pathPrefix={pathPrefix} />
+            <Flags path="/flags" pathPrefix={pathPrefix} />
+            <Rules path="/rules" pathPrefix={pathPrefix} />
+            <ServiceDiscovery path="/service-discovery" pathPrefix={pathPrefix} />
+            <Status path="/status" pathPrefix={pathPrefix} />
+            <TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
+            <Targets path="/targets" pathPrefix={pathPrefix} />
+            <Stores path="/stores" pathPrefix={pathPrefix} />
+            <Blocks path="/blocks" pathPrefix={pathPrefix} />
+          </Router>
+        </QueryParamProvider>
       </Container>
     </ErrorBoundary>
   );

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/Blocks.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/Blocks.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useMemo, useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import { Alert } from 'reactstrap';
+import { useQueryParams, withDefault, NumberParam } from 'use-query-params';
 import { withStatusIndicator } from '../../../components/withStatusIndicator';
 import { useFetch } from '../../../hooks/useFetch';
 import PathPrefixProps from '../../../types/PathPrefixProps';
@@ -41,7 +42,17 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
     return [0, 0];
   }, [blocks, err]);
 
-  const [[viewMinTime, viewMaxTime], setViewTime] = useState<[number, number]>([gridMinTime, gridMaxTime]);
+  const [{ 'min-time': viewMinTime, 'max-time': viewMaxTime }, setQuery] = useQueryParams({
+    'min-time': withDefault(NumberParam, gridMinTime),
+    'max-time': withDefault(NumberParam, gridMaxTime),
+  });
+
+  const setViewTime = (times: [number, number]): void => {
+    setQuery({
+      'min-time': times[0],
+      'max-time': times[1],
+    });
+  };
 
   if (err) return <Alert color="danger">{err.toString()}</Alert>;
 

diff --git a/pkg/ui/react-app/src/thanos/pages/blocks/TimeRange.tsx b/pkg/ui/react-app/src/thanos/pages/blocks/TimeRange.tsx
@@ -11,12 +11,13 @@ interface TimeRangeProps {
   viewMaxTime: number;
   gridMinTime: number;
   gridMaxTime: number;
-  onChange: React.Dispatch<React.SetStateAction<[number, number]>>;
+  onChange: (times: [number, number]) => void;
 }
 
+const NUM_MARKS = 10;
+
 const TimeRange: FC<TimeRangeProps> = ({ viewMinTime, viewMaxTime, gridMinTime, gridMaxTime, onChange }) => {
   const marks = useMemo(() => {
-    const NUM_MARKS = 10;
     const step = (gridMaxTime - gridMinTime) / NUM_MARKS;
 
     const marks: { [num: string]: string } = {};
@@ -35,7 +36,7 @@ const TimeRange: FC<TimeRangeProps> = ({ viewMinTime, viewMaxTime, gridMinTime,
         max={gridMaxTime}
         marks={marks}
         // tipFormatter={(t: number): string => moment.unix(t / 1000).format('lll')}
-        defaultValue={[gridMinTime, gridMaxTime]}
+        defaultValue={[viewMinTime, viewMaxTime]}
         onChange={onChange}
       />
       <div className={styles.timeRange}>

diff --git a/pkg/ui/react-app/yarn.lock b/pkg/ui/react-app/yarn.lock
@@ -8963,6 +8963,15 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.13.1:
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.1.tgz#d913ccfce3b4b3a713989fe6d39466d92e71ccad"
+  integrity sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -9877,6 +9886,11 @@ serialize-javascript@^2.1.2:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
+serialize-query-params@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-1.2.1.tgz#b849d0c004fb6958eabae114e24eb55aa8a50429"
+  integrity sha512-dycN0Cx4cXXIc3E3IaejBHlFWRRO0m/CzIkS41MhjQLwuvRobY1LHgdzPAfUj9sFeSnCmlMQM7iwVdyuhz2PIQ==
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -10201,6 +10215,11 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10313,6 +10332,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -10970,6 +10994,13 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-query-params@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-1.1.6.tgz#3e36cb45f22c4eea90c6cdc604e115af2fe4a950"
+  integrity sha512-zd58jSb0Yb6Io+hg47gXH0z1Zh8gp2CDRCw4ZzwlPBnODBO1CegX2c38Tca+RtZbjJsTtzWA+098uxDtLMEpYA==
+  dependencies:
+    serialize-query-params "^1.2.1"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"