From c0fad73c40277386a8c322e68a816cf5c8388c44 Mon Sep 17 00:00:00 2001 From: Alex Collins Date: Thu, 23 Feb 2023 16:29:02 -0800 Subject: [PATCH] jesse feedback Signed-off-by: Alex Collins --- .../pod-logs-viewer/pod-logs-viewer.tsx | 25 +++++++++---------- .../since-seconds-selector.tsx | 18 ++++++------- .../pod-logs-viewer/tail-selector.tsx | 12 ++++----- .../shared/services/applications-service.ts | 11 ++++---- 4 files changed, 32 insertions(+), 34 deletions(-) diff --git a/ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx b/ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx index 8b3d0edcda4be..d971c45d8620b 100644 --- a/ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx +++ b/ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx @@ -22,11 +22,13 @@ import {DarkModeToggleButton} from './dark-mode-toggle-button'; import {FullscreenButton} from './fullscreen-button'; import {Spacer} from '../../../shared/components/spacer'; import {LogMessageFilter} from './log-message-filter'; -import {SinceSelector} from './since-selector'; +import {SinceSecondsSelector} from './since-seconds-selector'; import {TailSelector} from './tail-selector'; import {Since} from '../../../shared/services/since'; import {PodNamesToggleButton} from './pod-names-toggle-button'; import Ansi from 'ansi-to-react'; +import {TimeSelector} from './time-selector'; +import {LogEntry} from '../../../shared/models'; export interface PodLogsProps { namespace: string; @@ -83,8 +85,8 @@ export const PodsLogsViewer = (props: PodLogsProps) => { const [follow, setFollow] = useState(queryParams.get('follow') !== 'false'); const [viewTimestamps, setViewTimestamps] = useState(queryParams.get('viewTimestamps') === 'true'); const [previous, setPreviousLogs] = useState(queryParams.get('showPreviousLogs') === 'true'); - const [tail, setTail] = useState(parseInt(queryParams.get('tail'), 10) || 100); - const [since, setSince] = useState('1m ago'); + const [tail, setTail] = useState(parseInt(queryParams.get('tail'), 10) || 1000); + const [sinceSeconds, setSinceSeconds] = useState(0); const [filter, setFilter] = useState(queryParams.get('filterText') || ''); const [highlight, setHighlight] = useState(matchNothing); @@ -102,7 +104,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => { containerName, tail, follow, - since, + sinceSeconds, filter, previous }; @@ -117,10 +119,11 @@ export const PodsLogsViewer = (props: PodLogsProps) => { const to = setTimeout(() => { loader?.reload(); // https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript + // matchNothing this is chosen instead of empty regexp, because that would match everything and break colored logs setHighlight(filter === '' ? matchNothing : new RegExp(filter.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g')); }, 250); return () => clearTimeout(to); - }, [applicationName, applicationNamespace, namespace, podName, group, kind, name, containerName, tail, follow, since, filter, previous]); + }, [applicationName, applicationNamespace, namespace, podName, group, kind, name, containerName, tail, follow, sinceSeconds, filter, previous]); return ( services.viewPreferences.getPreferences()}> @@ -130,17 +133,14 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
- {!follow && ( <> + setSinceSeconds(n)} /> - - - )} @@ -198,10 +198,10 @@ export const PodsLogsViewer = (props: PodLogsProps) => { } return logsSource; }}> - {(logs: {content: string; podName: string; timeStampStr: string}[]) => { + {(logs: LogEntry[]) => { logs = logs || []; - const renderLog = (log: {content: string; podName: string; timeStampStr: string}, lineNum: number) => + const renderLog = (log: LogEntry, lineNum: number) => // show the pod name if there are multiple pods, pad with spaces to align (viewPodNames ? (lineNum === 0 || logs[lineNum - 1].podName !== log.podName @@ -210,8 +210,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => { : '') + // show the timestamp if requested, pad with spaces to align (viewTimestamps - ? (lineNum === 0 || logs[lineNum - 1].timeStampStr !== log.timeStampStr ? log.timeStampStr : ' '.repeat(log.timeStampStr.length)) + - ' ' + ? (lineNum === 0 || logs[lineNum - 1].timeStamp !== log.timeStamp ? log.timeStampStr : ' '.repeat(log.timeStampStr.length)) + ' ' : '') + // show the log content, highlight the filter text log.content.replace(highlight, (substring: string) => whiteOnYellow + substring + reset); diff --git a/ui/src/app/applications/components/pod-logs-viewer/since-seconds-selector.tsx b/ui/src/app/applications/components/pod-logs-viewer/since-seconds-selector.tsx index 982c467223ebb..e5c02ee031f80 100644 --- a/ui/src/app/applications/components/pod-logs-viewer/since-seconds-selector.tsx +++ b/ui/src/app/applications/components/pod-logs-viewer/since-seconds-selector.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import {Since} from '../../../shared/services/since'; import {Tooltip} from 'argo-ui'; // SinceSelector is a component that renders a dropdown menu of time ranges -export const SinceSelector = ({since, setSince}: {since: Since; setSince: (value: Since) => void}) => ( +export const SinceSecondsSelector = ({sinceSeconds, setSinceSeconds}: {sinceSeconds: number; setSinceSeconds: (value: number) => void}) => ( - setSinceSeconds(parseInt(e.target.value, 10))}> + + + + + + + ); diff --git a/ui/src/app/applications/components/pod-logs-viewer/tail-selector.tsx b/ui/src/app/applications/components/pod-logs-viewer/tail-selector.tsx index c48510884dfc6..8d9ebd8d6ac9a 100644 --- a/ui/src/app/applications/components/pod-logs-viewer/tail-selector.tsx +++ b/ui/src/app/applications/components/pod-logs-viewer/tail-selector.tsx @@ -4,12 +4,12 @@ import {Tooltip} from 'argo-ui'; // TailSelector is a component that renders a dropdown menu of tail options export const TailSelector = ({tail, setTail}: {tail: number; setTail: (value: number) => void}) => ( - setTail(parseInt(e.target.value, 10))} value={tail.toString()}> + + + + + ); diff --git a/ui/src/app/shared/services/applications-service.ts b/ui/src/app/shared/services/applications-service.ts index d2c70787bc66f..cca392bd5a717 100644 --- a/ui/src/app/shared/services/applications-service.ts +++ b/ui/src/app/shared/services/applications-service.ts @@ -5,7 +5,6 @@ import {map, repeat, retry} from 'rxjs/operators'; import * as models from '../models'; import {isValidURL} from '../utils'; import requests from './requests'; -import {Since, sinceSeconds} from './since'; interface QueryOptions { fields: string[]; @@ -242,7 +241,7 @@ export class ApplicationsService { containerName: string; tail?: number; follow?: boolean; - since?: Since; + sinceSeconds?: number; untilTime?: string; filter?: string; previous?: boolean; @@ -438,12 +437,12 @@ export class ApplicationsService { containerName: string; tail?: number; follow?: boolean; - since?: Since; + sinceSeconds?: number; untilTime?: string; filter?: string; previous?: boolean; }): URLSearchParams { - const {appNamespace, containerName, namespace, podName, resource, tail, since, untilTime, filter, previous} = query; + const {appNamespace, containerName, namespace, podName, resource, tail, sinceSeconds, untilTime, filter, previous} = query; let {follow} = query; if (follow === undefined || follow === null) { follow = true; @@ -463,8 +462,8 @@ export class ApplicationsService { if (tail) { search.set('tailLines', tail.toString()); } - if (since) { - search.set('sinceSeconds', sinceSeconds(since).toString()); + if (sinceSeconds) { + search.set('sinceSeconds', sinceSeconds.toString()); } if (untilTime) { search.set('untilTime', untilTime);