update agent view

src/components/AgentDetail.vue

@@ -6,16 +6,26 @@
             <CTable hover>
                 <CTableHead>
                 <CTableRow>
-                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">#</CTableHeaderCell>                    
                     <CTableHeaderCell scope="col">Name</CTableHeaderCell>
-                    
+                    <CTableHeaderCell scope="col">OS</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">Status</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">SCA Score</CTableHeaderCell>
+                    <CTableHeaderCell scope="col">Healthy Check</CTableHeaderCell>
                 </CTableRow>
                 </CTableHead>
                 <CTableBody>
                 <CTableRow v-for="(data, index) in agent_data" :key="index">
                     <CTableDataCell>{{ data.id }}</CTableDataCell>
-                    <CTableDataCell>{{ data.name }}</CTableDataCell>
-
+                    <CTableDataCell>{{ data.node_name }}</CTableDataCell>
+                    <CTableDataCell>{{ data.OS }}</CTableDataCell>
+                    <CTableDataCell>{{ data.status }}</CTableDataCell>
+                    <CTableDataCell>{{ data.sca_score }}</CTableDataCell>                    
+                    <CTableDataCell v-if="healthy === 'true'">
+                        <CIcon icon="cilCheckAlt" /></CTableDataCell>
+                    <CTableDataCell v-else>
+                        <CIcon icon="cilX" /></CTableDataCell>
+                    
                 </CTableRow>
                 </CTableBody>
             </CTable>
@@ -25,14 +35,16 @@
     
     </template>
     <script>
+
     import { onMounted } from 'vue';
-import { useRoute } from 'vue-router'
+    import { useRoute } from 'vue-router'
     export default {
       name:"AgentDetail",
       data() {
         return {
           agentId: "000",
-          agent_data: []
+          agent_data: [],
+          healthy: 'true'
         };
       },
       mounted() {
@@ -41,18 +53,18 @@ import { useRoute } from 'vue-router'
       methods: {
         async fetchAgentData() {
           this.agent_data = [{"id":this.$route.params.id,"name":"test"}]
-          this.agentId = this.$route.params.id
-          /*
+          this.agentId = this.$route.params.id          
           try {
-            console.log("`http://192.168.88.238:8080/api/v1/agent/${this.agentId}`");
-            const response = await fetch("`http://192.168.88.238:8080/api/v1/agent/${this.agentId}`");
+            console.log("http://192.168.88.238:8080/api/v1/agent/"+this.agentId);
+            const response = await fetch("http://192.168.88.238:8080/api/v1/agent/"+this.agentId);
             if (!response.ok) throw new Error('Failed to fetch');
             this.agent_data = await response.json();
+            this.healthy = this.agent_data[0].healthy
             console.log(this.agent_data);
           } catch (error) {
             console.error('Error fetching products:', error);
           }
-          */
+          
         }
       },
 

src/components/Form.vue

@@ -37,6 +37,7 @@ export default {
     methods:{
         updateParent() {
           this.$emit('update-data', { attribute: this.attribute, threshold: this.threshold });
+          console.log(this.threshold)
         }
 
     }

src/components/Rules.vue

@@ -37,7 +37,16 @@ export default {
   },
   methods: {
     async fetchAgentsData() {      
-        this.rules = [{"attribute": "SCA", "threshold":"60"}]       
+        //this.rules = [{"attribute": "SCA", "threshold":"60"}]       
+        try {
+            const response = await fetch("http://192.168.88.238:8080/api/v1/rules");
+            if (!response.ok) throw new Error('Failed to fetch');
+            this.rules = await response.json();            
+            console.log(this.rules);
+          } catch (error) {
+            console.error('Error fetching products:', error);
+          }
+
     }
   }
 }