add client IP to HTTP log

add client IP to filter HTTP log

Author: marle3003

api/handler_events_test.go

@@ -123,7 +123,9 @@ func TestHandler_Events(t *testing.T) {
 								},
 								"url": "http://localhost/foo",
 							},
-							"response": map[string]interface{}{"body": "", "size": float64(0), "statusCode": float64(0)}},
+							"response": map[string]interface{}{"body": "", "size": float64(0), "statusCode": float64(0)},
+							"clientIP": "192.0.2.1",
+						},
 							m[0]["data"])
 					}))
 			},
@@ -174,7 +176,9 @@ func TestHandler_Events(t *testing.T) {
 								},
 								"url": "http://localhost/foo",
 							},
-							"response": map[string]interface{}{"body": "", "size": float64(0), "statusCode": float64(0)}},
+							"response": map[string]interface{}{"body": "", "size": float64(0), "statusCode": float64(0)},
+							"clientIP": "192.0.2.1",
+						},
 							m[0]["data"])
 					}))
 			},

examples/mokapi/services_http.js

@@ -642,7 +642,8 @@ export let events = [
                         })
                     ]
                 }
-            ]
+            ],
+            clientIP: '127.0.0.1'
         },
     },
     {
@@ -691,7 +692,8 @@ export let events = [
                         message: 'An example script error message'
                     }
                 }
-            ]
+            ],
+            clientIP: '127.0.0.1'
         }
     },
     {
@@ -735,7 +737,8 @@ export let events = [
                         event: "http"
                     }
                 }
-            ]
+            ],
+            clientIP: '127.0.0.1'
         }
     },
     {
@@ -773,7 +776,8 @@ export let events = [
                         event: "http"
                     }
                 }
-            ]
+            ],
+            clientIP: '127.0.0.1'
         }
     },
     {
@@ -819,6 +823,7 @@ export let events = [
                 size: 512
             },
             duration: 133,
+            clientIP: '192.0.1.127'
         }
     }
 ]

webui/src/assets/dashboard.css

@@ -130,4 +130,30 @@
   border-bottom: 4px solid;
   margin-bottom: -3px;
   border-bottom-color: var(--dashboard-nav-border-active);
+}
+
+.tooltip .tooltip-inner {
+    text-align: left;
+    max-width: 500px;
+    white-space: normal;
+}
+
+[data-theme="light"] .tooltip .tooltip-inner {
+  background-color: #f8f9fa;
+  color: #212529;
+  border: 1px solid #ced4da;
+  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
+}
+
+.tooltip.bs-tooltip-top .tooltip-arrow::before {
+    border-top-color: #f8f9fa;
+}
+.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
+    border-bottom-color: #f8f9fa;
+}
+.tooltip.bs-tooltip-start .tooltip-arrow::before {
+    border-left-color: #f8f9fa;
+}
+.tooltip.bs-tooltip-end .tooltip-arrow::before {
+    border-right-color: #f8f9fa;
 }

webui/src/components/dashboard/http/RequestInfoCard.vue

