feat: 资源操作统一管理&容器操作

frontend/src/views/ops/docker/container/ContainerLog.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <el-drawer title="logs" v-model="visible" @close="close" :destroy-on-close="true" :close-on-click-modal="true" size="60%">
+            <template #header>
+                <DrawerHeader :header="props.host" :back="() => (visible = false)">
+                    <template #extra>
+                        <div class="mr20"></div>
+                    </template>
+                </DrawerHeader>
+            </template>
+
+            <el-row :gutter="10" class="mb20">
+                <el-col :span="6">
+                    <el-select @change="searchLog" v-model.number="state.tail">
+                        <template #prefix>{{ $t('docker.lines') }}</template>
+                        <el-option :value="100" :label="100" />
+                        <el-option :value="200" :label="200" />
+                        <el-option :value="500" :label="500" />
+                        <el-option :value="1000" :label="1000" />
+                    </el-select>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-checkbox @change="searchLog" border v-model="state.isWatch">
+                        {{ $t('docker.follow') }}
+                    </el-checkbox>
+                </el-col>
+            </el-row>
+
+            <RealLogViewer ref="realLogViewerRef" :ws-url="wsUrl" height="calc(100vh - 200px)" />
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, useTemplateRef } from 'vue';
+import RealLogViewer from '@/components/monaco/RealLogViewer.vue';
+import { getContainerLogSocketUrl } from '../api';
+import DrawerHeader from '@/components/drawer-header/DrawerHeader.vue';
+
+const props = defineProps({
+    host: {
+        type: String,
+        default: '',
+    },
+    containerId: {
+        type: String,
+        default: '',
+    },
+});
+
+const visible = defineModel<boolean>('visible');
+
+const realLogViewerRef = useTemplateRef('realLogViewerRef');
+
+const state = reactive({
+    since: '',
+    tail: 100,
+    isWatch: true,
+});
+
+const wsUrl = computed(
+    () => `${getContainerLogSocketUrl(props.host, props.containerId)}&tail=${state.tail}&follow=${state.isWatch ? '1' : '0'}&since=${state.since}`
+);
+
+const searchLog = () => {
+    realLogViewerRef.value?.reload(wsUrl.value);
+};
+
+const close = () => {
+    state.tail = 100;
+    state.since = '';
+    state.isWatch = true;
+};
+</script>
+
+<style scoped></style>