zavadil-react-common 1.1.27 → 1.1.28

package/dist/component/stats/CacheStatsControl.d.ts

@@ -0,0 +1,7 @@
+import { CacheStats } from 'zavadil-ts-common';
+export type CacheStatsControlProps = {
+    name: string;
+    stats: CacheStats;
+};
+declare function CacheStatsControl({ name, stats }: CacheStatsControlProps): import("react/jsx-runtime").JSX.Element;
+export default CacheStatsControl;

package/dist/component/stats/JavaHeapControl.d.ts

@@ -0,0 +1,6 @@
+import { JavaHeapStats } from "zavadil-ts-common";
+export type WorkerJavaHeapControlProps = {
+    stats: JavaHeapStats;
+};
+declare function JavaHeapControl({ stats }: WorkerJavaHeapControlProps): import("react/jsx-runtime").JSX.Element;
+export default JavaHeapControl;

package/dist/component/stats/QueueStateControl.d.ts

@@ -0,0 +1,5 @@
+export type QueueStateControlProps = {
+    state: string;
+};
+declare function QueueStateControl({ state }: QueueStateControlProps): import("react/jsx-runtime").JSX.Element;
+export default QueueStateControl;

package/dist/component/stats/QueueStatsControl.d.ts

@@ -0,0 +1,7 @@
+import { QueueStats } from 'zavadil-ts-common';
+export type QueueStatsControlProps = {
+    name: string;
+    stats: QueueStats;
+};
+declare function QueueStatsControl({ name, stats }: QueueStatsControlProps): import("react/jsx-runtime").JSX.Element;
+export default QueueStatsControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zavadil-react-common",
-  "version": "1.1.27",
+  "version": "1.1.28",
   "description": "Common types for React Typescript UI apps.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "zavadil-ts-common": "^1.1.24",
+    "zavadil-ts-common": "^1.1.26",
     "bootstrap": "^5.3.0",
     "react-bootstrap": "^2.10.5",
     "react-dom": "^18.2.0",

package/src/component/stats/CacheStatsControl.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {ProgressBar} from "react-bootstrap";
+import {CacheStats} from 'zavadil-ts-common';
+
+export type CacheStatsControlProps = {
+	name: string;
+	stats: CacheStats;
+}
+
+function CacheStatsControl({name, stats}: CacheStatsControlProps) {
+	return (
+		<div className="d-flex align-items-center gap-2">
+			<pre>{name}</pre>
+			<pre>[{stats.cachedItems} / {stats.capacity}]</pre>
+			<div className="flex-grow-1">
+				<ProgressBar
+					now={stats.cachedItems}
+					min={0}
+					max={stats.capacity}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default CacheStatsControl;

package/src/component/stats/JavaHeapControl.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Badge, ProgressBar} from "react-bootstrap";
+import {ByteUtil, JavaHeapStats} from "zavadil-ts-common";
+
+export type WorkerJavaHeapControlProps = {
+	stats: JavaHeapStats;
+};
+
+function JavaHeapControl({stats}: WorkerJavaHeapControlProps) {
+	const size = stats.heapSize;
+	const max = stats.heapMaxSize;
+	const free = stats.heapFreeSize;
+	const used = size - free;
+
+	return (
+		<div className="d-flex align-items-center gap-2">
+			<pre>Java Heap</pre>
+			<pre>[{ByteUtil.formatByteSize(size)} / {ByteUtil.formatByteSize(max)}]</pre>
+			<pre>Used:</pre>
+			<Badge className="bg-warning text-bg-warning">
+				{ByteUtil.formatByteSize(used)}
+			</Badge>
+			<pre>Free:</pre>
+			<Badge className="bg-success text-white">
+				{ByteUtil.formatByteSize(free)}
+			</Badge>
+			<div className="flex-grow-1">
+				<ProgressBar min={0} max={max}>
+					<ProgressBar variant="warning" min={0} now={used} max={max}/>
+					<ProgressBar variant="success" min={0} now={free} max={max}/>
+				</ProgressBar>
+			</div>
+		</div>
+	);
+}
+
+export default JavaHeapControl;

package/src/component/stats/QueueStateControl.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Badge} from "react-bootstrap";
+
+export type QueueStateControlProps = {
+	state: string;
+}
+
+const STATE_COLORS = new Map<string, string>([
+	['Idle', 'secondary'],
+	['Processing', 'success'],
+	['Loading', 'warn'],
+]);
+
+function QueueStateControl({state}: QueueStateControlProps) {
+	const color = STATE_COLORS.get(state) || 'primary';
+	return <Badge className={`bg-${color} text-white`}>{state}</Badge>
+}
+
+export default QueueStateControl;

package/src/component/stats/QueueStatsControl.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {ProgressBar} from "react-bootstrap";
+import {QueueStats} from 'zavadil-ts-common';
+import QueueStateControl from "./QueueStateControl";
+
+export type QueueStatsControlProps = {
+	name: string;
+	stats: QueueStats;
+}
+
+function QueueStatsControl({name, stats}: QueueStatsControlProps) {
+	return (
+		<div className="d-flex align-items-center gap-2">
+			<pre>{name}</pre>
+			<pre>[{stats.loaded} / {stats.remaining}]</pre>
+			<QueueStateControl state={stats.state}/>
+			<div className="flex-grow-1">
+				<ProgressBar
+					now={stats.loaded}
+					min={0}
+					max={stats.remaining > 0 ? stats.remaining : 1}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default QueueStatsControl;