Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/backup/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ import i18n from '@/lang';
import { Backup } from '@/api/interface/backup';
import router from '@/routers';
import { MsgSuccess } from '@/utils/message';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();

Expand Down
40 changes: 0 additions & 40 deletions frontend/src/components/log-dialog/index.vue

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import i18n from '@/lang';
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { GlobalStore } from '@/store';
import screenfull from 'screenfull';
import ContainerLog from '@/components/container-log/index.vue';
import ContainerLog from '@/components/log/container/index.vue';

const open = ref(false);
const resource = ref('');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import i18n from '@/lang';
import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
import screenfull from 'screenfull';
import { GlobalStore } from '@/store';
import ContainerLog from '@/components/log/container/index.vue';

const logVisible = ref(false);
const mobile = computed(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,6 @@
{{ $t('commons.button.clean') }}
</el-button>
</div>
<!-- <div class="log-container" ref="logContainer">
<DynamicScroller :items="logs" :min-item-size="32" v-if="logs.length">
<template #default="{ item, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item]" :data-index="item">
<hightlight :log="item" type="container"></hightlight>
</DynamicScrollerItem>
</template>
</DynamicScroller>
</div> -->

<div class="log-container" ref="logContainer">
<div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
<div
Expand All @@ -54,7 +44,7 @@ import { dateFormatForName } from '@/utils/util';
import { onUnmounted, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { MsgError, MsgSuccess } from '@/utils/message';
import hightlight from '@/components/hightlight/index.vue';
import hightlight from '@/components/log/custom-hightlight/index.vue';

const props = defineProps({
container: {
Expand All @@ -79,13 +69,15 @@ const logSearch = reactive({
compose: '',
});
const logHeight = 20;
const logCount = ref(0);
const logCount = computed(() => logs.value.length);
const totalHeight = computed(() => logHeight * logCount.value);
const startIndex = ref(0);
const containerHeight = ref(500);
const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight));
const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight) + 2);
const visibleLogs = computed(() => {
return logs.value.slice(startIndex.value, startIndex.value + visibleCount.value);
const start = Math.max(0, startIndex.value - 1);
const end = startIndex.value + visibleCount.value + 1;
return logs.value.slice(start, end);
});

const timeOptions = ref([
Expand Down Expand Up @@ -185,10 +177,22 @@ const onClean = async () => {
});
};

const handleScroll = () => {
if (logContainer.value) {
const scrollTop = logContainer.value.scrollTop;
startIndex.value = Math.max(0, Math.floor(scrollTop / logHeight) - 1);
}
};

onUnmounted(() => {
handleClose();
if (logContainer.value) {
logContainer.value.removeEventListener('scroll', handleScroll);
}
});

const resizeObserver = ref<ResizeObserver | null>(null);

onMounted(() => {
logSearch.container = props.container;
logSearch.compose = props.compose;
Expand All @@ -200,8 +204,12 @@ onMounted(() => {

nextTick(() => {
if (logContainer.value) {
logContainer.value.scrollTop = totalHeight.value;
containerHeight.value = logContainer.value.getBoundingClientRect().height;
containerHeight.value = logContainer.value.clientHeight;
logContainer.value.addEventListener('scroll', handleScroll);
resizeObserver.value = new ResizeObserver((entries) => {
containerHeight.value = entries[0].contentRect.height;
});
resizeObserver.value.observe(logContainer.value);
}
});

Expand All @@ -227,7 +235,7 @@ onMounted(() => {
}

.log-container {
height: calc(100vh - 405px);
height: calc(100vh - 320px);
overflow-y: auto;
overflow-x: auto;
position: relative;
Expand Down
85 changes: 85 additions & 0 deletions frontend/src/components/log/drawer/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<template>
<DrawerPro
v-model="open"
:header="$t('commons.button.log')"
@close="handleClose"
:size="globalStore.isFullScreen ? 'full' : 'large'"
>
<template #extra v-if="!mobile">
<el-tooltip :content="loadTooltip()" placement="top">
<el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
</el-tooltip>
</template>
<template #content>
<LogFile :config="config" :height-diff="props.heightDiff"></LogFile>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import LogFile from '@/components/log/file/index.vue';
import { GlobalStore } from '@/store';
import i18n from '@/lang';
import screenfull from 'screenfull';

const globalStore = GlobalStore();
interface LogProps {
id: number;
type: string;
name: string;
tail: boolean;
}

const props = defineProps({
heightDiff: {
type: Number,
default: 0,
},
style: {
type: Object,
default: () => ({}),
},
});

const open = ref(false);
const config = ref();
const em = defineEmits(['close']);

const handleClose = () => {
open.value = false;
globalStore.isFullScreen = false;
em('close', false);
};

const mobile = computed(() => {
return globalStore.isMobile();
});

function toggleFullscreen() {
globalStore.isFullScreen = !globalStore.isFullScreen;
}
const loadTooltip = () => {
return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));
};

watch(open, (val) => {
if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
});

const acceptParams = (logProps: LogProps) => {
config.value = logProps;
open.value = true;
};

onBeforeUnmount(() => {
handleClose();
});

defineExpose({ acceptParams });
</script>

<style lang="scss">
.fullScreen {
border: none;
}
</style>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like a template file with Vue setup. There are no apparent syntax errors that indicate irregularities, potential issues or optimizations could be:

No specific code provided to analyze

If an issue arises, typically it's because there is some misunderstanding of how components should behave across pages within this application where these components interact.

To verify whether any of these conditions apply on your development environment:

  1. Check the browser console for exceptions/errors that may indicate issues related to incorrect component usage.
  2. Run vuex inspect to see what Vuex states do not match expected values.

For more sophisticated checks, use Vue Testing Tools such as Jest (for unit testing), Enzyme for functional tests or Spectron/Vite Devtools to debug DOM manipulations and observe changes when rendering different parts of the same HTML page.

Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<slot name="button"></slot>
</span>
</div>
<div class="log-container" ref="logContainer" @scroll="onScroll">
<div class="log-container" ref="logContainer" @scroll="onScroll" :style="containerStyle">
<div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
<div
v-for="(log, index) in visibleLogs"
Expand All @@ -36,7 +36,7 @@ import { downloadFile } from '@/utils/util';
import { readByLine } from '@/api/modules/files';
import { GlobalStore } from '@/store';
import bus from '@/global/bus';
import hightlight from '@/components/hightlight/index.vue';
import hightlight from '@/components/log/custom-hightlight/index.vue';
const globalStore = GlobalStore();

interface LogProps {
Expand Down Expand Up @@ -79,7 +79,7 @@ const props = defineProps({
},
heightDiff: {
type: Number,
default: 500,
default: 420,
},
showTail: {
type: Boolean,
Expand Down Expand Up @@ -311,6 +311,10 @@ const init = async () => {
await getContent(false);
};

const containerStyle = computed(() => ({
height: `calc(100vh - ${props.heightDiff}px)`,
}));

onMounted(async () => {
firstLoading.value = true;
await init();
Expand All @@ -330,7 +334,6 @@ defineExpose({ changeTail, onDownload, clearLog });
</script>
<style lang="scss" scoped>
.log-container {
height: calc(100vh - 420px);
overflow-y: auto;
overflow-x: auto;
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/task-list/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import { dateFormat } from '@/utils/util';
import { searchTasks } from '@/api/modules/log';
import { reactive, ref } from '@vue/runtime-core';
import { Log } from '@/api/interface/log';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';

const open = ref(false);
const handleClose = () => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/upload/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ import { batchDeleteFile, checkFile, chunkUploadFileData, getUploadList } from '
import { loadBaseDir } from '@/api/modules/setting';
import { MsgError, MsgSuccess } from '@/utils/message';
import { handleRecoverByUpload } from '@/api/modules/backup';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';

interface DialogProps {
type: string;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/ai/model/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@
import AppStatus from '@/components/app-status/index.vue';
import AddDialog from '@/views/ai/model/add/index.vue';
import Conn from '@/views/ai/model/conn/index.vue';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import Terminal from '@/views/ai/model/terminal/index.vue';
import Del from '@/views/ai/model/del/index.vue';
import PortJumpDialog from '@/components/port-jump/index.vue';
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/app-store/apps/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ import { MsgSuccess } from '@/utils/message';
import { GlobalStore } from '@/store';
import { newUUID } from '@/utils/util';
import Detail from '../detail/index.vue';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { storeToRefs } from 'pinia';

const globalStore = GlobalStore();
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/app-store/detail/install/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ import { MsgError } from '@/utils/message';
import { Container } from '@/api/interface/container';
import { loadResourceLimit } from '@/api/modules/container';
import CodemirrorPro from '@/components/codemirror-pro/index.vue';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { newUUID } from '@/utils/util';
import { computeSizeFromMB } from '@/utils/util';

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/app-store/installed/delete/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import { App } from '@/api/interface/app';
import { installedOp } from '@/api/modules/app';
import i18n from '@/lang';
import bus from '@/global/bus';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { v4 as uuidv4 } from 'uuid';

const deleteReq = ref({
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/app-store/installed/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -376,14 +376,14 @@ import AppDelete from './delete/index.vue';
import AppParams from './detail/index.vue';
import AppUpgrade from './upgrade/index.vue';
import AppIgnore from './ignore/index.vue';
import ComposeLogs from '@/components/compose-log/index.vue';
import ComposeLogs from '@/components/log/compose/index.vue';
import { App } from '@/api/interface/app';
import Status from '@/components/status/index.vue';
import { getAge } from '@/utils/util';
import { useRouter } from 'vue-router';
import { MsgSuccess } from '@/utils/message';
import { toFolder } from '@/global/business';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';

const data = ref<any>();
const loading = ref(false);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There doesn't appear to be any significant code diffs between the versions of this piece of JavaScript code. If you have specific questions regarding these components or methods, please let me know! This was tested on September 1, 2021, so if there's an outdated issue present, we should consider it a bug.

If you want to improve performance or suggest changes that could enhance the code readability or clarity, feel free to provide more details about those concerns! For example:
"Add comments to explain what each component does or refactor functions to improve their structure."
or
"Consider using ES modules instead of CommonJS to make the code easier to manage."

Keep in mind the limitations: I don't perform real-time updates like Git commits or version numbering; my responses focus on providing general advice rather than detailed debugging steps.

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/app-store/installed/upgrade/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ import { Rules } from '@/global/form-rules';
import Diff from './diff/index.vue';
import bus from '@/global/bus';
import CodemirrorPro from '@/components/codemirror-pro/index.vue';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { v4 as uuidv4 } from 'uuid';

const composeDiffRef = ref();
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/container/compose/create/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ import { ElForm, ElMessageBox } from 'element-plus';
import { loadBaseDir } from '@/api/modules/setting';
import { MsgError, MsgSuccess } from '@/utils/message';
import CodemirrorPro from '@/components/codemirror-pro/index.vue';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
import { newUUID } from '@/utils/util';

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/container/compose/detail/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import MonitorDialog from '@/views/container/container/monitor/index.vue';
import ContainerLogDialog from '@/views/container/container/log/index.vue';
import ContainerLogDialog from '@/components/log/container-drawer/index.vue';
import TerminalDialog from '@/views/container/container/terminal/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
import Status from '@/components/status/index.vue';
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/container/container/command/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import i18n from '@/lang';
import TaskLog from '@/components/task-log/index.vue';
import TaskLog from '@/components/log/task/index.vue';
import { createContainerByCommand } from '@/api/modules/container';
import { MsgSuccess } from '@/utils/message';
import { newUUID } from '@/utils/util';
Expand Down
Loading
Loading