Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EPM] add/remove package in package settings page #63389

Merged
merged 5 commits into from
Apr 14, 2020
Merged

[EPM] add/remove package in package settings page #63389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ba81c2
fix bug where assets were not being returned, use archive info for as…
neptunian Apr 8, 2020
2dee896
add settings page, add install/remove button and text
neptunian Apr 9, 2020
02b1610
check existence of datasources associated with this package
neptunian Apr 13, 2020
54f96bb
add package title variable to text
neptunian Apr 13, 2020
d4fed26
update modal text and rename to uninstall
neptunian Apr 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion x-pack/plugins/ingest_manager/common/types/models/epm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export enum InstallStatus {
uninstalling = 'uninstalling',
}

export type DetailViewPanelName = 'overview' | 'data-sources';
export type DetailViewPanelName = 'overview' | 'data-sources' | 'settings';
export type ServiceName = 'kibana' | 'elasticsearch';
export type AssetType = KibanaAssetType | ElasticsearchAssetType | AgentAssetType;

Expand Down
15 changes: 13 additions & 2 deletions x-pack/plugins/ingest_manager/common/types/rest_spec/datasource.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { Datasource, NewDatasource } from '../models';
import { ListWithKuery } from './common';

export interface GetDatasourcesRequest {
query: ListWithKuery;
query: {
page: number;
perPage: number;
kuery?: string;
};
}

export interface GetOneDatasourceRequest {
Expand All @@ -16,6 +19,14 @@ export interface GetOneDatasourceRequest {
};
}

export interface GetDatasourcesResponse {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:) I just added this type to my PR as well - #63373

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jen-huang is working on datasources table and probably adding it as well!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@neptunian fwiw, I'm working on Datasources table in #57961

items: Datasource[];
total: number;
page: number;
perPage: number;
success: boolean;
}

export interface CreateDatasourceRequest {
body: NewDatasource;
}
Expand Down
12 changes: 11 additions & 1 deletion ...plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/datasource.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { sendRequest } from './use_request';
import { sendRequest, useRequest } from './use_request';
import { datasourceRouteService } from '../../services';
import { CreateDatasourceRequest, CreateDatasourceResponse } from '../../types';
import {
DeleteDatasourcesRequest,
DeleteDatasourcesResponse,
GetDatasourcesRequest,
GetDatasourcesResponse,
} from '../../../../../common/types/rest_spec';

export const sendCreateDatasource = (body: CreateDatasourceRequest['body']) => {
Expand All @@ -26,3 +28,11 @@ export const sendDeleteDatasource = (body: DeleteDatasourcesRequest['body']) =>
body: JSON.stringify(body),
});
};

export function useGetDatasources(query: GetDatasourcesRequest['query']) {
return useRequest<GetDatasourcesResponse>({
method: 'get',
path: datasourceRouteService.getListPath(),
query,
});
}
2 changes: 1 addition & 1 deletion ...ck/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/hooks/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export { useLinks } from './use_links';
export { useLocalSearch, searchIdField } from './use_local_search';
export {
PackageInstallProvider,
useDeletePackage,
useUninstallPackage,
useGetPackageInstallStatus,
useInstallPackage,
useSetPackageInstallStatus,
Expand Down
101 changes: 61 additions & 40 deletions ...est_manager/public/applications/ingest_manager/sections/epm/hooks/use_package_install.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

import createContainer from 'constate';
import React, { useCallback, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { NotificationsStart } from 'src/core/public';
import { useLinks } from '.';
import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public';
import { PackageInfo } from '../../../types';
import { sendInstallPackage, sendRemovePackage } from '../../../hooks';
Expand All @@ -25,7 +25,6 @@ type InstallPackageProps = Pick<PackageInfo, 'name' | 'version' | 'title'>;

function usePackageInstall({ notifications }: { notifications: NotificationsStart }) {
const [packages, setPackage] = useState<PackagesInstall>({});
const { toDetailView } = useLinks();

const setPackageInstallStatus = useCallback(
({ name, status }: { name: PackageInfo['name']; status: InstallStatus }) => {
Expand All @@ -46,34 +45,43 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
if (res.error) {
setPackageInstallStatus({ name, status: InstallStatus.notInstalled });
notifications.toasts.addWarning({
title: `Failed to install ${title} package`,
text:
'Something went wrong while trying to install this package. Please try again later.',
title: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageInstallErrorTitle"
defaultMessage="Failed to install {title} package"
values={{ title }}
/>
),
text: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageInstallErrorDescription"
defaultMessage="Something went wrong while trying to install this package. Please try again later."
/>
),
iconType: 'alert',
});
} else {
setPackageInstallStatus({ name, status: InstallStatus.installed });
const SuccessMsg = <p>Successfully installed {name}</p>;

notifications.toasts.addSuccess({
title: `Installed ${title} package`,
text: toMountPoint(SuccessMsg),
title: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageInstallSuccessTitle"
defaultMessage="Installed {title}"
values={{ title }}
/>
),
text: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageInstallSuccessDescription"
defaultMessage="Successfully installed {title}"
values={{ title }}
/>
),
});

// TODO: this should probably live somewhere else and use <Redirect />,
// this hook could return the request state and a component could
// use that state. the component should be able to unsubscribe to prevent memory leaks
const packageUrl = toDetailView({ name, version });
const dataSourcesUrl = toDetailView({
name,
version,
panel: 'data-sources',
withAppRoot: false,
});
if (window.location.href.includes(packageUrl)) window.location.hash = dataSourcesUrl;
}
},
[notifications.toasts, setPackageInstallStatus, toDetailView]
[notifications.toasts, setPackageInstallStatus]
);

