add agent detail and rule view

src/App.vue

@@ -18,7 +18,8 @@ import Navbar from './components/Navbar.vue'
 import Footer from './components/Footer.vue'
 import Form from './components/Form.vue'
 import Agents from './components/Agents.vue'
-import Agent from './components/Agent.vue'
+import AgentDetail from './components/AgentDetail.vue'
+import Rules from './components/Rules.vue';
 export default {
   name: 'App',
   components: {
@@ -27,8 +28,8 @@ export default {
     Form,
     Footer,
     Agents,
-    Agent,
-
+    AgentDetail,
+    Rules
   },
 
 }

src/components/Agent.vue → src/components/AgentDetail.vue

 <template>
     <CContainer>
         <div>
-            <h2>{{ agentId }}</h2>
+            <h2>{{ $route.params.id }}</h2>
             <CContainer>
             <CTable hover>
                 <CTableHead>
                 <CTableRow>
                     <CTableHeaderCell scope="col">#</CTableHeaderCell>
                     <CTableHeaderCell scope="col">Name</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Platform</CTableHeaderCell>
-                    <CTableHeaderCell scope="col">Status</CTableHeaderCell>
+                    
                 </CTableRow>
                 </CTableHead>
                 <CTableBody>
-                <CTableRow v-for="(agent, index) in agents" :key="agent.id">
-                    <CTableDataCell>{{ agent.id }}</CTableDataCell>
-                    <CTableDataCell>{{ agent.name }}</CTableDataCell>
-                    <CTableDataCell>{{ agent.platform }}</CTableDataCell>
-                    <CTableDataCell>{{ agent.status }}</CTableDataCell>
+                <CTableRow v-for="(data, index) in agent_data" :key="index">
+                    <CTableDataCell>{{ data.id }}</CTableDataCell>
+                    <CTableDataCell>{{ data.name }}</CTableDataCell>
+
                 </CTableRow>
                 </CTableBody>
             </CTable>
@@ -27,20 +25,24 @@
     
     </template>
     <script>
-    import { ref, watch } from 'vue';
-    
+    import { onMounted } from 'vue';
+import { useRoute } from 'vue-router'
     export default {
-      name:"Agent",
+      name:"AgentDetail",
       data() {
         return {
-          agent_data: [{"id":"001"}]
+          agentId: "000",
+          agent_data: []
         };
       },
       mounted() {
-        this.fetchAgentsData();
+        this.fetchAgentData();
       },
       methods: {
-        async fetchAgentsData() {
+        async fetchAgentData() {
+          this.agent_data = [{"id":this.$route.params.id,"name":"test"}]
+          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}`");
@@ -50,13 +52,9 @@
           } catch (error) {
             console.error('Error fetching products:', error);
           }
+          */
         }
       },
-      watch: {
-        '$route'(to, from) {
-        // React to route changes and update the productId
-        this.agentId = to.params.agentId;
-        }
-      }
+
     }
     </script>
\ No newline at end of file

src/components/Agents.vue

@@ -15,7 +15,7 @@
             <CTableBody>
             <CTableRow v-for="(agent, index) in agents" :key="agent.id">
                 <CTableDataCell>
-                  <router-link :to="`/agents/${agent.id}`" >
+                  <router-link :to="`/agent/${agent.id}`" >
                     {{ agent.id }}
                   </router-link>
                 </CTableDataCell>

src/components/Navbar.vue

@@ -10,6 +10,9 @@
             Home
           </CNavLink>
         </CNavItem>
+        <CNavItem>
+          <CNavLink href="/rules" active>Rules</CNavLink>
+        </CNavItem>
         <CNavItem>
           <CNavLink href="/agents" active>Agents</CNavLink>
         </CNavItem>        
@@ -20,7 +23,7 @@
 </template>
 
 <script>
-import { CContainer, CNavbarNav, CCollapse, CNavItem, CNavbar, CNavbarToggler, CNavbarBrand } from '@coreui/vue'
+import { CContainer, CNavbarNav, CCollapse, CNavItem, CNavbar, CNavbarToggler, CNavbarBrand, CNavLink } from '@coreui/vue'
 export default {
     name: 'Navbar'
   }

src/components/Rules.vue

+<template>
+<CContainer>
+    <div>
+        <h2>Rule List</h2>
+        <CContainer>
+        <CTable hover>
+            <CTableHead>
+            <CTableRow>
+                <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Attribute</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Threshold</CTableHeaderCell>                
+            </CTableRow>
+            </CTableHead>
+            <CTableBody>
+            <CTableRow v-for="(rule, index) in rules" :key="index">
+                <CTableDataCell>{{ index }}</CTableDataCell>
+                <CTableDataCell>{{ rule.attribute }}</CTableDataCell>
+                <CTableDataCell>{{ rule.threshold }}</CTableDataCell>                
+            </CTableRow>
+            </CTableBody>                        
+        </CTable>
+        </CContainer>
+    </div>
+</CContainer>
+
+</template>
+<script>
+export default {
+  name:"Rules",
+  data() {
+    return {
+      rules: []
+    };
+  },
+  mounted() {
+    this.fetchAgentsData();
+  },
+  methods: {
+    async fetchAgentsData() {      
+        this.rules = [{"attribute": "SCA", "threshold":"60"}]       
+    }
+  }
+}
+</script>
\ No newline at end of file

src/main.js

@@ -12,21 +12,15 @@ import * as icon from '@coreui/icons';
 import { createRouter, createWebHistory } from 'vue-router';
 import Criteria from './components/Criteria.vue';
 import Agents from './components/Agents.vue'
-import Agent from './components/Agents.vue'
+import AgentDetail from './components/AgentDetail.vue'
+import Rules from './components/Rules.vue'
 const router = createRouter({
     history: createWebHistory(),
     routes: [
       { path: '/', component: Criteria },
-      { path: '/agents', component: Agents,
-        children: [
-        {
-            path: ':agentId',
-            name: 'agentId',
-            props: true,
-            component: Agent
-        }
-      ]
-      },
+      { path: '/agents', component: Agents},
+      { path: '/agent/:id', component: AgentDetail },   
+      { path: '/rules', component: Rules },
     ]
   });
 export default router;