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

[Logs UI] Add "View in machine learning" links in the anomaly explorer #74555

Merged
merged 11 commits into from
Aug 19, 2020
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const AnalyzeInMlButton: React.FunctionComponent<{
);
};

const getOverallAnomalyExplorerLinkDescriptor = (
export const getOverallAnomalyExplorerLinkDescriptor = (
jobId: string,
timeRange: TimeRange
): LinkDescriptor => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,14 @@ export const LogAnalysisModuleList: React.FC<{
onViewModuleSetup: (module: ModuleId) => void;
}> = ({ onViewModuleSetup }) => {
const { hasLogAnalysisSetupCapabilities } = useLogAnalysisCapabilitiesContext();
const { setupStatus: logEntryRateSetupStatus } = useLogEntryRateModuleContext();
const { setupStatus: logEntryCategoriesSetupStatus } = useLogEntryCategoriesModuleContext();
const {
setupStatus: logEntryRateSetupStatus,
jobIds: logEntryRateJobIds,
} = useLogEntryRateModuleContext();
const {
setupStatus: logEntryCategoriesSetupStatus,
jobIds: logEntryCategoriesJobIds,
} = useLogEntryCategoriesModuleContext();

const viewLogEntryRateSetupFlyout = useCallback(() => {
onViewModuleSetup('logs_ui_analysis');
Expand All @@ -37,6 +43,7 @@ export const LogAnalysisModuleList: React.FC<{
<EuiFlexGroup>
<EuiFlexItem>
<LogAnalysisModuleListCard
jobId={logEntryRateJobIds['log-entry-rate']}
hasSetupCapabilities={hasLogAnalysisSetupCapabilities}
moduleDescription={logEntryRateModule.moduleDescription}
moduleName={logEntryRateModule.moduleName}
Expand All @@ -46,6 +53,7 @@ export const LogAnalysisModuleList: React.FC<{
</EuiFlexItem>
<EuiFlexItem>
<LogAnalysisModuleListCard
jobId={logEntryCategoriesJobIds['log-entry-categories-count']}
hasSetupCapabilities={hasLogAnalysisSetupCapabilities}
moduleDescription={logEntryCategoriesModule.moduleDescription}
moduleName={logEntryCategoriesModule.moduleName}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,41 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiCard, EuiIcon } from '@elastic/eui';
import { EuiCard, EuiIcon, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
import { SetupStatus } from '../../../../../common/log_analysis';
import { CreateJobButton, RecreateJobButton } from '../../log_analysis_setup/create_job_button';
import { useLinkProps } from '../../../../hooks/use_link_props';

export const LogAnalysisModuleListCard: React.FC<{
jobId: string;
hasSetupCapabilities: boolean;
moduleDescription: string;
moduleName: string;
moduleStatus: SetupStatus;
onViewSetup: () => void;
}> = ({ hasSetupCapabilities, moduleDescription, moduleName, moduleStatus, onViewSetup }) => {
}> = ({
jobId,
hasSetupCapabilities,
moduleDescription,
moduleName,
moduleStatus,
onViewSetup,
}) => {
const moduleIcon =
moduleStatus.type === 'required' ? (
<EuiIcon size="xxl" type="machineLearningApp" />
) : (
<EuiIcon color="secondary" size="xxl" type="check" />
);

const viewInMlLinkProps = useLinkProps({
app: 'ml',
pathname: '/jobs',
search: { mlManagement: `(jobId:${jobId})` },
});

const moduleSetupButton =
moduleStatus.type === 'required' ? (
<CreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup}>
Expand All @@ -33,7 +48,16 @@ export const LogAnalysisModuleListCard: React.FC<{
/>
</CreateJobButton>
) : (
<RecreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup} />
<>
<RecreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup} />
<EuiSpacer size="xs" />
<EuiButtonEmpty {...viewInMlLinkProps}>
<FormattedMessage
id="xpack.infra.logs.analysis.viewInMlButtonLabel"
defaultMessage="View in Machine Learning"
/>
</EuiButtonEmpty>
</>
Comment on lines +54 to +60
Copy link
Member

Choose a reason for hiding this comment

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

The vertical rhythm is a bit weird. Do we want to insert a <EuiSpacer size="xs" /> above it like shown in the EUI card docs?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can add it. I could not find the documentation that you mentioned though :/

Copy link
Member

@weltenwort weltenwort Aug 20, 2020

Choose a reason for hiding this comment

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

I was referring to the double-row example code on the <EuiCard> documentation page:

      <EuiCard
        icon={<EuiIcon size="xxl" type="savedObjectsApp" />}
        title="Save Objects"
        description="Example of a short card description."
        footer={
          <div>
            <EuiButton aria-label="Go to Save Objects">Go for it</EuiButton>
            <EuiSpacer size="xs" />
            <EuiText size="s">
              <p>
                Or try <EuiLink href="http://google.com">this</EuiLink>
              </p>
            </EuiText>
          </div>
        }
      />

);

return (
Expand Down