mirror of https://github.com/apache/druid.git
Web console: Simplify task and supervisor detail displays (#7848)
* simplify detail display * update tests
This commit is contained in:
Vadim Ogievetsky
Fangjin Yang
parent
ea752ef562
commit
248e075e24
|
|
@ -29,6 +29,7 @@ import './show-json.scss';
|
|||
|
||||
export interface ShowJsonProps extends React.Props<any> {
|
||||
endpoint: string;
|
||||
transform?: (x: any) => any;
|
||||
downloadFilename?: string;
|
||||
}
|
||||
|
||||
|
|
@ -47,12 +48,14 @@ export class ShowJson extends React.PureComponent<ShowJsonProps, ShowJsonState>
|
|||
}
|
||||
|
||||
private getJsonInfo = async (): Promise<void> => {
|
||||
const { endpoint } = this.props;
|
||||
const { endpoint, transform } = this.props;
|
||||
|
||||
try {
|
||||
const resp = await axios.get(endpoint);
|
||||
const data = resp.data;
|
||||
let data = resp.data;
|
||||
if (transform) data = transform(data);
|
||||
this.setState({
|
||||
jsonValue: typeof (data) === 'string' ? data : JSON.stringify(data, undefined, 2)
|
||||
jsonValue: typeof data === 'string' ? data : JSON.stringify(data, undefined, 2)
|
||||
});
|
||||
} catch (e) {
|
||||
this.setState({
|
||||
|
|
|
|||
|
|
@ -61,35 +61,6 @@ exports[`supervisor table action dialog matches snapshot 1`] = `
|
|||
<button
|
||||
class="bp3-button bp3-intent-primary tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-align-left"
|
||||
icon="align-left"
|
||||
>
|
||||
<svg
|
||||
data-icon="align-left"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<desc>
|
||||
align-left
|
||||
</desc>
|
||||
<path
|
||||
d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Payload
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="bp3-button bp3-minimal tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-dashboard"
|
||||
|
|
@ -116,6 +87,35 @@ exports[`supervisor table action dialog matches snapshot 1`] = `
|
|||
Status
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="bp3-button bp3-minimal tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-align-left"
|
||||
icon="align-left"
|
||||
>
|
||||
<svg
|
||||
data-icon="align-left"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<desc>
|
||||
align-left
|
||||
</desc>
|
||||
<path
|
||||
d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Payload
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="bp3-button bp3-minimal tab-button"
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import * as React from 'react';
|
|||
|
||||
import { ShowJson } from '../../components';
|
||||
import { BasicAction, basicActionsToButtons } from '../../utils/basic-action';
|
||||
import { deepGet } from '../../utils/object-change';
|
||||
import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
|
||||
|
||||
interface SupervisorTableActionDialogProps extends IDialogProps {
|
||||
|
|
@ -30,14 +31,14 @@ interface SupervisorTableActionDialogProps extends IDialogProps {
|
|||
}
|
||||
|
||||
interface SupervisorTableActionDialogState {
|
||||
activeTab: 'payload' | 'status' | 'stats' | 'history';
|
||||
activeTab: 'status' | 'payload' | 'stats' | 'history';
|
||||
}
|
||||
|
||||
export class SupervisorTableActionDialog extends React.PureComponent<SupervisorTableActionDialogProps, SupervisorTableActionDialogState> {
|
||||
constructor(props: SupervisorTableActionDialogProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeTab: 'payload'
|
||||
activeTab: 'status'
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -46,18 +47,18 @@ export class SupervisorTableActionDialog extends React.PureComponent<SupervisorT
|
|||
const { activeTab } = this.state;
|
||||
|
||||
const supervisorTableSideButtonMetadata: SideButtonMetaData[] = [
|
||||
{
|
||||
icon: 'align-left',
|
||||
text: 'Payload',
|
||||
active: activeTab === 'payload',
|
||||
onClick: () => this.setState({ activeTab: 'payload' })
|
||||
},
|
||||
{
|
||||
icon: 'dashboard',
|
||||
text: 'Status',
|
||||
active: activeTab === 'status',
|
||||
onClick: () => this.setState({ activeTab: 'status' })
|
||||
},
|
||||
{
|
||||
icon: 'align-left',
|
||||
text: 'Payload',
|
||||
active: activeTab === 'payload',
|
||||
onClick: () => this.setState({ activeTab: 'payload' })
|
||||
},
|
||||
{
|
||||
icon: 'chart',
|
||||
text: 'Statistics',
|
||||
|
|
@ -79,10 +80,35 @@ export class SupervisorTableActionDialog extends React.PureComponent<SupervisorT
|
|||
title={`Supervisor: ${supervisorId}`}
|
||||
bottomButtons={basicActionsToButtons(actions)}
|
||||
>
|
||||
{activeTab === 'payload' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}`} downloadFilename={`supervisor-payload-${supervisorId}.json`}/>}
|
||||
{activeTab === 'status' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/status`} downloadFilename={`supervisor-status-${supervisorId}.json`}/>}
|
||||
{activeTab === 'stats' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/stats`} downloadFilename={`supervisor-stats-${supervisorId}.json`}/>}
|
||||
{activeTab === 'history' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/history`} downloadFilename={`supervisor-history-${supervisorId}.json`}/>}
|
||||
{
|
||||
activeTab === 'status' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/status`}
|
||||
transform={x => deepGet(x, 'payload')}
|
||||
downloadFilename={`supervisor-status-${supervisorId}.json`}
|
||||
/>
|
||||
}
|
||||
{
|
||||
activeTab === 'payload' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/supervisor/${supervisorId}`}
|
||||
downloadFilename={`supervisor-payload-${supervisorId}.json`}
|
||||
/>
|
||||
}
|
||||
{
|
||||
activeTab === 'stats' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/stats`}
|
||||
downloadFilename={`supervisor-stats-${supervisorId}.json`}
|
||||
/>
|
||||
}
|
||||
{
|
||||
activeTab === 'history' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/history`}
|
||||
downloadFilename={`supervisor-history-${supervisorId}.json`}
|
||||
/>
|
||||
}
|
||||
</TableActionDialog>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,35 +61,6 @@ exports[`task table action dialog matches snapshot 1`] = `
|
|||
<button
|
||||
class="bp3-button bp3-intent-primary tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-align-left"
|
||||
icon="align-left"
|
||||
>
|
||||
<svg
|
||||
data-icon="align-left"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<desc>
|
||||
align-left
|
||||
</desc>
|
||||
<path
|
||||
d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Payload
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="bp3-button bp3-minimal tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-dashboard"
|
||||
|
|
@ -116,6 +87,35 @@ exports[`task table action dialog matches snapshot 1`] = `
|
|||
Status
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="bp3-button bp3-minimal tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-align-left"
|
||||
icon="align-left"
|
||||
>
|
||||
<svg
|
||||
data-icon="align-left"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<desc>
|
||||
align-left
|
||||
</desc>
|
||||
<path
|
||||
d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Payload
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="bp3-button bp3-minimal tab-button"
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import * as React from 'react';
|
|||
|
||||
import { ShowJson, ShowLog } from '../../components';
|
||||
import { BasicAction, basicActionsToButtons } from '../../utils/basic-action';
|
||||
import { deepGet } from '../../utils/object-change';
|
||||
import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
|
||||
|
||||
interface TaskTableActionDialogProps extends IDialogProps {
|
||||
|
|
@ -30,14 +31,14 @@ interface TaskTableActionDialogProps extends IDialogProps {
|
|||
}
|
||||
|
||||
interface TaskTableActionDialogState {
|
||||
activeTab: 'payload' | 'status' | 'reports' | 'log';
|
||||
activeTab: 'status' | 'payload' | 'reports' | 'log';
|
||||
}
|
||||
|
||||
export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDialogProps, TaskTableActionDialogState> {
|
||||
constructor(props: TaskTableActionDialogProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeTab: 'payload'
|
||||
activeTab: 'status'
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -46,18 +47,18 @@ export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDi
|
|||
const { activeTab } = this.state;
|
||||
|
||||
const taskTableSideButtonMetadata: SideButtonMetaData[] = [
|
||||
{
|
||||
icon: 'align-left',
|
||||
text: 'Payload',
|
||||
active: activeTab === 'payload',
|
||||
onClick: () => this.setState({ activeTab: 'payload' })
|
||||
},
|
||||
{
|
||||
icon: 'dashboard',
|
||||
text: 'Status',
|
||||
active: activeTab === 'status',
|
||||
onClick: () => this.setState({ activeTab: 'status' })
|
||||
},
|
||||
{
|
||||
icon: 'align-left',
|
||||
text: 'Payload',
|
||||
active: activeTab === 'payload',
|
||||
onClick: () => this.setState({ activeTab: 'payload' })
|
||||
},
|
||||
{
|
||||
icon: 'comparison',
|
||||
text: 'Reports',
|
||||
|
|
@ -79,10 +80,38 @@ export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDi
|
|||
title={`Task: ${taskId}`}
|
||||
bottomButtons={basicActionsToButtons(actions)}
|
||||
>
|
||||
{activeTab === 'payload' && <ShowJson endpoint={`/druid/indexer/v1/task/${taskId}`} downloadFilename={`task-payload-${taskId}.json`}/>}
|
||||
{activeTab === 'status' && <ShowJson endpoint={`/druid/indexer/v1/task/${taskId}/status`} downloadFilename={`task-status-${taskId}.json`}/>}
|
||||
{activeTab === 'reports' && <ShowJson endpoint={`/druid/indexer/v1/task/${taskId}/reports`} downloadFilename={`task-reports-${taskId}.json`}/>}
|
||||
{activeTab === 'log' && <ShowLog endpoint={`/druid/indexer/v1/task/${taskId}/log`} downloadFilename={`task-log-${taskId}.json`} tailOffset={16000}/>}
|
||||
{
|
||||
activeTab === 'status' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/task/${taskId}/status`}
|
||||
transform={x => deepGet(x, 'status')}
|
||||
downloadFilename={`task-status-${taskId}.json`}
|
||||
/>
|
||||
}
|
||||
{
|
||||
activeTab === 'payload' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/task/${taskId}`}
|
||||
transform={x => deepGet(x, 'payload')}
|
||||
downloadFilename={`task-payload-${taskId}.json`}
|
||||
/>
|
||||
}
|
||||
{
|
||||
activeTab === 'reports' &&
|
||||
<ShowJson
|
||||
endpoint={`/druid/indexer/v1/task/${taskId}/reports`}
|
||||
transform={x => deepGet(x, 'ingestionStatsAndErrors.payload')}
|
||||
downloadFilename={`task-reports-${taskId}.json`}
|
||||
/>
|
||||
}
|
||||
{
|
||||
activeTab === 'log' &&
|
||||
<ShowLog
|
||||
endpoint={`/druid/indexer/v1/task/${taskId}/log`}
|
||||
downloadFilename={`task-log-${taskId}.json`}
|
||||
tailOffset={16000}
|
||||
/>
|
||||
}
|
||||
</TableActionDialog>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue