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.

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

[ENDPOINT][INGEST]Task/endpoint ingest update #67234

Merged
merged 25 commits into from
Jun 3, 2020
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
e300f90
endpoint advanced config. changed message
parkiino May 18, 2020
11c3837
add edit mode
parkiino May 20, 2020
0cf3ae9
no more endpoint
parkiino May 21, 2020
82b20af
wow it werks but after going down the wrong path
parkiino May 21, 2020
2b0fa3e
fix type script error
parkiino May 21, 2020
4ccc118
rename linky
parkiino May 26, 2020
3398ed6
Merge remote-tracking branch 'upstream/master' into task/endpoint-inj…
parkiino May 26, 2020
f232a7c
use navigatetoapp, no refresh
parkiino May 26, 2020
b1777d9
Merge branch 'master' into task/endpoint-injest-update
elasticmachine May 26, 2020
8444aec
fixed wording
parkiino May 27, 2020
057f440
Merge branch 'task/endpoint-injest-update' of github.com:parkiino/kib…
parkiino May 27, 2020
f9852af
POC for custom configure data source panel from outside plugin
jen-huang May 28, 2020
ad71c88
added security text
parkiino May 29, 2020
3efce1c
Merge remote-tracking branch 'upstream/master' into task/endpoint-inj…
parkiino May 29, 2020
8586e3b
it werks
parkiino May 29, 2020
412f5e0
Merge remote-tracking branch 'upstream/master' into task/endpoint-inj…
parkiino Jun 1, 2020
7583c48
removed redundant import, type error
parkiino Jun 1, 2020
04dee90
i18n fix
parkiino Jun 1, 2020
2208beb
remove unused file
parkiino Jun 1, 2020
b43801e
grab policyId from datasource
parkiino Jun 2, 2020
9ee8750
Merge remote-tracking branch 'upstream/master' into task/endpoint-inj…
parkiino Jun 2, 2020
4f4e14c
update doc comments
parkiino Jun 2, 2020
635d035
pauls comments
parkiino Jun 2, 2020
ac2441d
registerDatasource from plugin lifecycle
parkiino Jun 3, 2020
165c0fb
Merge remote-tracking branch 'upstream/master' into task/endpoint-inj…
parkiino Jun 3, 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
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useContext } from 'react';
import { CoreStart } from 'src/core/public';
import { CoreStart } from 'kibana/public';
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';

export const CoreContext = React.createContext<CoreStart | null>(null);

