Add ignore topics functionality (#20)

* Add ignore topics functionality

* 0.0.8

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to the "solace-try-me-vsc-extension" extension will be documented in this file.
 
+## [0.0.8] - 2024-10-22
+- Added ignore topics functionality
+
 ## [0.0.7] - 2024-10-20
 - Added the feature of searching and filtering messages + the option to open messages as saved files.
 

package.json

@@ -2,7 +2,7 @@
   "name": "solace-try-me-vsc-extension",
   "displayName": "Solace Try Me VSC Extension",
   "description": "VSC built-in tool to visualize and observe events flowing through Solace PubSub+ Broker.",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "publisher": "solace-tools",
   "author": {
     "name": "Cyrus Mobini"

webview/src/Shared/SolaceManager.ts

@@ -14,12 +14,13 @@ SolclientFactory.init(factoryProps);
 SolclientFactory.setLogLevel(solace.LogLevel.DEBUG);
 
 class SolaceManager {
-  session: solace.Session | undefined;
-  isConnected = false;
-  onMessage!: onMessageCallback;
-  brokerConfig!: BrokerConfig;
-  inactivityTimeout: NodeJS.Timeout | null = null;
-  onConnectionStateChange!: (
+  private session: solace.Session | undefined;
+  private isConnected = false;
+  private onMessage!: onMessageCallback;
+  private brokerConfig!: BrokerConfig;
+  private inactivityTimeout: NodeJS.Timeout | null = null;
+  private ignoreTopics: RegExp[] = [];
+  private onConnectionStateChange!: (
     isConnected: boolean,
     error: string | null
   ) => void;
@@ -35,10 +36,21 @@ class SolaceManager {
     }, this.brokerDisconnectTimeout);
   }
 
+  shouldIgnoreMessage(topic: string) {
+    if (!this.ignoreTopics.length) {
+      return false;
+    }
+    return this.ignoreTopics.some((ignoreTopic) => ignoreTopic.test(topic));
+  }
+
   handleMessage(message: solace.Message) {
     this.resetInactivityTimeout();
     const destination = message.getDestination();
     const topic = destination ? destination.getName() : "unknown";
+    if (this.shouldIgnoreMessage(topic)) {
+      console.debug("Ignoring message for topic:", topic);
+      return;
+    }
     const payload = message.getBinaryAttachment()?.toString() ?? "";
     const metadata: Message["metadata"] = {
       deliveryMode: message.getDeliveryMode(),
@@ -161,6 +173,31 @@ class SolaceManager {
     this.onMessage = onMessage;
   }
 
+  setOnConnectionStateChange(
+    onConnectionStateChange: (
+      isConnected: boolean,
+      error: string | null
+    ) => void
+  ) {
+    this.onConnectionStateChange = onConnectionStateChange;
+  }
+
+  setIgnoreTopics(ignoreTopics: string[]) {
+    this.ignoreTopics = ignoreTopics.map(
+      (topic) => new RegExp(topic.replace(/\*/g, "[^/]+").replace(">", ".*"))
+    );
+    console.log("Ignoring topics:", this.ignoreTopics);
+
+  }
+
+  getBrokerConfig() {
+    return this.brokerConfig;
+  }
+
+  getConnectionState() {
+    return this.isConnected;
+  }
+
   subscribe(topic: string) {
     try {
       if (!this.session) {

webview/src/Shared/components/ConnectionManager.tsx

@@ -32,7 +32,10 @@ const ConnectionManager = ({ onSetConnection }: ConnectionManagerProps) => {
     if (currentBroker) {
       if (solaceConnection) {
         if (
-          compareBrokerConfigs(solaceConnection.brokerConfig, currentBroker)
+          compareBrokerConfigs(
+            solaceConnection.getBrokerConfig(),
+            currentBroker
+          )
         ) {
           return;
         }
@@ -44,17 +47,16 @@ const ConnectionManager = ({ onSetConnection }: ConnectionManagerProps) => {
       );
       setConnectionState(ConnectionState.DISCONNECTED);
 
-      solace.onConnectionStateChange = (
-        isConnected: boolean,
-        error: string | null
-      ) => {
-        setConnectionError(error);
-        if (isConnected) {
-          setConnectionState(ConnectionState.CONNECTED);
-        } else {
-          setConnectionState(ConnectionState.DISCONNECTED);
+      solace.setOnConnectionStateChange(
+        (isConnected: boolean, error: string | null) => {
+          setConnectionError(error);
+          if (isConnected) {
+            setConnectionState(ConnectionState.CONNECTED);
+          } else {
+            setConnectionState(ConnectionState.DISCONNECTED);
+          }
         }
-      };
+      );
       setSolaceConnection(solace);
     }
   }, [currentBroker, settings.brokerDisconnectTimeout, solaceConnection]);
@@ -109,7 +111,7 @@ const ConnectionManager = ({ onSetConnection }: ConnectionManagerProps) => {
       break;
     case ConnectionState.CONNECTING:
       buttonProps.children = "Connecting";
-      buttonProps.startContent = <Spinner color="current" size="sm" />
+      buttonProps.startContent = <Spinner color="current" size="sm" />;
       break;
     default:
       buttonProps.startContent = <Link2Off size={24} />;

webview/src/Shared/interfaces.ts

@@ -55,6 +55,7 @@ export interface PublishConfigs extends PublishOptions {
 
 export interface SubscribeConfigs {
   topics: string[];
+  ignoreTopics: string[];
   queueType?: solace.QueueType;
   queueName?: string;
   queueTopic?: string;

webview/src/SubscribeView/SubscribeView.tsx

@@ -8,7 +8,7 @@ import {
   Radio,
   Divider,
 } from "@nextui-org/react";
-import { SquareX, Trash2 } from "lucide-react";
+import { Plus, SquareX, Trash2 } from "lucide-react";
 
 import {
   Configs,
@@ -34,13 +34,16 @@ const SubscribeView = () => {
     useState<solace.MessageConsumer | null>(null);
 
   const [topics, setTopics] = useState<string[]>([]);
+  const [ignoreTopics, setIgnoreTopics] = useState<string[]>([]);
   const [queueType, setQueueType] = useState<solace.QueueType>();
   const [queueName, setQueueName] = useState<string>();
   const [queueTopic, setQueueTopic] = useState<string>();
 
   const [messages, setMessages] = useState<Message[]>([]);
 
   const [topicInputField, setTopicInputField] = useState<string>("");
+  const [ignoreTopicInputField, setIgnoreTopicInputField] =
+    useState<string>("");
   const [openBindSettings, setOpenBindSettings] = useState(false);
   const [queueError, setQueueError] = useState<string | null>(null);
 
@@ -52,9 +55,9 @@ const SubscribeView = () => {
 
   useEffect(() => {
     if (solaceConnection) {
-      solaceConnection.onMessage = (message: Message) => {
+      solaceConnection.setOnMessage((message: Message) => {
         addMessage(message, settings.maxDisplayMessages);
-      };
+      });
       for (const topic of topics) {
         solaceConnection.subscribe(topic);
       }
@@ -89,6 +92,9 @@ const SubscribeView = () => {
   };
 
   const subscribeTopic = (topic: string) => {
+    if (ignoreTopics.includes(topic)) {
+      return;
+    }
     solaceConnection?.subscribe(topic);
     setTopics([...topics, topic]);
   };
@@ -118,6 +124,7 @@ const SubscribeView = () => {
 
   const configs: SubscribeConfigs = {
     topics,
+    ignoreTopics,
     queueType,
     queueName,
     queueTopic,
@@ -126,6 +133,7 @@ const SubscribeView = () => {
   const onLoadConfig = (config: Configs) => {
     const {
       topics: newTopics,
+      ignoreTopics,
       queueType,
       queueName,
       queueTopic,
@@ -138,6 +146,7 @@ const SubscribeView = () => {
       solaceConnection?.subscribe(topic);
     });
     setTopics(newTopics);
+    setIgnoreTopics(ignoreTopics || []);
 
     setQueueType(queueType);
     setQueueName(queueName);
@@ -151,6 +160,12 @@ const SubscribeView = () => {
 
   const disabledSubscribe = !solaceConnection || !topicInputField.trim();
 
+  useEffect(() => {
+    if (solaceConnection) {
+      solaceConnection.setIgnoreTopics(ignoreTopics);
+    }
+  }, [ignoreTopics, solaceConnection]);
+
   return (
     <div className="pb-3">
       <ConfigStore
@@ -169,6 +184,12 @@ const SubscribeView = () => {
           isRequired
           isDisabled={!solaceConnection}
           onValueChange={setTopicInputField}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && topicInputField.trim()) {
+              subscribeTopic(topicInputField.trim());
+              setTopicInputField("");
+            }
+          }}
         />
         <Button
           radius="sm"
@@ -198,6 +219,58 @@ const SubscribeView = () => {
             )}
           </div>
         </div>
+        <div className="flex gap-2 flex-col">
+          <Input
+            label="Ignore Topics"
+            placeholder="Enter a topic to ignore"
+            variant="bordered"
+            value={ignoreTopicInputField}
+            isRequired
+            isDisabled={!solaceConnection}
+            onValueChange={setIgnoreTopicInputField}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && ignoreTopicInputField.trim()) {
+                setIgnoreTopics(
+                  Array.from(new Set([...ignoreTopics, ignoreTopicInputField]))
+                );
+                setIgnoreTopicInputField("");
+              }
+            }}
+            endContent={
+              <Button
+                radius="lg"
+                variant="bordered"
+                isIconOnly
+                onPress={() => {
+                  if (ignoreTopicInputField.trim()) {
+                    setIgnoreTopics(
+                      Array.from(
+                        new Set([...ignoreTopics, ignoreTopicInputField])
+                      )
+                    );
+                    setIgnoreTopicInputField("");
+                  }
+                }}
+              >
+                <Plus />
+              </Button>
+            }
+          />
+          <div>
+            <div className="flex gap-2 flex-wrap overflow-auto pb-3 px-1">
+              {ignoreTopics.map((topic) => (
+                <Chip
+                  key={topic}
+                  onClose={() =>
+                    setIgnoreTopics(ignoreTopics.filter((t) => t !== topic))
+                  }
+                >
+                  {topic}
+                </Chip>
+              ))}
+            </div>
+          </div>
+        </div>
         <Accordion
           isCompact
           selectedKeys={openBindSettings ? ["bind-settings"] : []}
@@ -326,7 +399,9 @@ const SubscribeView = () => {
           messages={messages}
           maxPayloadLength={settings.maxPayloadLength}
           maxPropertyLength={settings.maxPropertyLength}
-          baseFilePath={settings.savePayloads ? settings.payloadBasePath : undefined}
+          baseFilePath={
+            settings.savePayloads ? settings.payloadBasePath : undefined
+          }
         />
       </div>
     </div>