Skip to content

Commit

Permalink
Improve log error state
Browse files Browse the repository at this point in the history
  • Loading branch information
@manaswinidas
manaswinidas committed Dec 19, 2023
1 parent fbceadc commit ae4ba27
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 107 deletions.
212 changes: 109 additions & 103 deletions frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,121 +119,127 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
<StackItem>
{!podStatus?.podInitializing && (
<LogsTabStatus
podError={podError}
podName={podName}
podStatus={podStatus}
logsError={logsError}
loaded={loaded}
error={error}
refresh={refreshLogs}
onDownload={onDownloadAll}
/>
)}
</StackItem>
<StackItem>
<Split hasGutter isWrappable>
<SplitItem>
<Split hasGutter>
{isSmallScreen() ? null : (
{!podError && (
<StackItem>
<Split hasGutter isWrappable>
<SplitItem>
<Split hasGutter>
{isSmallScreen() ? null : (
<SplitItem>
<Bullseye>
<TextContent>
<TextListItem component={TextListItemVariants.dt}>Step</TextListItem>
</TextContent>
</Bullseye>
</SplitItem>
)}
<SplitItem>
<Bullseye>
<TextContent>
<TextListItem component={TextListItemVariants.dt}>Step</TextListItem>
</TextContent>
</Bullseye>
<SimpleDropdownSelect
isDisabled={podContainers.length === 0}
options={podContainers.map((container) => ({
key: container.name,
label: container.name,
}))}
value={selectedContainer?.name ?? ''}
placeholder="Select container..."
onChange={(v) => {
setSelectedContainer(podContainers.find((c) => c.name === v) ?? null);
}}
width={150}
/>
</SplitItem>
)}
<SplitItem>
<SimpleDropdownSelect
isDisabled={podContainers.length === 0}
options={podContainers.map((container) => ({
key: container.name,
label: container.name,
}))}
value={selectedContainer?.name ?? ''}
placeholder="Select container..."
onChange={(v) => {
setSelectedContainer(podContainers.find((c) => c.name === v) ?? null);
}}
width={150}
/>
</SplitItem>
</Split>
</SplitItem>
<SplitItem>
{!podStatus?.completed && (
<Button
variant={!logsLoaded ? 'plain' : isPaused ? 'plain' : 'link'}
onClick={() => setIsPaused(!isPaused)}
isDisabled={!!error}
>
{error ? (
'Error loading logs'
) : !logsLoaded || podStatus?.podInitializing ? (
<>
<Spinner size="sm" /> {isSmallScreen() ? 'Loading' : 'Loading log'}
</>
) : isPaused ? (
<>
<PlayIcon /> {isSmallScreen() ? 'Resume' : 'Resume refreshing'}
</>
) : (
<>
<PauseIcon /> {isSmallScreen() ? 'Pause' : 'Pause refreshing'}
</>
)}
</Button>
)}
</SplitItem>
<SplitItem isFilled style={{ textAlign: 'right' }}>
{downloading ? (
<>
<Spinner size="sm" />{' '}
</>
) : null}
{podContainers.length !== 0 ? (
<Dropdown
toggle={
isSmallScreen() ? (
<KebabToggle
onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
/>
) : (
<DropdownToggle
id="download-steps-logs-toggle"
onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
>
Download
</DropdownToggle>
)
}
isOpen={isDownloadDropdownOpen}
isPlain={isSmallScreen()}
dropdownItems={[
<DropdownItem key="current-container-logs" onClick={onDownload}>
<Truncate
content={isSmallScreen() ? 'Download current step log' : 'Current step log'}
/>
</DropdownItem>,
<DropdownItem key="all-container-logs" onClick={onDownloadAll}>
<Truncate
content={isSmallScreen() ? 'Download all step logs' : 'All step logs'}
/>
</DropdownItem>,
]}
/>
) : (
<Tooltip position="top" content={<div>Download current step log</div>}>
</Split>
</SplitItem>
<SplitItem>
{!podStatus?.completed && (
<Button
onClick={onDownload}
variant="link"
aria-label="Download current step log"
icon={<DownloadIcon />}
isDisabled={!canDownload}
variant={!logsLoaded ? 'plain' : isPaused ? 'plain' : 'link'}
onClick={() => setIsPaused(!isPaused)}
isDisabled={!!error}
>
Download
{error ? (
'Error loading logs'
) : !logsLoaded || podStatus?.podInitializing ? (
<>
<Spinner size="sm" /> {isSmallScreen() ? 'Loading' : 'Loading log'}
</>
) : isPaused ? (
<>
<PlayIcon /> {isSmallScreen() ? 'Resume' : 'Resume refreshing'}
</>
) : (
<>
<PauseIcon /> {isSmallScreen() ? 'Pause' : 'Pause refreshing'}
</>
)}
</Button>
</Tooltip>
)}
</SplitItem>
</Split>
</StackItem>
)}
</SplitItem>
<SplitItem isFilled style={{ textAlign: 'right' }}>
{downloading ? (
<>
<Spinner size="sm" />{' '}
</>
) : null}
{podContainers.length !== 0 ? (
<Dropdown
toggle={
isSmallScreen() ? (
<KebabToggle
onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
/>
) : (
<DropdownToggle
id="download-steps-logs-toggle"
onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
>
Download
</DropdownToggle>
)
}
isOpen={isDownloadDropdownOpen}
isPlain={isSmallScreen()}
dropdownItems={[
<DropdownItem key="current-container-logs" onClick={onDownload}>
<Truncate
content={isSmallScreen() ? 'Download current step log' : 'Current step log'}
/>
</DropdownItem>,
<DropdownItem key="all-container-logs" onClick={onDownloadAll}>
<Truncate
content={isSmallScreen() ? 'Download all step logs' : 'All step logs'}
/>
</DropdownItem>,
]}
/>
) : (
<Tooltip position="top" content={<div>Download current step log</div>}>
<Button
onClick={onDownload}
variant="link"
aria-label="Download current step log"
icon={<DownloadIcon />}
isDisabled={!canDownload}
>
Download
</Button>
</Tooltip>
)}
</SplitItem>
</Split>
</StackItem>
)}
<StackItem isFilled>
<DashboardCodeEditor
onEditorDidMount={onMount}
Expand Down
32 changes: 28 additions & 4 deletions ...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,51 @@
import * as React from 'react';
import { Alert, AlertActionLink, Button, Skeleton } from '@patternfly/react-core';
import { PodStatus } from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils';
import {
LOG_REFRESH_RATE,
LOG_TAIL_LINES,
} from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/const';

