ReverseProxies is now it's own component and HomeView simply calls it for now

src/views/HomeView.vue

@@ -1,120 +1,17 @@
 <template>
     <div class="container">
-
+        <ReverseProxies />
-    <br />
-    
-    <p>{{ caddyConfig }}</p>
-    
-    <ButtonTest />
-
-    <br />
-
-    <button type="button" class="btn btn-secondary" @click="filterCaddyConfig(fetch_data)">Filter Caddy Config</button>
     </div>
     
 </template>
 
-<script>
 
-import ButtonTest from '../views/ButtonTest.vue';
+<script>
+    import ReverseProxies from '../views/ReverseProxies.vue';
 
     export default {
         components: {
-            ButtonTest
+            ReverseProxies
-        },
-        data() {
-            return {
-                caddyConfig: null,
-                isLoading: false,
-                error: null,
-                reverse_proxy_routes: null
-
-            };
-        },
-        methods: {
-            async fetchCaddyConfig() {
-                this.isLoading = true;
-                this.error = null;
-            
-                let fetch_data = null;
-
-                try {
-                    const response = await fetch('http://localhost:2019/config/', {
-                            mode: 'cors',
-                            method: 'GET'
-                        });
-
-                    if(!response.ok) {
-                        throw new Error('Error in fetch request');
-                    }
-
-                    fetch_data = await response.json();
-                    this.caddyConfig = fetch_data;
-                } catch (error) {
-                    this.error = "Could not fetch Caddy Config: " + error.message;
-                    console.error(error);
-                }
-
-            },
-            filterCaddyConfig() {
-                const apps = this.caddyConfig.apps;
-                const routes = apps.http.servers.srv0.routes;
-                
-
-                let rp_dict = searchBaseRoutes(routes);
-                console.log(rp_dict);
-            }
-            
-        },
-        mounted() {
-            this.fetchCaddyConfig();
         }
     }
-
-
-    
-
-    
-    // So what we should do: break apart the routes into handlers and matches.  First search the handlers to see if you find subroute or rp.
-    // Then match the array of those upstreams with the match value
-    function findReverseProxies(routes) {
-        let rpArray = [];
-
-        for(let r_key in routes) {
-            for (let h_key in routes[r_key].handle) {
-                if (routes[r_key].handle[h_key].handler === 'reverse_proxy') {
-                    
-                    for (let u_key in routes[r_key].handle[h_key].upstreams) {
-                        rpArray.push(routes[r_key].handle[h_key].upstreams[u_key].dial);
-                    }
-                }
-            }
-        }
-        
-        return rpArray;
-    }
-
-    function searchBaseRoutes(baseRoutes) {
-        
-        let rp_dict = {};
-
-        for (let r_key in baseRoutes) {
-
-            let handles = baseRoutes[r_key].handle;
-            let matches = baseRoutes[r_key].match;
-            
-            let rp_servers = [];
-
-            for (let h_key in handles) {
-                if (handles[h_key].handler === 'subroute') {
-                    rp_servers = findReverseProxies(handles[h_key].routes);
-                }
-            }
-
-            rp_dict[ matches[0].host ] = rp_servers;
-        }
-        
-        return rp_dict;
-    }
-
 </script>

src/views/ReverseProxies.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="container">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(item, rowIndex) in tableData" :key="rowIndex">
+                    <td>{{ item.id }}</td>
+                    <td>{{ item.hostname }}</td>
+                    <td>{{ item.servers }}</td>                    
+                </tr>
+            </tbody>
+        </table>    
+    </div>
+</template>
+
+<script>
+
+    import ButtonTest from '../views/ButtonTest.vue';
+
+    export default {
+        components: {
+            ButtonTest
+        },
+        data() {
+            return {
+                caddyConfig: null,
+                isLoading: false,
+                error: null,
+                reverse_proxy_routes: null,
+                headers: [
+                    '#',
+                    'hostname',
+                    'routes'
+                ],
+                tableData: []
+            };
+        },
+        methods: {
+            async fetchCaddyConfig() {
+                this.isLoading = true;
+                this.error = null;
+            
+                let fetch_data = null;
+
+                try {
+                    const response = await fetch('http://localhost:2019/config/', {
+                            mode: 'cors',
+                            method: 'GET'
+                        });
+
+                    if(!response.ok) {
+                        throw new Error('Error in fetch request');
+                    }
+
+                    fetch_data = await response.json();
+                    this.caddyConfig = fetch_data;
+                    
+                } catch (error) {
+                    this.error = "Could not fetch Caddy Config: " + error.message;
+                    console.error(error);
+                }
+
+            },
+            async filterCaddyConfig() {
+                const apps = this.caddyConfig.apps;
+                const routes = apps.http.servers.srv0.routes;
+                
+                this.reverse_proxy_routes = searchBaseRoutes(routes);
+            
+            },
+            async createTableData() {
+                let count = 1;
+                for (let rp_key in this.reverse_proxy_routes) {
+                    this.tableData.push(
+                        { id: count, hostname: rp_key, servers: this.reverse_proxy_routes[rp_key] }    
+                    )
+                    count++;
+                }
+            }
+        },
+        async mounted() {
+            await this.fetchCaddyConfig();
+            
+            await this.filterCaddyConfig();
+
+            await this.createTableData();
+            //console.log(this.reverse_proxy_routes);
+        }
+    }
+
+    function findReverseProxies(routes) {
+        let rpArray = [];
+
+        for(let r_key in routes) {
+            for (let h_key in routes[r_key].handle) {
+                if (routes[r_key].handle[h_key].handler === 'reverse_proxy') {
+                    
+                    for (let u_key in routes[r_key].handle[h_key].upstreams) {
+                        rpArray.push(routes[r_key].handle[h_key].upstreams[u_key].dial);
+                    }
+                }
+            }
+        }
+        
+        return rpArray;
+    }
+
+    function searchBaseRoutes(baseRoutes) {
+        
+        let rp_dict = {};
+
+        for (let r_key in baseRoutes) {
+
+            let handles = baseRoutes[r_key].handle;
+            let matches = baseRoutes[r_key].match;
+            
+            let rp_servers = [];
+
+            for (let h_key in handles) {
+                if (handles[h_key].handler === 'subroute') {
+                    rp_servers = findReverseProxies(handles[h_key].routes);
+                }
+            }
+
+            rp_dict[ matches[0].host ] = rp_servers;
+        }
+        
+        return rp_dict;
+    }
+
+</script>