Merge remote-tracking branch 'origin/main' into medhavi

ceph · Aug 22, 2023 · 38aa1f9 · 38aa1f9
2 parents 9612121 + f13de77
commit 38aa1f9
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 23 deletions.
diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*  /index.html  200
diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
@@ -2,7 +2,11 @@ import MuiLink from "@mui/material/Link";
 
 export default function Link(props) {
   return (
-    <MuiLink href={props.to} target="_blank">
+    <MuiLink
+      href={props.to}
+      target="_blank"
+      sx={props.sx}
+    >
       {props.children}
     </MuiLink>
   );

diff --git a/src/lib/paddles.ts b/src/lib/paddles.ts
@@ -4,8 +4,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import type { GetURLParams, Run, Job } from "./paddles.d";
 
 const PADDLES_SERVER =
-  import.meta.env.REACT_APP_PADDLES_SERVER ||
-  "https://paddles.front.sepia.ceph.com";
+  import.meta.env.VITE_PADDLES_SERVER || "https://paddles.front.sepia.ceph.com";
 
 function getURL(endpoint: string, params?: GetURLParams) {
   // Because paddles' API is clunky, we have to do extra work. If it were

diff --git a/src/pages/Job/index.jsx b/src/pages/Job/index.jsx
@@ -11,6 +11,7 @@ import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import formatDuration from "date-fns/formatDuration";
+import { isValid, parse } from "date-fns";
 import Editor from "react-simple-code-editor";
 import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-yaml";
@@ -43,6 +44,11 @@ function StatusIcon({ status }) {
 }
 
 function timeSince(date) {
+  const parsedDate = parse(date, "yyyy-MM-dd HH:mm:ss", new Date());
+  if (!isValid(parsedDate)) {
+    return 'N/A';
+  }
+
   let minute = 60;
   let hour   = minute * 60;
   let day    = hour   * 24;
@@ -93,9 +99,16 @@ function JobHeader({ query }) {
       <Grid item xs={4}>
         <Typography>
           Nodes:&nbsp;
-          {Object.keys(query.data.targets || []).map((item) => {
-            return <Link to={`/nodes/${item}`}>{item.split(".")[0]}</Link>;
-          })}
+          {Object.keys(query.data.targets || []).map((item) => (
+            <span key={item}>
+              <Link
+                to={`/nodes/${item}`}
+              >
+                {item.split(".")[0]}
+              </Link>
+              &nbsp;
+            </span>
+          ))}
         </Typography>
         <Typography>
           OS: {query.data.os_type} {query.data.os_version}

diff --git a/src/pages/Run/index.tsx b/src/pages/Run/index.tsx
@@ -1,11 +1,11 @@
+import { PropsWithChildren } from 'react'
 import { useQueryParams, StringParam, NumberParam } from "use-query-params";
-import { styled, useTheme } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 import { useParams } from "react-router-dom";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import { format } from "date-fns";
-import SourceBranch from "mdi-material-ui/SourceBranch";
 import { Helmet } from "react-helmet";
 
 import type { Run, RunParams } from "../../lib/paddles.d";
@@ -28,8 +28,17 @@ const Root = styled("div")(() => ({
   },
 }));
 
+type FilterLinkProps = {
+  to: string
+}
+
+const FilterLink = (props: PropsWithChildren<FilterLinkProps>) => (
+  <Link sx={{mx: 0.33}} to={props.to}>
+    {props.children}
+  </Link>
+);
+
 export default function Run() {
-  const theme = useTheme();
   const [params, setParams] = useQueryParams({
     status: StringParam,
     page: NumberParam,
@@ -55,20 +64,16 @@ export default function Run() {
         {name}
       </Typography>
       <div style={{ margin: "20px 0px" }}>
-        <Typography>See similar runs:</Typography>
-        <Link to={`/runs/?suite=${suite}&branch=${branch}`}>
-          <Typography>
-            suite {suite} and branch {branch}
-          </Typography>
-        </Link>
-        <Link to={`/runs/?branch=${branch}`}>
-          <Typography>
-            <SourceBranch style={{ color: theme.palette.text.primary }} />
-          </Typography>
-        </Link>
-        <Link to={`/runs/?date=${date}`}>
-          <Typography>scheduled on {date}</Typography>
-        </Link>
+        See runs with the same:
+        <FilterLink to={`/runs/?branch=${branch}`}>
+            branch
+        </FilterLink>
+        <FilterLink to={`/runs/?suite=${suite}&branch=${branch}`}>
+            suite and branch
+        </FilterLink>
+        <FilterLink to={`/runs/?date=${date}`}>
+          date
+        </FilterLink>
       </div>
       <ButtonGroup style={{ display: "flex", justifyContent: "center" }}>
         <Button