@@ -34,8 +34,8 @@ const operationRoute = computed(() => {
 <template>
     <div class="card">
         <div class="card-body">
-            <div class="row">
-                <div class="col header">
+            <div class="row mb-2">
+                <div class="col-10 header">
                     <p class="label">URL</p>
                     <p>
                         <span class="badge operation" :class="eventData.request.method.toLowerCase()">{{ eventData.request.method }}</span>
@@ -46,33 +46,37 @@ const operationRoute = computed(() => {
                     <p class="label">Time</p>
                     <p>{{ format(event.time) }}</p>
                 </div>
-                <div class="col" v-if="eventData.deprecated">
-                    <p class="label">Warning</p>
-                    <p><span class="bi bi-exclamation-triangle-fill yellow"></span> Deprecated</p>
-                </div>
             </div>
-            <div class="row">
-                <div class="col">
+            <div class="row mb-2">
+                <div class="col-2">
                     <p class="label">Status</p>
                     <p>
                         <span class="badge status-code" :class="getClassByStatusCode(eventData.response.statusCode.toString())">
                             {{ formatStatusCode(eventData.response.statusCode.toString()) }}
                         </span>
                     </p>
                 </div>
-                <div class="col">
+                <div class="col-2">
+                    <p class="label">Size</p>
+                    <p>{{ formatBytes(eventData.response.size) }}</p>
+                </div>
+                <div class="col-2">
                     <p class="label">Duration</p>
                     <p>{{ duration(eventData.duration) }}</p>
                 </div>
+                <div class="col-2">
+                    <p class="label">Client IP</p>
+                    <p>{{ eventData.clientIP }}</p>
+                </div>
                 <div class="col" v-if="operationRoute">
                     <p class="label">Specification</p>
                     <router-link :to="operationRoute">Operation</router-link>
                 </div>
             </div>
-            <div class="row">
+            <div class="row" v-if="eventData.deprecated">
                 <div class="col">
-                    <p class="label">Size</p>
-                    <p>{{ formatBytes(eventData.response.size) }}</p>
+                    <p class="label">Warning</p>
+                    <p><span class="bi bi-exclamation-triangle-fill yellow"></span> Deprecated</p>
                 </div>
             </div>
         </div>

webui/src/components/dashboard/http/Requests.vue

@@ -4,7 +4,7 @@ import { useEvents } from '@/composables/events'
 import { onUnmounted, computed, useTemplateRef, onMounted, reactive, watch, ref, type ComponentPublicInstance  } from 'vue'
 import { usePrettyDates } from '@/composables/usePrettyDate'
 import { usePrettyHttp } from '@/composables/http'
-import { Modal } from 'bootstrap'
+import { Modal, Tooltip } from 'bootstrap'
 import { useService } from '@/composables/services'
 import RegexInput from '@/components/RegexInput.vue'
 
@@ -48,10 +48,12 @@ interface Filter {
     response: {
         headers: FilterItem
     }
+    clientIP: FilterItem
 }
 interface FilterItem {
     checkbox: boolean
     value: any
+    title?: string
 }
 interface MultiFilterItem {
     checkbox: boolean
@@ -67,7 +69,11 @@ const filter = reactive<Filter>({
     },
     response: {
          headers: { checkbox: false, value: [{ name: '', value: '' }]}
-    }
+    },
+    clientIP: { checkbox: false, value: '', title: `<b>IP Filter Options:</b><br>
+          &bull; Multiple entries (comma-separated): 192.168.0.1,10.0.0.1<br>
+          &bull; Negation: -127.0.0.1<br>
+          &bull; CIDR notation: 192.168.0.0/24` }
 })
 
 onMounted(() => {
@@ -82,6 +88,10 @@ onMounted(() => {
             }
         }
     }
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    tooltipTriggerList.forEach(el => new Tooltip(el, {
+        trigger: 'hover'
+    }))
 })
 
 function goToRequest(event: ServiceEvent){
@@ -169,6 +179,38 @@ const events = computed<ServiceEvent[]>(() => {
             return true
         })
     }
+    if (filter.clientIP.checkbox && filter.clientIP.value.length > 0) {
+        const values = (filter.clientIP.value as string).split(',').map(x => x.trim()).filter(x => x.length > 0)
+        result = result.filter(x => {
+            const data = x.data as HttpEventData
+
+            let matched = false;
+
+            for (let value of values) {
+                let not = false
+                if (value[0] === '-') {
+                    not = true
+                    value = value.substring(1)
+                }
+                let isMatch = false
+                if (value.includes('/')) {
+                    isMatch = cidrMatch(data.clientIP, value)
+                } else {
+                    isMatch = data.clientIP === value
+                }
+
+                if (not && isMatch) {
+                    // Negated value matches → reject immediately
+                    return false
+                }
+                if (!not && isMatch) {
+                    // Normal value matches → mark as matched
+                    matched = true;
+                }
+            }
+            return matched || values.every(v => v[0] === '-')
+        })
+    }
 
     return result
 })
@@ -276,6 +318,9 @@ const activeFiltersCount = computed(() => {
     if (filter.response.headers.checkbox && filter.response.headers.value.length > 1) {
         counter++;
     }
+    if (filter.clientIP.checkbox && filter.clientIP.value.length > 0) {
+        counter++
+    }
     return counter;
 })
 function getFilterCacheKey() {
@@ -417,6 +462,30 @@ const responseHeaderFilter = computed(() => {
     }
     return result
 })
+function ipToInt(ip: string): number {
+    return ip
+        .split('.')
+        .map((octet) => parseInt(octet, 10))
+        .reduce((acc, octet) => (acc << 8) + octet, 0);
+}
+
+function cidrMatch(ip: string, cidr: string): boolean {
+    const parts: string[] = cidr.split('/');
+    if (parts.length !== 2) {
+        return false
+    }
+
+    const [range, bitsStr] = parts;
+    const bits: number = parseInt(bitsStr!, 10);
+
+    if (isNaN(bits) || bits < 0 || bits > 32) {
+        return false
+    }
+
+    const mask: number = ~(2 ** (32 - bits) - 1);
+
+    return (ipToInt(ip) & mask) === (ipToInt(range!) & mask);
+}
 </script>
 
 <template>
@@ -619,6 +688,23 @@ const responseHeaderFilter = computed(() => {
                         </div>
                     </div>
 
+                    <!-- Client IP -->
+                    <div class="row">
+                        <div class="col-4">
+                            <div class="form-check" data-bs-toggle="tooltip" data-bs-delay='{"show": 200, "hide": 100}' :title="filter.clientIP.title" data-bs-offset="[-150, 0]" data-bs-html="true">
+                                <input class="form-check-input" type="checkbox" v-model="filter.clientIP.checkbox" id="clientIP">
+                                <label class="form-check-label" for="clientIP">Client IP</label>
+                            </div>
+                        </div>
+                        <div class="col" v-show="filter.clientIP.checkbox">
+                             <div class="col ps-0 pe-1"  data-bs-toggle="tooltip" data-bs-delay='{"show": 200, "hide": 100}' :title="filter.clientIP.title" data-bs-html="true">
+                                <div class="row me-0">
+                                    <input type="text" class="form-control form-control-sm" id="clientIP" v-model="filter.clientIP.value">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>

webui/src/types/http.d.ts

@@ -41,6 +41,7 @@ declare interface HttpEventData {
     duration: number
     deprecated: boolean
     actions: Action[]
+    clientIP: string
 }
 
 declare interface HttpEventRequest {