From 74c6d582f787cf237ab3681e3e36b916b5043d82 Mon Sep 17 00:00:00 2001 From: Cannon Lock Date: Tue, 5 Sep 2023 17:27:02 -0500 Subject: [PATCH 1/5] Add a landing page with basic prometheus graphs --- origin_ui/src/app/(dashboard)/Sidebar.tsx | 37 ++++----- origin_ui/src/app/(dashboard)/layout.tsx | 2 +- origin_ui/src/app/(dashboard)/page.tsx | 39 +++++++++- origin_ui/src/components/graphs/LineGraph.tsx | 73 ++++++++++++++++++ origin_ui/src/components/graphs/RateGraph.tsx | 75 +++++++++++++++++++ .../src/components/graphs/prometheus.tsx | 48 ++++++++++++ origin_ui/src/package-lock.json | 27 +++++++ origin_ui/src/package.json | 2 + 8 files changed, 284 insertions(+), 19 deletions(-) create mode 100644 origin_ui/src/components/graphs/LineGraph.tsx create mode 100644 origin_ui/src/components/graphs/RateGraph.tsx create mode 100644 origin_ui/src/components/graphs/prometheus.tsx diff --git a/origin_ui/src/app/(dashboard)/Sidebar.tsx b/origin_ui/src/app/(dashboard)/Sidebar.tsx index 4fd461756..6fb2f8121 100644 --- a/origin_ui/src/app/(dashboard)/Sidebar.tsx +++ b/origin_ui/src/app/(dashboard)/Sidebar.tsx @@ -4,30 +4,33 @@ import {Poppins} from "next/font/google"; import PelicanLogo from "../../public/static/images/PelicanPlatformLogo_Icon.png" import GithubIcon from "../../public/static/images/github-mark.png" -import {Typography} from "@mui/material"; +import {Typography, Box} from "@mui/material"; export const Sidebar = () => { return ( -
-
- {"Pelican -
-
- + +
+
{"Github - +
+
+ + {"Github + +
-
+ + ) -} \ No newline at end of file +} diff --git a/origin_ui/src/app/(dashboard)/layout.tsx b/origin_ui/src/app/(dashboard)/layout.tsx index a74954fad..87258ea8b 100644 --- a/origin_ui/src/app/(dashboard)/layout.tsx +++ b/origin_ui/src/app/(dashboard)/layout.tsx @@ -16,7 +16,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/origin_ui/src/app/(dashboard)/page.tsx b/origin_ui/src/app/(dashboard)/page.tsx index bc626bbeb..a01c41a6c 100644 --- a/origin_ui/src/app/(dashboard)/page.tsx +++ b/origin_ui/src/app/(dashboard)/page.tsx @@ -1,8 +1,45 @@ +import RateGraph from "@/components/graphs/RateGraph"; +import LineGraph from "@/components/graphs/LineGraph"; + +import {Box, Grid} from "@mui/material"; import Image from 'next/image' import styles from './page.module.css' + export default function Home() { + + + return ( - <>Test + + + + + + + + + + + + + + + + + + + ) } diff --git a/origin_ui/src/components/graphs/LineGraph.tsx b/origin_ui/src/components/graphs/LineGraph.tsx new file mode 100644 index 000000000..11393f194 --- /dev/null +++ b/origin_ui/src/components/graphs/LineGraph.tsx @@ -0,0 +1,73 @@ +"use client" + +import {useEffect, useState} from "react"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + ChartOptions, + ChartDataset, +} from 'chart.js'; + +import {Line} from "react-chartjs-2"; +import {Skeleton} from "@mui/material"; + +import {query_basic, DataPoint} from "@/components/graphs/prometheus"; +import {ChartData} from "chart.js"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + +interface LineGraphProps { + metric: string; + duration?: string; + resolution?: string; + options?: ChartOptions<"line"> + datasetOptions?: Partial> +} + +export default function LineGraph({metric, duration, resolution, options, datasetOptions}: LineGraphProps) { + + let [data, setData] = useState([]) + let [_duration, setDuration] = useState(duration ? duration : "24h") + let [_resolution, setResolution] = useState(resolution ? resolution : "1h") + + let chartData: ChartData<"line", any, any> = { + datasets: [{ + "data": data, + ...datasetOptions + }] + } + + useEffect(() => { + query_basic(metric, _duration, _resolution) + .then((response) => { + setData(response) + }) + }, []) + + if(data.length === 0){ + return + } + + return ( + + + ) + +} diff --git a/origin_ui/src/components/graphs/RateGraph.tsx b/origin_ui/src/components/graphs/RateGraph.tsx new file mode 100644 index 000000000..5e5ba92f9 --- /dev/null +++ b/origin_ui/src/components/graphs/RateGraph.tsx @@ -0,0 +1,75 @@ +"use client" + +import {useEffect, useState} from "react"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + ChartOptions, + ChartDataset, +} from 'chart.js'; + +import {Line} from "react-chartjs-2"; +import {Skeleton} from "@mui/material"; + +import {query_rate, DataPoint} from "@/components/graphs/prometheus"; +import {ChartData} from "chart.js"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + +interface RateGraphProps { + metric: string; + rate?: string; + duration?: string; + resolution?: string; + options?: ChartOptions<"line"> + datasetOptions?: Partial> +} + +export default function RateGraph({metric, rate, duration, resolution, options, datasetOptions}: RateGraphProps) { + + let [data, setData] = useState([]) + let [_rate, setRate] = useState(rate ? rate : "1h") + let [_duration, setDuration] = useState(duration ? duration : "24h") + let [_resolution, setResolution] = useState(resolution ? resolution : "1h") + + let chartData: ChartData<"line", any, any> = { + datasets: [{ + "data": data, + ...datasetOptions + }] + } + + useEffect(() => { + query_rate(metric, _rate, _duration, _resolution) + .then((response) => { + setData(response) + }) + }, []) + + if(data.length === 0){ + return + } + + return ( + + + ) + +} diff --git a/origin_ui/src/components/graphs/prometheus.tsx b/origin_ui/src/components/graphs/prometheus.tsx new file mode 100644 index 000000000..c1b08fae3 --- /dev/null +++ b/origin_ui/src/components/graphs/prometheus.tsx @@ -0,0 +1,48 @@ +"use client" + +import {ChartData} from "chart.js"; + +const USEFUL_METRICS = ["xrootd_server_connection_count", "xrootd_monitoring_packets_received"] + +export interface DataPoint { + x: any; + y: any; +} + +export async function query_raw(query: string): Promise { + let response = await fetch(`/api/v1.0/prometheus/query?query=${query}`) + + if (response.status !== 200) { + throw new Error(`Prometheus query returned status ${response.status}`) + } + + let json = await response.json() + + if (json.status !== "success") { + throw new Error(`Prometheus query returned status ${json.status}`) + } + + // This will return the list of time and value tuples [1693918800,"0"],[1693919100,"0"]... + let label_data_tuples = json.data.result[0].values + let data: DataPoint[] = [] + label_data_tuples.forEach((tuple: any) => { + + // Decompose the epoch time to a Date object + let d = new Date(0) + d.setUTCSeconds(tuple[0]) + + data.push({x: d.toLocaleTimeString(), y: tuple[1]}) + }) + + return data +} + +export async function query_basic(metric: string, duration: string, resolution: string): Promise { + let query = `${metric}[${duration}:${resolution}]` + return query_raw(query) +} + +export async function query_rate(metric: string, rate: string, duration: string, resolution: string): Promise { + let query = `rate(${metric}[${rate}])[${duration}:${resolution}]` + return query_raw(query) +} diff --git a/origin_ui/src/package-lock.json b/origin_ui/src/package-lock.json index b8c171ea1..c0294142c 100644 --- a/origin_ui/src/package-lock.json +++ b/origin_ui/src/package-lock.json @@ -15,10 +15,12 @@ "@types/node": "20.4.5", "@types/react": "18.2.16", "@types/react-dom": "18.2.7", + "chart.js": "^4.4.0", "eslint": "8.45.0", "eslint-config-next": "13.4.12", "next": "^13.4.13", "react": "18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "18.2.0", "typescript": "5.1.6" } @@ -385,6 +387,11 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==" }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@mui/base": { "version": "5.0.0-beta.11", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.11.tgz", @@ -1358,6 +1365,17 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chart.js": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz", + "integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=7" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -3490,6 +3508,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/origin_ui/src/package.json b/origin_ui/src/package.json index 3583cc8ce..5c1b9d13b 100644 --- a/origin_ui/src/package.json +++ b/origin_ui/src/package.json @@ -18,10 +18,12 @@ "@types/node": "20.4.5", "@types/react": "18.2.16", "@types/react-dom": "18.2.7", + "chart.js": "^4.4.0", "eslint": "8.45.0", "eslint-config-next": "13.4.12", "next": "^13.4.13", "react": "18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "18.2.0", "typescript": "5.1.6" } From 1bbada68b4e4017f3d0913224c7c6dffbf841c48 Mon Sep 17 00:00:00 2001 From: Cannon Lock Date: Tue, 5 Sep 2023 17:28:00 -0500 Subject: [PATCH 2/5] Redirect Origin UI root to /view and new users to /view/init --- origin_ui/origin.go | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/origin_ui/origin.go b/origin_ui/origin.go index f46d664bc..240b41fd6 100644 --- a/origin_ui/origin.go +++ b/origin_ui/origin.go @@ -118,11 +118,11 @@ func WaitUntilLogin() error { fmt.Printf("\033[A\033[A\033[A\033[A") fmt.Printf("\033[2K\n") fmt.Printf("\033[2K\rPelican admin interface is not initialized\n\033[2KTo initialize, "+ - "login at \033[1;34mhttps://%v:%v\033[0m with the following code:\n", + "login at \033[1;34mhttps://%v:%v/view/initialization/code/\033[0m with the following code:\n", hostname, webPort) fmt.Printf("\033[2K\r\033[1;34m%v\033[0m\n", *currentCode.Load()) } else { - fmt.Printf("Pelican admin interface is not initialized\n To initialize, login at https://%v:%v with the following code:\n", hostname, webPort) + fmt.Printf("Pelican admin interface is not initialized\n To initialize, login at https://%v:%v/view/initialization/code/ with the following code:\n", hostname, webPort) fmt.Println(*currentCode.Load()) } start := time.Now() @@ -412,6 +412,11 @@ func ConfigureOriginUI(router *gin.Engine) error { ) }) + // Redirect root to /view for now + router.GET("/", func(c *gin.Context) { + c.Redirect(http.StatusFound, "/view/") + }) + go periodicReload() return nil From 582bb69ee15eb1458f88a7cf8ab8e087b56f5397 Mon Sep 17 00:00:00 2001 From: Cannon Lock Date: Tue, 5 Sep 2023 17:33:13 -0500 Subject: [PATCH 3/5] Add Copyright information to the web elements --- origin_ui/src/Dockerfile | 16 ++++++++++++++++ origin_ui/src/app/(dashboard)/Sidebar.tsx | 18 ++++++++++++++++++ origin_ui/src/app/(dashboard)/layout.tsx | 18 ++++++++++++++++++ origin_ui/src/app/(dashboard)/page.tsx | 18 ++++++++++++++++++ origin_ui/src/app/globals.css | 18 ++++++++++++++++++ .../src/app/initialization/code/CodeInput.tsx | 18 ++++++++++++++++++ .../app/initialization/code/LoadingButton.tsx | 18 ++++++++++++++++++ origin_ui/src/app/initialization/code/page.tsx | 18 ++++++++++++++++++ origin_ui/src/app/initialization/layout.tsx | 18 ++++++++++++++++++ .../initialization/password/PasswordInput.tsx | 18 ++++++++++++++++++ .../src/app/initialization/password/page.tsx | 18 ++++++++++++++++++ origin_ui/src/app/layout.tsx | 18 ++++++++++++++++++ origin_ui/src/app/page.module.css | 18 ++++++++++++++++++ origin_ui/src/components/graphs/LineGraph.tsx | 18 ++++++++++++++++++ origin_ui/src/components/graphs/RateGraph.tsx | 18 ++++++++++++++++++ origin_ui/src/components/graphs/prometheus.tsx | 18 ++++++++++++++++++ origin_ui/src/components/layout/Header.tsx | 18 ++++++++++++++++++ origin_ui/src/components/layout/Sidebar.tsx | 0 origin_ui/src/components/progress-pager.tsx | 18 ++++++++++++++++++ origin_ui/src/public/theme.tsx | 18 ++++++++++++++++++ 20 files changed, 340 insertions(+) delete mode 100644 origin_ui/src/components/layout/Sidebar.tsx diff --git a/origin_ui/src/Dockerfile b/origin_ui/src/Dockerfile index f00818854..1eac7d1e8 100644 --- a/origin_ui/src/Dockerfile +++ b/origin_ui/src/Dockerfile @@ -1,3 +1,19 @@ +# +# Copyright (C) 2023, Pelican Project, Morgridge Institute for Research +# +# Licensed under the Apache License, Version 2.0 (the "License"); you +# may not use this file except in compliance with the License. You may +# obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +# + FROM node:18-alpine WORKDIR /webapp diff --git a/origin_ui/src/app/(dashboard)/Sidebar.tsx b/origin_ui/src/app/(dashboard)/Sidebar.tsx index 6fb2f8121..9df7a5779 100644 --- a/origin_ui/src/app/(dashboard)/Sidebar.tsx +++ b/origin_ui/src/app/(dashboard)/Sidebar.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import Image from 'next/image' import styles from "../../app/page.module.css" import {Poppins} from "next/font/google"; diff --git a/origin_ui/src/app/(dashboard)/layout.tsx b/origin_ui/src/app/(dashboard)/layout.tsx index 87258ea8b..86d0ca656 100644 --- a/origin_ui/src/app/(dashboard)/layout.tsx +++ b/origin_ui/src/app/(dashboard)/layout.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import {Box} from "@mui/material"; import {Header} from "@/components/layout/Header"; diff --git a/origin_ui/src/app/(dashboard)/page.tsx b/origin_ui/src/app/(dashboard)/page.tsx index a01c41a6c..0ecb27e68 100644 --- a/origin_ui/src/app/(dashboard)/page.tsx +++ b/origin_ui/src/app/(dashboard)/page.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import RateGraph from "@/components/graphs/RateGraph"; import LineGraph from "@/components/graphs/LineGraph"; diff --git a/origin_ui/src/app/globals.css b/origin_ui/src/app/globals.css index e9349a054..25285967e 100644 --- a/origin_ui/src/app/globals.css +++ b/origin_ui/src/app/globals.css @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + :root { --max-width: 1100px; --border-radius: 12px; diff --git a/origin_ui/src/app/initialization/code/CodeInput.tsx b/origin_ui/src/app/initialization/code/CodeInput.tsx index ffaacde76..77702b78c 100644 --- a/origin_ui/src/app/initialization/code/CodeInput.tsx +++ b/origin_ui/src/app/initialization/code/CodeInput.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import {ChangeEvent, ClipboardEvent, KeyboardEvent, useRef} from "react"; import {Grid, TextField} from "@mui/material"; import {AppProps} from "next/app"; diff --git a/origin_ui/src/app/initialization/code/LoadingButton.tsx b/origin_ui/src/app/initialization/code/LoadingButton.tsx index 2b394cbc9..31449ab31 100644 --- a/origin_ui/src/app/initialization/code/LoadingButton.tsx +++ b/origin_ui/src/app/initialization/code/LoadingButton.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + "use client" import {useState} from "react"; diff --git a/origin_ui/src/app/initialization/code/page.tsx b/origin_ui/src/app/initialization/code/page.tsx index a95b91970..84df58489 100644 --- a/origin_ui/src/app/initialization/code/page.tsx +++ b/origin_ui/src/app/initialization/code/page.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + "use client" import {Box, Typography} from "@mui/material"; diff --git a/origin_ui/src/app/initialization/layout.tsx b/origin_ui/src/app/initialization/layout.tsx index 0fd0e7875..a1e786709 100644 --- a/origin_ui/src/app/initialization/layout.tsx +++ b/origin_ui/src/app/initialization/layout.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import {Box} from "@mui/material"; import {Header} from "@/components/layout/Header"; diff --git a/origin_ui/src/app/initialization/password/PasswordInput.tsx b/origin_ui/src/app/initialization/password/PasswordInput.tsx index 48c047df7..6c2d8e834 100644 --- a/origin_ui/src/app/initialization/password/PasswordInput.tsx +++ b/origin_ui/src/app/initialization/password/PasswordInput.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import * as React from 'react'; import Box from '@mui/material/Box'; import IconButton from '@mui/material/IconButton'; diff --git a/origin_ui/src/app/initialization/password/page.tsx b/origin_ui/src/app/initialization/password/page.tsx index 720223077..33a87e777 100644 --- a/origin_ui/src/app/initialization/password/page.tsx +++ b/origin_ui/src/app/initialization/password/page.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + "use client" import {Box, Typography} from "@mui/material"; diff --git a/origin_ui/src/app/layout.tsx b/origin_ui/src/app/layout.tsx index 238ec549f..019b6d265 100644 --- a/origin_ui/src/app/layout.tsx +++ b/origin_ui/src/app/layout.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import './globals.css' import {ThemeProviderClient} from "@/public/theme"; diff --git a/origin_ui/src/app/page.module.css b/origin_ui/src/app/page.module.css index ebee585cd..4cd2210b3 100644 --- a/origin_ui/src/app/page.module.css +++ b/origin_ui/src/app/page.module.css @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + .main { display: flex; flex-direction: column; diff --git a/origin_ui/src/components/graphs/LineGraph.tsx b/origin_ui/src/components/graphs/LineGraph.tsx index 11393f194..ad82e9d1f 100644 --- a/origin_ui/src/components/graphs/LineGraph.tsx +++ b/origin_ui/src/components/graphs/LineGraph.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + "use client" import {useEffect, useState} from "react"; diff --git a/origin_ui/src/components/graphs/RateGraph.tsx b/origin_ui/src/components/graphs/RateGraph.tsx index 5e5ba92f9..e9589199e 100644 --- a/origin_ui/src/components/graphs/RateGraph.tsx +++ b/origin_ui/src/components/graphs/RateGraph.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + "use client" import {useEffect, useState} from "react"; diff --git a/origin_ui/src/components/graphs/prometheus.tsx b/origin_ui/src/components/graphs/prometheus.tsx index c1b08fae3..9121fdce0 100644 --- a/origin_ui/src/components/graphs/prometheus.tsx +++ b/origin_ui/src/components/graphs/prometheus.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + "use client" import {ChartData} from "chart.js"; diff --git a/origin_ui/src/components/layout/Header.tsx b/origin_ui/src/components/layout/Header.tsx index 444432a94..da0a561fb 100644 --- a/origin_ui/src/components/layout/Header.tsx +++ b/origin_ui/src/components/layout/Header.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + 'use client' import Image from 'next/image' diff --git a/origin_ui/src/components/layout/Sidebar.tsx b/origin_ui/src/components/layout/Sidebar.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/origin_ui/src/components/progress-pager.tsx b/origin_ui/src/components/progress-pager.tsx index 47c78eb50..a80fff889 100644 --- a/origin_ui/src/components/progress-pager.tsx +++ b/origin_ui/src/components/progress-pager.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + import {Box, Grid, Typography} from "@mui/material"; interface ProgressPagerProps { diff --git a/origin_ui/src/public/theme.tsx b/origin_ui/src/public/theme.tsx index 33d507128..f9c00e24f 100644 --- a/origin_ui/src/public/theme.tsx +++ b/origin_ui/src/public/theme.tsx @@ -1,3 +1,21 @@ +/*************************************************************** + * + * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research + * + * Licensed under the Apache License, Version 2.0 (the "License"); you + * may not use this file except in compliance with the License. You may + * obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + ***************************************************************/ + 'use client' import {createTheme, responsiveFontSizes, ThemeProvider} from "@mui/material"; From 4b745e8064d8caeae2ba41e187f4d56b9e7ec845 Mon Sep 17 00:00:00 2001 From: Cannon Lock Date: Tue, 5 Sep 2023 17:48:31 -0500 Subject: [PATCH 4/5] Remove duplicate route for root --- origin_ui/origin.go | 8 -------- 1 file changed, 8 deletions(-) diff --git a/origin_ui/origin.go b/origin_ui/origin.go index 240b41fd6..1a7d75d47 100644 --- a/origin_ui/origin.go +++ b/origin_ui/origin.go @@ -403,14 +403,6 @@ func ConfigureOriginUI(router *gin.Engine) error { file, ) }) - router.GET("/", func(ctx *gin.Context) { - file, _ := webAssets.ReadFile("assets/index.html") - ctx.Data( - http.StatusOK, - "text/html", - file, - ) - }) // Redirect root to /view for now router.GET("/", func(c *gin.Context) { From 75f2899cda6504ccd2da180d3026eabcb7b6b042 Mon Sep 17 00:00:00 2001 From: Cannon Lock Date: Tue, 5 Sep 2023 18:41:10 -0500 Subject: [PATCH 5/5] Helpful prompt if Prometheus isn't serving data yet --- origin_ui/src/components/graphs/LineGraph.tsx | 14 +++++++++++++- origin_ui/src/components/graphs/RateGraph.tsx | 17 ++++++++++++++++- origin_ui/src/components/graphs/prometheus.tsx | 5 +++++ 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/origin_ui/src/components/graphs/LineGraph.tsx b/origin_ui/src/components/graphs/LineGraph.tsx index ad82e9d1f..9a7c5288e 100644 --- a/origin_ui/src/components/graphs/LineGraph.tsx +++ b/origin_ui/src/components/graphs/LineGraph.tsx @@ -33,7 +33,7 @@ import { } from 'chart.js'; import {Line} from "react-chartjs-2"; -import {Skeleton} from "@mui/material"; +import {Skeleton, Box, Typography} from "@mui/material"; import {query_basic, DataPoint} from "@/components/graphs/prometheus"; import {ChartData} from "chart.js"; @@ -59,6 +59,7 @@ interface LineGraphProps { export default function LineGraph({metric, duration, resolution, options, datasetOptions}: LineGraphProps) { let [data, setData] = useState([]) + let [error, setError] = useState("") let [_duration, setDuration] = useState(duration ? duration : "24h") let [_resolution, setResolution] = useState(resolution ? resolution : "1h") @@ -73,9 +74,20 @@ export default function LineGraph({metric, duration, resolution, options, datase query_basic(metric, _duration, _resolution) .then((response) => { setData(response) + if(response.length === 0){ + setError("Response was empty, please allow ~10 minutes for initial data to be collected.") + } }) }, []) + if(error){ + return ( + + {error} + + ) + } + if(data.length === 0){ return } diff --git a/origin_ui/src/components/graphs/RateGraph.tsx b/origin_ui/src/components/graphs/RateGraph.tsx index e9589199e..a2578d1d1 100644 --- a/origin_ui/src/components/graphs/RateGraph.tsx +++ b/origin_ui/src/components/graphs/RateGraph.tsx @@ -33,10 +33,12 @@ import { } from 'chart.js'; import {Line} from "react-chartjs-2"; -import {Skeleton} from "@mui/material"; +import {Box, Skeleton, Typography} from "@mui/material"; import {query_rate, DataPoint} from "@/components/graphs/prometheus"; import {ChartData} from "chart.js"; +import {Simulate} from "react-dom/test-utils"; +import error = Simulate.error; ChartJS.register( CategoryScale, @@ -60,6 +62,7 @@ interface RateGraphProps { export default function RateGraph({metric, rate, duration, resolution, options, datasetOptions}: RateGraphProps) { let [data, setData] = useState([]) + let [error, setError] = useState("") let [_rate, setRate] = useState(rate ? rate : "1h") let [_duration, setDuration] = useState(duration ? duration : "24h") let [_resolution, setResolution] = useState(resolution ? resolution : "1h") @@ -75,9 +78,21 @@ export default function RateGraph({metric, rate, duration, resolution, options, query_rate(metric, _rate, _duration, _resolution) .then((response) => { setData(response) + if(response.length === 0){ + setError("Response was empty, please allow some time for data to be collected.") + } }) }, []) + + if(error){ + return ( + + {error} + + ) + } + if(data.length === 0){ return } diff --git a/origin_ui/src/components/graphs/prometheus.tsx b/origin_ui/src/components/graphs/prometheus.tsx index 9121fdce0..ba2420d0f 100644 --- a/origin_ui/src/components/graphs/prometheus.tsx +++ b/origin_ui/src/components/graphs/prometheus.tsx @@ -40,6 +40,11 @@ export async function query_raw(query: string): Promise { throw new Error(`Prometheus query returned status ${json.status}`) } + + if(json.data.result.length == 0){ + return [] + } + // This will return the list of time and value tuples [1693918800,"0"],[1693919100,"0"]... let label_data_tuples = json.data.result[0].values let data: DataPoint[] = []