Skip to content

Commit 1726882

Browse files
onpremonprem
committed
Add minTime and maxTime to query parameters
Signed-off-by: Prem Kumar <prmsrswt@gmail.com>
1 parent a581191 commit 1726882

File tree

6 files changed

+122
-74
lines changed

6 files changed

+122
-74
lines changed

‎pkg/ui/bindata.go‎

Lines changed: 51 additions & 51 deletions
Large diffs are not rendered by default.

‎pkg/ui/react-app/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"moment": "^2.24.0",
3131
"moment-timezone": "^0.5.23",
3232
"popper.js": "^1.14.3",
33+
"query-string": "^6.13.1",
3334
"rc-slider": "^9.3.1",
3435
"react": "^16.7.0",
3536
"react-copy-to-clipboard": "^5.0.1",
@@ -41,7 +42,8 @@
4142
"sanitize-html": "^1.20.1",
4243
"tempusdominus-bootstrap-4": "^5.1.2",
4344
"tempusdominus-core": "^5.0.3",
44-
"typescript": "^3.3.3"
45+
"typescript": "^3.3.3",
46+
"use-query-params": "^1.1.6"
4547
},
4648
"scripts": {
4749
"start": "react-scripts start",

‎pkg/ui/react-app/src/App.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { FC } from 'react';
22
import { Container } from 'reactstrap';
3-
import { Router, Redirect } from '@reach/router';
3+
import { Router, Redirect, globalHistory } from '@reach/router';
4+
import { QueryParamProvider } from 'use-query-params';
45

56
import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
67
import PathPrefixProps from './types/PathPrefixProps';
@@ -26,25 +27,27 @@ const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosCom
2627
defaultRoute={defaultRouteConfig[thanosComponent]}
2728
/>
2829
<Container fluid style={{ paddingTop: 70 }}>
29-
<Router basepath={`${pathPrefix}/new`}>
30-
<Redirect from="/" to={`${pathPrefix}/new${defaultRouteConfig[thanosComponent]}`} />
30+
<QueryParamProvider reachHistory={globalHistory}>
31+
<Router basepath={`${pathPrefix}/new`}>
32+
<Redirect from="/" to={`${pathPrefix}/new${defaultRouteConfig[thanosComponent]}`} />
3133

32-
{/*
33-
NOTE: Any route added here needs to also be added to the list of
34-
React-handled router paths ("reactRouterPaths") in /web/web.go.
34+
{/*
35+
NOTE: Any route added here needs to also be added to the list of
36+
React-handled router paths ("reactRouterPaths") in /web/web.go.
3537
*/}
36-
<PanelList path="/graph" pathPrefix={pathPrefix} />
37-
<Alerts path="/alerts" pathPrefix={pathPrefix} />
38-
<Config path="/config" pathPrefix={pathPrefix} />
39-
<Flags path="/flags" pathPrefix={pathPrefix} />
40-
<Rules path="/rules" pathPrefix={pathPrefix} />
41-
<ServiceDiscovery path="/service-discovery" pathPrefix={pathPrefix} />
42-
<Status path="/status" pathPrefix={pathPrefix} />
43-
<TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
44-
<Targets path="/targets" pathPrefix={pathPrefix} />
45-
<Stores path="/stores" pathPrefix={pathPrefix} />
46-
<Blocks path="/blocks" pathPrefix={pathPrefix} />
47-
</Router>
38+
<PanelList path="/graph" pathPrefix={pathPrefix} />
39+
<Alerts path="/alerts" pathPrefix={pathPrefix} />
40+
<Config path="/config" pathPrefix={pathPrefix} />
41+
<Flags path="/flags" pathPrefix={pathPrefix} />
42+
<Rules path="/rules" pathPrefix={pathPrefix} />
43+
<ServiceDiscovery path="/service-discovery" pathPrefix={pathPrefix} />
44+
<Status path="/status" pathPrefix={pathPrefix} />
45+
<TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
46+
<Targets path="/targets" pathPrefix={pathPrefix} />
47+
<Stores path="/stores" pathPrefix={pathPrefix} />
48+
<Blocks path="/blocks" pathPrefix={pathPrefix} />
49+
</Router>
50+
</QueryParamProvider>
4851
</Container>
4952
</ErrorBoundary>
5053
);

‎pkg/ui/react-app/src/thanos/pages/blocks/Blocks.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { FC, useMemo, useState } from 'react';
22
import { RouteComponentProps } from '@reach/router';
33
import { Alert } from 'reactstrap';
4+
import { useQueryParams, withDefault, NumberParam } from 'use-query-params';
45
import { withStatusIndicator } from '../../../components/withStatusIndicator';
56
import { useFetch } from '../../../hooks/useFetch';
67
import PathPrefixProps from '../../../types/PathPrefixProps';
@@ -41,7 +42,17 @@ export const BlocksContent: FC<{ data: BlockListProps }> = ({ data }) => {
4142
return [0, 0];
4243
}, [blocks, err]);
4344

