fix(ui): Table containers and basic css to render windows correctly

pando85 · Feb 5, 2024 · e9ac3ea · e9ac3ea
1 parent 9f1a3f2
commit e9ac3ea
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 37 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -6,8 +6,15 @@ ARG FFMPEG_BUILD_SCRIPT_VERSION=1.48
 ENV DEBIAN_FRONTEND noninteractive
 
 RUN apt-get update \
-    && apt-get -y --no-install-recommends install build-essential curl ca-certificates libva-dev \
-        python3 python-is-python3 ninja-build meson \
+    && apt-get -y --no-install-recommends install \
+        build-essential \
+        curl \
+        ca-certificates \
+        libva-dev \
+        python3 \
+        python-is-python3 \
+        ninja-build \
+        meson \
     && apt-get clean; rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* /usr/share/doc/* \
     && update-ca-certificates
 

diff --git a/server/web/ui/src/JobTable.tsx b/server/web/ui/src/JobTable.tsx
@@ -99,6 +99,8 @@ const renderPath = (isSmallScreen: boolean, path: string) => {
 const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorText }) => {
   const [filteredJobs, setFilteredJobs] = useState<Job[]>([]);
   const [selectedJob, setSelectedJob] = useState<Job | null>(null);
+  const [anchorPosition, setAnchorPosition] = useState({ x: 0, y: 0 });
+  const [isAnchored, setIsAnchored] = useState(false);
   const [buttonsMenu, setButtonsMenu] = useState<null | HTMLElement>(null);
   const [nameFilter, setNameFilter] = useState<string>('');
   const [selectedStatusFilter, setSelectedStatus] = useState<string | string[]>([]);
@@ -117,7 +119,6 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorTex
   // TODO: reconnect when ReadyState.CLOSED
   const { lastMessage } = useWebSocket(wsURL);
 
-
   useEffect(() => {
     if (lastMessage !== null) {
       const JobUpdateNotification: JobUpdateNotification = new JobUpdateNotificationClass(JSON.parse(lastMessage.data));
@@ -175,8 +176,28 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorTex
     handleReload();
   };
 
+  const listRef = useRef<FixedSizeList | null>(null);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (!(event.target instanceof Element)) {
+      console.log("coordinates not found")
+      return
+    };
+    const boundingRect = event.target.getBoundingClientRect();
+    const newPosition = {
+      x: boundingRect.left - 48,
+      y: boundingRect.bottom - 126 + 24,
+    };
+    const listScroll = listRef.current ? listRef.current.state.scrollOffset : 0;
+    newPosition.y += listScroll;
+    console.log(boundingRect.bottom)
+    console.log(newPosition.y)
+    console.log(listScroll)
+    setAnchorPosition(newPosition);
+    setIsAnchored(!isAnchored);
+    console.log(event.currentTarget);
+    console.log(event.currentTarget.parentNode);
     setButtonsMenu(event.currentTarget);
+    console.log(buttonsMenu);
   };
 
   const handleClose = () => {
@@ -307,7 +328,6 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorTex
     header?: React.ReactNode
     row: FixedSizeListProps['children']
   } & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
-    const listRef = useRef<FixedSizeList | null>()
     const [top, setTop] = useState(0)
 
     return (
@@ -338,7 +358,7 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorTex
       const { header, top } = useContext(VirtualTableContext)
       return (
         <div {...rest} ref={ref}>
-          <Table striped hover responsive style={{ top, position: 'absolute', width: '100%', height: '100%' }}>
+          <Table striped hover style={{ top, width: '100%' }}>
             {header}
             <tbody>{children}</tbody>
           </Table>
@@ -363,7 +383,9 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorTex
         <td style={{ wordBreak: "keep-all" }}>{renderStatusCellContent(job)}</td>
         <td style={{ wordBreak: "keep-all" }} title={formatDateDetailed(job.last_update)}>
           <div className="row-menu">
-            {formatDateShort(job.last_update)}
+            <div className="row-date">
+              {formatDateShort(job.last_update)}
+            </div>
             <Button
               variant="link"
               className="buttons-menu"
@@ -375,10 +397,10 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable, setErrorTex
             <Menu
               id="buttons-menu"
               className="buttons-menu"
-              anchorEl={buttonsMenu}
               keepMounted
               open={Boolean(buttonsMenu)}
               onClose={handleClose}
+              style={{ top: anchorPosition.y, left: anchorPosition.x }}
             >
               <MenuItem title="Details" onClick={(event) => handleDetailedViewClick(event)}>
                 <Feed />

diff --git a/server/web/ui/src/themes/_shared.scss b/server/web/ui/src/themes/_shared.scss
@@ -53,6 +53,11 @@ code {
   padding: 0;
 }
 
+.content-container {
+  position: relative;
+  z-index: 10;
+}
+
 .link {
   text-decoration: none;
   align-items: center;
@@ -89,73 +94,73 @@ code {
 }
 
 .row {
-	max-width: 100%;
-	margin-right: auto;
-	margin-left: auto;
-	display: flex;
-	flex-flow: row wrap;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  display: flex;
+  flex-flow: row wrap;
 }
 
 .flex-top-bar {
   background-color: $gray-800;
-	right: 0;
+  right: 0;
   left: 0;
   width: 100%;
-	z-index: 5;
-	padding: 0 15px;
-	align-items: center;
-	flex-wrap: wrap;
+  z-index: 5;
+  padding: 0 15px;
+  align-items: center;
+  flex-wrap: wrap;
   line-height: $flex-top-bar-height;
 }
 
 .actions {
-	display: flex;
-	align-items: center;
-	line-height: $flex-top-bar-height;
+  display: flex;
+  align-items: center;
+  line-height: $flex-top-bar-height;
   height: $flex-top-bar-height;
   margin: 0 auto;
   padding: 0;
   box-sizing: inherit;
 }
 
 .tools {
-	display: flex;
-	flex-grow: 1;
-	align-items: center;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
   margin: 0 auto;
   padding: 0;
 }
 
 .select {
-	position: relative;
+  position: relative;
   display: inline-block;
 }
 
 .search-wrapper {
   line-height: normal;
   margin: 8px auto;
   display: flex;
-	position: relative;
+  position: relative;
 }
 
 .job-list {
   height: 500px;
   padding: 1em;
-  position: relative;
+  position: fixed;
 }
 
 .search {
-	background-color: $gray-900;
-	border-color: currentcolor;
+  background-color: $gray-900;
+  border-color: currentcolor;
   border: 1px solid;
   min-width: 60px;
-	border-radius: 7px;
-	position: relative;
-	padding: 0 10px;
-	height: 33px;
-	display: flex;
-	align-items: center;
-	transition: width 200ms;
+  border-radius: 7px;
+  position: relative;
+  padding: 0 10px;
+  height: 33px;
+  display: flex;
+  align-items: center;
+  transition: width 200ms;
 }
 
 .search-input {
@@ -198,7 +203,7 @@ code {
 }
 
 .padder {
-	height: 50px;
+  height: 50px;
   margin: 0;
   padding: 0;
   width: 100%;
@@ -226,6 +231,10 @@ code {
   display: flex;
 }
 
+.row-date {
+  min-width: 60px;
+}
+
 .centered-container {
   display: flex;
   align-items: center;
@@ -313,12 +322,14 @@ code {
 }
 
 table {
+  position: relative;
   display: table !important;
   width: 100%;
   table-layout: fixed;
 }
 
-th, td {
+th,
+td {
   color: $body-color !important;
   border-top: none !important;
   border-bottom: 1px solid $table-border-color !important;