Skip to content
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.

Sign up for GitHub

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

Fix Origin UI RateGraph data loss/issues #497

Merged
merged 8 commits into from
Jan 24, 2024
Merged

Fix Origin UI RateGraph data loss/issues #497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5a471ef
Fix orign UI graph reset lose data
haoming29 Dec 13, 2023
04d92a9
Fix wrong data result with time set to the future
haoming29 Dec 13, 2023
5014a32
Fix rx tx data series fetching same data
haoming29 Dec 13, 2023
9314d68
Further reduce default resolution and rate time range
haoming29 Dec 13, 2023
e9382b7
Revert back to default values
haoming29 Jan 8, 2024
fb07787
Merge branch 'main' of github.com:haoming29/pelican into fix-origin-m…
haoming29 Jan 10, 2024
d7c7344
Add clarification on no data error message
haoming29 Jan 10, 2024
0914e15
EDL for parameter_struct.go
haoming29 Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions param/parameters_struct.go
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web_ui/frontend/app/origin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Home() {
rate={TimeDuration.fromString("3h")}
duration={TimeDuration.fromString("7d")}
resolution={TimeDuration.fromString("3h")}
metric={['xrootd_server_bytes{direction="rx"}', 'xrootd_server_bytes{direction="rx"}']}
metrics={['xrootd_server_bytes{direction="rx"}', 'xrootd_server_bytes{direction="tx"}']}
boxProps={{
maxHeight:"400px",
flexGrow:1,
Expand Down
6 changes: 3 additions & 3 deletions web_ui/frontend/components/graphs/Graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default function Graph({getData, options, boxProps, drawer}: GraphProps)
setLoading(false)
if(response.datasets[0].data.length == 0){
let date = new Date(Date.now()).toLocaleTimeString()
setError(`No data returned by database as of ${date}; Plot will auto-refresh`)
setError(`No data returned by database as of ${date}; Plot will auto-refresh. Adjust Graph Settings to set a lower Rate Time Range and Resolution.`)
} else {
setError("")
}
Expand Down Expand Up @@ -130,8 +130,8 @@ export default function Graph({getData, options, boxProps, drawer}: GraphProps)
</Box>
</>
}
<Box display={"flex"} pt={1}>
<Typography m={"auto"} color={"red"} variant={"body2"}>{error}</Typography>
<Box display={"flex"} flexDirection={"column"} pt={1}>
<Typography m={"auto"} color={"red"} variant={"body2"} textAlign={"center"}>{error}</Typography>
</Box>
</Box>
)
Expand Down
38 changes: 26 additions & 12 deletions web_ui/frontend/components/graphs/RateGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ function RateGraphDrawer({reset, rate, resolution, duration, time, setRate, setR
</FormControl>
</Grid>
<Grid item xs={1} m={"auto"}>
<IconButton href={"https://prometheus.io/docs/prometheus/latest/querying/functions/#rate"} size={"small"}><QuestionMark/></IconButton>
<IconButton href={"https://prometheus.io/docs/prometheus/latest/querying/functions/#rate"} size={"small"} target="_blank" rel="noopener noreferrer"><QuestionMark/></IconButton>
</Grid>
</Grid>
</Grid>
Expand Down Expand Up @@ -208,7 +208,7 @@ function RateGraphDrawer({reset, rate, resolution, duration, time, setRate, setR
</FormControl>
</Grid>
<Grid item xs={1} m={"auto"}>
<IconButton href={"https://prometheus.io/docs/prometheus/latest/querying/examples/#subquery"} size={"small"}><QuestionMark/></IconButton>
<IconButton href={"https://prometheus.io/docs/prometheus/latest/querying/examples/#subquery"} size={"small"} target="_blank" rel="noopener noreferrer"><QuestionMark/></IconButton>
</Grid>
</Grid>
</Grid>
Expand All @@ -221,16 +221,15 @@ function RateGraphDrawer({reset, rate, resolution, duration, time, setRate, setR

interface RateGraphProps {
boxProps?: BoxProps;
metric: string[];
metrics: string[];
rate?: TimeDuration;
duration?: TimeDuration;
resolution?: TimeDuration;
options?: ChartOptions<"line">
datasetOptions?: Partial<ChartDataset<"line">> | Partial<ChartDataset<"line">>[];
}

export default function RateGraph({boxProps, metric, rate=new TimeDuration(3, "h"), duration=new TimeDuration(7, "d"), resolution=new TimeDuration(3, "h"), options={}, datasetOptions={}}: RateGraphProps) {

export default function RateGraph({boxProps, metrics, rate=new TimeDuration(30, "m"), duration=new TimeDuration(1, "d"), resolution=new TimeDuration(1, "m"), options={}, datasetOptions={}}: RateGraphProps) {
let default_rate = rate
let default_duration = duration
let default_resolution = resolution
Expand All @@ -242,20 +241,19 @@ export default function RateGraph({boxProps, metric, rate=new TimeDuration(3, "h
setTime(DateTime.now())
}


let [_rate, setRate] = useState(rate)
let [_duration, _setDuration] = useState(duration)
let [_resolution, setResolution] = useState(resolution)
let [_time, _setTime] = useState<DateTime>(DateTime.now().plus({ days: 1 }).set({ hour: 0, minute: 0, second: 0, millisecond: 0 }))
let [_time, _setTime] = useState<DateTime>(DateTime.now())

// Create some reasonable defaults for the graph
let setDuration = (duration: TimeDuration) => {
if(duration.value == 1){
setRate(new TimeDuration(30, "m"))
setResolution(new TimeDuration(30, "m"))
setResolution(new TimeDuration(10, "m"))
} else if(duration.value == 7){
setRate(new TimeDuration(3, "h"))
setResolution(new TimeDuration(3, "h"))
setResolution(new TimeDuration(30, "m"))
} else if(duration.value == 31){
setRate(new TimeDuration(12, "h"))
setResolution(new TimeDuration(12, "h"))
Expand All @@ -265,13 +263,24 @@ export default function RateGraph({boxProps, metric, rate=new TimeDuration(3, "h
}

let setTime = (time: DateTime) => {
_setTime(time.set({ hour: 0, minute: 0, second: 0, millisecond: 0 }))
// If it's not today, then set time to the end of that day
// If it's today, then set to date.now
//
// This helps us to get the latest data while not going over the wanted time range
// If we set the time to the future, PromQL will give you random data in the future to
// interpolate the missing ones
if (time.hasSame(DateTime.now(), "day")) {
time = DateTime.now()
} else {
time.set({hour: 23, minute: 59, second: 59, millisecond: 999})
}
_setTime(time)
}


async function getData(){
let chartData: ChartData<"line", any, any> = {
datasets: await Promise.all(metric.map(async (metric, index) => {
datasets: await Promise.all(metrics.map(async (metric, index) => {

let datasetOption: Partial<ChartDataset<"line">> = {}
if(datasetOptions instanceof Array){
Expand All @@ -284,8 +293,13 @@ export default function RateGraph({boxProps, metric, rate=new TimeDuration(3, "h
datasetOption = datasetOptions
}

let updatedTime = _time
if (updatedTime.hasSame(DateTime.now(), "day")) {
updatedTime = DateTime.now()
}

return {
data: (await query_rate({metric: `${metric}`, rate:_rate, duration:_duration, resolution:_resolution, time:_time})),
data: (await query_rate({metric, rate:_rate, duration:_duration, resolution:_resolution, time:updatedTime})),
...datasetOption
}
}))
Expand Down
Loading