Task Timeouts

dashboard/package.json

@@ -25,7 +25,7 @@
     "react-dom": "^18.2.0",
     "react-oidc-context": "^3.0.0-beta.0",
     "react-router-dom": "^6.15.0",
-    "rsuite": "^5.39.0",
+    "rsuite": "^6.1.1",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },

dashboard/src/components/filter-slider.tsx

@@ -1,10 +1,7 @@
 import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 
 import * as s from "./filter-slider.module.css";
-
-type FilterValue = string | null;
-
-export type FilterOption = { label: string; value: FilterValue; color: string };
+import {FilterOption, FilterValue} from "./tasks";
 
 type DragState = { startX: number; moved: boolean };
 

dashboard/src/components/menu.tsx

@@ -1,44 +1,41 @@
-import { Nav, Navbar } from "rsuite"
+import {Avatar, Nav, Navbar} from "rsuite"
 
 import * as s from "./menu.module.css";
 
-import UserIcon from '@rsuite/icons/legacy/User';
-
-import { Link, useNavigate } from "react-router-dom";
-import { useContext, useEffect, useState } from "react";
-import { useAPI } from "../services/api";
-import { UserContext } from "../contexts/user";
-import { useAuth } from "react-oidc-context";
-
+import {NavLink} from "react-router-dom";
+import {ReactEventHandler, useContext} from "react";
+import {UserContext} from "../contexts/user";
+import {useAuth} from "react-oidc-context";
+import * as React from "react";
 
 const Menu = () => {
-
-    const activeKey = "tasks";
     const user = useContext(UserContext)
     const auth = useAuth();
 
     return (
-        <Navbar bordered shaded>
-            <Navbar.Brand>
-                <Link to={"/"}>Vicky</Link>
-            </Navbar.Brand>
-            {
-                user ? (
-                    <Nav activeKey={activeKey}>
-                        <Nav.Item eventKey="tasks" >
-                            <Link to={"/tasks"}>Tasks</Link>
+        <Navbar>
+            <Navbar.Content>
+                <Navbar.Brand as={NavLink} to="/">
+                    Vicky
+                </Navbar.Brand>
+                {
+                    user ? (
+                            <Nav>
+                                <Nav.Item as={NavLink} to="/tasks">Tasks</Nav.Item>
+                            </Nav>
+                        )
+                        : null
+                }
+            </Navbar.Content>
+            <Navbar.Content>
+                <Nav>
+                    {user ? (
+                        <Nav.Item icon={<Avatar circle background={"transparent"} size="sm"/>}>
+                            {user.full_name}
                         </Nav.Item>
-                    </Nav>
-                )
-                : null
-            }
-            <Nav pullRight>
-                { user ? (
-                    <Nav.Item icon={<UserIcon />}>
-                        {user.full_name}
-                    </Nav.Item>
-                ) : null}
-            </Nav>
+                    ) : null}
+                </Nav>
+            </Navbar.Content>
         </Navbar>
     )
 

dashboard/src/components/tag.tsx

@@ -1,64 +1,44 @@
-import { useMemo } from "react"
-import { Tag } from "rsuite";
-import { ITask } from "../services/api"
+import {useMemo} from "react"
+import {Tag} from "rsuite";
+import {ITask} from "../services/api"
+import {FilterOption} from "./tasks";
 
 type TaskTagProps = {
     task: ITask,
     size: "sm" | "md" | "lg"
+    options: FilterOption[],
 }
+const fallbackTag: FilterOption = { color: "", label: "-", value: "None" }
 
 const TaskTag = (props: TaskTagProps) => {
 
     const {
         task,
-        size
+        size,
+        options,
     } = props;
 
-    const [tagContent, tagColor] = useMemo(() => {
-        const tagContent = task.status.result ?? task.status.state
+    const tag: FilterOption = useMemo(() => {
+        const tagContent = task.status.state + (task.status.result ? "::" + task.status.result : "")
 
-        console.log(task)
-
-        let tagColor = null
-        let tagDisplay = null
-        switch (tagContent) {
-            case "ERROR": {
-                tagColor = "red";
-                tagDisplay = "Error";
-                break;
-            }
-            case "SUCCESS": {
-                tagColor = "green";
-                tagDisplay = "Success";
-                break;
-            }
-            case "RUNNING": {
-                tagColor = "violet";
-                tagDisplay = "Running";
-                break;
-            }
-            case "NEW": {
-                tagColor = "cyan";
-                tagDisplay = "New";
-                break;
-            }
-            case "NEEDSUSERVALIDATION": {
-                tagColor = "orange";
-                tagDisplay = "Validation";
-                break;
-            }
-            default: {
-                tagColor = "";
-                tagDisplay = "-"
-            }
-        }
-
-        return [tagDisplay, tagColor]
+        return options.find(o => o.value == tagContent) ?? fallbackTag
 
     }, [task.status])
 
-    return ( 
-        <Tag style={{width: "6em", textAlign: "center"}} color={tagColor} size={size}>{tagContent}</Tag>
+    return (
+        <Tag
+            style={{
+                width: "6em",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                textAlign: "center",
+            }}
+            color={tag.color}
+            size={size}
+        >
+            {tag.label}
+        </Tag>
     )
 
 }

dashboard/src/components/task.module.css

@@ -3,6 +3,10 @@
     margin-bottom: 1em;
 }
 
+.TaskHeader {
+    width: 100%;
+}
+
 .Panel {
     height: 100%;
 }
@@ -11,6 +15,13 @@
     height: 100%;
 }
 
+.Panel :global(.rs-panel-body) {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    box-sizing: border-box;
+}
+
 .TitleRow {
     width: 100%;
 }
@@ -40,4 +51,7 @@
     padding: 2px 6px;
     min-width: 4em;
     text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }

dashboard/src/components/task.tsx

@@ -10,6 +10,7 @@ import * as s from "./task.module.css";
 import { Fragment, useEffect, useMemo, useState } from "react";
 import { TaskTag } from "./tag";
 import { useAPI } from "../services/api";
+import {FILTERS} from "./tasks";
 
 type TaskProps = {
     task: ITask
@@ -37,13 +38,13 @@ const Task = (props: TaskProps) => {
     }
 
     return (
-        <Panel shaded bordered className={s.Panel}>
-            <HStack alignItems={"flex-start"} justifyContent="space-between">
+        <Panel shaded borderLeft={"1px solid var(--rs-gray-700)"} className={s.Panel}>
+            <HStack alignItems={"flex-start"} justifyContent="space-between" className={s.TaskHeader}>
                 <VStack spacing={10} className={s.TitleStack}>
                     <HStack justifyContent="space-between" alignItems="center" spacing={14} className={s.TitleRow}>
                         <HStack spacing={12} alignItems="center" className={s.TitleLeft}>
                             <h4 className={s.TitleText}>{task.display_name}</h4>
-                            <TaskTag size="lg" task={task}/>
+                            <TaskTag size="lg" task={task} options={FILTERS}/>
                         </HStack>
                     </HStack>
 
@@ -55,10 +56,16 @@ const Task = (props: TaskProps) => {
                         </HStack>
                         {task.locks.length ? (
                             <HStack spacing={8} className={s.LockRow}>
+                                <Text muted>Locks:</Text>
                                 {task.locks.map(lock => {
                                     return (
-                                        <Badge key={`${task.id}-${lock.name}`} color={lock.type === "WRITE" ? "red" : "green"} content={lock.type === "WRITE" ? "W" : "R"}>
-                                            <Tag size="md" className={s.LockTag}>{lock.name}</Tag>
+                                        <Badge
+                                            key={`${task.id}-${lock.name}`}
+                                            color={lock.type === "WRITE" ? "red" : "green"}
+                                            content={lock.type === "WRITE" ? "W" : "R"}
+                                            offset={[0, 0]}
+                                        >
+                                            <Tag size="md" className={s.LockTag} color={lock.poisoned ? "red" : null}>{lock.name}</Tag>
                                         </Badge>
                                     )
                                 })}

dashboard/src/components/tasks.module.css

@@ -6,6 +6,9 @@
 
 .List {
     margin-top: 1em;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
 }
 
 .List > a:hover div:first-of-type > span {
@@ -20,22 +23,45 @@
     padding: 1em;
     height: 100%;
     width: 100%;
+    box-sizing: border-box;
     overflow-x: hidden;
+    min-height: 0;
+}
+
+.Row {
+    margin-inline: 0;
+    height: 100%;
+}
+
+.TasksColumn {
+    height: 100%;
+    min-height: 0;
 }
 
 .GridElement {
     height: 100%;
+    min-height: 0;
 }
 
 .TasksPanel {
     position: relative;
     overflow: visible; /* because the popover needs some space outside */
     min-height: 340px; /* because the dropdown needs some space */
+    height: 100%;
+}
+
+.TasksPanel :global(.rs-panel-body) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    box-sizing: border-box;
 }
 
 .HeaderRow {
     flex-wrap: wrap;
     gap: 12px;
+    width: 100%;
 }
 
 .Filters {
@@ -44,6 +70,10 @@
     gap: 10px;
 }
 
+.ListRow {
+    width: 100%;
+}
+
 .Pagination {
     padding: 1em 0;