diff --git a/src/renderer/components/dock/logs/get-visible-logs.injectable.ts b/src/renderer/components/dock/logs/get-visible-logs.injectable.ts new file mode 100644 index 0000000000..debd13f84a --- /dev/null +++ b/src/renderer/components/dock/logs/get-visible-logs.injectable.ts @@ -0,0 +1,38 @@ +import { getInjectable } from "@ogre-tools/injectable"; +import moment from "moment"; +import userStoreInjectable from "../../../../common/user-store/user-store.injectable"; +import type { TabId } from "../dock/store"; +import getLogTabDataInjectable from "./get-log-tab-data.injectable"; +import getLogsWithoutTimestampsInjectable from "./get-logs-without-timestamps.injectable"; +import getTimestampSplitLogsInjectable from "./get-timestamp-split-logs.injectable"; + +const getVisibleLogsInjectable = getInjectable({ + id: "get-visible-logs", + + instantiate: (di) => { + return (tabId: TabId) => { + const getLogTabData = di.inject(getLogTabDataInjectable); + const getTimestampSplitLogs = di.inject(getTimestampSplitLogsInjectable); + const userStore = di.inject(userStoreInjectable) + const logTabData = getLogTabData(tabId); + + if (!logTabData) { + return []; + } + + const { showTimestamps } = logTabData; + + if (!showTimestamps) { + const getLogsWithoutTimestamps = di.inject(getLogsWithoutTimestampsInjectable); + + return getLogsWithoutTimestamps(tabId); + } + + return getTimestampSplitLogs(tabId).map(([logTimestamp, log]) => ( + `${logTimestamp && moment.tz(logTimestamp, userStore.localeTimezone).format()}${log}` + )); + } + } +}); + +export default getVisibleLogsInjectable; \ No newline at end of file diff --git a/src/renderer/components/dock/logs/log-list.tsx b/src/renderer/components/dock/logs/log-list.tsx index 61d2fa85cd..9a30bac0b4 100644 --- a/src/renderer/components/dock/logs/log-list.tsx +++ b/src/renderer/components/dock/logs/log-list.tsx @@ -15,10 +15,10 @@ export const LogList = observer(({ model }: LogListProps) => { const [toBottomVisible, setToBottomVisible] = React.useState(false); const [lastLineVisible, setLastLineVisible] = React.useState(true); - const { logs } = model; + const { visibleLogs } = model; const parentRef = useRef(null) const rowVirtualizer = useVirtualizer({ - count: logs.get().length, + count: visibleLogs.get().length, getScrollElement: () => parentRef.current, estimateSize: () => 38, overscan: 5, @@ -70,7 +70,7 @@ export const LogList = observer(({ model }: LogListProps) => { useEffect(() => { setTimeout(() => { // Initial scroll to bottom - rowVirtualizer.scrollToIndex(logs.get().length - 1, { align: 'end', smoothScroll: false }); + rowVirtualizer.scrollToIndex(visibleLogs.get().length - 1, { align: 'end', smoothScroll: false }); }, 200) }, []) @@ -123,7 +123,7 @@ const colorConverter = new AnsiUp(); function LogRow({ rowIndex, model }: { rowIndex: number; model: LogTabViewModel }) { const { searchQuery, isActiveOverlay } = model.searchStore; - const log = model.logs.get()[rowIndex]; + const log = model.visibleLogs.get()[rowIndex]; const contents: React.ReactElement[] = []; const ansiToHtml = (ansi: string) => DOMPurify.sanitize(colorConverter.ansi_to_html(ansi)); diff --git a/src/renderer/components/dock/logs/logs-view-model.injectable.ts b/src/renderer/components/dock/logs/logs-view-model.injectable.ts index 77e4ca983c..a783db1032 100644 --- a/src/renderer/components/dock/logs/logs-view-model.injectable.ts +++ b/src/renderer/components/dock/logs/logs-view-model.injectable.ts @@ -20,6 +20,7 @@ import getPodsByOwnerIdInjectable from "../../+workloads-pods/get-pods-by-owner- import getPodByIdInjectable from "../../+workloads-pods/get-pod-by-id.injectable"; import downloadLogsInjectable from "./download-logs.injectable"; import downloadAllLogsInjectable from "./download-all-logs.injectable"; +import getVisibleLogsInjectable from "./get-visible-logs.injectable"; export interface InstantiateArgs { tabId: TabId; @@ -32,6 +33,7 @@ const logsViewModelInjectable = getInjectable({ getLogs: di.inject(getLogsInjectable), getLogsWithoutTimestamps: di.inject(getLogsWithoutTimestampsInjectable), getTimestampSplitLogs: di.inject(getTimestampSplitLogsInjectable), + getVisibleLogs: di.inject(getVisibleLogsInjectable), reloadLogs: di.inject(reloadLogsInjectable), getLogTabData: di.inject(getLogTabDataInjectable), setLogTabData: di.inject(setLogTabDataInjectable), diff --git a/src/renderer/components/dock/logs/logs-view-model.ts b/src/renderer/components/dock/logs/logs-view-model.ts index 85b8502df3..b32fd340e3 100644 --- a/src/renderer/components/dock/logs/logs-view-model.ts +++ b/src/renderer/components/dock/logs/logs-view-model.ts @@ -19,6 +19,7 @@ export interface LogTabViewModelDependencies { getLogs: (tabId: TabId) => string[]; getLogsWithoutTimestamps: (tabId: TabId) => string[]; getTimestampSplitLogs: (tabId: TabId) => [string, string][]; + getVisibleLogs: (tabId: TabId) => string[]; getLogTabData: (tabId: TabId) => LogTabData | undefined; setLogTabData: (tabId: TabId, data: LogTabData) => void; loadLogs: LoadLogs; @@ -45,6 +46,7 @@ export class LogTabViewModel { readonly logsWithoutTimestamps = computed(() => this.dependencies.getLogsWithoutTimestamps(this.tabId)); readonly timestampSplitLogs = computed(() => this.dependencies.getTimestampSplitLogs(this.tabId)); readonly logTabData = computed(() => this.dependencies.getLogTabData(this.tabId)); + readonly visibleLogs = computed(() => this.dependencies.getVisibleLogs(this.tabId)); readonly pods = computed(() => { const data = this.logTabData.get();