the stream detail card now shows all values

nats-nui · Apr 22, 2024 · 8eb450a · 8eb450a
1 parent 65ecc07
commit 8eb450a
Show file tree

Hide file tree

Showing 9 changed files with 495 additions and 465 deletions.
diff --git a/frontend/src/components/accordion/TitleAccordion.tsx b/frontend/src/components/accordion/TitleAccordion.tsx
@@ -9,17 +9,19 @@ import cls from "./Accordion.module.css"
 interface Props {
 	title?: string
 	children?: React.ReactNode
+	initOpen?: boolean
 }
 
 const TitleAccordion: FunctionComponent<Props> = ({
 	title,
 	children,
+	initOpen = true,
 }) => {
 
 	// STORE
 
 	// HOOK
-	const [open, setOpen] = useState(true)
+	const [open, setOpen] = useState(initOpen)
 
 	// HANDLER
 	const handleClick = () => setOpen(!open)

diff --git a/frontend/src/components/stacks/buckets/detail/CreateForm.tsx b/frontend/src/components/stacks/buckets/detail/CreateForm.tsx
@@ -12,6 +12,7 @@ import { FunctionComponent } from "react"
 import ListDialog from "../../../dialogs/ListDialog"
 import MaxBytesCmp from "../../../input/MaxBytesCmp"
 import MaxTimeCmp from "../../../input/MaxTimeCmp"
+import TitleAccordion from "@/components/accordion/TitleAccordion"
 
 
 
@@ -41,105 +42,112 @@ const CreateForm: FunctionComponent<Props> = ({
 
 	return <div className="lyt-form">
 
-		<div className="lbl-prop-title">BASE</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">NAME</div>
-			<TextInput
-				value={bucket.bucket}
-				onChange={bucket => handlePropChange({ bucket })}
-			/>
-		</div>
+		<TitleAccordion title="BASE">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">NAME</div>
+				<TextInput
+					value={bucket.bucket}
+					onChange={bucket => handlePropChange({ bucket })}
+				/>
+			</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">DESCRIPTION</div>
-			<TextInput multiline rows={2}
-				value={bucket.description}
-				onChange={description => handlePropChange({ description })}
-			/>
-		</div>
-
-		<div className="lyt-v">
-			<div className="lbl-prop">STORAGE</div>
-			<ListDialog width={80}
-				store={bucketSo}
-				select={Object.values(STORAGE).indexOf(bucket.storage ?? STORAGE.FILE)}
-				items={Object.values(STORAGE)}
-				RenderRow={StringUpRow}
-				onSelect={index => handlePropChange({ storage: Object.values(STORAGE)[index] })}
-			/>
-		</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">DESCRIPTION</div>
+				<TextInput multiline rows={2}
+					value={bucket.description}
+					onChange={description => handlePropChange({ description })}
+				/>
+			</div>
 
-		<div className="lbl-prop-title">KEY/VALUE STORE SETTINGS</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">STORAGE</div>
+				<ListDialog width={80}
+					store={bucketSo}
+					select={Object.values(STORAGE).indexOf(bucket.storage ?? STORAGE.FILE)}
+					items={Object.values(STORAGE)}
+					RenderRow={StringUpRow}
+					onSelect={index => handlePropChange({ storage: Object.values(STORAGE)[index] })}
+				/>
+			</div>
+
+		</TitleAccordion>
 
 
-		<div className="lyt-v">
-			<div className="lbl-prop">HISTORY</div>
-			<NumberInput
-				style={{ flex: 1 }}
-				value={bucket.history}
-				onChange={history => handlePropChange({ history })}
+		<TitleAccordion title="KEY/VALUE STORE SETTINGS">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">HISTORY</div>
+				<NumberInput
+					style={{ flex: 1 }}
+					value={bucket.history}
+					onChange={history => handlePropChange({ history })}
+				/>
+			</div>
+
+			<MaxTimeCmp store={bucketSo}
+				label="TTL"
+				value={bucket.ttl}
+				desiredDefault={0}
+				initDefault={1}
+				onChange={ttl => handlePropChange({ ttl })}
 			/>
-		</div>
-
-		<MaxTimeCmp store={bucketSo}
-			label="TTL"
-			value={bucket.ttl}
-			desiredDefault={0}
-			initDefault={1}
-			onChange={ttl => handlePropChange({ ttl })}
-		/>
-		<MaxBytesCmp store={bucketSo}
-			label="MAX VALUE SIZE"
-			value={bucket.maxValueSize}
-			onChange={maxValueSize => handlePropChange({ maxValueSize })}
-		/>
-		<MaxBytesCmp store={bucketSo}
-			label="MAX BYTES"
-			value={bucket.maxBytes}
-			onChange={maxBytes => handlePropChange({ maxBytes })}
-		/>
-
-		<div className="cmp-h">
-			<IconToggle
-				check={bucket.compression}
-				onChange={compression => handlePropChange({ compression })}
+			<MaxBytesCmp store={bucketSo}
+				label="MAX VALUE SIZE"
+				value={bucket.maxValueSize}
+				onChange={maxValueSize => handlePropChange({ maxValueSize })}
 			/>
-			<div className="lbl-prop">COMPRESSION</div>
-		</div>
-
-		<div className="lbl-prop-title">PLACEMENT</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">NUM REPLICAS</div>
-			<NumberInput
-				style={{ flex: 1 }}
-				value={bucket.replicas}
-				onChange={replicas => handlePropChange({ replicas })}
+			<MaxBytesCmp store={bucketSo}
+				label="MAX BYTES"
+				value={bucket.maxBytes}
+				onChange={maxBytes => handlePropChange({ maxBytes })}
 			/>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">CLUSTER</div>
-			<div className="lyt-quote">
-				<div className="lyt-v">
-					<div className="lbl-prop">NAME</div>
-					<TextInput
-						value={bucket.placement?.cluster}
-						onChange={cluster => handlePlacementPropChange({ cluster })}
-					/>
-				</div>
-				<div className="lyt-v">
-					<div className="lbl-prop">TAGS</div>
-					<EditList<string>
-						items={bucket.placement?.tags}
-						onItemsChange={tags => handlePlacementPropChange({ tags })}
-						placeholder="ex. client or java"
-
-						onNewItem={() => ""}
-						fnIsVoid={i => !i || i.trim().length == 0}
-						RenderRow={EditStringRow}
-					/>
+
+			<div className="cmp-h">
+				<IconToggle
+					check={bucket.compression}
+					onChange={compression => handlePropChange({ compression })}
+				/>
+				<div className="lbl-prop">COMPRESSION</div>
+			</div>
+
+		</TitleAccordion>
+
+
+		<TitleAccordion title="PLACEMENT">
+			<div className="lyt-v">
+				<div className="lbl-prop">NUM REPLICAS</div>
+				<NumberInput
+					style={{ flex: 1 }}
+					value={bucket.replicas}
+					onChange={replicas => handlePropChange({ replicas })}
+				/>
+			</div>
+			<div className="lyt-v">
+				<div className="lbl-prop">CLUSTER</div>
+				<div className="lyt-quote">
+					<div className="lyt-v">
+						<div className="lbl-prop">NAME</div>
+						<TextInput
+							value={bucket.placement?.cluster}
+							onChange={cluster => handlePlacementPropChange({ cluster })}
+						/>
+					</div>
+					<div className="lyt-v">
+						<div className="lbl-prop">TAGS</div>
+						<EditList<string>
+							items={bucket.placement?.tags}
+							onItemsChange={tags => handlePlacementPropChange({ tags })}
+							placeholder="ex. client or java"
+
+							onNewItem={() => ""}
+							fnIsVoid={i => !i || i.trim().length == 0}
+							RenderRow={EditStringRow}
+						/>
+					</div>
 				</div>
 			</div>
-		</div>
+		</TitleAccordion>
 
 	</div>
 }

diff --git a/frontend/src/components/stacks/buckets/detail/ShowForm.tsx b/frontend/src/components/stacks/buckets/detail/ShowForm.tsx
@@ -1,3 +1,4 @@
+import TitleAccordion from "@/components/accordion/TitleAccordion"
 import { BucketStore } from "@/stores/stacks/buckets/detail"
 import { useStore } from "@priolo/jon"
 import { FunctionComponent } from "react"
@@ -25,55 +26,64 @@ const ShowForm: FunctionComponent<Props> = ({
 	if (!bucket) return null
 
 	return <div className="lyt-form">
-
-		<div className="lbl-prop-title">BUCKET</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">NAME</div>
-			<div className="lbl-input-readonly">
-				{bucket.bucket}
+		<TitleAccordion title="BASE">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">NAME</div>
+				<div className="lbl-input-readonly">
+					{bucket.bucket}
+				</div>
 			</div>
-		</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">VALUES COUNT</div>
-			<div className="lbl-input-readonly">
-				{bucket.values}
+			<div className="lyt-v">
+				<div className="lbl-prop">VALUES COUNT</div>
+				<div className="lbl-input-readonly">
+					{bucket.values}
+				</div>
 			</div>
-		</div>
 
-		<div className="lyt-v">
-			<div className="lbl-prop">BYTES COUNT</div>
-			<div className="lbl-input-readonly">
-				{bucket.bytes}
+			<div className="lyt-v">
+				<div className="lbl-prop">BYTES COUNT</div>
+				<div className="lbl-input-readonly">
+					{bucket.bytes}
+				</div>
 			</div>
-		</div>
 
-		<div className="lbl-prop-title">CONFIG</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">HISTORY</div>
-			<div className="lbl-input-readonly">
-				{bucket.history}
+		</TitleAccordion>
+
+
+		<TitleAccordion title="CONFIG">
+
+			<div className="lyt-v">
+				<div className="lbl-prop">HISTORY</div>
+				<div className="lbl-input-readonly">
+					{bucket.history}
+				</div>
 			</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">TTL</div>
-			<div className="lbl-input-readonly">
-				{bucket.ttl}
+
+			<div className="lyt-v">
+				<div className="lbl-prop">TTL</div>
+				<div className="lbl-input-readonly">
+					{bucket.ttl}
+				</div>
 			</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">BACKING STORE</div>
-			<div className="lbl-input-readonly">
-				{bucket.backingStore}
+
+			<div className="lyt-v">
+				<div className="lbl-prop">BACKING STORE</div>
+				<div className="lbl-input-readonly">
+					{bucket.backingStore}
+				</div>
 			</div>
-		</div>
-		<div className="lyt-v">
-			<div className="lbl-prop">COMPRESSION</div>
-			<div className="lbl-input-readonly">
-				{bucket.compressed ? "YES" : "NO"}
+
+			<div className="lyt-v">
+				<div className="lbl-prop">COMPRESSION</div>
+				<div className="lbl-input-readonly">
+					{bucket.compressed ? "YES" : "NO"}
+				</div>
 			</div>
-		</div>
+
+		</TitleAccordion>
 
 	</div>
 }

diff --git a/frontend/src/components/stacks/buckets/detail/View.tsx b/frontend/src/components/stacks/buckets/detail/View.tsx
@@ -51,7 +51,7 @@ const BucketDetailView: FunctionComponent<Props> = ({
 		}
 	>
 		{inRead ? (<>
-			<RowButton
+			<RowButton style={{ marginBottom: 13 }}
 				icon={<KvEntriesIcon />}
 				label="KVENTRIES"
 				selected={isKVEntriesSelect}