mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 21:33:18 +01:00
chore(format): updates js files to updates prettier
This commit is contained in:
@@ -31,7 +31,7 @@ const cpuData = computedWithControl(
|
|||||||
value: stat.snapshot.cpu + "%",
|
value: stat.snapshot.cpu + "%",
|
||||||
}));
|
}));
|
||||||
return points;
|
return points;
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const memoryData = computedWithControl(
|
const memoryData = computedWithControl(
|
||||||
@@ -44,7 +44,7 @@ const memoryData = computedWithControl(
|
|||||||
value: formatBytes(stat.snapshot.memoryUsage),
|
value: formatBytes(stat.snapshot.memoryUsage),
|
||||||
}));
|
}));
|
||||||
return points;
|
return points;
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ describe("<LogEventSource />", () => {
|
|||||||
hourStyle = "auto",
|
hourStyle = "auto",
|
||||||
}: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
|
}: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
|
||||||
hourStyle: "auto",
|
hourStyle: "auto",
|
||||||
}
|
},
|
||||||
) {
|
) {
|
||||||
settings.value.hourStyle = hourStyle;
|
settings.value.hourStyle = hourStyle;
|
||||||
search.searchFilter.value = searchFilter;
|
search.searchFilter.value = searchFilter;
|
||||||
|
|||||||
@@ -62,13 +62,21 @@ watch(
|
|||||||
document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
|
document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true, flush: "post" }
|
{ immediate: true, flush: "post" },
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.events {
|
.events {
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, monaco, Menlo, monospace;
|
font-family:
|
||||||
|
ui-monospace,
|
||||||
|
SFMono-Regular,
|
||||||
|
SF Mono,
|
||||||
|
Consolas,
|
||||||
|
Liberation Mono,
|
||||||
|
monaco,
|
||||||
|
Menlo,
|
||||||
|
monospace;
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ onMounted(() => {
|
|||||||
() => {
|
() => {
|
||||||
scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
|
scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
|
||||||
},
|
},
|
||||||
{ immediate: true, flush: "post" }
|
{ immediate: true, flush: "post" },
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -56,7 +56,7 @@ watchPostEffect(() => {
|
|||||||
delay: 2000,
|
delay: 2000,
|
||||||
fill: "both",
|
fill: "both",
|
||||||
easing: "ease-out",
|
easing: "ease-out",
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -46,7 +46,9 @@ onUnmounted(() => resetSearch());
|
|||||||
right: 0;
|
right: 0;
|
||||||
border-radius: 0 0 0 5px;
|
border-radius: 0 0 0 5px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
box-shadow:
|
||||||
|
0 1px 3px rgba(0, 0, 0, 0.12),
|
||||||
|
0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
|
||||||
button.delete {
|
button.delete {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
|
|||||||
@@ -82,21 +82,27 @@ const sortedContainers = computed(() =>
|
|||||||
} else {
|
} else {
|
||||||
return a.name.localeCompare(b.name);
|
return a.name.localeCompare(b.name);
|
||||||
}
|
}
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const hosts = computed(() =>
|
const hosts = computed(() =>
|
||||||
config.hosts.reduce((acc, item) => {
|
config.hosts.reduce(
|
||||||
|
(acc, item) => {
|
||||||
acc[item.host] = item;
|
acc[item.host] = item;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, { name: string; host: string }>)
|
},
|
||||||
|
{} as Record<string, { name: string; host: string }>,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeContainersById = computed(() =>
|
const activeContainersById = computed(() =>
|
||||||
activeContainers.value.reduce((acc, item) => {
|
activeContainers.value.reduce(
|
||||||
|
(acc, item) => {
|
||||||
acc[item.id] = item;
|
acc[item.id] = item;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, Container>)
|
},
|
||||||
|
{} as Record<string, Container>,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -11,9 +11,10 @@ const props = defineProps<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
|
const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||||
const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false }[hourStyle.value]));
|
const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]);
|
||||||
const timeFormatter = $computed(
|
const timeFormatter = $computed(
|
||||||
() => new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour })
|
() =>
|
||||||
|
new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour }),
|
||||||
);
|
);
|
||||||
|
|
||||||
const dateStr = $computed(() => dateFormatter.format(props.date));
|
const dateStr = $computed(() => dateFormatter.format(props.date));
|
||||||
|
|||||||
@@ -109,14 +109,17 @@ const sortedContainers = computed(() =>
|
|||||||
} else {
|
} else {
|
||||||
return a.name.localeCompare(b.name);
|
return a.name.localeCompare(b.name);
|
||||||
}
|
}
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const hosts = computed(() =>
|
const hosts = computed(() =>
|
||||||
config.hosts.reduce((acc, item) => {
|
config.hosts.reduce(
|
||||||
|
(acc, item) => {
|
||||||
acc[item.host] = item;
|
acc[item.host] = item;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, { name: string; host: string }>)
|
},
|
||||||
|
{} as Record<string, { name: string; host: string }>,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -82,8 +82,8 @@ export function useLogStream(container: ComputedRef<Container>, streamConfig: Lo
|
|||||||
|
|
||||||
es = new EventSource(
|
es = new EventSource(
|
||||||
`${config.base}/api/logs/stream/${container.value.host}/${container.value.id}?${new URLSearchParams(
|
`${config.base}/api/logs/stream/${container.value.host}/${container.value.id}?${new URLSearchParams(
|
||||||
params
|
params,
|
||||||
).toString()}`
|
).toString()}`,
|
||||||
);
|
);
|
||||||
es.addEventListener("container-stopped", () => {
|
es.addEventListener("container-stopped", () => {
|
||||||
es?.close();
|
es?.close();
|
||||||
@@ -127,8 +127,8 @@ export function useLogStream(container: ComputedRef<Container>, streamConfig: Lo
|
|||||||
const logs = await (
|
const logs = await (
|
||||||
await fetch(
|
await fetch(
|
||||||
`${config.base}/api/logs/${container.value.host}/${container.value.id}?${new URLSearchParams(
|
`${config.base}/api/logs/${container.value.host}/${container.value.id}?${new URLSearchParams(
|
||||||
params
|
params,
|
||||||
).toString()}`
|
).toString()}`,
|
||||||
)
|
)
|
||||||
).text();
|
).text();
|
||||||
if (logs) {
|
if (logs) {
|
||||||
@@ -149,7 +149,7 @@ export function useLogStream(container: ComputedRef<Container>, streamConfig: Lo
|
|||||||
buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
|
buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
|
||||||
connect({ clear: false });
|
connect({ clear: false });
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@@ -161,7 +161,7 @@ export function useLogStream(container: ComputedRef<Container>, streamConfig: Lo
|
|||||||
watch(
|
watch(
|
||||||
() => container.value.id,
|
() => container.value.id,
|
||||||
() => connect(),
|
() => connect(),
|
||||||
{ immediate: true }
|
{ immediate: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(streamConfig, () => connect());
|
watch(streamConfig, () => connect());
|
||||||
|
|||||||
@@ -3,8 +3,8 @@ import { createApp, App as VueApp } from "vue";
|
|||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach((i) =>
|
Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach(
|
||||||
i.install?.(app)
|
(i) => i.install?.(app),
|
||||||
);
|
);
|
||||||
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ export class Container {
|
|||||||
public readonly host: string,
|
public readonly host: string,
|
||||||
public status: string,
|
public status: string,
|
||||||
public state: ContainerState,
|
public state: ContainerState,
|
||||||
public health?: ContainerHealth
|
public health?: ContainerHealth,
|
||||||
) {
|
) {
|
||||||
this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
|
this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
|
||||||
this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
|
this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ export abstract class LogEntry<T extends string | JSONObject> implements HasComp
|
|||||||
public readonly id: number,
|
public readonly id: number,
|
||||||
public readonly date: Date,
|
public readonly date: Date,
|
||||||
public readonly std: Std,
|
public readonly std: Std,
|
||||||
public readonly level?: string
|
public readonly level?: string,
|
||||||
) {
|
) {
|
||||||
this._message = message;
|
this._message = message;
|
||||||
}
|
}
|
||||||
@@ -48,7 +48,7 @@ export class SimpleLogEntry extends LogEntry<string> {
|
|||||||
date: Date,
|
date: Date,
|
||||||
public readonly level: string,
|
public readonly level: string,
|
||||||
public readonly position: Position,
|
public readonly position: Position,
|
||||||
public readonly std: Std
|
public readonly std: Std,
|
||||||
) {
|
) {
|
||||||
super(message, id, date, std, level);
|
super(message, id, date, std, level);
|
||||||
}
|
}
|
||||||
@@ -66,7 +66,7 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
|
|||||||
date: Date,
|
date: Date,
|
||||||
public readonly level: string,
|
public readonly level: string,
|
||||||
public readonly std: Std,
|
public readonly std: Std,
|
||||||
visibleKeys?: Ref<string[][]>
|
visibleKeys?: Ref<string[][]>,
|
||||||
) {
|
) {
|
||||||
super(message, id, date, std, level);
|
super(message, id, date, std, level);
|
||||||
if (visibleKeys) {
|
if (visibleKeys) {
|
||||||
@@ -99,7 +99,11 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class DockerEventLogEntry extends LogEntry<string> {
|
export class DockerEventLogEntry extends LogEntry<string> {
|
||||||
constructor(message: string, date: Date, public readonly event: string) {
|
constructor(
|
||||||
|
message: string,
|
||||||
|
date: Date,
|
||||||
|
public readonly event: string,
|
||||||
|
) {
|
||||||
super(message, date.getTime(), date, "stderr", "info");
|
super(message, date.getTime(), date, "stderr", "info");
|
||||||
}
|
}
|
||||||
getComponent(): Component {
|
getComponent(): Component {
|
||||||
@@ -115,7 +119,7 @@ export class SkippedLogsEntry extends LogEntry<string> {
|
|||||||
date: Date,
|
date: Date,
|
||||||
totalSkipped: number,
|
totalSkipped: number,
|
||||||
public readonly firstSkipped: LogEntry<string | JSONObject>,
|
public readonly firstSkipped: LogEntry<string | JSONObject>,
|
||||||
lastSkipped: LogEntry<string | JSONObject>
|
lastSkipped: LogEntry<string | JSONObject>,
|
||||||
) {
|
) {
|
||||||
super("", date.getTime(), date, "stderr", "info");
|
super("", date.getTime(), date, "stderr", "info");
|
||||||
this._totalSkipped = totalSkipped;
|
this._totalSkipped = totalSkipped;
|
||||||
@@ -151,7 +155,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
|
|||||||
new Date(event.ts),
|
new Date(event.ts),
|
||||||
event.l,
|
event.l,
|
||||||
event.p,
|
event.p,
|
||||||
event.s === "unknown" ? "stderr" : event.s ?? "stderr"
|
event.s === "unknown" ? "stderr" : event.s ?? "stderr",
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return new ComplexLogEntry(
|
return new ComplexLogEntry(
|
||||||
@@ -159,7 +163,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
|
|||||||
event.id,
|
event.id,
|
||||||
new Date(event.ts),
|
new Date(event.ts),
|
||||||
event.l,
|
event.l,
|
||||||
event.s === "unknown" ? "stderr" : event.s ?? "stderr"
|
event.s === "unknown" ? "stderr" : event.s ?? "stderr",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ export const install = (app: App) => {
|
|||||||
([key, value]) => {
|
([key, value]) => {
|
||||||
const yaml = key.endsWith(".yaml");
|
const yaml = key.endsWith(".yaml");
|
||||||
return [key.slice(14, yaml ? -5 : -4), value.default];
|
return [key.slice(14, yaml ? -5 : -4), value.default];
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
const i18n = createI18n({
|
const i18n = createI18n({
|
||||||
legacy: false,
|
legacy: false,
|
||||||
|
|||||||
@@ -124,7 +124,7 @@ useIntervalFn(
|
|||||||
totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
|
totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
|
||||||
},
|
},
|
||||||
1000,
|
1000,
|
||||||
{ immediate: true }
|
{ immediate: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
let totalMem = $ref(0);
|
let totalMem = $ref(0);
|
||||||
@@ -133,7 +133,7 @@ useIntervalFn(
|
|||||||
totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
|
totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
|
||||||
},
|
},
|
||||||
1000,
|
1000,
|
||||||
{ immediate: true }
|
{ immediate: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
function onEnter() {
|
function onEnter() {
|
||||||
|
|||||||
@@ -10,10 +10,13 @@ export const useContainerStore = defineStore("container", () => {
|
|||||||
const ready = ref(false);
|
const ready = ref(false);
|
||||||
|
|
||||||
const allContainersById = computed(() =>
|
const allContainersById = computed(() =>
|
||||||
containers.value.reduce((acc, container) => {
|
containers.value.reduce(
|
||||||
|
(acc, container) => {
|
||||||
acc[container.id] = container;
|
acc[container.id] = container;
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, Container>)
|
},
|
||||||
|
{} as Record<string, Container>,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
const visibleContainers = computed(() => {
|
const visibleContainers = computed(() => {
|
||||||
@@ -29,7 +32,7 @@ export const useContainerStore = defineStore("container", () => {
|
|||||||
es = new EventSource(`${config.base}/api/events/stream`);
|
es = new EventSource(`${config.base}/api/events/stream`);
|
||||||
|
|
||||||
es.addEventListener("containers-changed", (e: Event) =>
|
es.addEventListener("containers-changed", (e: Event) =>
|
||||||
updateContainers(JSON.parse((e as MessageEvent).data) as ContainerJson[])
|
updateContainers(JSON.parse((e as MessageEvent).data) as ContainerJson[]),
|
||||||
);
|
);
|
||||||
es.addEventListener("container-stat", (e) => {
|
es.addEventListener("container-stat", (e) => {
|
||||||
const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
|
const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
|
||||||
@@ -83,7 +86,7 @@ export const useContainerStore = defineStore("container", () => {
|
|||||||
c.host,
|
c.host,
|
||||||
c.status,
|
c.status,
|
||||||
c.state,
|
c.state,
|
||||||
c.health
|
c.health,
|
||||||
);
|
);
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ onMounted(() => {
|
|||||||
{
|
{
|
||||||
attributes: true,
|
attributes: true,
|
||||||
attributeFilter: ["class"],
|
attributeFilter: ["class"],
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user