[Ingest Pipelines] Add url generator for ingest pipelines app (#77872) (#78278)

* [Ingest Pipelines] Add url generator for ingest pipelines app

* [Ingest Pipelines] Fix type check error

* [Ingest Pipelines] Fix import errors

* [Ingest Pipelines] Fix type check errors

* [Ingest Pipelines] Fix type check errors

* [ILM] Update UrlGenerator interface, clean up internal navigation service

* [ILM] Fix function export

* [ILM] Update functions signatures

* [ILM] Fix errors

* [ILM] Fix errors

* [ILM] Rename ROUTES_CONFIG and export MANAGEMENT_APP_ID

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Yulia Čech 2020-09-23 16:10:21 +02:00 committed by GitHub
parent 249122d33b
commit db591a802f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 325 additions and 35 deletions

View file

@ -0,0 +1,20 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export const MANAGEMENT_APP_ID = 'management';

View file

@ -32,3 +32,5 @@ export {
ManagementStart,
DefinedSections,
} from './types';
export { MANAGEMENT_APP_ID } from '../common/contants';

View file

@ -33,6 +33,7 @@ import {
AppNavLinkStatus,
} from '../../../core/public';
import { MANAGEMENT_APP_ID } from '../common/contants';
import {
ManagementSectionsService,
getSectionsServiceStartPrivate,
@ -72,7 +73,7 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
}
core.application.register({
id: 'management',
id: MANAGEMENT_APP_ID,
title: i18n.translate('management.stackManagement.title', {
defaultMessage: 'Stack Management',
}),

View file

@ -5,10 +5,10 @@
*/
import { registerTestBed, TestBedConfig, TestBed } from '../../../../../test_utils';
import { BASE_PATH } from '../../../common/constants';
import { PipelinesClone } from '../../../public/application/sections/pipelines_clone';
import { getFormActions, PipelineFormTestSubjects } from './pipeline_form.helpers';
import { WithAppDependencies } from './setup_environment';
import { getClonePath, ROUTES } from '../../../public/application/services/navigation';
export type PipelinesCloneTestBed = TestBed<PipelineFormTestSubjects> & {
actions: ReturnType<typeof getFormActions>;
@ -29,8 +29,8 @@ export const PIPELINE_TO_CLONE = {
const testBedConfig: TestBedConfig = {
memoryRouter: {
initialEntries: [`${BASE_PATH}create/${PIPELINE_TO_CLONE.name}`],
componentRoutePath: `${BASE_PATH}create/:name`,
initialEntries: [getClonePath({ clonedPipelineName: PIPELINE_TO_CLONE.name })],
componentRoutePath: ROUTES.clone,
},
doMountAsync: true,
};

View file

@ -5,10 +5,10 @@
*/
import { registerTestBed, TestBedConfig, TestBed } from '../../../../../test_utils';
import { BASE_PATH } from '../../../common/constants';
import { PipelinesCreate } from '../../../public/application/sections/pipelines_create';
import { getFormActions, PipelineFormTestSubjects } from './pipeline_form.helpers';
import { WithAppDependencies } from './setup_environment';
import { getCreatePath, ROUTES } from '../../../public/application/services/navigation';
export type PipelinesCreateTestBed = TestBed<PipelineFormTestSubjects> & {
actions: ReturnType<typeof getFormActions>;
@ -16,8 +16,8 @@ export type PipelinesCreateTestBed = TestBed<PipelineFormTestSubjects> & {
const testBedConfig: TestBedConfig = {
memoryRouter: {
initialEntries: [`${BASE_PATH}/create`],
componentRoutePath: `${BASE_PATH}/create`,
initialEntries: [getCreatePath()],
componentRoutePath: ROUTES.create,
},
doMountAsync: true,
};

View file

@ -5,10 +5,10 @@
*/
import { registerTestBed, TestBedConfig, TestBed } from '../../../../../test_utils';
import { BASE_PATH } from '../../../common/constants';
import { PipelinesEdit } from '../../../public/application/sections/pipelines_edit';
import { getFormActions, PipelineFormTestSubjects } from './pipeline_form.helpers';
import { WithAppDependencies } from './setup_environment';
import { getEditPath, ROUTES } from '../../../public/application/services/navigation';
export type PipelinesEditTestBed = TestBed<PipelineFormTestSubjects> & {
actions: ReturnType<typeof getFormActions>;
@ -29,8 +29,8 @@ export const PIPELINE_TO_EDIT = {
const testBedConfig: TestBedConfig = {
memoryRouter: {
initialEntries: [`${BASE_PATH}edit/${PIPELINE_TO_EDIT.name}`],
componentRoutePath: `${BASE_PATH}edit/:name`,
initialEntries: [getEditPath({ pipelineName: PIPELINE_TO_EDIT.name })],
componentRoutePath: ROUTES.edit,
},
doMountAsync: true,
};

View file

@ -6,7 +6,6 @@
import { act } from 'react-dom/test-utils';
import { BASE_PATH } from '../../../common/constants';
import {
registerTestBed,
TestBed,
@ -16,11 +15,12 @@ import {
} from '../../../../../test_utils';
import { PipelinesList } from '../../../public/application/sections/pipelines_list';
import { WithAppDependencies } from './setup_environment';
import { getListPath, ROUTES } from '../../../public/application/services/navigation';
const testBedConfig: TestBedConfig = {
memoryRouter: {
initialEntries: [BASE_PATH],
componentRoutePath: BASE_PATH,
initialEntries: [getListPath()],
componentRoutePath: ROUTES.list,
},
doMountAsync: true,
};

View file

@ -9,9 +9,9 @@ const basicLicense: LicenseType = 'basic';
export const PLUGIN_ID = 'ingest_pipelines';
export const PLUGIN_MIN_LICENSE_TYPE = basicLicense;
export const MANAGEMENT_APP_ID = 'management';
export const BASE_PATH = '/';
export const PLUGIN_MIN_LICENSE_TYPE = basicLicense;
export const API_BASE_PATH = '/api/ingest_pipelines';

View file

@ -3,7 +3,7 @@
"version": "kibana",
"server": true,
"ui": true,
"requiredPlugins": ["licensing", "management", "features"],
"requiredPlugins": ["licensing", "management", "features", "share"],
"optionalPlugins": ["security", "usageCollection"],
"configPath": ["xpack", "ingest_pipelines"],
"requiredBundles": ["esUiShared", "kibanaReact"]

View file

@ -21,13 +21,14 @@ import {
} from '../shared_imports';
import { PipelinesList, PipelinesCreate, PipelinesEdit, PipelinesClone } from './sections';
import { ROUTES } from './services/navigation';
export const AppWithoutRouter = () => (
<Switch>
<Route exact path="/" component={PipelinesList} />
<Route exact path={`/create/:sourceName`} component={PipelinesClone} />
<Route exact path={`/create`} component={PipelinesCreate} />
<Route exact path={`/edit/:name`} component={PipelinesEdit} />
<Route exact path={ROUTES.list} component={PipelinesList} />
<Route exact path={ROUTES.clone} component={PipelinesClone} />
<Route exact path={ROUTES.create} component={PipelinesCreate} />
<Route exact path={ROUTES.edit} component={PipelinesEdit} />
{/* Catch all */}
<Route component={PipelinesList} />
</Switch>

View file

@ -16,7 +16,7 @@ import {
EuiSpacer,
} from '@elastic/eui';
import { BASE_PATH } from '../../../../common/constants';
import { getListPath } from '../../services/navigation';
import { Pipeline } from '../../../../common/types';
import { useKibana } from '../../../shared_imports';
import { PipelineForm } from '../../components';
@ -50,11 +50,11 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps & Prop
return;
}
history.push(BASE_PATH + `?pipeline=${encodeURIComponent(pipeline.name)}`);
history.push(getListPath({ inspectedPipelineName: pipeline.name }));
};
const onCancel = () => {
history.push(BASE_PATH);
history.push(getListPath());
};
useEffect(() => {

View file

@ -17,11 +17,11 @@ import {
} from '@elastic/eui';
import { EuiCallOut } from '@elastic/eui';
import { BASE_PATH } from '../../../../common/constants';
import { Pipeline } from '../../../../common/types';
import { useKibana, SectionLoading } from '../../../shared_imports';
import { PipelineForm } from '../../components';
import { getListPath } from '../../services/navigation';
import { PipelineForm } from '../../components';
import { attemptToURIDecode } from '../shared';
interface MatchParams {
@ -56,11 +56,11 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
return;
}
history.push(BASE_PATH + `?pipeline=${encodeURIComponent(updatedPipeline.name)}`);
history.push(getListPath({ inspectedPipelineName: updatedPipeline.name }));
};
const onCancel = () => {
history.push(BASE_PATH);
history.push(getListPath());
};
useEffect(() => {

View file

@ -11,6 +11,7 @@ import { useHistory } from 'react-router-dom';
import { ScopedHistory } from 'kibana/public';
import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
import { useKibana } from '../../../shared_imports';
import { getCreatePath } from '../../services/navigation';
export const EmptyList: FunctionComponent = () => {
const { services } = useKibana();
@ -44,7 +45,11 @@ export const EmptyList: FunctionComponent = () => {
</p>
}
actions={
<EuiButton {...reactRouterNavigate(history, '/create')} iconType="plusInCircle" fill>
<EuiButton
{...reactRouterNavigate(history, getCreatePath())}
iconType="plusInCircle"
fill
>
{i18n.translate('xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', {
defaultMessage: 'Create a pipeline',
})}

View file

@ -24,9 +24,9 @@ import {
} from '@elastic/eui';
import { Pipeline } from '../../../../common/types';
import { BASE_PATH } from '../../../../common/constants';
import { useKibana, SectionLoading } from '../../../shared_imports';
import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
import { getEditPath, getClonePath, getListPath } from '../../services/navigation';
import { EmptyList } from './empty_list';
import { PipelineTable } from './table';
@ -67,17 +67,17 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
}
}, [pipelineNameFromLocation, data]);
const goToEditPipeline = (name: string) => {
history.push(`${BASE_PATH}/edit/${encodeURIComponent(name)}`);
const goToEditPipeline = (pipelineName: string) => {
history.push(getEditPath({ pipelineName }));
};
const goToClonePipeline = (name: string) => {
history.push(`${BASE_PATH}/create/${encodeURIComponent(name)}`);
const goToClonePipeline = (clonedPipelineName: string) => {
history.push(getClonePath({ clonedPipelineName }));
};
const goHome = () => {
setShowFlyout(false);
history.push(BASE_PATH);
history.push(getListPath());
};
if (data && data.length === 0) {

View file

@ -0,0 +1,44 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
const BASE_PATH = '/';
const EDIT_PATH = 'edit';
const CREATE_PATH = 'create';
const _getEditPath = (name: string, encode = true): string => {
return `${BASE_PATH}${EDIT_PATH}/${encode ? encodeURIComponent(name) : name}`;
};
const _getCreatePath = (): string => {
return `${BASE_PATH}${CREATE_PATH}`;
};
const _getClonePath = (name: string, encode = true): string => {
return `${BASE_PATH}${CREATE_PATH}/${encode ? encodeURIComponent(name) : name}`;
};
const _getListPath = (name?: string): string => {
return `${BASE_PATH}${name ? `?pipeline=${encodeURIComponent(name)}` : ''}`;
};
export const ROUTES = {
list: _getListPath(),
edit: _getEditPath(':name', false),
create: _getCreatePath(),
clone: _getClonePath(':sourceName', false),
};
export const getListPath = ({
inspectedPipelineName,
}: {
inspectedPipelineName?: string;
} = {}): string => _getListPath(inspectedPipelineName);
export const getEditPath = ({ pipelineName }: { pipelineName: string }): string =>
_getEditPath(pipelineName, true);
export const getCreatePath = (): string => _getCreatePath();
export const getClonePath = ({ clonedPipelineName }: { clonedPipelineName: string }): string =>
_getClonePath(clonedPipelineName, true);

View file

@ -9,3 +9,10 @@ import { IngestPipelinesPlugin } from './plugin';
export function plugin() {
return new IngestPipelinesPlugin();
}
export {
INGEST_PIPELINES_APP_ULR_GENERATOR,
IngestPipelinesUrlGenerator,
IngestPipelinesUrlGeneratorState,
INGEST_PIPELINES_PAGES,
} from './url_generator';

View file

@ -10,10 +10,11 @@ import { CoreSetup, Plugin } from 'src/core/public';
import { PLUGIN_ID } from '../common/constants';
import { uiMetricService, apiService } from './application/services';
import { Dependencies } from './types';
import { registerUrlGenerator } from './url_generator';
export class IngestPipelinesPlugin implements Plugin {
public setup(coreSetup: CoreSetup, plugins: Dependencies): void {
const { management, usageCollection } = plugins;
const { management, usageCollection, share } = plugins;
const { http, getStartServices } = coreSetup;
// Initialize services
@ -46,6 +47,8 @@ export class IngestPipelinesPlugin implements Plugin {
};
},
});
registerUrlGenerator(coreSetup, management, share);
}
public start() {}

View file

@ -6,8 +6,10 @@
import { ManagementSetup } from 'src/plugins/management/public';
import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
import { SharePluginSetup } from '../../../../src/plugins/share/public';
export interface Dependencies {
management: ManagementSetup;
usageCollection: UsageCollectionSetup;
share: SharePluginSetup;
}

View file

@ -0,0 +1,107 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { IngestPipelinesUrlGenerator, INGEST_PIPELINES_PAGES } from './url_generator';
describe('IngestPipelinesUrlGenerator', () => {
const getAppBasePath = (absolute: boolean = false) => {
if (absolute) {
return Promise.resolve('http://localhost/app/test_app');
}
return Promise.resolve('/app/test_app');
};
const urlGenerator = new IngestPipelinesUrlGenerator(getAppBasePath);
describe('Pipelines List', () => {
it('generates relative url for list without pipelineId', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.LIST,
});
expect(url).toBe('/app/test_app/');
});
it('generates absolute url for list without pipelineId', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.LIST,
absolute: true,
});
expect(url).toBe('http://localhost/app/test_app/');
});
it('generates relative url for list with a pipelineId', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.LIST,
pipelineId: 'pipeline_name',
});
expect(url).toBe('/app/test_app/?pipeline=pipeline_name');
});
it('generates absolute url for list with a pipelineId', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.LIST,
pipelineId: 'pipeline_name',
absolute: true,
});
expect(url).toBe('http://localhost/app/test_app/?pipeline=pipeline_name');
});
});
describe('Pipeline Edit', () => {
it('generates relative url for pipeline edit', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.EDIT,
pipelineId: 'pipeline_name',
});
expect(url).toBe('/app/test_app/edit/pipeline_name');
});
it('generates absolute url for pipeline edit', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.EDIT,
pipelineId: 'pipeline_name',
absolute: true,
});
expect(url).toBe('http://localhost/app/test_app/edit/pipeline_name');
});
});
describe('Pipeline Clone', () => {
it('generates relative url for pipeline clone', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.CLONE,
pipelineId: 'pipeline_name',
});
expect(url).toBe('/app/test_app/create/pipeline_name');
});
it('generates absolute url for pipeline clone', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.CLONE,
pipelineId: 'pipeline_name',
absolute: true,
});
expect(url).toBe('http://localhost/app/test_app/create/pipeline_name');
});
});
describe('Pipeline Create', () => {
it('generates relative url for pipeline create', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.CREATE,
pipelineId: 'pipeline_name',
});
expect(url).toBe('/app/test_app/create');
});
it('generates absolute url for pipeline create', async () => {
const url = await urlGenerator.createUrl({
page: INGEST_PIPELINES_PAGES.CREATE,
pipelineId: 'pipeline_name',
absolute: true,
});
expect(url).toBe('http://localhost/app/test_app/create');
});
});
});

