Bug Fixes (#878)

* fix bugs in Network Topology * add Feedback button to tools * format style
InternetHealthReport · Nov 13, 2024 · ef9f038 · ef9f038
1 parent 6d1e98b
commit ef9f038
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 69 deletions.
diff --git a/src/components/Feedback.vue b/src/components/Feedback.vue
@@ -21,7 +21,7 @@ const showFeedbackDialog = ref(false)
       </QCardSection>
       <QCardSection>
         <div>
-          Please share your feedback to improve our report pages. You can either:
+          Please share your feedback to improve our pages. You can either:
           <ul>
             <li>
               Send your feedback by email to

diff --git a/src/components/charts/NetworkTopologyChart.vue b/src/components/charts/NetworkTopologyChart.vue
@@ -10,16 +10,16 @@ import { useRouter } from 'vue-router'
 const iyp_api = inject('iyp_api')
 
 const router = useRouter()
-const emit = defineEmits(['searchChange', 'afChange'])
+const emit = defineEmits(['searchChange', 'afChange', 'deleteChart'])
 
 const props = defineProps({
   searchInputP: {
-    type: String,
-    default: '2501'
+    type: String
+    // default: '2501'
   },
   af: {
-    type: String,
-    default: 'IPv4'
+    type: String
+    // default: 'IPv4'
   },
   isComponent: {
     type: Boolean,
@@ -428,12 +428,20 @@ watch(
   { deep: true }
 )
 
-watch(searchInput, (newValue) => {
-  emit('searchChange', props.id, newValue)
-  if (isPrefix(newValue)) {
-    if (newValue.includes('.')) {
+const watchInput = computed(() => ({
+  input: searchInput.value,
+  af: ipModel.value
+}))
+
+watch(watchInput, (newValue) => {
+  emit('searchChange', props.id, {
+    input: newValue.input,
+    af: newValue.af.includes('4') ? '4' : '6'
+  })
+  if (isPrefix(newValue.input)) {
+    if (newValue.input.includes('.')) {
       ipModel.value = 'IPv4'
-    } else if (newValue.includes(':')) {
+    } else if (newValue.input.includes(':')) {
       ipModel.value = 'IPv6'
     }
   }

diff --git a/src/components/networks/as/ASOverview.vue b/src/components/networks/as/ASOverview.vue
@@ -278,14 +278,18 @@ onMounted(() => {
         <tr>
           <td class="topology">
             <NetworkTopologyChart
-              :search-input="String(asNumber)"
+              :search-input-p="String(asNumber)"
               af="IPv4"
               :is-component="true"
               :show-legend="false"
             />
           </td>
           <td class="topology">
-            <NetworkTopologyChart :search-input="String(asNumber)" af="IPv6" :is-component="true" />
+            <NetworkTopologyChart
+              :search-input-p="String(asNumber)"
+              af="IPv6"
+              :is-component="true"
+            />
           </td>
         </tr>
       </tbody>

diff --git a/src/components/networks/prefix/PrefixOverview.vue b/src/components/networks/prefix/PrefixOverview.vue
@@ -212,7 +212,7 @@ onMounted(() => {
         <tr>
           <td class="topology">
             <NetworkTopologyChart
-              :search-input="props.getPrefix"
+              :search-input-p="props.getPrefix"
               :af="getAf(props.getPrefix)"
               :is-component="true"
             />

diff --git a/src/views/BGPMonitor.vue b/src/views/BGPMonitor.vue
@@ -20,6 +20,7 @@ import BGPPathsChart from '@/components/charts/BGPPathsChart.vue'
 import BGPLineChart from '@/components/charts/BGPLineChart.vue'
 import BGPMessagesTable from '@/components/tables/BGPMessagesTable.vue'
 import '@/styles/chart.css'
+import Feedback from '@/components/Feedback.vue'
 
 const { t } = i18n.global
 
@@ -498,6 +499,7 @@ onMounted(() => {
       </QCard>
     </QDialog>
   </div>
+  <Feedback />
 </template>
 
 <style>