add delete icon

src/components/AgentDetail.vue

@@ -12,6 +12,7 @@
                     <CTableHeaderCell scope="col">Status</CTableHeaderCell>
                     <CTableHeaderCell scope="col">IP</CTableHeaderCell>
                     <CTableHeaderCell scope="col">SCA Score</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">Max Security Event Level</CTableHeaderCell>
                     <CTableHeaderCell scope="col">Vulnerability</CTableHeaderCell>
                     <CTableHeaderCell scope="col">Healthy Check</CTableHeaderCell>
                 </CTableRow>
@@ -24,6 +25,7 @@
                     <CTableDataCell>{{ data.status }}</CTableDataCell>
                     <CTableDataCell>{{ data.ip }}</CTableDataCell>
                     <CTableDataCell>{{ data.sca_score }}</CTableDataCell>
+                    <CTableDataCell>{{ data.max_rule_level }}</CTableDataCell>
                     <CTableDataCell>{{ data.cvss3_score }}</CTableDataCell>
                     <CTableDataCell v-if="healthy === 'true'">
                         <CIcon icon="cilCheckAlt"  style="color: #94D82D;"/></CTableDataCell>

src/components/Criteria.vue

@@ -9,25 +9,28 @@
           Please Input the Criteria you want to check in Device Management Service
         </div>
       </CAlert>
-      <div class="row">
-        <div class="col-1">
-          <CIcon v-on:click="addForm" icon="cibAddthis" size="xxl" class="mb-3"/>
-        </div>
-      </div>
+      <CRow>
+        <CCol xs="auto" class="me-auto">
+          <CIcon v-on:click="addForm" icon="cibAddthis" size="xxl" class="mb-3"/>        
+        </CCol>
+        <CCol xs="auto">
+          <CButton @click="submit()" color="success">Submit</CButton>
+        </CCol>
+      </CRow>  
     </div>
-  
-  <div v-for="(form, index) in forms" :key="index">
-    <Form initialData="allFormData[index]" @update-data="data => handleDataUpdate(index, data)"></Form>    
-  </div>
-  <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-    
-    <CButton @click="submit()" color="success">Submit</CButton>
-  </div>
+    <Form v-for="(form, index) in forms" :key="index" initialData="allFormData[index]" 
+            :index="index"
+            @update-data="data => handleDataUpdate(index, data)"
+            @delete-form="deleteForm"
+            >
+    </Form>    
+
+
 </CContainer>
 </template>
 
 <script>
-import { CContainer, CAlert } from '@coreui/vue'
+import { CContainer, CAlert, CRow } from '@coreui/vue'
 import Form from './Form.vue'
 import { CIcon } from '@coreui/icons-vue';
 import * as icon from '@coreui/icons';
@@ -60,6 +63,7 @@ export default {
     },
     handleDataUpdate(index, data) {
       this.allFormData[index] = data; // Update the specific form's data
+      console.log(this.allFormData);
     },
     submit() {
       console.log('All form data:', this.allFormData);
@@ -81,7 +85,11 @@ export default {
     });
       // Here you can handle all the data, such as sending it to a server
     },
-
+    deleteForm(index) {
+      console.log(index)
+      this.forms.splice(index, 1); // Removes the form from the array
+      this.allFormData.splice(index, 1)
+    }
 
   }
 }

src/components/Form.vue

 <template>
-<CContainer class="">
-<CRow class="mb-5 g-3">
-  <CFormSelect class="ml-2"
+<CContainer xl>
+<CRow class="mt-1 mb-1 g-3">
+  <CCol class="me-auto">
+  <CFormSelect class="col ml-2"
   aria-label="Device Health Check Criteria"
   v-model="attribute"
   @input="updateParent" 
@@ -14,22 +15,28 @@
     { label: 'Rule Level', value: 'rule_level'}
   ]">
   </CFormSelect>
-  <CCol xs>
+  </CCol>
+  <CCol md="5" class="ms-auto">
     <CFormInput type="text" placeholder="Threshold" aria-label="Threshold"     
     v-model="threshold"
     @input="handleThresholdInput"
     @change="updateParent"
     />
   </CCol>
+  <CCol xs="auto" >
+    <CButton color="danger" @click="deleteForm">Delete</CButton>
+  </CCol>
 </CRow>
 </CContainer>
 </template>
 <script>
+import { CButton, CCol } from '@coreui/vue';
 import { nextTick } from 'vue';
 export default {
     name: 'Form',
     props: {
-        initialData: Object
+        initialData: Object,
+        index: Number 
     },
     data () {
       return {
@@ -38,6 +45,10 @@ export default {
         };
     },
     methods:{
+        deleteForm(){
+          console.log(this.index);
+          this.$emit('delete-form', this.index);
+        },
         handleThresholdInput(event) {
           this.threshold = event.target.value;
           this.updateParent();