From 8eb450a1a45b548acd8e24a645faaa18907c8021 Mon Sep 17 00:00:00 2001 From: priolo Date: Mon, 22 Apr 2024 22:59:25 +0200 Subject: [PATCH] the stream detail card now shows all values --- .../components/accordion/TitleAccordion.tsx | 4 +- .../stacks/buckets/detail/CreateForm.tsx | 188 +++--- .../stacks/buckets/detail/ShowForm.tsx | 86 +-- .../components/stacks/buckets/detail/View.tsx | 2 +- .../stacks/connections/detail/Form.tsx | 100 ++-- .../stacks/consumers/detail/ShowForm.tsx | 2 +- .../stacks/streams/detail/EditForm.tsx | 556 +++++++++--------- .../components/stacks/streams/detail/View.tsx | 13 +- frontend/src/stores/stacks/streams/index.ts | 9 +- 9 files changed, 495 insertions(+), 465 deletions(-) diff --git a/frontend/src/components/accordion/TitleAccordion.tsx b/frontend/src/components/accordion/TitleAccordion.tsx index 301387ce..9225dbbe 100644 --- 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 = ({ 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 index ca7ffe74..0733dcbd 100644 --- 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 = ({ return
-
BASE
-
-
NAME
- handlePropChange({ bucket })} - /> -
+ + +
+
NAME
+ handlePropChange({ bucket })} + /> +
-
-
DESCRIPTION
- handlePropChange({ description })} - /> -
- -
-
STORAGE
- handlePropChange({ storage: Object.values(STORAGE)[index] })} - /> -
+
+
DESCRIPTION
+ handlePropChange({ description })} + /> +
-
KEY/VALUE STORE SETTINGS
+
+
STORAGE
+ handlePropChange({ storage: Object.values(STORAGE)[index] })} + /> +
+ + -
-
HISTORY
- handlePropChange({ history })} + + +
+
HISTORY
+ handlePropChange({ history })} + /> +
+ + handlePropChange({ ttl })} /> -
- - handlePropChange({ ttl })} - /> - handlePropChange({ maxValueSize })} - /> - handlePropChange({ maxBytes })} - /> - -
- handlePropChange({ compression })} + handlePropChange({ maxValueSize })} /> -
COMPRESSION
-
- -
PLACEMENT
-
-
NUM REPLICAS
- handlePropChange({ replicas })} + handlePropChange({ maxBytes })} /> -
-
-
CLUSTER
-
-
-
NAME
- handlePlacementPropChange({ cluster })} - /> -
-
-
TAGS
- - items={bucket.placement?.tags} - onItemsChange={tags => handlePlacementPropChange({ tags })} - placeholder="ex. client or java" - - onNewItem={() => ""} - fnIsVoid={i => !i || i.trim().length == 0} - RenderRow={EditStringRow} - /> + +
+ handlePropChange({ compression })} + /> +
COMPRESSION
+
+ + + + + +
+
NUM REPLICAS
+ handlePropChange({ replicas })} + /> +
+
+
CLUSTER
+
+
+
NAME
+ handlePlacementPropChange({ cluster })} + /> +
+
+
TAGS
+ + items={bucket.placement?.tags} + onItemsChange={tags => handlePlacementPropChange({ tags })} + placeholder="ex. client or java" + + onNewItem={() => ""} + fnIsVoid={i => !i || i.trim().length == 0} + RenderRow={EditStringRow} + /> +
-
+
} diff --git a/frontend/src/components/stacks/buckets/detail/ShowForm.tsx b/frontend/src/components/stacks/buckets/detail/ShowForm.tsx index d8898d7b..7090fe91 100644 --- 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 = ({ if (!bucket) return null return
- -
BUCKET
-
-
NAME
-
- {bucket.bucket} + + +
+
NAME
+
+ {bucket.bucket} +
-
-
-
VALUES COUNT
-
- {bucket.values} +
+
VALUES COUNT
+
+ {bucket.values} +
-
-
-
BYTES COUNT
-
- {bucket.bytes} +
+
BYTES COUNT
+
+ {bucket.bytes} +
-
-
CONFIG
-
-
HISTORY
-
- {bucket.history} + + + + + +
+
HISTORY
+
+ {bucket.history} +
-
-
-
TTL
-
- {bucket.ttl} + +
+
TTL
+
+ {bucket.ttl} +
-
-
-
BACKING STORE
-
- {bucket.backingStore} + +
+
BACKING STORE
+
+ {bucket.backingStore} +
-
-
-
COMPRESSION
-
- {bucket.compressed ? "YES" : "NO"} + +
+
COMPRESSION
+
+ {bucket.compressed ? "YES" : "NO"} +
-
+ +
} diff --git a/frontend/src/components/stacks/buckets/detail/View.tsx b/frontend/src/components/stacks/buckets/detail/View.tsx index 7f1bce4d..6ee1c06a 100644 --- 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 = ({ } > {inRead ? (<> - } label="KVENTRIES" selected={isKVEntriesSelect} diff --git a/frontend/src/components/stacks/connections/detail/Form.tsx b/frontend/src/components/stacks/connections/detail/Form.tsx index a9913162..1a94952b 100644 --- a/frontend/src/components/stacks/connections/detail/Form.tsx +++ b/frontend/src/components/stacks/connections/detail/Form.tsx @@ -9,6 +9,7 @@ import { Auth, EDIT_STATE } from "@/types" import { useStore } from "@priolo/jon" import { FunctionComponent } from "react" import AuthForm from "./AuthForm" +import TitleAccordion from "@/components/accordion/TitleAccordion" @@ -62,60 +63,61 @@ const ConnectionDetailForm: FunctionComponent = ({ return
-
BASE
-
-
NAME
- -
+ +
+
NAME
+ +
+
+
HOST
+ + items={hosts} + onItemsChange={handleHostsChange} + readOnly={inRead} + placeholder="ex. demo.nats.io" -
-
HOST
- - items={hosts} - onItemsChange={handleHostsChange} - readOnly={inRead} - placeholder="ex. demo.nats.io" - - onNewItem={() => ""} - fnIsVoid={h => !h || h.trim().length == 0} - RenderRow={EditStringRow} - /> -
+ onNewItem={() => ""} + fnIsVoid={h => !h || h.trim().length == 0} + RenderRow={EditStringRow} + /> +
+ -
ADVANCED
-
-
AUTH
- - store={cnnDetailSo} - items={auths} - readOnly={inRead} - width={170} - RenderLabel={({ item: auth, index }) => ( -
- handleActivate(check, index, e)} + +
+
AUTH
+ + store={cnnDetailSo} + items={auths} + readOnly={inRead} + width={170} + RenderLabel={({ item: auth, index }) => ( +
+ handleActivate(check, index, e)} + readOnly={inRead} + trueIcon={} + /> + {auth?.mode?.toUpperCase()} +
+ )} + onDelete={handleAuthDelete} + RenderForm={({ item, index, onClose }) => ( + } + onClose={(auth) => { onClose(); handleAuthChange(auth, index) }} /> - {auth?.mode?.toUpperCase()} -
- )} - onDelete={handleAuthDelete} - RenderForm={({ item, index, onClose }) => ( - { onClose(); handleAuthChange(auth, index) }} - /> - )} - /> -
+ )} + /> +
+
} diff --git a/frontend/src/components/stacks/consumers/detail/ShowForm.tsx b/frontend/src/components/stacks/consumers/detail/ShowForm.tsx index 84a06752..9b62f7d6 100644 --- a/frontend/src/components/stacks/consumers/detail/ShowForm.tsx +++ b/frontend/src/components/stacks/consumers/detail/ShowForm.tsx @@ -27,7 +27,7 @@ const ShowForm: FunctionComponent = ({ return
- +
NAME
diff --git a/frontend/src/components/stacks/streams/detail/EditForm.tsx b/frontend/src/components/stacks/streams/detail/EditForm.tsx index f5727a62..8cf2285d 100644 --- a/frontend/src/components/stacks/streams/detail/EditForm.tsx +++ b/frontend/src/components/stacks/streams/detail/EditForm.tsx @@ -15,6 +15,7 @@ import MaxBytesCmp from "../../../input/MaxBytesCmp" import MaxNumberCmp from "../../../input/MaxNumberCmp" import MaxTimeCmp from "../../../input/MaxTimeCmp" import SourcesCmp from "./cmp/SourcesCmp" +import TitleAccordion from "@/components/accordion/TitleAccordion" @@ -77,319 +78,325 @@ const EditForm: FunctionComponent = ({ return
-
BASE
+ -
-
NAME
- handlePropChange({ name })} - readOnly={inRead || !inNew} - /> -
- -
-
DESCRIPTION
- handlePropChange({ description })} - readOnly={inRead} - /> -
- -
-
STORAGE
- handlePropChange({ storage: Object.values(STORAGE)[index] })} - /> -
- -
-
SUBJECTS
- - items={config.subjects} - onItemsChange={subjects => handlePropChange({ subjects })} - placeholder="ex. orders.* or telemetry.>" - readOnly={inRead} - - onNewItem={() => ""} - fnIsVoid={i => !i || i.trim().length == 0} - RenderRow={EditStringRow} - /> -
+
+
NAME
+ handlePropChange({ name })} + readOnly={inRead || !inNew} + /> +
-
-
SOURCES
- -
+
+
DESCRIPTION
+ handlePropChange({ description })} + readOnly={inRead} + /> +
-
-
- +
STORAGE
+ handlePropChange({ storage: Object.values(STORAGE)[index] })} /> -
MIRROR
- -
-
-
NAME
- {/* +
SUBJECTS
+ + items={config.subjects} + onItemsChange={subjects => handlePropChange({ subjects })} + placeholder="ex. orders.* or telemetry.>" + readOnly={inRead} + + onNewItem={() => ""} + fnIsVoid={i => !i || i.trim().length == 0} + RenderRow={EditStringRow} + /> +
+ +
+
SOURCES
+ +
+ +
+
+ +
MIRROR
+
+ +
+
+
NAME
+ {/* handleMirrorPropChange({ name })} readOnly={inRead || !inNew} /> */} - { - handleMirrorPropChange({ name: allStreams[index] }) - }} - /> -
-
-
START SEQUENCE
- handleMirrorPropChange({ optStartSeq })} - readOnly={inRead || !inNew} - /> + { + handleMirrorPropChange({ name: allStreams[index] }) + }} + /> +
+
+
START SEQUENCE
+ handleMirrorPropChange({ optStartSeq })} + readOnly={inRead || !inNew} + /> +
+
+
FILTER SUBJECT
+ handleMirrorPropChange({ filterSubject })} + readOnly={inRead || !inNew} + /> +
-
-
FILTER SUBJECT
- handleMirrorPropChange({ filterSubject })} - readOnly={inRead || !inNew} - /> -
-
- -
- -
RETENTION
-
-
POLICY
- +
+ + + + +
+
POLICY
+ handlePropChange({ retention: Object.values(RETENTION)[index] })} + /> +
+
+
DISCARD
+ { + handlePropChange({ discard: Object.values(DISCARD)[index] }) + }} + /> +
+
+ handlePropChange({ allowRollupHdrs })} + readOnly={inRead} + /> +
ALLOW ROLL UP HDRS
+
+
+ handlePropChange({ denyDelete })} + readOnly={inRead || !inNew} + /> +
DENY DELETE
+
+
+ handlePropChange({ denyPurge })} + readOnly={inRead || !inNew} + /> +
DENY PURGE
+
+ + + + + handlePropChange({ retention: Object.values(RETENTION)[index] })} + label="MAX AGE" + value={config.maxAge} + desiredDefault={0} + onChange={maxAge => streamSo.setStreamConfig({ ...streamSa.stream.config, maxAge })} /> -
-
-
DISCARD
- { - handlePropChange({ discard: Object.values(DISCARD)[index] }) - }} + streamSo.setStreamConfig({ ...streamSa.stream.config, maxBytes })} /> -
-
- handlePropChange({ allowRollupHdrs })} - readOnly={inRead} + streamSo.setStreamConfig({ ...streamSa.stream.config, maxConsumers })} /> -
ALLOW ROLL UP HDRS
-
-
- handlePropChange({ denyDelete })} + streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgSize })} /> -
DENY DELETE
-
-
- handlePropChange({ denyPurge })} + streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgs })} /> -
DENY PURGE
-
- - -
LIMIT
- streamSo.setStreamConfig({ ...streamSa.stream.config, maxAge })} - /> - streamSo.setStreamConfig({ ...streamSa.stream.config, maxBytes })} - /> - streamSo.setStreamConfig({ ...streamSa.stream.config, maxConsumers })} - /> - streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgSize })} - /> - streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgs })} - /> - streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgsPerSubject })} - /> - - -
PLACEMENT
-
-
NUM REPLICAS
- handlePropChange({ numReplicas })} - readOnly={inRead} + streamSo.setStreamConfig({ ...streamSa.stream.config, maxMsgsPerSubject })} /> -
-
-
CLUSTER
-
-
-
NAME
- handlePlacementPropChange({ cluster })} - readOnly={inRead} - /> -
-
-
TAGS
- - items={config.placement?.tags} - onItemsChange={tags => handlePlacementPropChange({ tags })} - placeholder="ex. client or java" - readOnly={inRead} - onNewItem={() => ""} - fnIsVoid={i => !i || i.trim().length == 0} - RenderRow={EditStringRow} - /> -
-
-
+ -
PUBLISH
-
- handlePropChange({ noAck })} - readOnly={inRead} - /> -
ALLOW NO ACK ON PUBLISH
-
-
-
DUPLICATE WINDOW
- handlePropChange({ duplicateWindow })} - readOnly={inRead} - /> -
-
-
- { - if (check) { - if (!config.republish) { - handlePropChange({ - republish: { - src: "", - dest: "", - headersOnly: false, - } - }) - } - } else { - if (config.republish) { - handlePropChange({ republish: null }) - } - } - }} + +
+
NUM REPLICAS
+ handlePropChange({ numReplicas })} readOnly={inRead} /> -
REPUBLISH
- +
+
CLUSTER
-
SOURCE
+
NAME
handleRepublishPropChange({ src })} + value={config.placement?.cluster} + onChange={cluster => handlePlacementPropChange({ cluster })} readOnly={inRead} />
-
DESTINATION
- handleRepublishPropChange({ dest })} - readOnly={inRead} - /> -
-
- handleRepublishPropChange({ headersOnly })} +
TAGS
+ + items={config.placement?.tags} + onItemsChange={tags => handlePlacementPropChange({ tags })} + placeholder="ex. client or java" readOnly={inRead} + onNewItem={() => ""} + fnIsVoid={i => !i || i.trim().length == 0} + RenderRow={EditStringRow} /> -
HEADERS ONLY
- -
+
+ -
SEAL
-
- handlePropChange({ sealed })} - readOnly={inRead} - /> -
SEALED
-
+ +
+ handlePropChange({ noAck })} + readOnly={inRead} + /> +
ALLOW NO ACK ON PUBLISH
+
+
+
DUPLICATE WINDOW
+ handlePropChange({ duplicateWindow })} + readOnly={inRead} + /> +
+
+
+ { + if (check) { + if (!config.republish) { + handlePropChange({ + republish: { + src: "", + dest: "", + headersOnly: false, + } + }) + } + } else { + if (config.republish) { + handlePropChange({ republish: null }) + } + } + }} + readOnly={inRead} + /> +
REPUBLISH
+
+ +
+
+
SOURCE
+ handleRepublishPropChange({ src })} + readOnly={inRead} + /> +
+
+
DESTINATION
+ handleRepublishPropChange({ dest })} + readOnly={inRead} + /> +
+
+ handleRepublishPropChange({ headersOnly })} + readOnly={inRead} + /> +
HEADERS ONLY
+
+
+ +
+ + + + +
+ handlePropChange({ sealed })} + readOnly={inRead} + /> +
SEALED
+
- {/*
+ {/*
TEMPLATE OWNER
= ({ readOnly={inRead} />
*/} +
} diff --git a/frontend/src/components/stacks/streams/detail/View.tsx b/frontend/src/components/stacks/streams/detail/View.tsx index 10eb6851..b5f1d709 100644 --- a/frontend/src/components/stacks/streams/detail/View.tsx +++ b/frontend/src/components/stacks/streams/detail/View.tsx @@ -59,23 +59,24 @@ const StreamDetailView: FunctionComponent = ({
} > - {inRead ? <> + {inRead && <> } label="MESSAGES" selected={isMessagesSelect} onClick={handleMessagesClick} /> - } label="CONSUMERS" selected={isConsumersSelect} onClick={handleConsumersClick} /> - - : ( - - )} + + } + + + } diff --git a/frontend/src/stores/stacks/streams/index.ts b/frontend/src/stores/stacks/streams/index.ts index d3719031..fe70520e 100644 --- a/frontend/src/stores/stacks/streams/index.ts +++ b/frontend/src/stores/stacks/streams/index.ts @@ -1,16 +1,15 @@ import strApi from "@/api/streams" import cnnSo from "@/stores/connections" +import { GetAllCards } from "@/stores/docs/cards" +import { findAll } from "@/stores/docs/utils/manage" import { COLOR_VAR } from "@/stores/layout" +import { MESSAGE_TYPE } from "@/stores/log/utils" import { ViewState, ViewStore, default as docSetup, default as viewSetup } from "@/stores/stacks/viewBase" import { DOC_TYPE } from "@/types" import { StreamInfo } from "@/types/Stream" import { StoreCore, mixStores } from "@priolo/jon" -import { buildConsumers } from "../consumer/utils/factory" import loadBaseSetup, { LoadBaseState, LoadBaseStore } from "../loadBase" -import { buildStream, buildStreamMessages, buildStreamNew } from "./utils/factory" -import { findAll } from "@/stores/docs/utils/manage" -import { GetAllCards } from "@/stores/docs/cards" -import { MESSAGE_TYPE } from "@/stores/log/utils" +import { buildStream, buildStreamNew } from "./utils/factory"