add table column and row in agentDetail view and debuging for form input

src/components/AgentDetail.vue

@@ -10,7 +10,9 @@
                     <CTableHeaderCell scope="col">Name</CTableHeaderCell>
                     <CTableHeaderCell scope="col">OS</CTableHeaderCell>
                     <CTableHeaderCell scope="col">Status</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">IP</CTableHeaderCell>
                     <CTableHeaderCell scope="col">SCA Score</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">Vulnerability</CTableHeaderCell>
                     <CTableHeaderCell scope="col">Healthy Check</CTableHeaderCell>
                 </CTableRow>
                 </CTableHead>
@@ -20,11 +22,13 @@
                     <CTableDataCell>{{ data.node_name }}</CTableDataCell>
                     <CTableDataCell>{{ data.OS }}</CTableDataCell>
                     <CTableDataCell>{{ data.status }}</CTableDataCell>
-                    <CTableDataCell>{{ data.sca_score }}</CTableDataCell>                    
+                    <CTableDataCell>{{ data.ip }}</CTableDataCell>
+                    <CTableDataCell>{{ data.sca_score }}</CTableDataCell>
+                    <CTableDataCell>{{ data.cvss3_score }}</CTableDataCell>
                     <CTableDataCell v-if="healthy === 'true'">
-                        <CIcon icon="cilCheckAlt" /></CTableDataCell>
+                        <CIcon icon="cilCheckAlt"  style="color: #94D82D;"/></CTableDataCell>
                     <CTableDataCell v-else>
-                        <CIcon icon="cilX" /></CTableDataCell>
+                        <CIcon icon="cilX" style="color: #F44336;"/></CTableDataCell>
                     
                 </CTableRow>
                 </CTableBody>
@@ -36,8 +40,6 @@
     </template>
     <script>
 
-    import { onMounted } from 'vue';
-    import { useRoute } from 'vue-router'
     export default {
       name:"AgentDetail",
       data() {

src/components/Form.vue

@@ -10,19 +10,22 @@
     { label: 'SCA Benchmark', value: 'sca' },
     { label: 'Nework Interface', value: 'netiface' },
     { label: 'Hotfix', value: 'hotfix' },
+    { label: 'Vulnerability', value: 'vulnerability' },
     { label: 'Rule Level', value: 'rule_level'}
   ]">
   </CFormSelect>
   <CCol xs>
     <CFormInput type="text" placeholder="Threshold" aria-label="Threshold"     
     v-model="threshold"
-    @input="updateParent"
+    @input="handleThresholdInput"
+    @change="updateParent"
     />
   </CCol>
 </CRow>
 </CContainer>
 </template>
 <script>
+import { nextTick } from 'vue';
 export default {
     name: 'Form',
     props: {
@@ -35,9 +38,18 @@ export default {
         };
     },
     methods:{
+        handleThresholdInput(event) {
+          this.threshold = event.target.value;
+          this.updateParent();
+        },
         updateParent() {
-          this.$emit('update-data', { attribute: this.attribute, threshold: this.threshold });
-          console.log(this.threshold)
+          nextTick(() => {
+                this.$emit('update-data', { 
+                    attribute: this.attribute, 
+                    threshold: this.threshold 
+                });
+            });
+          
         }
 
     }