alihan/dozzle-monitoring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplifies schema

Browse Source
This commit is contained in:
Amir Raminfar
2022-08-17 10:39:22 -07:00
parent cedfbee983
commit 40f5cb1301
9 changed files with 63 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/components/JSONPayload.vue
View File

@@ -1,6 +1,6 @@
<template>
<ul class="fields" @click="expanded = !expanded">
<li v-for="(value, name) in logEntry.payload">
<li v-for="(value, name) in logEntry.message">
<template v-if="value">
<span class="has-text-grey">{{ name }}=</span>
<span class="has-text-weight-bold" v-html="markSearch(value)"></span>

4
assets/components/LogViewer.vue
View File

@@ -25,8 +25,8 @@
</div>
<div class="line">
<span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
<JSONPayload :log-entry="item" :visible-keys="visibleKeys.value" v-if="item.hasPayload()"></JSONPayload>
<span class="text" v-html="colorize(item.message)" v-else-if="item.message"></span>
<JSONPayload :log-entry="item" :visible-keys="visibleKeys.value" v-if="item.isComplex()"></JSONPayload>
<span class="text" v-html="colorize(item.message)" v-if="item.isSimple()"></span>
</div>
</li>
</ul>

29
assets/components/__snapshots__/LogEventSource.spec.ts.snap
View File

@@ -23,7 +23,9 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span>
</div>
</li>
</ul>"
`;
@@ -51,7 +53,9 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span>
</div>
</li>
</ul>"
`;
@@ -79,7 +83,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">This is a message.</span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">This is a message.</span>
</div>
</li>
</ul>"
`;
@@ -107,7 +113,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span>
</div>
</li>
</ul>"
`;
@@ -135,7 +143,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;foo bar&lt;/test&gt;</span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;foo bar&lt;/test&gt;</span>
</div>
</li>
<li data-key=\\"1\\" class=\\"\\" data-v-cce5b553=\\"\\">
<div class=\\"line-options\\" data-v-cce5b553=\\"\\" style=\\"display: none;\\">
@@ -158,7 +168,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;test bar&lt;/test&gt;</span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;<mark>test</mark>&gt;test bar&lt;/test&gt;</span>
</div>
</li>
</ul>"
`;
@@ -186,7 +198,9 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
</div>
</div>
</div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
<div class=\\"line\\" data-v-cce5b553=\\"\\"><span class=\\"date\\" data-v-cce5b553=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-cce5b553=\\"\\">today at 10:55:42 AM</time></span>
<!--v-if--><span class=\\"text\\" data-v-cce5b553=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span>
</div>
</li>
</ul>"
`;
@@ -207,6 +221,5 @@ exports[`<LogEventSource /> > should parse messages 1`] = `
"date": 2019-06-12T10:55:42.459Z,
"id": 1,
"message": "This is a message.",
"payload": undefined,
}
`;

4
assets/composables/eventsource.ts
View File

