cooler style

Author: sterlp

ui/src/scheduler/scheduler.page.tsx

@@ -60,6 +60,10 @@ const TaskStatusHistoryOverviewView = ({
         <Card.Header
             as="h5"
             className="d-flex justify-content-between align-items-center"
+            style={{
+                background: "linear-gradient(45deg, #007bff, #00d8ff)",
+                color: "white",
+            }}
         >
             {name}
         </Card.Header>

ui/src/scheduler/views/scheduler.view.tsx

@@ -5,19 +5,34 @@ import { Card, Col, Form, ProgressBar, Row } from "react-bootstrap";
 interface Props {
     scheduler: SchedulerEntity;
 }
+import { Tooltip, OverlayTrigger } from "react-bootstrap";
+
 const SchedulerStatusView = ({ scheduler }: Props) => {
+    const renderTooltip = (props: any, label: string) => (
+        <Tooltip id="button-tooltip" {...props}>
+            {label}
+        </Tooltip>
+    );
+
     return (
-        <Card>
+        <Card className="shadow-sm rounded border-0">
             <Card.Header
                 as="h5"
                 className="d-flex justify-content-between align-items-center"
+                style={{
+                    background: "linear-gradient(45deg, #007bff, #00d8ff)",
+                    color: "white",
+                }}
             >
-                <span>{scheduler.id}</span>
+                <span>
+                    <i className="fas fa-server"></i> {scheduler.id}
+                </span>
             </Card.Header>
             <Card.Body>
                 <Row>
                     <Col>
-                        Last Ping: {durationSince(new Date(scheduler.lastPing))}
+                        <strong>Last Ping:</strong>{" "}
+                        {durationSince(new Date(scheduler.lastPing))}
                     </Col>
                     <Col>
                         <Form.Label htmlFor={"slot-" + scheduler.id}>
@@ -26,32 +41,60 @@ const SchedulerStatusView = ({ scheduler }: Props) => {
                                 " of " +
                                 scheduler.tasksSlotCount}
                         </Form.Label>
-                        <ProgressBar
-                            id={"slot-" + scheduler.id}
-                            animated={true}
-                            min={0}
-                            now={scheduler.runningTasks}
-                            max={scheduler.tasksSlotCount}
-                        ></ProgressBar>
+                        <OverlayTrigger
+                            placement="top"
+                            overlay={(props) =>
+                                renderTooltip(
+                                    props,
+                                    `${scheduler.runningTasks} tasks running`
+                                )
+                            }
+                        >
+                            <ProgressBar
+                                id={"slot-" + scheduler.id}
+                                animated={true}
+                                striped
+                                variant={getVariant(
+                                    scheduler.runningTasks,
+                                    scheduler.tasksSlotCount
+                                )}
+                                now={scheduler.runningTasks}
+                                max={scheduler.tasksSlotCount}
+                            />
+                        </OverlayTrigger>
                     </Col>
                 </Row>
                 <Row>
                     <Col>
                         <Form.Label htmlFor={"cpu-" + scheduler.id}>
                             CPU
                         </Form.Label>
-                        <ProgressBar
-                            id={"cpu-" + scheduler.id}
-                            animated={true}
-                            min={0}
-                            now={scheduler.systemLoadAverage}
-                            max={100}
-                            label={
-                                Math.round(scheduler.systemLoadAverage * 10) /
-                                    10 +
-                                "%"
+                        <OverlayTrigger
+                            placement="top"
+                            overlay={(props) =>
+                                renderTooltip(
+                                    props,
+                                    `CPU Load: ${scheduler.systemLoadAverage}%`
+                                )
                             }
-                        ></ProgressBar>
+                        >
+                            <ProgressBar
+                                id={"cpu-" + scheduler.id}
+                                animated={true}
+                                striped
+                                variant={getVariant(
+                                    scheduler.systemLoadAverage,
+                                    100
+                                )}
+                                now={scheduler.systemLoadAverage}
+                                max={100}
+                                label={`${
+                                    Math.round(
+                                        scheduler.systemLoadAverage * 10
+                                    ) / 10
+                                }%`}
+                            />
+                        </OverlayTrigger>
                     </Col>
                     <Col>
                         <Form.Label htmlFor={"memory-" + scheduler.id}>
@@ -60,14 +103,28 @@ const SchedulerStatusView = ({ scheduler }: Props) => {
                                 " of " +
                                 formatMemory(scheduler.maxHeap)}
                         </Form.Label>
-                        <ProgressBar
-                            id={"memory-" + scheduler.id}
-                            animated={true}
-                            min={0}
-                            now={scheduler.usedHeap}
-                            max={scheduler.maxHeap}
-                            label={formatMemory(scheduler.usedHeap)}
-                        ></ProgressBar>
+                        <OverlayTrigger
+                            placement="top"
+                            overlay={(props) =>
+                                renderTooltip(
+                                    props,
+                                    `${formatMemory(scheduler.usedHeap)} used`
+                                )
+                            }
+                        >
+                            <ProgressBar
+                                id={"memory-" + scheduler.id}
+                                animated={true}
+                                striped
+                                variant={getVariant(
+                                    scheduler.usedHeap,
+                                    scheduler.maxHeap
+                                )}
+                                now={scheduler.usedHeap}
+                                max={scheduler.maxHeap}
+                                label={formatMemory(scheduler.usedHeap)}
+                            />
+                        </OverlayTrigger>
                     </Col>
                 </Row>
             </Card.Body>
@@ -106,3 +163,10 @@ function formatMemory(value: number) {
     }
     return Math.round(result) + "MB";
 }
+
+function getVariant(value: number, max: number) {
+    const percentage = (value / max) * 100;
+    if (percentage < 80) return "success"; // Grün
+    if (percentage < 100) return "warning"; // Gelb
+    return "danger"; // Rot
+}