type LogsTabStatusProps = {
podError?: Error;
podName?: string;
logsError?: Error;
podStatus?: PodStatus | null;
error?: Error;
loaded: boolean;
refresh: () => void;
onDownload: () => void;
};

const LogsTabStatus: React.FC<LogsTabStatusProps> = ({ error, loaded, refresh, onDownload }) => {
const LogsTabStatus: React.FC<LogsTabStatusProps> = ({
podError,
podName,
podStatus,
error,
loaded,
refresh,
onDownload,
}) => {
if (error) {
return (
<Alert
isInline
variant="danger"
title="An error occurred while retrieving the requested logs"
actionLinks={<AlertActionLink onClick={refresh}>Retry</AlertActionLink>}
title={
podStatus === null || (podError && podStatus?.completed)
? podError?.message
: error?.message.includes('Failed to fetch') && error.message + ' logs'
}
actionLinks={
!podStatus === null && <AlertActionLink onClick={refresh}>Retry</AlertActionLink>
}
>
<p>{error.message}</p>
<p>
{podStatus === null || (podError && podStatus?.completed)
? podName + ' may have been pruned to prevent over-utilization of resources.'
: error?.message.includes('Failed to fetch') &&
'Check your connection and reload the page.'}
</p>
</Alert>
);
}
Expand Down

0 comments on commit ae4ba27

Please sign in to comment.