diff --git a/origin_ui/origin.go b/origin_ui/origin.go index f46d664bc..1a7d75d47 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() @@ -403,13 +403,10 @@ 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) { + c.Redirect(http.StatusFound, "/view/") }) go periodicReload() 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 4fd461756..9df7a5779 100644 --- a/origin_ui/src/app/(dashboard)/Sidebar.tsx +++ b/origin_ui/src/app/(dashboard)/Sidebar.tsx @@ -1,33 +1,54 @@ +/*************************************************************** + * + * 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"; 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..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"; @@ -16,7 +34,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..0ecb27e68 100644 --- a/origin_ui/src/app/(dashboard)/page.tsx +++ b/origin_ui/src/app/(dashboard)/page.tsx @@ -1,8 +1,63 @@ +/*************************************************************** + * + * 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"; + +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/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 new file mode 100644 index 000000000..9a7c5288e --- /dev/null +++ b/origin_ui/src/components/graphs/LineGraph.tsx @@ -0,0 +1,103 @@ +/*************************************************************** + * + * 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"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + ChartOptions, + ChartDataset, +} from 'chart.js'; + +import {Line} from "react-chartjs-2"; +import {Skeleton, Box, Typography} 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 [error, setError] = 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(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 + } + + 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..a2578d1d1 --- /dev/null +++ b/origin_ui/src/components/graphs/RateGraph.tsx @@ -0,0 +1,108 @@ +/*************************************************************** + * + * 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"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + ChartOptions, + ChartDataset, +} from 'chart.js'; + +import {Line} from "react-chartjs-2"; +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, + 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 [error, setError] = 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(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 + } + + 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..ba2420d0f --- /dev/null +++ b/origin_ui/src/components/graphs/prometheus.tsx @@ -0,0 +1,71 @@ +/*************************************************************** + * + * 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"; + +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}`) + } + + + 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[] = [] + 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/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/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" } 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";