add kafka messages to clusters view in dashboard

Author: marle3003

webui/src/components/dashboard/kafka/KafkaMessages.vue

@@ -8,11 +8,14 @@ import router from '@/router'
 import { getRouteName, useDashboard } from '@/composables/dashboard'
 
 const props = defineProps<{
-    service: KafkaService,
+    service?: KafkaService,
     topicName?: string
 }>()
 
-const labels = [{name: 'name', value: props.service!.name}]
+const labels = []
+if (props.service) {
+    labels.push({name: 'name', value: props.service.name})
+}
 if (props.topicName){
     labels.push({name: 'topic', value: props.topicName})
 }
@@ -156,18 +159,36 @@ function showMessage(event: ServiceEvent){
     }
 }
 
-function getTopic(name: string): KafkaTopic {
-    for (const topic of props.service!.topics) {
-        if (topic.name === name) {
-            return topic
+function getTopic(event: ServiceEvent): KafkaTopic | undefined {
+    const topicName = event.traits["topic"]!
+
+    let service = props.service
+     if (!service) {
+        const { services } = dashboard.value.getServices('kafka', false);
+        for (const s of services.value) {
+            console.log(s)
+            if (s.name === event.traits['name']) {
+                service = s as KafkaService
+            }
         }
     }
-    throw new Error(`topic ${name} not found`)
+
+    if (props.service) {
+        for (const topic of props.service.topics) {
+            if (topic.name === topicName) {
+                return topic
+            }
+        }
+    }
+   
+    return undefined
 }
 function getMessageConfig(event: ServiceEvent): KafkaMessage | undefined {
-    const topicName = event.traits["topic"]!
     const data = eventData(event)
-    const topic = getTopic(topicName)
+    const topic = getTopic(event)
+    if (!topic) {
+        return undefined
+    }
 
     const keys = Object.keys(topic.messages)
     if (keys.length === 1) {

webui/src/components/dashboard/kafka/KafkaMessagesCard.vue

@@ -2,7 +2,7 @@
 import KafkaMessages from './KafkaMessages.vue'
 
 defineProps<{
-    service: KafkaService,
+    service?: KafkaService,
     topicName?: string
 }>()
 </script>

webui/src/components/dashboard/kafka/KafkaServicesCard.vue

@@ -8,10 +8,9 @@ import { getRouteName, useDashboard } from '@/composables/dashboard';
 
 const { sum, max } = useMetrics()
 const { format } = usePrettyDates()
-const route = useRoute()
 const router = useRouter()
 const { dashboard } = useDashboard();
-const { services, close } = dashboard.value.getServices('kafka')
+const { services, close } = dashboard.value.getServices('kafka');
 
 function lastMessage(service: Service){
     const n = max(service.metrics, 'kafka_message_timestamp')

webui/src/views/DashboardView.vue

@@ -12,6 +12,7 @@ import HttpRequests from '../components/dashboard/http/Requests.vue'
 import KafkaMessageMetricCard from '../components/dashboard/kafka/KafkaMessageMetricCard.vue'
 import KafkaClustersCard from '../components/dashboard/kafka/KafkaServicesCard.vue'
 import KafkaService from '../components/dashboard/kafka/KafkaService.vue'
+import KafkaMessagesCard from '@/components/dashboard/kafka/KafkaMessagesCard.vue'
 
 import LdapServicesCard from '@/components/dashboard/ldap/LdapServicesCard.vue'
 import LdapService from '../components/dashboard/ldap/Service.vue'
@@ -188,6 +189,9 @@ useMeta('Dashboard | mokapi.io', description, '')
                     <div class="card-group"  v-if="isServiceAvailable('kafka')">
                         <kafka-clusters-card />
                     </div>
+                     <div class="card-group"  v-if="isServiceAvailable('kafka')">
+                        <kafka-messages-card />
+                    </div>
                 </div>
 
                 <div v-if="$route.name === getRouteName('mail').value">