44-
const [[viewMinTime, viewMaxTime], setViewTime] = useState<[number, number]>([gridMinTime, gridMaxTime]);
45+
const [{ 'min-time': viewMinTime, 'max-time': viewMaxTime }, setQuery] = useQueryParams({
46+
'min-time': withDefault(NumberParam, gridMinTime),
47+
'max-time': withDefault(NumberParam, gridMaxTime),
48+
});
49+
50+
const setViewTime = (times: [number, number]): void => {
51+
setQuery({
52+
'min-time': times[0],
53+
'max-time': times[1],
54+
});
55+
};
4556

4657
if (err) return <Alert color="danger">{err.toString()}</Alert>;
4758

‎pkg/ui/react-app/src/thanos/pages/blocks/TimeRange.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@ interface TimeRangeProps {
1111
viewMaxTime: number;
1212
gridMinTime: number;
1313
gridMaxTime: number;
14-
onChange: React.Dispatch<React.SetStateAction<[number, number]>>;
14+
onChange: (times: [number, number]) => void;
1515
}
1616

17+
const NUM_MARKS = 10;
18+
1719
const TimeRange: FC<TimeRangeProps> = ({ viewMinTime, viewMaxTime, gridMinTime, gridMaxTime, onChange }) => {
1820
const marks = useMemo(() => {
19-
const NUM_MARKS = 10;
2021
const step = (gridMaxTime - gridMinTime) / NUM_MARKS;
2122

2223
const marks: { [num: string]: string } = {};
@@ -35,7 +36,7 @@ const TimeRange: FC<TimeRangeProps> = ({ viewMinTime, viewMaxTime, gridMinTime,
3536
max={gridMaxTime}
3637
marks={marks}
3738
// tipFormatter={(t: number): string => moment.unix(t / 1000).format('lll')}
38-
defaultValue={[gridMinTime, gridMaxTime]}
39+
defaultValue={[viewMinTime, viewMaxTime]}
3940
onChange={onChange}
4041
/>
4142
<div className={styles.timeRange}>

‎pkg/ui/react-app/yarn.lock‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8963,6 +8963,15 @@ query-string@^4.1.0:
89638963
object-assign "^4.1.0"
89648964
strict-uri-encode "^1.0.0"
89658965

8966+
query-string@^6.13.1:
8967+
version "6.13.1"
8968+
resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.1.tgz#d913ccfce3b4b3a713989fe6d39466d92e71ccad"
8969+
integrity sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==
8970+
dependencies:
8971+
decode-uri-component "^0.2.0"
8972+
split-on-first "^1.0.0"
8973+
strict-uri-encode "^2.0.0"
8974+
89668975
querystring-es3@^0.2.0:
89678976
version "0.2.1"
89688977
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -9877,6 +9886,11 @@ serialize-javascript@^2.1.2:
98779886
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
98789887
integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
98799888

9889+
serialize-query-params@^1.2.1:
9890+
version "1.2.1"
9891+
resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-1.2.1.tgz#b849d0c004fb6958eabae114e24eb55aa8a50429"
9892+
integrity sha512-dycN0Cx4cXXIc3E3IaejBHlFWRRO0m/CzIkS41MhjQLwuvRobY1LHgdzPAfUj9sFeSnCmlMQM7iwVdyuhz2PIQ==
9893+
98809894
serve-index@^1.9.1:
98819895
version "1.9.1"
98829896
resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -10201,6 +10215,11 @@ spdy@^4.0.1:
1020110215
select-hose "^2.0.0"
1020210216
spdy-transport "^3.0.0"
1020310217

10218+
split-on-first@^1.0.0:
10219+
version "1.1.0"
10220+
resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
10221+
integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
10222+
1020410223
split-string@^3.0.1, split-string@^3.0.2:
1020510224
version "3.1.0"
1020610225
resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10313,6 +10332,11 @@ strict-uri-encode@^1.0.0:
1031310332
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
1031410333
integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
1031510334

10335+
strict-uri-encode@^2.0.0:
10336+
version "2.0.0"
10337+
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
10338+
integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
10339+
1031610340
string-length@^2.0.0:
1031710341
version "2.0.0"
1031810342
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -10970,6 +10994,13 @@ url@^0.11.0:
1097010994
punycode "1.3.2"
1097110995
querystring "0.2.0"
1097210996

10997+
use-query-params@^1.1.6:
10998+
version "1.1.6"
10999+
resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-1.1.6.tgz#3e36cb45f22c4eea90c6cdc604e115af2fe4a950"
11000+
integrity sha512-zd58jSb0Yb6Io+hg47gXH0z1Zh8gp2CDRCw4ZzwlPBnODBO1CegX2c38Tca+RtZbjJsTtzWA+098uxDtLMEpYA==
11001+
dependencies:
11002+
serialize-query-params "^1.2.1"
11003+
1097311004
use@^3.1.0:
1097411005
version "3.1.1"
1097511006
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 commit comments

Comments
 (0)