github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/app/origin/page.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  "use client"
    20  
    21  import {Box, Grid, Typography} from "@mui/material";
    22  
    23  import RateGraph from "@/components/graphs/RateGraph";
    24  import StatusBox from "@/components/StatusBox";
    25  import {DataExportTable} from "@/components/DataExportTable";
    26  import {TimeDuration} from "@/components/graphs/prometheus";
    27  import FederationOverview from "@/components/FederationOverview";
    28  
    29  export default function Home() {
    30  
    31      return (
    32          <Box width={"100%"}>
    33              <Grid container spacing={2}>
    34                  <Grid item xs={12} lg={4}>
    35                      <Typography variant="h4">Status</Typography>
    36                      <StatusBox/>
    37                  </Grid>
    38                  <Grid item xs={12} lg={8}>
    39                      <Box sx={{backgroundColor: "#F6F6F6", borderRadius: "1rem"}} p={2}>
    40                          <Box minHeight={"200px"}>
    41                              <RateGraph
    42                                  rate={TimeDuration.fromString("3h")}
    43                                  duration={TimeDuration.fromString("7d")}
    44                                  resolution={TimeDuration.fromString("3h")}
    45                                  metric={['xrootd_server_bytes{direction="rx"}', 'xrootd_server_bytes{direction="rx"}']}
    46                                  boxProps={{
    47                                      maxHeight:"400px",
    48                                      flexGrow:1,
    49                                      justifyContent:"center",
    50                                      display:"flex"
    51                                  }}
    52                                  options={{
    53                                      scales: {
    54                                          x: {
    55                                              type: 'time',
    56                                              time: {
    57                                                  round: 'second',
    58                                              }
    59                                          }
    60                                      },
    61                                      plugins: {
    62                                          zoom: {
    63                                              zoom: {
    64                                                  drag: {
    65                                                      enabled: true,
    66                                                  },
    67                                                  mode: 'x',
    68                                                  // TODO - Implement smart update on zoom: onZoom: (chart) => console.log(chart)
    69                                              },
    70                                          },
    71                                      },
    72                                  }}
    73                                  datasetOptions={[
    74                                      {label: "xrootd_server_bytes{direction=\"rx\"}", borderColor: "#0071ff"},
    75                                      {label: "xrootd_server_bytes{direction=\"tx\"}", borderColor: "#54ff80"}
    76                                  ]}
    77                              />
    78                          </Box>
    79                      </Box>
    80                  </Grid>
    81                  <Grid item xs={12} lg={4}>
    82                      <Typography variant={"h4"} component={"h2"} mb={2}>Data Exports</Typography>
    83                      <Box sx={{backgroundColor: "#F6F6F6", borderRadius: "1rem", overflow: "hidden"}}>
    84                          <DataExportTable/>
    85                      </Box>
    86                  </Grid>
    87                  <Grid item xs={12} lg={4}>
    88                      <FederationOverview/>
    89                  </Grid>
    90              </Grid>
    91  
    92          </Box>
    93      )
    94  }