@@ -1,7 +1,7 @@
import { ref, watch, onUnmounted, ComputedRef } from "vue";
import debounce from "lodash.debounce";
import { LogEntry, LogEvent } from "@/types/LogEntry";
import type { LogEntry, LogEvent } from "@/types/LogEntry";
import config from "@/stores/config";
import { Container } from "@/types/Container";
@@ -11,7 +11,7 @@ function parseMessage(data: string): LogEntry {
const id = e.id;
const date = new Date(e.ts * 1000);
return { id, date, message: e.m, payload: e.d };
return { id, date, message: e.m };
}
export function useEventSource(container: ComputedRef<Container>) {

9
assets/composables/search.ts
View File

@@ -29,11 +29,12 @@ export function useSearchFilter() {
if (searchFilter.value) {
try {
return messages.value.filter((d) => {
if (d.hasPayload()) {
return matchRecord(d.payload, regex.value);
} else {
return regex.value.test(d.message ?? "");
if (d.isSimple()) {
return regex.value.test(d.message);
} else if (d.isComplex()) {
return matchRecord(d.message, regex.value);
}
throw new Error("Unknown message type");
});
} catch (e) {
if (e instanceof SyntaxError) {

9
assets/types/LogEntry.d.ts vendored
View File

@@ -1,15 +1,16 @@
export interface LogEntry {
readonly date: Date;
readonly message?: string;
readonly payload?: Record<string, any>;
readonly message: string | JSONObject;
readonly id: number;
event?: string;
selected?: boolean;
}
export interface LogEvent {
readonly m?: string;
readonly m: string | JSONObject;
readonly ts: number;
readonly d?: Record<string, any>;
readonly id: number;
}
export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue>;
export type JSONObject = { [x: string]: JSONValue };

35
assets/types/VisibleLogEntry.ts
View File

@@ -1,44 +1,47 @@
import { computed, ComputedRef, Ref } from "vue";
import { LogEntry } from "./LogEntry";
import { flattenJSON, getDeep } from "@/utils";
import type { JSONObject, LogEntry } from "./LogEntry";
export class VisibleLogEntry implements LogEntry {
private readonly entry: LogEntry;
filteredPayload: undefined | ComputedRef<Record<string, any>>;
filteredMessage: undefined | ComputedRef<Record<string, any>>;
constructor(entry: LogEntry, visibleKeys: Ref<string[][]>) {
this.entry = entry;
this.filteredPayload = undefined;
if (this.entry.payload) {
const payload = this.entry.payload;
this.filteredPayload = computed(() => {
this.filteredMessage = undefined;
if (this.isComplex()) {
const message = this.message;
this.filteredMessage = computed(() => {
if (!visibleKeys.value.length) {
return flattenJSON(payload);
return flattenJSON(message);
} else {
return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(payload, attr) }), {});
return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
}
});
}
}
public hasPayload(): this is { payload: Record<string, any> } {
return this.entry.payload !== undefined;
public isComplex(): this is { message: JSONObject } {
return typeof this.entry.message === "object";
}
public get unfilteredPayload(): Record<string, any> | undefined {
return this.entry.payload;
public isSimple(): this is { message: string } {
return !this.isComplex();
}
public get payload(): Record<string, any> | undefined {
return this.filteredPayload?.value;
public get unfilteredPayload(): JSONObject {
if (typeof this.entry.message === "string") {
throw new Error("Cannot get unfiltered payload of a simple message");
}
return this.entry.message;
}
public get date(): Date {
return this.entry.date;
}
public get message(): string | undefined {
return this.entry.message;
public get message(): string | JSONObject {
return this.filteredMessage?.value ?? this.entry.message;
}
public get id(): number {

7
docker/types.go
View File

@@ -28,8 +28,7 @@ type ContainerEvent struct {
}
type LogEvent struct {
Message string `json:"m,omitempty"`
Timestamp int64 `json:"ts"`
Data map[string]interface{} `json:"d,omitempty"`
Id uint32 `json:"id,omitempty"`
Message any `json:"m,omitempty"`
Timestamp int64 `json:"ts"`
Id uint32 `json:"id,omitempty"`
}

14
web/logs.go
View File

@@ -51,33 +51,29 @@ func (h *handler) downloadLogs(w http.ResponseWriter, r *http.Request) {
func logEventIterator(reader *bufio.Reader) func() (docker.LogEvent, error) {
return func() (docker.LogEvent, error) {
message, readerError := reader.ReadString('\n')
h := fnv.New32a()
h.Write([]byte(message))
logEvent := docker.LogEvent{Id: h.Sum32()}
logEvent := docker.LogEvent{Id: h.Sum32(), Message: message}
if index := strings.IndexAny(message, " "); index != -1 {
logId := message[:index]
if timestamp, err := time.Parse(time.RFC3339Nano, logId); err == nil {
logEvent.Timestamp = timestamp.Unix()
message = strings.TrimSuffix(message[index+1:], "\n")
logEvent.Message = message
if strings.HasPrefix(message, "{") && strings.HasSuffix(message, "}") {
var data map[string]interface{}
if err := json.Unmarshal([]byte(message), &data); err != nil {
log.Errorf("json unmarshal error while streaming %v", err.Error())
}
logEvent.Data = data
} else {
logEvent.Message = message
logEvent.Message = data
}
} else {
logEvent.Message = message
}
} else {
logEvent.Message = message
}
return logEvent, readerError
}
}