View file

@ -0,0 +1,98 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { CoreSetup } from 'src/core/public';
import { MANAGEMENT_APP_ID } from '../../../../src/plugins/management/public';
import { UrlGeneratorsDefinition } from '../../../../src/plugins/share/public';
import {
getClonePath,
getCreatePath,
getEditPath,
getListPath,
} from './application/services/navigation';
import { Dependencies } from './types';
import { PLUGIN_ID } from '../common/constants';
export const INGEST_PIPELINES_APP_ULR_GENERATOR = 'INGEST_PIPELINES_APP_URL_GENERATOR';
export enum INGEST_PIPELINES_PAGES {
LIST = 'pipelines_list',
EDIT = 'pipeline_edit',
CREATE = 'pipeline_create',
CLONE = 'pipeline_clone',
}
interface UrlGeneratorState {
pipelineId: string;
absolute?: boolean;
}
export interface PipelinesListUrlGeneratorState extends Partial<UrlGeneratorState> {
page: INGEST_PIPELINES_PAGES.LIST;
}
export interface PipelineEditUrlGeneratorState extends UrlGeneratorState {
page: INGEST_PIPELINES_PAGES.EDIT;
}
export interface PipelineCloneUrlGeneratorState extends UrlGeneratorState {
page: INGEST_PIPELINES_PAGES.CLONE;
}
export interface PipelineCreateUrlGeneratorState extends UrlGeneratorState {
page: INGEST_PIPELINES_PAGES.CREATE;
}
export type IngestPipelinesUrlGeneratorState =
| PipelinesListUrlGeneratorState
| PipelineEditUrlGeneratorState
| PipelineCloneUrlGeneratorState
| PipelineCreateUrlGeneratorState;
export class IngestPipelinesUrlGenerator
implements UrlGeneratorsDefinition<typeof INGEST_PIPELINES_APP_ULR_GENERATOR> {
constructor(private readonly getAppBasePath: (absolute: boolean) => Promise<string>) {}
public readonly id = INGEST_PIPELINES_APP_ULR_GENERATOR;
public readonly createUrl = async (state: IngestPipelinesUrlGeneratorState): Promise<string> => {
switch (state.page) {
case INGEST_PIPELINES_PAGES.EDIT: {
return `${await this.getAppBasePath(!!state.absolute)}${getEditPath({
pipelineName: state.pipelineId,
})}`;
}
case INGEST_PIPELINES_PAGES.CREATE: {
return `${await this.getAppBasePath(!!state.absolute)}${getCreatePath()}`;
}
case INGEST_PIPELINES_PAGES.LIST: {
return `${await this.getAppBasePath(!!state.absolute)}${getListPath({
inspectedPipelineName: state.pipelineId,
})}`;
}
case INGEST_PIPELINES_PAGES.CLONE: {
return `${await this.getAppBasePath(!!state.absolute)}${getClonePath({
clonedPipelineName: state.pipelineId,
})}`;
}
}
};
}
export const registerUrlGenerator = (
coreSetup: CoreSetup,
management: Dependencies['management'],
share: Dependencies['share']
) => {
const getAppBasePath = async (absolute = false) => {
const [coreStart] = await coreSetup.getStartServices();
return coreStart.application.getUrlForApp(MANAGEMENT_APP_ID, {
path: management.sections.section.ingest.getApp(PLUGIN_ID)!.basePath,
absolute: !!absolute,
});
};
share.urlGenerators.registerUrlGenerator(new IngestPipelinesUrlGenerator(getAppBasePath));
};