dashboard/shell/components/nav/WindowManager/ContainerLogsActions.vue

77 lines
1.5 KiB
Vue

<script setup lang="ts">
import {
RcDropdown,
RcDropdownTrigger,
RcDropdownItemCheckbox,
RcDropdownItemSelect,
} from '@components/RcDropdown';
defineProps({
range: {
type: String,
default: '',
},
rangeOptions: {
type: Array,
default() {
return [];
},
},
wrap: Boolean,
timestamps: Boolean,
});
defineEmits([
'toggleRange',
'toggleWrap',
'toggleTimestamps',
]);
</script>
<template>
<rc-dropdown>
<rc-dropdown-trigger
class="condensed"
>
<i
class="icon icon-gear"
:alt="t('wm.containerLogs.options')"
/>
<template #after>
<i
class="icon icon-chevron-up"
:alt="t('wm.containerLogs.expand')"
/>
</template>
</rc-dropdown-trigger>
<template #dropdownCollection>
<rc-dropdown-item-select
:model-value="range"
:options="rangeOptions"
@select="$emit('toggleRange', $event)"
/>
<rc-dropdown-item-checkbox
:model-value="wrap"
@click="$emit('toggleWrap', $event)"
>
{{ t('wm.containerLogs.wrap') }}
</rc-dropdown-item-checkbox>
<rc-dropdown-item-checkbox
:model-value="timestamps"
@click="$emit('toggleTimestamps', $event)"
>
{{ t('wm.containerLogs.timestamps') }}
</rc-dropdown-item-checkbox>
</template>
</rc-dropdown>
</template>
<style lang="scss" scoped>
.condensed {
padding-left: 0.5rem;
padding-right: 0.5rem;
min-height: 30px;
}
</style>