const getPackageInstallStatus = useCallback(
Expand All @@ -83,7 +91,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
[packages]
);

const deletePackage = useCallback(
const uninstallPackage = useCallback(
async ({ name, version, title }: Pick<PackageInfo, 'name' | 'version' | 'title'>) => {
setPackageInstallStatus({ name, status: InstallStatus.uninstalling });
const pkgkey = `${name}-${version}`;
Expand All @@ -92,38 +100,51 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
if (res.error) {
setPackageInstallStatus({ name, status: InstallStatus.installed });
notifications.toasts.addWarning({
title: `Failed to delete ${title} package`,
text: 'Something went wrong while trying to delete this package. Please try again later.',
title: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageUninstallErrorTitle"
defaultMessage="Failed to uninstall {title} package"
values={{ title }}
/>
),
text: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageUninstallErrorDescription"
defaultMessage="Something went wrong while trying to uninstall this package. Please try again later."
/>
),
iconType: 'alert',
});
} else {
setPackageInstallStatus({ name, status: InstallStatus.notInstalled });

const SuccessMsg = <p>Successfully deleted {title}</p>;

notifications.toasts.addSuccess({
title: `Deleted ${title} package`,
text: toMountPoint(SuccessMsg),
});

const packageUrl = toDetailView({ name, version });
const dataSourcesUrl = toDetailView({
name,
version,
panel: 'data-sources',
title: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageUninstallSuccessTitle"
defaultMessage="Uninstalled {title}"
values={{ title }}
/>
),
text: toMountPoint(
<FormattedMessage
id="xpack.ingestManager.integrations.packageUninstallSuccessDescription"
defaultMessage="Successfully uninstalled {title}"
values={{ title }}
/>
),
});
if (window.location.href.includes(packageUrl)) window.location.href = dataSourcesUrl;
}
},
[notifications.toasts, setPackageInstallStatus, toDetailView]
[notifications.toasts, setPackageInstallStatus]
);

return {
packages,
installPackage,
setPackageInstallStatus,
getPackageInstallStatus,
deletePackage,
uninstallPackage,
};
}

Expand All @@ -132,11 +153,11 @@ export const [
useInstallPackage,
useSetPackageInstallStatus,
useGetPackageInstallStatus,
useDeletePackage,
useUninstallPackage,
] = createContainer(
usePackageInstall,
value => value.installPackage,
value => value.setPackageInstallStatus,
value => value.getPackageInstallStatus,
value => value.deletePackage
value => value.uninstallPackage
);
32 changes: 0 additions & 32 deletions ...public/applications/ingest_manager/sections/epm/screens/detail/confirm_package_delete.tsx
View file
Open in desktop

This file was deleted.

41 changes: 35 additions & 6 deletions ...ublic/applications/ingest_manager/sections/epm/screens/detail/confirm_package_install.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/
import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';

interface ConfirmPackageInstallProps {
onCancel: () => void;
Expand All @@ -17,18 +18,46 @@ export const ConfirmPackageInstall = (props: ConfirmPackageInstallProps) => {
return (
<EuiOverlayMask>
<EuiConfirmModal
title={`Install ${packageName}?`}
title={
<FormattedMessage
id="xpack.ingestManager.integrations.settings.confirmInstallModal.installTitle"
defaultMessage="Install {packageName}"
values={{ packageName }}
/>
}
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel"
confirmButtonText="Install package"
cancelButtonText={
<FormattedMessage
id="xpack.ingestManager.integrations.settings.confirmInstallModal.cancelButtonLabel"
defaultMessage="Cancel"
/>
}
confirmButtonText={
<FormattedMessage
id="xpack.ingestManager.integrations.settings.confirmInstallModal.installButtonLabel"
defaultMessage="Install {packageName}"
values={{ packageName }}
/>
}
defaultFocusedButton="confirm"
>
<EuiCallOut title={`This package will install ${numOfAssets} assets.`} />
<EuiCallOut
iconType="iInCircle"
title={
<FormattedMessage
id="xpack.ingestManager.integrations.settings.confirmInstallModal.installCalloutTitle"
defaultMessage="This action will install {numOfAssets} assets"
values={{ numOfAssets }}
/>
}
/>
<EuiSpacer size="l" />
<p>
and will only be accessible to users who have permission to view this Space. Elasticsearch
assets are installed globally and will be accessible to all Kibana users.
<FormattedMessage
id="xpack.ingestManager.integrations.settings.confirmInstallModal.installDescription"
defaultMessage="Kibana assets will be installed in the current Space (Default) and will only be accessible to users who have permission to view this Space. Elasticsearch assets are installed globally and will be accessible to all Kibana users."
/>
</p>
</EuiConfirmModal>
</EuiOverlayMask>
Expand Down
Loading