add client IP to HTTP log

marle3003 · marle3003 · commit 13a3f2bd946b · 2025-10-29T21:47:41.000+01:00
add client IP to filter HTTP log
diff --git a/api/handler_events_test.go b/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"])
 					}))
 			},
diff --git a/examples/mokapi/services_http.js b/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'
         }
     }
 ]
diff --git a/webui/src/assets/dashboard.css b/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;
 }
diff --git a/webui/src/components/dashboard/http/RequestInfoCard.vue b/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>
diff --git a/webui/src/components/dashboard/http/Requests.vue b/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>
diff --git a/webui/src/types/http.d.ts b/webui/src/types/http.d.ts
@@ -41,6 +41,7 @@ declare interface HttpEventData {
     duration: number
     deprecated: boolean
     actions: Action[]
+    clientIP: string
 }
 
 declare interface HttpEventRequest {

Original file line number	Diff line number	Diff line change
`@@ -642,7 +642,8 @@ export let events = [`
`642`	`642`	`})`
`643`	`643`	`]`
`644`	`644`	`}`
`645`		`- ]`
	`645`	`+ ],`
	`646`	`+ clientIP: '127.0.0.1'`
`646`	`647`	`},`
`647`	`648`	`},`
`648`	`649`	`{`
`@@ -691,7 +692,8 @@ export let events = [`
`691`	`692`	`message: 'An example script error message'`
`692`	`693`	`}`
`693`	`694`	`}`
`694`		`- ]`
	`695`	`+ ],`
	`696`	`+ clientIP: '127.0.0.1'`
`695`	`697`	`}`
`696`	`698`	`},`
`697`	`699`	`{`
`@@ -735,7 +737,8 @@ export let events = [`
`735`	`737`	`event: "http"`
`736`	`738`	`}`
`737`	`739`	`}`
`738`		`- ]`
	`740`	`+ ],`
	`741`	`+ clientIP: '127.0.0.1'`
`739`	`742`	`}`
`740`	`743`	`},`
`741`	`744`	`{`
`@@ -773,7 +776,8 @@ export let events = [`
`773`	`776`	`event: "http"`
`774`	`777`	`}`
`775`	`778`	`}`
`776`		`- ]`
	`779`	`+ ],`
	`780`	`+ clientIP: '127.0.0.1'`
`777`	`781`	`}`
`778`	`782`	`},`
`779`	`783`	`{`
`@@ -819,6 +823,7 @@ export let events = [`
`819`	`823`	`size: 512`
`820`	`824`	`},`
`821`	`825`	`duration: 133,`
	`826`	`+ clientIP: '192.0.1.127'`
`822`	`827`	`}`
`823`	`828`	`}`
`824`	`829`	`]`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ declare interface HttpEventData {`
`41`	`41`	`duration: number`
`42`	`42`	`deprecated: boolean`
`43`	`43`	`actions: Action[]`
	`44`	`+ clientIP: string`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`declare interface HttpEventRequest {`