Apache/druid
1
0
Fork 0
mirror of https://github.com/apache/druid.git synced 2025-02-17 07:25:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Web console: rename Tasks to Ingestion (#8896)

Browse Source 
* rename Tasks to Ingestion

* rename local storage key also

* align ordering
This commit is contained in:
Vadim Ogievetsky 2019-11-20 06:53:40 -08:00 committed by Fangjin Yang
parent d67c3c7aed
commit ee8f048381
9 changed files with 55 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
View File

@ -23,6 +23,14 @@ exports[`header bar matches snapshot 1`] = `
text="Load data"
/>
<Blueprint3.NavbarDivider />
<Blueprint3.AnchorButton
active={false}
disabled={false}
href="#ingestion"
icon="gantt-chart"
minimal={true}
text="Ingestion"
/>
<Blueprint3.AnchorButton
active={false}
disabled={false}
@ -39,14 +47,6 @@ exports[`header bar matches snapshot 1`] = `
minimal={true}
text="Segments"
/>
<Blueprint3.AnchorButton
active={false}
disabled={false}
href="#tasks"
icon="gantt-chart"
minimal={true}
text="Tasks"
/>
<Blueprint3.AnchorButton
active={false}
disabled={false}

20
web-console/src/components/header-bar/header-bar.tsx
View File

