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

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

Merged
merged 11 commits into from
Aug 19, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
80859ff
Add "view in machine learning" buttons to setup flyout
afgomez Aug 6, 2020
9e339c5
Pass time range to ML links
afgomez Aug 6, 2020
245bc8b
Fix typing
afgomez Aug 7, 2020
73962ef
Merge branch 'master' into 72402-manage-jobs-links
elasticmachine Aug 10, 2020
007e8c0
Fix typo in translation label
afgomez Aug 11, 2020
2d8c52b
Merge branch 'master' into 72402-manage-jobs-links
afgomez Aug 18, 2020
ec9f024
Revert "Pass time range to ML links"
afgomez Aug 18, 2020
d6a9a72
Link to the jobs management pages
afgomez Aug 18, 2020
85e2989
Use `pathname` for the link instead of `hash`
afgomez Aug 19, 2020
99ce32a
Tweak vertical spacing
afgomez Aug 19, 2020
ef0a007
Merge branch 'master' into 72402-manage-jobs-links
afgomez Aug 19, 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/infra/public/components/logging/log_analysis_results/analyze_in_ml_button.tsx
View file
Open in desktop
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
12 changes: 10 additions & 2 deletions ...k/plugins/infra/public/components/logging/log_analysis_setup/setup_flyout/module_list.tsx
View file
Open in desktop
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
30 changes: 27 additions & 3 deletions ...gins/infra/public/components/logging/log_analysis_setup/setup_flyout/module_list_card.tsx
View file
Open in desktop
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 •
edited
Loading

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