export function useCore() {
const core = useContext(CoreContext);
if (core === null) {
throw new Error('CoreContext not initialized');
export function useCore(): CoreStart {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated useCore() to use the new useKibana hook

Copy link
Contributor

Choose a reason for hiding this comment

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

This is pretty cool, I didn't know that kibana_react had these kind of components/hooks now

const { services } = useKibana();
if (services === null) {
throw new Error('KibanaContextProvider not initialized');
}
return core;
return services;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

will return the same thing that core returned. could be renamed to say core if that clears up any confusion.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't mind keeping it as services here for now as it's largely an abstraction anyway. On our team's side we can consider renaming useCore as tech debt

}
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ import { PAGE_ROUTING_PATHS } from './constants';
import { DefaultLayout, WithoutHeaderLayout } from './layouts';
import { Loading, Error } from './components';
import { IngestManagerOverview, EPMApp, AgentConfigApp, FleetApp, DataStreamApp } from './sections';
import { CoreContext, DepsContext, ConfigContext, setHttpClient, useConfig } from './hooks';
import { DepsContext, ConfigContext, setHttpClient, useConfig } from './hooks';
import { PackageInstallProvider } from './sections/epm/hooks';
import { useCore, sendSetup, sendGetPermissionsCheck } from './hooks';
import { FleetStatusProvider } from './hooks/use_fleet_status';
import './index.scss';
import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';

export interface ProtectedRouteProps extends RouteProps {
isAllowed?: boolean;
Expand Down Expand Up @@ -229,15 +230,15 @@ const IngestManagerApp = ({
const isDarkMode = useObservable<boolean>(coreStart.uiSettings.get$('theme:darkMode'));
return (
<coreStart.i18n.Context>
<CoreContext.Provider value={coreStart}>
<KibanaContextProvider services={{ ...coreStart }}>
Copy link
Contributor Author

@parkiino parkiino May 30, 2020

Choose a reason for hiding this comment

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

uses the newer KibanaContextProvider in place of CoreContext provider, which also exposes coreStart and allows use to use the <LinkToApp> component in the Siem/Endpoint app

Copy link
Contributor

Choose a reason for hiding this comment

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

Ingest Team: FYI: I actually learned about this functionality from Kibana from one of you - maybe @jfsiii 😄

<DepsContext.Provider value={{ setup: setupDeps, start: startDeps }}>
<ConfigContext.Provider value={config}>
<EuiThemeProvider darkMode={isDarkMode}>
<IngestManagerRoutes basepath={basepath} />
</EuiThemeProvider>
</ConfigContext.Provider>
</DepsContext.Provider>
</CoreContext.Provider>
</KibanaContextProvider>
</coreStart.i18n.Context>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* 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 React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
import { ConfigureEndpointDatasource } from '../../../../../../../../siem/public';
Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't this create a circular dependency? Ingest now depends on SIEM which already depends on Ingest.

I'm away from my computer for a bit so I can't dig in, but can Ingest definite/export this instead?

import { NewDatasource } from '../../../../types';
import { CreateDatasourceFrom } from '../types';

export interface CustomConfigureDatasourceProps {
packageName: string;
from: CreateDatasourceFrom;
datasource: NewDatasource;
}

export type CustomConfigureDatasourceContent = React.FC<CustomConfigureDatasourceProps>;

const ConfigureDatasourceMapping: { [key: string]: CustomConfigureDatasourceContent } = {
endpoint: ConfigureEndpointDatasource,
};

const EmptyConfigureDatasource: CustomConfigureDatasourceContent = () => (
<EuiEmptyPrompt
iconType="checkInCircleFilled"
iconColor="secondary"
body={
<EuiText>
<p>
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.noConfigOptionsMessage"
defaultMessage="Nothing to configure"
/>
</p>
</EuiText>
}
/>
);

export const CustomConfigureDatasource = (props: CustomConfigureDatasourceProps) => {
const ConfigureDatasourceContent =
Copy link
Contributor

Choose a reason for hiding this comment

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

@jen-huang The package definition has a flag called solution whose comment indicates that it should be the trigger for displaying a custom configuration UI - see: https://github.com/elastic/package-storage/blob/master/packages/endpoint/0.1.0/manifest.yml#L23

I don't see that property defined in Datasources type, so I assume that is future functionality?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, we need to implement that on the ingest management side. Could you make an issue for it? I wasn't aware that flag was already implemented on registry side :)

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks @jen-huang . Created #67939 to track

ConfigureDatasourceMapping[props.packageName] || EmptyConfigureDatasource;
return <ConfigureDatasourceContent {...props} />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* 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 React, { memo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { useLocation } from 'react-router-dom';
import { EuiLink } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useCore } from './../../../../hooks/use_core';

export const EndpointConfiguration = memo<{ editMode: boolean }>(({ editMode }) => {
const { application } = useCore();
const pathname = useLocation().pathname.split('/');
const policyId = pathname[pathname.length - 1];
const appId = 'siem';
const appPath = `#/policy/${policyId}`;
const linkToSiemApp = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
event.preventDefault();
application.navigateToApp(appId, { path: appPath });
};

return (
<>
{editMode === true ? (
<EuiLink
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we move the components that are returned here to our source and export it from there?
It would be best if we keep all domain specific code in one place. Maybe you just need to add a Prop to the endpoint's <ConfigureEndpointDatasource> component called editMode and have it drive the returned UI.

Copy link
Contributor

Choose a reason for hiding this comment

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

++ to above, CustomConfigureDatasourceProps has property called from which you can test from === 'edit' to detect create vs edit mode

Edit: Oh, I think this is just a left over file from the initial POC and not referenced anywhere. There is an equivalent file under /siem in this PR

onClick={(ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) =>
linkToSiemApp(ev)
}
>
{i18n.translate(
'xpack.ingestManager.editDatasource.stepConfigure.endpointConfigurationLink',
{ defaultMessage: 'View and configure Security Policy' }
)}
</EuiLink>
) : (
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.endpointConfiguration"
defaultMessage="The recommended Security Policy has been associated with this data source. The Security Policy can be edited in the Security application once your data source has been saved."
/>
)}
</>
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
export { CreateDatasourcePageLayout } from './layout';
export { DatasourceInputPanel } from './datasource_input_panel';
export { DatasourceInputVarField } from './datasource_input_var_field';
export { CustomConfigureDatasource } from './custom_configure_datasource';
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,29 @@
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiEmptyPrompt,
EuiText,
EuiCallOut,
} from '@elastic/eui';
import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { PackageInfo, NewDatasource, DatasourceInput } from '../../../types';
import { Loading } from '../../../components';
import { DatasourceValidationResults, validationHasErrors } from './services';
import { DatasourceInputPanel } from './components';
import { DatasourceInputPanel, CustomConfigureDatasource } from './components';
import { CreateDatasourceFrom } from './types';

export const StepConfigureDatasource: React.FunctionComponent<{
from?: CreateDatasourceFrom;
packageInfo: PackageInfo;
datasource: NewDatasource;
updateDatasource: (fields: Partial<NewDatasource>) => void;
validationResults: DatasourceValidationResults;
submitAttempted: boolean;
}> = ({ packageInfo, datasource, updateDatasource, validationResults, submitAttempted }) => {
}> = ({
from = 'config',
packageInfo,
datasource,
updateDatasource,
validationResults,
submitAttempted,
}) => {
const hasErrors = validationResults ? validationHasErrors(validationResults) : false;

// Configure inputs (and their streams)
Expand Down Expand Up @@ -68,19 +69,10 @@ export const StepConfigureDatasource: React.FunctionComponent<{
</EuiFlexGroup>
) : (
<EuiPanel>
<EuiEmptyPrompt
iconType="checkInCircleFilled"
iconColor="secondary"
body={
<EuiText>
<p>
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.noConfigOptionsMessage"
defaultMessage="Nothing to configure"
/>
</p>
</EuiText>
}
<CustomConfigureDatasource
packageName={packageInfo.name}
datasource={datasource}
from={from}
/>
</EuiPanel>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,7 @@ export const EditDatasourcePage: React.FunctionComponent = () => {
),
children: (
<StepConfigureDatasource
from={'edit'}
packageInfo={packageInfo}
datasource={datasource}
updateDatasource={updateDatasource}
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/ingest_manager/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ export { IngestManagerStart } from './plugin';
export const plugin = (initializerContext: PluginInitializerContext) => {
return new IngestManagerPlugin(initializerContext);
};

export { CustomConfigureDatasourceContent } from './applications/ingest_manager/sections/agent_config/create_datasource_page/components/custom_configure_datasource';
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this exported out of Ingest?

Copy link
Contributor

Choose a reason for hiding this comment

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

CustomConfigureDatasourceContent is a type which Endpoint (and other consumers) should implement to ensure that the custom content will be rendered correctly by Ingest Manager. I believe @parkiino pulled this from my POC, I elaborate on this here: https://github.com/elastic/endpoint-app-team/issues/443#issuecomment-635021439

Copy link
Contributor

Choose a reason for hiding this comment

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

ahh. Got it. Thank @jen-huang
I had been importing types from ...ingest_manager/public/common so I was perhaps expecting it to come from there.

2 changes: 2 additions & 0 deletions x-pack/plugins/siem/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ import { PluginSetup, PluginStart } from './types';
export const plugin = (context: PluginInitializerContext): Plugin => new Plugin(context);

export { Plugin, PluginSetup, PluginStart };

export { ConfigureEndpointDatasource } from './management/pages/policy/view/ingest_manager_integration';
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* 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 React, { memo } from 'react';
import { useLocation } from 'react-router-dom';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app';
import { CustomConfigureDatasourceContent } from '../../../../../../../ingest_manager/public';
Copy link
Contributor

Choose a reason for hiding this comment

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

are you importing files directly from ingest_manager?

Copy link
Contributor

Choose a reason for hiding this comment

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

nvm, seems like its OK for now #64843

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmmm... 🤔 this was weird to me too. I will read up on what @oatkiller found with above link to understand better.

Copy link
Contributor

Choose a reason for hiding this comment

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

AFAIK plugins are allowed to import from other plugin's root /public and /server dirs

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, I finally read up on it and understand the approach as to why /public + /common needs to be the path for exporting (better/smaller runtime bundles ++ more runtime re-usability) 👍

import { getManagementUrl } from '../../../..';

export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent>(
({ from }: { from: string }) => {
const { services } = useKibana();
const pathname = useLocation().pathname.split('/');
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't suggest us using custom logic to parse out the URL. I suggest that this component be given the datasourceId as an input prop, and then drive the UI below based on that. It may also address my earlier comment about moving code from Ingest here.

const policyId = pathname[pathname.length - 1];
const policyUrl = getManagementUrl({ name: 'policyDetails', policyId });

return (
<EuiEmptyPrompt
body={
<EuiText>
<p>
{from === 'edit' ? (
<LinkToApp
appId="siem"
appPath={policyUrl}
href={`${services.application.getUrlForApp('siem')}${policyUrl}`}
>
<FormattedMessage
id="xpack.endpoint.ingestManager.editDatasource.stepConfigure"
defaultMessage="View and configure Security Policy"
/>
</LinkToApp>
) : (
<FormattedMessage
id="xpack.endpoint.ingestManager.createDatasource.stepConfigure"
defaultMessage="The recommended Security Policy has been associated with this data source. The Security Policy can be edited in the Security application once your data source has been saved."
/>
)}
</p>
</EuiText>
}
/>
);
}
);

ConfigureEndpointDatasource.displayName = 'ConfigureEndpointDatasource';
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* 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.
*/

export { ConfigureEndpointDatasource } from './configure_datasource';
Copy link
Contributor

Choose a reason for hiding this comment

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

why? this will make it so that tsserver finds multiple valid import locations for the same thing

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah sorry that was from a poc commit, i removed the additional import