mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-24 06:28:42 +01:00
Code Issues Projects Releases Wiki Activity

feat: adds action toolbar for groups, services and stacks (#3190)

Browse Source
This commit is contained in:
Amir Raminfar
2024-08-10 13:35:56 -07:00
committed by GitHub
parent ffc4559047
commit 69fb227519
6 changed files with 93 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/components.d.ts vendored
View File

@@ -71,6 +71,7 @@ declare module 'vue' {
'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
MultiContainerActionToolbar: typeof import('./components/LogViewer/MultiContainerActionToolbar.vue')['default']
MultiContainerLog: typeof import('./components/MultiContainerViewer/MultiContainerLog.vue')['default']
MultiContainerStat: typeof import('./components/LogViewer/MultiContainerStat.vue')['default']
'Octicon:container24': typeof import('~icons/octicon/container24')['default']

3
assets/components/GroupedViewer/GroupedLog.vue
View File

@@ -8,6 +8,7 @@
</div>
</div>
<MultiContainerStat class="ml-auto" :containers="group.containers" />
<MultiContainerActionToolbar @clear="viewer?.clear()" />
</div>
</template>
<template #default>
@@ -25,6 +26,7 @@
<script lang="ts" setup>
import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
import { GroupedContainers } from "@/models/Container";
import { ComponentExposed } from "vue-component-type-helpers";
const { name, scrollable = false } = defineProps<{
name: string;
@@ -32,6 +34,7 @@ const { name, scrollable = false } = defineProps<{
}>();
const containerStore = useContainerStore();
const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
const { ready } = storeToRefs(containerStore);

83
assets/components/LogViewer/MultiContainerActionToolbar.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div class="dropdown dropdown-end dropdown-hover">
<label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
<carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
<carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
</label>
<ul tabindex="0" class="menu dropdown-content z-50 w-52 rounded-box bg-base p-1 shadow">
<li>
<a @click.prevent="clear()">
<octicon:trash-24 /> {{ $t("toolbar.clear") }}
<KeyShortcut char="k" :modifiers="['shift', 'meta']" />
</a>
</li>
<li>
<a @click.prevent="showSearch = true">
<mdi:magnify /> {{ $t("toolbar.search") }}
<KeyShortcut char="f" />
</a>
</li>
<li class="line"></li>
<li>
<a
@click="
streamConfig.stdout = true;
streamConfig.stderr = true;
"
>
<div class="flex size-4 gap-0.5">
<template v-if="streamConfig.stderr && streamConfig.stdout">
<carbon:circle-solid class="w-2 text-red" />
<carbon:circle-solid class="w-2 text-blue" />
</template>
</div>
{{ $t("toolbar.show-all") }}
</a>
</li>
<li>
<a
@click="
streamConfig.stdout = true;
streamConfig.stderr = false;
"
>
<div class="flex size-4 flex-col gap-1">
<carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
</div>
{{ $t("toolbar.show", { std: "STDOUT" }) }}
</a>
</li>
<li>
<a
@click="
streamConfig.stdout = false;
streamConfig.stderr = true;
"
>
<div class="flex size-4 flex-col gap-1">
<carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
</div>
{{ $t("toolbar.show", { std: "STDERR" }) }}
</a>
</li>
</ul>
</div>
</template>
<script lang="ts" setup>
const { showSearch } = useSearchFilter();
const clear = defineEmit();
const { streamConfig } = useLoggingContext();
</script>
<style scoped lang="postcss">
li.line {
@apply h-px bg-base-content/20;
}
a {
@apply whitespace-nowrap;
}
</style>

4
assets/components/ServiceViewer/ServiceLog.vue
View File

@@ -11,6 +11,7 @@
</Tag>
</div>
<MultiContainerStat class="ml-auto" :containers="service.containers" />
<MultiContainerActionToolbar @clear="viewer?.clear()" />
</div>
</template>
<template #default>
@@ -28,6 +29,7 @@
<script lang="ts" setup>
import { Service } from "@/models/Stack";
import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
import { ComponentExposed } from "vue-component-type-helpers";
const { name, scrollable = false } = defineProps<{
scrollable?: boolean;
@@ -35,7 +37,7 @@ const { name, scrollable = false } = defineProps<{
}>();
const visibleKeys = ref<string[][]>([]);
const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
const store = useSwarmStore();
const { services } = storeToRefs(store) as unknown as { services: Ref<Service[]> };
const service = computed(() => services.value.find((s) => s.name === name) ?? new Service("", []));

5
assets/components/StackViewer/StackLog.vue
View File

@@ -14,6 +14,7 @@
</Tag>
</div>
<MultiContainerStat class="ml-auto" :containers="stack.containers" />
<MultiContainerActionToolbar @clear="viewer?.clear()" />
</div>
</template>
<template #default>
@@ -31,14 +32,14 @@
<script lang="ts" setup>
import { Stack } from "@/models/Stack";
import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
import { ComponentExposed } from "vue-component-type-helpers";
const { name, scrollable = false } = defineProps<{
scrollable?: boolean;
name: string;
}>();
const visibleKeys = ref<string[][]>([]);
const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
const store = useSwarmStore();
const { stacks } = storeToRefs(store) as unknown as { stacks: Ref<Stack[]> };
const stack = computed(() => stacks.value.find((s) => s.name === name) ?? new Stack("", [], []));

2
internal/docker/client.go
View File

@@ -389,8 +389,6 @@ func newContainerFromJSON(c types.ContainerJSON, host string) Container {
group = c.Config.Labels["dev.dozzle.group"]
}
log.Debugf("newContainerFromJSON: %s", c.Config.Image)
container := Container{
ID: c.ID[:12],
Name: name,