@ -54,11 +54,11 @@ import './header-bar.scss';
export type HeaderActiveTab =
| null
| 'load-data'
| 'query'
| 'ingestion'
| 'datasources'
| 'segments'
| 'tasks'
| 'services'
| 'query'
| 'lookups';
const DruidLogo = React.memo(function DruidLogo() {
@ -300,6 +300,14 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
/>
<NavbarDivider />
<AnchorButton
minimal
active={active === 'ingestion'}
icon={IconNames.GANTT_CHART}
text="Ingestion"
href="#ingestion"
disabled={!capabilities.hasSqlOrOverlordAccess()}
/>
<AnchorButton
minimal
active={active === 'datasources'}
@ -316,14 +324,6 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
href="#segments"
disabled={!capabilities.hasSqlOrCoordinatorAccess()}
/>
<AnchorButton
minimal
active={active === 'tasks'}
icon={IconNames.GANTT_CHART}
text="Tasks"
href="#tasks"
disabled={!capabilities.hasSqlOrOverlordAccess()}
/>
<AnchorButton
minimal
active={active === 'services'}

24
web-console/src/console-application.tsx
View File

@ -29,12 +29,12 @@ import { Capabilities } from './utils/capabilities';
import {
DatasourcesView,
HomeView,
IngestionView,
LoadDataView,
LookupsView,
QueryView,
SegmentsView,
ServicesView,
TasksView,
} from './views';
import './console-application.scss';
@ -138,17 +138,17 @@ export class ConsoleApplication extends React.PureComponent<
this.resetInitialsWithDelay();
};
private goToTaskWithTaskId = (taskId?: string, openDialog?: string) => {
private goToIngestionWithTaskId = (taskId?: string, openDialog?: string) => {
this.taskId = taskId;
if (openDialog) this.openDialog = openDialog;
window.location.hash = 'tasks';
window.location.hash = 'ingestion';
this.resetInitialsWithDelay();
};
private goToTaskWithDatasource = (datasource?: string, openDialog?: string) => {
private goToIngestionWithDatasource = (datasource?: string, openDialog?: string) => {
this.datasource = datasource;
if (openDialog) this.openDialog = openDialog;
window.location.hash = 'tasks';
window.location.hash = 'ingestion';
this.resetInitialsWithDelay();
};
@ -193,7 +193,7 @@ export class ConsoleApplication extends React.PureComponent<
initSupervisorId={this.supervisorId}
initTaskId={this.taskId}
exampleManifestsUrl={exampleManifestsUrl}
goToTask={this.goToTaskWithTaskId}
goToTask={this.goToIngestionWithTaskId}
/>,
'narrow-pad',
);
@ -210,7 +210,7 @@ export class ConsoleApplication extends React.PureComponent<
<DatasourcesView
initDatasource={this.datasource}
goToQuery={this.goToQuery}
goToTask={this.goToTaskWithDatasource}
goToTask={this.goToIngestionWithDatasource}
goToSegments={this.goToSegments}
capabilities={capabilities}
/>,
@ -230,11 +230,11 @@ export class ConsoleApplication extends React.PureComponent<
);
};
private wrappedTasksView = () => {
private wrappedIngestionView = () => {
const { capabilities } = this.state;
return this.wrapInViewContainer(
'tasks',
<TasksView
'ingestion',
<IngestionView
taskId={this.taskId}
datasourceId={this.datasource}
openDialog={this.openDialog}
@ -254,7 +254,7 @@ export class ConsoleApplication extends React.PureComponent<
<ServicesView
middleManager={this.middleManager}
goToQuery={this.goToQuery}
goToTask={this.goToTaskWithTaskId}
goToTask={this.goToIngestionWithTaskId}
capabilities={capabilities}
/>,
);
@ -281,9 +281,9 @@ export class ConsoleApplication extends React.PureComponent<
<Switch>
<Route path="/load-data" component={this.wrappedLoadDataView} />
<Route path="/ingestion" component={this.wrappedIngestionView} />
<Route path="/datasources" component={this.wrappedDatasourcesView} />
<Route path="/segments" component={this.wrappedSegmentsView} />
<Route path="/tasks" component={this.wrappedTasksView} />
<Route path="/services" component={this.wrappedServicesView} />
<Route path="/query" component={this.wrappedQueryView} />

2
web-console/src/utils/local-storage-keys.tsx
View File

@ -27,7 +27,7 @@ export const LocalStorageKeys = {
LOOKUP_TABLE_COLUMN_SELECTION: 'lookup-table-column-selection' as 'lookup-table-column-selection',
QUERY_KEY: 'druid-console-query' as 'druid-console-query',
QUERY_CONTEXT: 'query-context' as 'query-context',
TASKS_VIEW_PANE_SIZE: 'tasks-view-pane-size' as 'tasks-view-pane-size',
INGESTION_VIEW_PANE_SIZE: 'ingestion-view-pane-size' as 'ingestion-view-pane-size',
QUERY_VIEW_PANE_SIZE: 'query-view-pane-size' as 'query-view-pane-size',
TASKS_REFRESH_RATE: 'task-refresh-rate' as 'task-refresh-rate',
DATASOURCES_REFRESH_RATE: 'datasources-refresh-rate' as 'datasources-refresh-rate',

2
web-console/src/views/index.ts
View File

@ -23,4 +23,4 @@ export * from './lookups-view/lookups-view';
export * from './segments-view/segments-view';
export * from './services-view/services-view';
export * from './query-view/query-view';
export * from './task-view/tasks-view';
export * from './ingestion-view/ingestion-view';

2
web-console/src/views/task-view/__snapshots__/tasks-view.spec.tsx.snap → web-console/src/views/ingestion-view/__snapshots__/ingestion-view.spec.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`tasks view matches snapshot 1`] = `
<Fragment>
<t
customClassName="tasks-view app-view"
customClassName="ingestion-view app-view"
onDragEnd={null}
onDragStart={null}
onSecondaryPaneSizeChange={[Function]}

2
web-console/src/views/task-view/tasks-view.scss → web-console/src/views/ingestion-view/ingestion-view.scss
View File

@ -18,7 +18,7 @@
@import '../../variables';
.tasks-view {
.ingestion-view {
height: 100%;
width: 100%;

4
web-console/src/views/task-view/tasks-view.spec.tsx → web-console/src/views/ingestion-view/ingestion-view.spec.tsx
View File

@ -21,12 +21,12 @@ import React from 'react';
import { Capabilities } from '../../utils/capabilities';
import { TasksView } from './tasks-view';
import { IngestionView } from './ingestion-view';
describe('tasks view', () => {
it('matches snapshot', () => {
const taskView = shallow(
<TasksView
<IngestionView
openDialog={'test'}
taskId={'test'}
datasourceId={'datasource'}

35
web-console/src/views/task-view/tasks-view.tsx → web-console/src/views/ingestion-view/ingestion-view.tsx
View File

@ -58,7 +58,7 @@ import { Capabilities } from '../../utils/capabilities';
import { LocalStorageBackedArray } from '../../utils/local-storage-backed-array';
import { deepGet } from '../../utils/object-change';
import './tasks-view.scss';
import './ingestion-view.scss';
const supervisorTableColumns: string[] = [
'Datasource',
@ -101,7 +101,7 @@ interface TaskQueryResultRow {
rank: number;
}
export interface TasksViewProps {
export interface IngestionViewProps {
taskId: string | undefined;
datasourceId: string | undefined;
openDialog: string | undefined;
@ -112,7 +112,7 @@ export interface TasksViewProps {
capabilities: Capabilities;
}
export interface TasksViewState {
export interface IngestionViewState {
supervisorsLoading: boolean;
supervisors?: SupervisorQueryResultRow[];
supervisorsError?: string;
@ -186,7 +186,7 @@ function stateToColor(status: string): string {
}
}
export class TasksView extends React.PureComponent<TasksViewProps, TasksViewState> {
export class IngestionView extends React.PureComponent<IngestionViewProps, IngestionViewState> {
private supervisorQueryManager: QueryManager<Capabilities, SupervisorQueryResultRow[]>;
private taskQueryManager: QueryManager<Capabilities, TaskQueryResultRow[]>;
static statusRanking: Record<string, number> = {
@ -212,7 +212,7 @@ FROM sys.supervisors`;
FROM sys.tasks
ORDER BY "rank" DESC, "created_time" DESC`;
constructor(props: TasksViewProps, context: any) {
constructor(props: IngestionViewProps, context: any) {
super(props, context);
const taskFilter: Filter[] = [];
@ -252,7 +252,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
processQuery: async capabilities => {
if (capabilities.hasSql()) {
return await queryDruidSql({
query: TasksView.SUPERVISOR_SQL,
query: IngestionView.SUPERVISOR_SQL,
});
} else if (capabilities.hasOverlordAccess()) {
const supervisors = (await axios.get('/druid/indexer/v1/supervisor?full')).data;
@ -287,11 +287,11 @@ ORDER BY "rank" DESC, "created_time" DESC`;
processQuery: async capabilities => {
if (capabilities.hasSql()) {
return await queryDruidSql({
query: TasksView.TASK_SQL,
query: IngestionView.TASK_SQL,
});
} else if (capabilities.hasOverlordAccess()) {
const resp = await axios.get(`/druid/indexer/v1/tasks`);
return TasksView.parseTasks(resp.data);
return IngestionView.parseTasks(resp.data);
} else {
throw new Error(`must have SQL or overlord access`);
}
@ -319,13 +319,15 @@ ORDER BY "rank" DESC, "created_time" DESC`;
location: d.location.host ? `${d.location.host}:${d.location.port}` : null,
status: d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode,
rank:
TasksView.statusRanking[d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode],
IngestionView.statusRanking[
d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode
],
};
});
};
private onSecondaryPaneSizeChange(secondaryPaneSize: number) {
localStorageSet(LocalStorageKeys.TASKS_VIEW_PANE_SIZE, String(secondaryPaneSize));
localStorageSet(LocalStorageKeys.INGESTION_VIEW_PANE_SIZE, String(secondaryPaneSize));
}
componentDidMount(): void {
@ -852,11 +854,12 @@ ORDER BY "rank" DESC, "created_time" DESC`;
if (typeofD1 !== typeofD2) return 0;
switch (typeofD1) {
case 'string':
return TasksView.statusRanking[d1] - TasksView.statusRanking[d2];
return IngestionView.statusRanking[d1] - IngestionView.statusRanking[d2];
case 'object':
return (
TasksView.statusRanking[d1.status] - TasksView.statusRanking[d2.status] ||
IngestionView.statusRanking[d1.status] -
IngestionView.statusRanking[d2.status] ||
d1.created_time.localeCompare(d2.created_time)
);
@ -923,7 +926,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
<MenuItem
icon={IconNames.APPLICATION}
text="View SQL query for table"
onClick={() => goToQuery(TasksView.SUPERVISOR_SQL)}
onClick={() => goToQuery(IngestionView.SUPERVISOR_SQL)}
/>
)}
<MenuItem
@ -1042,7 +1045,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
<MenuItem
icon={IconNames.APPLICATION}
text="View SQL query for table"
onClick={() => goToQuery(TasksView.TASK_SQL)}
onClick={() => goToQuery(IngestionView.TASK_SQL)}
/>
)}
<MenuItem
@ -1072,11 +1075,11 @@ ORDER BY "rank" DESC, "created_time" DESC`;
return (
<>
<SplitterLayout
customClassName={'tasks-view app-view'}
customClassName={'ingestion-view app-view'}
vertical
percentage
secondaryInitialSize={
Number(localStorageGet(LocalStorageKeys.TASKS_VIEW_PANE_SIZE) as string) || 60
Number(localStorageGet(LocalStorageKeys.INGESTION_VIEW_PANE_SIZE) as string) || 60
}
primaryMinSize={30}
secondaryMinSize={30}