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

UI changes #106

Merged
merged 3 commits into from
Sep 7, 2023
Merged

UI changes #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9b6a473
Graph Feedback Update
CannonLock Sep 6, 2023
52878d2
Redirect user if not auth'd
CannonLock Sep 6, 2023
5e0adf9
UI updates
CannonLock Sep 6, 2023
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
16 changes: 14 additions & 2 deletions origin_ui/src/app/(dashboard)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,25 +33,37 @@ export default function Home() {
<Grid container spacing={2}>
<Grid item xs={12} lg={6}>
<Box sx={{backgroundColor: "#F6F6F6", borderRadius: "1rem"}} p={2}>
<Box display={"flex"} minHeight={"200px"} maxHeight={"400px"} m={"auto"} flexGrow={1} justifyContent={"center"}>
<Box minHeight={"200px"}>
<RateGraph
rate={"10m"}
duration={"24h"}
resolution={"10m"}
metric={"xrootd_monitoring_packets_received"}
datasetOptions={{label: "xrootd_monitoring_packets_received rate over 10m", borderColor: "#0071ff"}}
boxProps={{
maxHeight:"400px",
flexGrow:1,
justifyContent:"center",
display:"flex"
}}
/>
</Box>
</Box>
</Grid>
<Grid item xs={12} lg={6}>
<Box sx={{backgroundColor: "#F6F6F6", borderRadius: "1rem"}} p={2}>
<Box display={"flex"} minHeight={"200px"} maxHeight={"400px"} flexGrow={1} justifyContent={"center"}>
<Box minHeight={"200px"}>
<LineGraph
metric={"xrootd_server_connection_count"}
duration={"24h"}
resolution={"10m"}
datasetOptions={{label: "xrootd_server_connection_count", borderColor: "#0071ff"}}
boxProps={{
maxHeight:"400px",
flexGrow:1,
justifyContent:"center",
display:"flex"
}}
/>
</Box>
</Box>
Expand Down
51 changes: 34 additions & 17 deletions origin_ui/src/components/graphs/LineGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ import {
} from 'chart.js';

import {Line} from "react-chartjs-2";
import {Skeleton, Box, Typography} from "@mui/material";
import {Skeleton, Box, BoxProps, Typography} from "@mui/material";


import {query_basic, DataPoint} from "@/components/graphs/prometheus";
import {ChartData} from "chart.js";
Expand All @@ -49,16 +50,18 @@ ChartJS.register(
);

interface LineGraphProps {
boxProps?: BoxProps;
metric: string;
duration?: string;
resolution?: string;
options?: ChartOptions<"line">
datasetOptions?: Partial<ChartDataset<"line">>
}

export default function LineGraph({metric, duration, resolution, options, datasetOptions}: LineGraphProps) {
export default function LineGraph({ boxProps, metric, duration, resolution, options, datasetOptions}: LineGraphProps) {

let [data, setData] = useState<DataPoint[]>([])
let [loading, setLoading] = useState<boolean>(true)
let [error, setError] = useState<string>("")
let [_duration, setDuration] = useState(duration ? duration : "24h")
let [_resolution, setResolution] = useState(resolution ? resolution : "1h")
Expand All @@ -70,34 +73,48 @@ export default function LineGraph({metric, duration, resolution, options, datase
}]
}

useEffect(() => {
async function _setData(){
query_basic(metric, _duration, _resolution)
.then((response) => {
setData(response)
setLoading(false)
if(response.length === 0){
setError("Response was empty, please allow ~10 minutes for initial data to be collected.")
let date = new Date(Date.now()).toLocaleTimeString()
setError(`No data returned by database as of ${date}; plot will auto-refresh`)
} else {
setError("")
}
})
}

useEffect(() => {

// Do the initial data fetch
_setData()

// Refetch the data every 1 minute
const interval = setInterval(() => _setData(), 60000);
return () => clearInterval(interval);

}, [])

if(error){
return (
<Box>
<Typography variant={"h6"}>{error}</Typography>
</Box>
)
}

if(data.length === 0){
if(loading){
return <Skeleton sx={{borderRadius: "1"}} variant={"rectangular"} width={"100%"} height={"100%"} />
}

return (
<Line
data={chartData}
options={options}
>
</Line>
<Box>
<Box {...boxProps}>
<Line
data={chartData}
options={options}
/>
</Box>
<Box display={"flex"}>
<Typography m={"auto"} color={"red"} variant={"body2"}>{error}</Typography>
</Box>
</Box>
)

}
51 changes: 34 additions & 17 deletions origin_ui/src/components/graphs/RateGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import {
ChartDataset,
} from 'chart.js';

import {BoxProps} from "@mui/material";

import {Line} from "react-chartjs-2";
import {Box, Skeleton, Typography} from "@mui/material";

Expand All @@ -51,6 +53,7 @@ ChartJS.register(
);

interface RateGraphProps {
boxProps?: BoxProps;
metric: string;
rate?: string;
duration?: string;
Expand All @@ -59,9 +62,10 @@ interface RateGraphProps {
datasetOptions?: Partial<ChartDataset<"line">>
}

export default function RateGraph({metric, rate, duration, resolution, options, datasetOptions}: RateGraphProps) {
export default function RateGraph({boxProps, metric, rate, duration, resolution, options, datasetOptions}: RateGraphProps) {

let [data, setData] = useState<DataPoint[]>([])
let [loading, setLoading] = useState<boolean>(true)
let [error, setError] = useState<string>("")
let [_rate, setRate] = useState(rate ? rate : "1h")
let [_duration, setDuration] = useState(duration ? duration : "24h")
Expand All @@ -74,35 +78,48 @@ export default function RateGraph({metric, rate, duration, resolution, options,
}]
}

useEffect(() => {
function _setData(){
query_rate(metric, _rate, _duration, _resolution)
.then((response) => {
setData(response)
setLoading(false)
if(response.length === 0){
setError("Response was empty, please allow some time for data to be collected.")
let date = new Date(Date.now()).toLocaleTimeString()
setError(`No data returned by database as of ${date}; plot will auto-refresh`)
} else {
setError("")
}
})
}, [])
}

useEffect(() => {

if(error){
return (
<Box>
<Typography variant={"h6"}>{error}</Typography>
</Box>
)
}
// Do the initial data fetch
_setData()

if(data.length === 0){
// Refetch the data every minute
const interval = setInterval(() => _setData(), 60000);
return () => clearInterval(interval);

}, [])


if(loading){
return <Skeleton sx={{borderRadius: "1"}} variant={"rectangular"} width={"100%"} height={"100%"} />
}

return (
<Line
data={chartData}
options={options}
>
</Line>
<Box>
<Box m={"auto"} {...boxProps}>
<Line
data={chartData}
options={options}
/>
</Box>
<Box display={"flex"}>
<Typography m={"auto"} color={"red"} variant={"body2"}>{error}</Typography>
</Box>
</Box>
)

}
8 changes: 8 additions & 0 deletions origin_ui/src/components/graphs/prometheus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@

import {ChartData} from "chart.js";

import {isLoggedIn} from "@/helpers/login";

const USEFUL_METRICS = ["xrootd_server_connection_count", "xrootd_monitoring_packets_received"]

export interface DataPoint {
Expand All @@ -28,6 +30,12 @@ export interface DataPoint {
}

export async function query_raw(query: string): Promise<DataPoint[]> {

//Check if the user is logged in
if(!(await isLoggedIn())){
window.location.replace("/view/initialization/code/")
}

let response = await fetch(`/api/v1.0/prometheus/query?query=${query}`)

if (response.status !== 200) {
Expand Down
8 changes: 8 additions & 0 deletions origin_ui/src/helpers/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export async function isLoggedIn() {
let response = await fetch("/api/v1.0/origin-ui/whoami")
if(!response.ok){
return false
}
let json = await response.json()
return json['authenticated']
}
Loading