FE: Highlight Synchronization Issue Across Multiple Kafka Clusters in Kafbat UI

[Haebuk]

Issue submitter TODO list

• I've looked up my issue in FAQ
• I've searched for an already existing issues here
• I've tried running main-labeled docker image and the issue still persists there
• I'm running a supported version of the application which is listed here

Describe the bug (actual behavior)

Issue Description

When working with multiple Kafka clusters in Kafbat UI (v1.2.0), there is a UI synchronization issue where selecting a tab (like "Topics") in one cluster causes the same tab to be highlighted in all other clusters simultaneously.

As shown in the screenshot, when selecting the "Topics" tab in one cluster, the "Topics" tab is also highlighted in other clusters (kafka-prod2 and kafka-prod), even though they are separate environments. This behavior occurs consistently with all navigation tabs, not just limited to the Topics tab.

Expected behavior

Each cluster's navigation should maintain its own independent state. Selecting a tab in one cluster should not affect the highlighting of tabs in other clusters.

Your installation details

Kafbat UI version: v1.2.0
Build: 3074abc
helm chart version: 1.4.12
config:

yamlApplicationConfig:
  kafka:
    clusters:
      - name: kafka-prod2
        bootstrapServers: ...
        properties:
          security.protocol: SSL
        schemaRegistry: http://schema-registry-prod.schema-registry-prod.svc.cluster.local:8081
        serde: &serde
          - name: Glue-mongo-cdc-values-prod
            filePath: /glue-serde/kafbatui-glue-serde-v1.0.1.jar
            className: io.kafbat.ui.serde.glue.GlueSerde
            properties:
              region: ap-northeast-2
              registry: mongo-cdc-values
          - name: Glue-postgresql-cdc-values-prod
            filePath: /glue-serde/kafbatui-glue-serde-v1.0.1.jar
            className: io.kafbat.ui.serde.glue.GlueSerde
            properties:
              region: ap-northeast-2
              registry: postgresql-cdc-values-prod
        kafkaConnect:
          - name: kafka-connect-prod2
            address: http://kafka-connect-cluster-prod2-connect.kafka.svc.cluster.local:8083
        audit: &audit
          topic-audit-enabled: true
          console-audit-enabled: true
          topic: '__kui-audit-log' # default name
          audit-topic-properties: # any kafka topic properties in format of a map
            retention.ms: 1209600000 # 14 days
          audit-topics-partitions: 1 # how many partitions, default is 1
          level: all # either ALL or ALTER_ONLY (default). ALL will log all read operations.
      - name: kafka-prod
        bootstrapServers: ...
        properties:
          security.protocol: SSL
        schemaRegistry: http://schema-registry-prod.schema-registry-prod.svc.cluster.local:8081
        serde: *serde
        kafkaConnect:
          - name: kafka-connect-prod
            address: http://kafka-connect-cluster-prod-connect.kafka-prod.svc.cluster.local:8083
        audit: *audit

Steps to reproduce

1. Connect to multiple Kafka clusters in Kafbat UI
2. Navigate to any tab (e.g., "Topics", "Brokers", "Consumers", etc.) in one cluster
3. Observe that the same tab is highlighted across all clusters

Screenshots

No response

Logs

No response

Additional context

No response

[github-actions]

Hi Haebuk! 👋

Welcome, and thank you for opening your first issue in the repo!

Please wait for triaging by our maintainers.

As development is carried out in our spare time, you can support us by sponsoring our activities or even funding the development of specific issues.
Sponsorship link

If you plan to raise a PR for this issue, please take a look at our contributing guide.

[Haarolean]

#694