-
Notifications
You must be signed in to change notification settings - Fork 101
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use text for relative timestamps and numbers for absolute #618
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import uPlot from 'uplot' | ||
|
||
export const selectTimeRange = | ||
(updateTimeRange: (min: number, max: number, absolute: boolean) => void) => (u: uPlot) => { | ||
if (u.select.width > 0) { | ||
const min = u.posToVal(u.select.left, 'x') | ||
const max = u.posToVal(u.select.left + u.select.width, 'x') | ||
updateTimeRange(Math.floor(min * 1000), Math.floor(max * 1000), true) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,6 +17,7 @@ import { | |
hasObjectiveType, | ||
latencyTarget, | ||
ObjectiveType, | ||
parseDuration, | ||
renderLatencyTarget, | ||
} from '../App' | ||
import Navbar from '../components/Navbar' | ||
|
@@ -70,11 +71,26 @@ const Detail = () => { | |
|
||
const name: string = labels[MetricName] | ||
|
||
let to: number = Date.now() | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If possible, But I guess since this is the only page that uses timeRange, this hasn't surfaced as a problem. |
||
const toQuery = query.get('to') | ||
const to = toQuery != null ? parseInt(toQuery) : Date.now() | ||
if (toQuery !== null) { | ||
if (!toQuery.includes('now')) { | ||
to = parseInt(toQuery) | ||
} | ||
} | ||
|
||
let from: number = to - 60 * 60 * 1000 | ||
const fromQuery = query.get('from') | ||
const from = fromQuery != null ? parseInt(fromQuery) : to - 3600 * 1000 | ||
if (fromQuery !== null) { | ||
if (fromQuery.includes('now')) { | ||
const duration = parseDuration(fromQuery.substring(4)) // omit first 4 chars: `now-` | ||
if (duration !== null) { | ||
from = to - duration | ||
} | ||
} else { | ||
from = parseInt(fromQuery) | ||
} | ||
} | ||
|
||
document.title = `${name} - Pyrra` | ||
|
||
|
@@ -159,12 +175,26 @@ const Detail = () => { | |
}, [getObjective, getObjectiveStatus]) | ||
|
||
const updateTimeRange = useCallback( | ||
(from: number, to: number) => { | ||
navigate(`/objectives?expr=${expr}&grouping=${groupingExpr ?? ''}&from=${from}&to=${to}`) | ||
(from: number, to: number, absolute: boolean) => { | ||
let fromStr = from.toString() | ||
let toStr = to.toString() | ||
if (!absolute) { | ||
fromStr = `now-${formatDuration(to - from)}` | ||
toStr = 'now' | ||
} | ||
navigate( | ||
`/objectives?expr=${expr}&grouping=${groupingExpr ?? ''}&from=${fromStr}&to=${toStr}`, | ||
) | ||
}, | ||
[navigate, expr, groupingExpr], | ||
) | ||
|
||
const updateTimeRangeSelect = (min: number, max: number, absolute: boolean) => { | ||
// when selecting time ranges with the mouse we want to disable the auto refresh | ||
setAutoReload(false) | ||
updateTimeRange(min, max, absolute) | ||
} | ||
|
||
const duration = to - from | ||
const interval = intervalFromDuration(duration) | ||
|
||
|
@@ -173,7 +203,7 @@ const Detail = () => { | |
const id = setInterval(() => { | ||
const newTo = Date.now() | ||
const newFrom = newTo - duration | ||
updateTimeRange(newFrom, newTo) | ||
updateTimeRange(newFrom, newTo, false) | ||
}, interval) | ||
|
||
return () => { | ||
|
@@ -185,7 +215,7 @@ const Detail = () => { | |
const handleTimeRangeClick = (t: number) => () => { | ||
const to = Date.now() | ||
const from = to - t | ||
updateTimeRange(from, to) | ||
updateTimeRange(from, to, false) | ||
} | ||
|
||
if (objectiveError !== '') { | ||
|
@@ -450,6 +480,7 @@ const Detail = () => { | |
from={from} | ||
to={to} | ||
uPlotCursor={uPlotCursor} | ||
updateTimeRange={updateTimeRangeSelect} | ||
/> | ||
</Col> | ||
</Row> | ||
|
@@ -465,6 +496,7 @@ const Detail = () => { | |
from={from} | ||
to={to} | ||
uPlotCursor={uPlotCursor} | ||
updateTimeRange={updateTimeRangeSelect} | ||
/> | ||
</Col> | ||
<Col | ||
|
@@ -479,6 +511,7 @@ const Detail = () => { | |
from={from} | ||
to={to} | ||
uPlotCursor={uPlotCursor} | ||
updateTimeRange={updateTimeRangeSelect} | ||
/> | ||
</Col> | ||
{objectiveType === ObjectiveType.Latency ? ( | ||
|
@@ -490,6 +523,7 @@ const Detail = () => { | |
from={from} | ||
to={to} | ||
uPlotCursor={uPlotCursor} | ||
updateTimeRange={updateTimeRangeSelect} | ||
target={objective.target} | ||
latency={latencyTarget(objective)} | ||
/> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess, for less duplication and more type rigidity, there can be a base type called
GraphProps
with fields likefrom
,to
,updateTimeRange
and that type can be extended in these three components to add their own fields.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That makes sense, yes. Given this is a PR to fix a bug I won't address this now. We should definitely do this later!