modify frontend

src/components/Criteria.vue

 <template>
 <CContainer>
     <div class="container-fluid p-0">
-      <CAlert color="primary" class="d-flex align-items-center">
+      <CAlert color="info" class="d-flex align-items-center">
         <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
           <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
         </svg>
         <div>
-          An example alert with an icon
+          Please Input the Criteria you want to check in Device Management Service
         </div>
       </CAlert>
       <div class="row">
@@ -48,8 +48,8 @@ export default {
   },  
   data() {
     return {
-      forms: [],
-      allFormData: []
+      forms: [{}],
+      allFormData: ['',]
     };
   },
   methods:{

src/components/Form.vue

 <template>
 <CContainer class="">
 <CRow class="mb-5 g-3">
-<CCol xs>
-    <CFormInput type="text" placeholder="Attribute" aria-label="Attribute"
+  <CFormSelect class="ml-2"
+  aria-label="Device Health Check Criteria"
   v-model="attribute"
   @input="updateParent" 
-    />
-  </CCol>
+  :options="[
+    'Attributes',
+    { label: 'SCA Benchmark', value: 'sca' },
+    { label: 'Nework Interface', value: 'netiface' },
+    { label: 'Hotfix', value: 'hotfix' },
+    { label: 'Rule Level', value: 'rule_level'}
+  ]">
+  </CFormSelect>
   <CCol xs>
     <CFormInput type="text" placeholder="Threshold" aria-label="Threshold"     
     v-model="threshold"