Merge pull request #732 from marle3003/dependabot/npm_and_yarn/webui/develop/vue-3.5.23

Bump vue from 3.5.22 to 3.5.23 in /webui

Author: github-actions[bot]

webui/package-lock.json

@@ -29,7 +29,7 @@
     "http-status-codes": "^2.3.0",
     "js-yaml": "^4.1.0",
     "ncp": "^2.0.0",
-    "vue": "^3.5.22",
+    "vue": "^3.5.23",
     "vue-router": "^4.6.3",
     "vue3-ace-editor": "^2.2.4",
     "vue3-highlightjs": "^1.0.5",

webui/package.json

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Ref, onUnmounted } from 'vue'
+import { type Ref, computed, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useService } from '@/composables/services'
 import KafkaGroups from './KafkaGroups.vue'
@@ -13,29 +13,29 @@ const route = useRoute()
 const serviceName = route.params.service!.toString()
 const topicName = route.params.topic?.toString()
 const { service, close } = <{service: Ref<KafkaService | null>, close: () => void}>fetchService(serviceName, 'kafka')
-function topic() {
+const topic = computed(() => {
   if (!service.value) {return null}
   for (let topic of service.value?.topics){
     if (topic.name == topicName) {
       return topic
     }
   }
   return null
-}
+})
 onUnmounted(() => {
     close()
 })
 </script>
 
 <template>
-  <div v-if="$route.name == 'kafkaTopic' && service != null">
+  <div v-if="$route.name == 'kafkaTopic' && service != null && topic">
       <div class="card-group">
         <section class="card" aria-label="Info">
             <div class="card-body">
                 <div class="row">
                     <div class="col header mb-3">
                         <p id="topic" class="label">Topic</p>
-                        <p aria-labelledby="topic">{{ topic()?.name }}</p>
+                        <p aria-labelledby="topic">{{ topic.name }}</p>
                     </div>
                     <div class="col header">
                         <p id="cluster" class="label">Cluster</p>
@@ -56,7 +56,7 @@ onUnmounted(() => {
                 <div class="row">
                     <div class="col">
                         <p id="description" class="label">Description</p>
-                        <markdown :source="topic()?.description" aria-labelledby="description" :html="true" />
+                        <markdown :source="topic.description" aria-labelledby="description" :html="true" />
                     </div>
 
                 </div>
@@ -77,13 +77,13 @@ onUnmounted(() => {
                 <kafka-messages :service="service" :topicName="topicName" />
               </div>
               <div class="tab-pane fade" id="partitions" role="tabpanel" aria-labelledby="partitions-tab">
-                <kafka-partition :topic="topic()!" />
+                <kafka-partition :topic="topic" />
               </div>
               <div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
                 <kafka-groups :service="service" :topicName="topicName"/>
               </div>
               <div class="tab-pane fade" id="configs" role="tabpanel" aria-labelledby="configs-tab">
-                <topic-config v-if="topic()" :topic="topic()!" />
+                <topic-config :topic="topic" />
               </div>
             </div>
           </div>

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

@@ -4,7 +4,7 @@ import SourceView from '../SourceView.vue'
 import SchemaExpand from '../SchemaExpand.vue'
 import SchemaValidate from '../SchemaValidate.vue'
 import { usePrettyLanguage } from '@/composables/usePrettyLanguage'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
     topic: KafkaTopic,
@@ -30,9 +30,19 @@ function filename() {
     return `${props.topic.name}-example${ext}`
 }
 
-// select first message
-const first = messages(props.topic)[0]!
-selected.value = props.topic.messages[first]!
+onMounted(() => {
+    if (!props.topic) {
+        return
+    }
+    const first = messages(props.topic)[0]
+    if (first) {
+        const msg = props.topic.messages[first]
+        if (msg) {
+            selected.value = msg
+        }
+    }
+
+})
 
 function selectedMessageChange(event: any){
     for (const messageId in props.topic.messages){