add single agent view

src/App.vue

@@ -18,6 +18,7 @@ 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'
 export default {
   name: 'App',
   components: {
@@ -25,7 +26,8 @@ export default {
     Navbar,
     Form,
     Footer,
-    Agents
+    Agents,
+    Agent,
 
   },
 

src/components/Agent.vue

+<template>
+    <CContainer>
+        <div>
+            <h2>Agent Lists</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>
+                </CTableBody>
+            </CTable>
+            </CContainer>
+        </div>
+    </CContainer>
+    
+    </template>
+    <script>
+    import { ref, watch } from 'vue';
+    
+    export default {
+      name:"Agent",
+      data() {
+        return {
+          agent_data: [{"id":"001"}]
+        };
+      },
+      mounted() {
+        this.fetchAgentsData();
+      },
+      methods: {
+        async fetchAgentsData() {
+          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}`");
+            if (!response.ok) throw new Error('Failed to fetch');
+            this.agent_data = await response.json();
+            console.log(this.agent_data);
+          } 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

@@ -14,8 +14,12 @@
             </CTableHead>
             <CTableBody>
             <CTableRow v-for="(agent, index) in agents" :key="agent.id">
-                <CTableDataCell>{{ agent.id }}</CTableDataCell>
-                <CTableDataCell>{{ agent.name }}</CTableDataCell>
+                <CTableDataCell>
+                  <router-link :to="`/agent/${agent.id}`" >
+                    {{ agent.id }}
+                  </router-link>
+                </CTableDataCell>
+                <CTableDataCell>{{ agent.agent_name }}</CTableDataCell>
                 <CTableDataCell>{{ agent.platform }}</CTableDataCell>
                 <CTableDataCell>{{ agent.status }}</CTableDataCell>
             </CTableRow>
@@ -27,6 +31,8 @@
 
 </template>
 <script>
+import { CLink, CNavLink } from '@coreui/vue';
+
 export default {
   name:"Agents",
   data() {
@@ -43,6 +49,7 @@ export default {
         const response = await fetch('http://192.168.88.238:8080/api/v1/agents');
         if (!response.ok) throw new Error('Failed to fetch');
         this.agents = await response.json();
+        
       } catch (error) {
         console.error('Error fetching products:', error);
       }

src/main.js

@@ -9,14 +9,16 @@ 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'
 const router = createRouter({
     history: createWebHistory(),
     routes: [
       { path: '/', component: Criteria },
-      { path: '/agents', component: Agents }
+      { path: '/agents', component: Agents },
+      { path: '/agent/:agentID', component: Agent }
     ]
   });
+export default router;
 const app = createApp(App)
 app.provide('icons', icon)
 app.component('CIcon', CIcon)