Merge pull request PelicanPlatform#105 from PelicanPlatform/ui-updates

UI updates
jhiemstrawisc · Sep 6, 2023 · 6608208 · 6608208
2 parents 55d03a4 + 75f2899
commit 6608208
Show file tree

Hide file tree

Showing 23 changed files with 662 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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 (
-        <div className={styles.header} style={{display: "flex", flexDirection: "column", justifyContent:"space-between", padding:"1rem", top:0, position:"sticky", zIndex:"1", overflow: "hidden", height: "100vh"}}>
-            <div style={{display:"flex"}}>
-                <Image
-                    src={PelicanLogo}
-                    alt={"Pelican Logo"}
-                    width={32}
-                    height={32}
-                />
-            </div>
-            <div>
-                <a href={"https://github.com/PelicanPlatform"}>
+        <Box>
+            <div className={styles.header} style={{display: "flex", flexDirection: "column", justifyContent:"space-between", padding:"1rem", top:0, position:"relative", zIndex:"1", overflow: "hidden", height: "100vh"}}>
+                <div style={{display:"flex"}}>
                     <Image
-                        src={GithubIcon}
-                        alt={"Github Mark"}
+                        src={PelicanLogo}
+                        alt={"Pelican Logo"}
                         width={32}
                         height={32}
                     />
-                </a>
+                </div>
+                <div>
+                    <a href={"https://github.com/PelicanPlatform"}>
+                        <Image
+                            src={GithubIcon}
+                            alt={"Github Mark"}
+                            width={32}
+                            height={32}
+                        />
+                    </a>
+                </div>
             </div>
-        </div>
+        </Box>
+
     )
-}
+}
diff --git 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 (
         <Box display={"flex"} flexDirection={"row"}>
             <Sidebar/>
-            <Box component={"main"} pt={"75px"} display={"flex"} minHeight={"100vh"}>
+            <Box component={"main"} p={2} display={"flex"} minHeight={"100vh"} flexGrow={1}>
                 {children}
             </Box>
         </Box>

diff --git 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</>
+        <Box width={"100%"}>
+            <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"}>
+                            <RateGraph
+                                rate={"10m"}
+                                duration={"24h"}
+                                resolution={"10m"}
+                                metric={"xrootd_monitoring_packets_received"}
+                                datasetOptions={{label: "xrootd_monitoring_packets_received rate over 10m", borderColor: "#0071ff"}}
+                            />
+                        </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"}>
+                            <LineGraph
+                                metric={"xrootd_server_connection_count"}
+                                duration={"24h"}
+                                resolution={"10m"}
+                                datasetOptions={{label: "xrootd_server_connection_count", borderColor: "#0071ff"}}
+                            />
+                        </Box>
+                    </Box>
+                </Grid>
+            </Grid>
+
+        </Box>
     )
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";