Skip to content

Commit

Permalink
jesse feedback
Browse files Browse the repository at this point in the history 
Signed-off-by: Alex Collins <[email protected]>
  • Loading branch information
@alexec
alexec committed Feb 24, 2023
1 parent c5a3b91 commit c0fad73
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 34 deletions.
25 changes: 12 additions & 13 deletions ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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<number>(parseInt(queryParams.get('tail'), 10) || 100);
const [since, setSince] = useState<Since>('1m ago');
const [tail, setTail] = useState<number>(parseInt(queryParams.get('tail'), 10) || 1000);
const [sinceSeconds, setSinceSeconds] = useState(0);
const [filter, setFilter] = useState(queryParams.get('filterText') || '');
const [highlight, setHighlight] = useState<RegExp>(matchNothing);

Expand All @@ -102,7 +104,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
containerName,
tail,
follow,
since,
sinceSeconds,
filter,
previous
};
Expand All @@ -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 (
<DataLoader load={() => services.viewPreferences.getPreferences()}>
Expand All @@ -130,17 +133,14 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
<div className='pod-logs-viewer__settings'>
<span>
<FollowToggleButton follow={follow} setFollow={setFollow} />
<Spacer />
<ShowPreviousLogsToggleButton loader={loader} setPreviousLogs={setPreviousLogs} showPreviousLogs={previous} />
<Spacer />
<ContainerSelector containerGroups={containerGroups} containerName={containerName} onClickContainer={onClickContainer} />
<Spacer />
{!follow && (
<>
<SinceSecondsSelector sinceSeconds={sinceSeconds} setSinceSeconds={n => setSinceSeconds(n)} />
<TailSelector tail={tail} setTail={setTail} />
<Spacer />
<SinceSelector since={since} setSince={setSince} />
<Spacer />
</>
)}
<LogMessageFilter filterText={filter} setFilterText={setFilter} />
Expand Down Expand Up @@ -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
Expand All @@ -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);
Expand Down
18 changes: 9 additions & 9 deletions ui/src/app/applications/components/pod-logs-viewer/since-seconds-selector.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}) => (
<Tooltip content='Show logs since a given time'>
<select className='argo-field' value={since} onChange={e => setSince(e.target.value as Since)}>
<option value='1m ago'>1m ago</option>
<option value='5m ago'>5m ago</option>
<option value='30m ago'>30m ago</option>
<option value='1h ago'>1h ago</option>
<option value='4h ago'>4h ago</option>
<option value='forever'>forever</option>
<select className='argo-field' style={{marginRight: '1em'}} value={sinceSeconds} onChange={e => setSinceSeconds(parseInt(e.target.value, 10))}>
<option value='60'>1m ago</option>
<option value='300'>5m ago</option>
<option value='600'>10m ago</option>
<option value='1800'>30m ago</option>
<option value='3600'>1h ago</option>
<option value='14400'>4h ago</option>
<option>forever</option>
</select>
</Tooltip>
);
12 changes: 6 additions & 6 deletions ui/src/app/applications/components/pod-logs-viewer/tail-selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => (
<Tooltip content='Show the last N lines of the log'>
<select className='argo-field' onChange={e => setTail(parseInt(e.target.value, 10))} value={tail.toString()}>
{[100, 1000, 5000].map(n => (
<option key={n} value={n}>
{n}
</option>
))}
<select className='argo-field' style={{marginRight: '1em'}} onChange={e => setTail(parseInt(e.target.value, 10))} value={tail.toString()}>
<option value='100'>100 lines</option>
<option value='500'>500 lines</option>
<option value='1000'>1000 lines</option>
<option value='5000'>5000 lines</option>
<option value='10000'>10000 lines</option>
</select>
</Tooltip>
);
11 changes: 5 additions & 6 deletions ui/src/app/shared/services/applications-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -242,7 +241,7 @@ export class ApplicationsService {
containerName: string;
tail?: number;
follow?: boolean;
since?: Since;
sinceSeconds?: number;
untilTime?: string;
filter?: string;
previous?: boolean;
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down

0 comments on commit c0fad73

Please sign in to comment.