Merge pull request #8 from solacecommunity/feature/treeview-icons

Feature/treeview icons
solacecommunity · Nov 19, 2024 · 99fbe06 · 99fbe06
2 parents 533a2df + 0b7e187
commit 99fbe06
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@tabler/icons-react": "^3.11.0",
     "@tauri-apps/api": "^1",
+    "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.0",
     "react": "^18.2.0",

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,8 @@
+:root {
+  font-family: "Open Sans", sans-serif;
+  --font-family: "Open Sans", sans-serif;
+}
+
 html {
   font-size: 14px;
 }

diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import TreeView from './components/BrokerQueueTreeView';
 import MessageList from './components/MessageList';
 import MessageDetails from './components/MessageDetails';
 
+import 'primeflex/primeflex.css';
 import 'primeicons/primeicons.css';
 import './App.css';
 

diff --git a/src/components/BrokerConfigDialog/index.jsx b/src/components/BrokerConfigDialog/index.jsx
@@ -55,12 +55,8 @@ export default function BrokerConfigDialog( { config, brokerEditor, onHide }) {
   }
 
   const handleTestConnection = async () => {
-    const { severity, summary, detail } = await brokerEditor.test(values);
-    toast.current.show({
-      severity,
-      summary,
-      detail
-    });
+    const { message } = await brokerEditor.test(values);
+    toast.current.show(message);
   }
 
   const Header = () => (

diff --git a/src/components/BrokerQueueTreeView/index.jsx b/src/components/BrokerQueueTreeView/index.jsx
@@ -19,33 +19,65 @@ export default function TreeView({ brokers, brokerEditor, onQueueSelected }) {
 
   const queueApi = useSempApi(QueueApi);
 
-  const nodes2 = brokers.map(config => ({
+  const getBrokerIcon = (testResult) => (
+    testResult ? (
+      testResult.connected ? (
+        testResult.replay ?
+          'pi pi-circle-fill text-primary' :
+          'pi pi-circle text-primary'
+      ) :
+        'pi pi-times-circle text-red-500'
+    ) : 'pi pi-question-circle'
+  );
+
+  const getQueueIcon = (queue) => {
+    const isLvq = queue.maxMsgSpoolUsage === 0;
+    const isEmpty = queue.msgSpoolUsage === 0;
+    const isFull = (queue.msgSpoolUsage/queue.maxMsgSpoolUsage) > queue.eventMsgSpoolUsageThreshold.setPercent;
+
+    const iconType = isLvq ? 'pi-caret-right' : 'pi-forward';
+    const iconColor = isEmpty ? '' : (!isLvq && isFull) ? 'text-red-500' : 'text-primary';
+    return `pi ${iconType} ${iconColor}`;
+  };
+
+  const nodes = brokers.map(config => ({
     id: config.id,
     key: config.id,
     label: config.displayName,
     data: {
       type: 'broker',
       config
     },
+    icon: getBrokerIcon(config.testResult),
     leaf: false,
     children: queuesListMap[config.id] || []
   }));
 
   const handleExpand = async (event) => {
     setIsLoading(true);
     const { config } = event.node.data;
-    const queues = (await queueApi.with(config).getMsgVpnQueues(config.vpn, { count: 100 })).data;
-    const queueNodeList = queues
-      .filter((queue) => !queue.queueName.startsWith('#'))
-      .map((queue, n) => ({
-        id: `${config.id}-${n}`,
-        key: n.toString(),
-        label: queue.queueName,
-        data: {
-          type: 'queue',
-          config: Object.assign({}, config, { queueName: queue.queueName })
-        }
-      }));
+
+    const { result } = await brokerEditor.test(config);
+    Object.assign(config, { testResult: result }); //HACK: this updates the during each expansion
+
+    let queueNodeList = [];
+    if(result.connected) {
+      const queues = (await queueApi.with(config).getMsgVpnQueues(config.vpn, { count: 100 })).data;
+      console.dir(queues);
+      queueNodeList = queues
+        .filter((queue) => !queue.queueName.startsWith('#'))
+        .map((queue, n) => ({
+          id: `${config.id}-${n}`,
+          key: n.toString(),
+          label: queue.queueName,
+          data: {
+            type: 'queue',
+            config: Object.assign({}, config, { queueName: queue.queueName })
+          },
+          icon: getQueueIcon(queue)
+        }));
+    }
+
     setQueuesListMap(prev => ({...prev, [config.id]: queueNodeList}));
     setIsLoading(false);
   };
@@ -73,7 +105,7 @@ export default function TreeView({ brokers, brokerEditor, onQueueSelected }) {
   return (
     <div className={classes.container}>
       <Toolbar className={classes.toolbar} start={() => <Button size="small" icon={PrimeIcons.PLUS} onClick={handleAddBrokerClick} />} />
-      <Tree value={nodes2} className={classes.tree} onExpand={handleExpand} onSelect={handleSelect} onNodeDoubleClick={handleDoubleClick} selectionMode="single" loading={isLoading} />
+      <Tree value={nodes} className={classes.tree} onExpand={handleExpand} onSelect={handleSelect} onNodeDoubleClick={handleDoubleClick} selectionMode="single" loading={isLoading} pt={{ container: { className: classes.treeContainer } }} />
       <BrokerConfigDialog config={brokerForConfig} brokerEditor={brokerEditor} onHide={handleConfigHide}  />
     </div>
   );

diff --git a/src/components/BrokerQueueTreeView/styles.module.css b/src/components/BrokerQueueTreeView/styles.module.css
@@ -1,5 +1,7 @@
 .container {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .toolbar {
@@ -14,4 +16,8 @@
   height: 100%;
   overflow: auto;
   user-select: none;
+}
+
+.treeContainer {
+  overflow-x: hidden;
 }
diff --git a/src/providers/SolaceConfigProvider.jsx b/src/providers/SolaceConfigProvider.jsx
@@ -91,19 +91,19 @@ export function useSolaceConfigContext() {
 
       if(err.responseCode) switch(err.responseCode) {
         case 401:
-          return { result: false, severity: 'error', summary: 'SMF: Unauthorized', detail: 'Incorrect client username or password.' }
+          return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SMF: Unauthorized', detail: 'Incorrect client username or password.' }};
       }
 
       const errMsg = err.message;
 
       if (errMsg.includes('invalid URL')) {
-        return { result: false, severity: 'error', summary: 'SMF: Failure', detail: 'Invalid broker URL.'}
+        return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SMF: Failure', detail: 'Invalid broker URL.'}};
       }
       if (errMsg.includes('Connection error')) {
-        return { result: false, severity: 'error', summary: 'SMF: Failure', detail: 'General connection error.'}
+        return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SMF: Failure', detail: 'General connection error.'}};
       }
 
-      return { result: false, severity: 'error', summary: 'SMF: Connection Error', detail: 'Unknown error!' };    
+      return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SMF: Connection Error', detail: 'Unknown error!' }};    
     }
 
     const replayLogApi = replayLogApiContext.with(config);
@@ -121,16 +121,16 @@ export function useSolaceConfigContext() {
       switch (status) {
         case 200:
           if (body.data.length > 0) {
-            return { result: true, severity: 'info', summary: 'Success', detail: 'Broker connection succeeded.' };
+            return { result: { connected: true, replay: true}, message: { severity:'info', summary: 'Success', detail: 'Broker connection succeeded.' }};
           } else {
-            return { result: true, severity: 'warn', summary: 'Warning', detail: 'Replay Log not enabled on broker.' }
+            return { result: { connected: true, replay: false}, message: { severity:'warn', summary: 'Warning', detail: 'Replay Log not enabled on broker.' }};
           }
         case 400:
-          return { result: false, severity: 'error', summary: 'SEMP: Bad Request', detail: errorDetail };
+          return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SEMP: Bad Request', detail: errorDetail }};
         case 401:
-          return { result: false, severity: 'error', summary: 'SEMP: Unauthorized', detail: errorDetail };
+          return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SEMP: Unauthorized', detail: errorDetail }};
         case 403:
-          return { result: false, severity: 'error', summary: 'SEMP: Forbidden', detail: errorDetail };
+          return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SEMP: Forbidden', detail: errorDetail }};
       }
     };
 
@@ -148,17 +148,17 @@ export function useSolaceConfigContext() {
           errMsg.includes('Invalid URL') ||
           errMsg.includes('expected empty host')
         ) {
-          return { result: false, severity: 'error', summary: 'SEMP: Failure', detail: 'Invalid broker URL.' };
+          return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SEMP: Failure', detail: 'Invalid broker URL.' }};
         }
 
         if (
           errMsg.includes('Network Error') ||
           errMsg.includes('Request has been terminated')
         ) {
-          return { result: false, severity: 'error', summary: 'SEMP: Failure', detail: 'Broker service unreachable.' }
+          return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SEMP: Failure', detail: 'Broker service unreachable.' }}
         }
       }
-      return { result: false, severity: 'error', summary: 'SEMP: Failure', detail: 'Unknown error!' };
+      return { result: { connected: false, replay: false}, message: { severity:'error', summary: 'SEMP: Failure', detail: 'Unknown error!' }};
     }
   };