Skip to content

Commit

Permalink
added link to dashboard on detector details; updated action menu
Browse files Browse the repository at this point in the history 
Signed-off-by: Amardeepsingh Siglani <[email protected]>
  • Loading branch information
@amsiglan
amsiglan committed Feb 22, 2023
1 parent 19dd8cd commit 881f7bb
Show file tree
Hide file tree
Showing 9 changed files with 382 additions and 138 deletions.
22 changes: 11 additions & 11 deletions public/pages/Detectors/components/DetectorBasicDetailsView/DetectorBasicDetailsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiButton, EuiSpacer, EuiLink } from '@elastic/eui';
import { EuiButton, EuiSpacer, EuiLink, EuiIcon } from '@elastic/eui';
import React from 'react';
import { ContentPanel } from '../../../../components/ContentPanel';
import { createTextDetailsGroup, parseSchedule } from '../../../../utils/helpers';
Expand Down Expand Up @@ -39,18 +39,18 @@ export const DetectorBasicDetailsView: React.FC<DetectorBasicDetailsViewProps> =
{ label: 'Detector name', content: name },
{ label: 'Log type', content: detector_type.toLowerCase() },
{ label: 'Data source', content: inputs[0].detector_input.indices[0] },
];

if (dashboardId) {
firstTextDetailsGroupEntries.push({
{
label: 'Detector dashboard',
content: (
<EuiLink onClick={() => window.open(`dashboards#/view/${dashboardId}`, '_self')}>
{}
content: (dashboardId ? (
<EuiLink onClick={() => window.open(`dashboards#/view/${dashboardId}`, '_blank')}>
{`${name} summary`}
<EuiIcon type={'popout'} />
</EuiLink>
) as any,
});
}
) : (
'Not available for this log type'
)) as any,
},
];

return (
<ContentPanel
Expand Down
78 changes: 78 additions & 0 deletions .../components/DetectorBasicDetailsView/__snapshots__/DetectorBasicDetailsView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,45 @@ Object {
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
style="min-width: 25%;"
>
<div
class="euiFormRow"
id="some_html_id-row"
>
<div
class="euiFormRow__labelWrapper"
>
<label
class="euiFormLabel euiFormRow__label"
for="some_html_id"
>
<div
class="euiText euiText--medium"
>
<div
class="euiTextColor euiTextColor--subdued"
>
Detector dashboard
</div>
</div>
</label>
</div>
<div
class="euiFormRow__fieldWrapper"
>
<div
class="euiText euiText--medium"
data-test-subj="text-details-group-content-detector-dashboard"
id="some_html_id"
>
Not available for this log type
</div>
</div>
</div>
</div>
</div>
<div
class="euiSpacer euiSpacer--xl"
Expand Down Expand Up @@ -525,6 +564,45 @@ Object {
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
style="min-width: 25%;"
>
<div
class="euiFormRow"
id="some_html_id-row"
>
<div
class="euiFormRow__labelWrapper"
>
<label
class="euiFormLabel euiFormRow__label"
for="some_html_id"
>
<div
class="euiText euiText--medium"
>
<div
class="euiTextColor euiTextColor--subdued"
>
Detector dashboard
</div>
</div>
</label>
</div>
<div
class="euiFormRow__fieldWrapper"
>
<div
class="euiText euiText--medium"
data-test-subj="text-details-group-content-detector-dashboard"
id="some_html_id"
>
Not available for this log type
</div>
</div>
</div>
</div>
</div>
<div
class="euiSpacer euiSpacer--xl"
Expand Down
98 changes: 79 additions & 19 deletions public/pages/Detectors/containers/Detector/DetectorDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
EuiContextMenuPanel,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPopover,
EuiSpacer,
EuiTab,
Expand All @@ -19,7 +20,12 @@ import {
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { CoreServicesContext } from '../../../../components/core_services';
import { BREADCRUMBS, EMPTY_DEFAULT_DETECTOR_HIT, ROUTES } from '../../../../utils/constants';
import {
BREADCRUMBS,
EMPTY_DEFAULT_DETECTOR_HIT,
pendingDashboardCreations,
ROUTES,
} from '../../../../utils/constants';
import { DetectorHit } from '../../../../../server/models/interfaces';
import { DetectorDetailsView } from '../DetectorDetailsView/DetectorDetailsView';
import { FieldMappingsView } from '../../components/FieldMappingsView/FieldMappingsView';
Expand All @@ -28,7 +34,7 @@ import { RuleItem } from '../../../CreateDetector/components/DefineDetector/comp
import { DetectorsService } from '../../../../services';
import { errorNotificationToast } from '../../../../utils/helpers';
import { NotificationsStart, SimpleSavedObject } from 'opensearch-dashboards/public';
import { ServerResponse } from '../../../../../types';
import { ISavedObjectsService, ServerResponse } from '../../../../../types';

export interface DetectorDetailsProps
extends RouteComponentProps<
Expand All @@ -43,6 +49,7 @@ export interface DetectorDetailsProps
> {
detectorService: DetectorsService;
notifications: NotificationsStart;
savedObjectsService: ISavedObjectsService;
}

export interface DetectorDetailsState {
Expand Down Expand Up @@ -156,13 +163,39 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec
tabs: [],
loading: false,
};
this.props.location.state.createDashboardPromise?.then((savedObject) => {
if (savedObject && savedObject.ok) this.setState({ dashboardId: savedObject.response.id });
});
}

async componentDidMount() {
this.getDetector();

const pendingDashboardCreationPromise = pendingDashboardCreations[this.state.detectorId];
if (pendingDashboardCreationPromise) {
pendingDashboardCreationPromise.then((savedObject) => {
if (savedObject && savedObject.ok) {
this.setState({ dashboardId: savedObject.response.id });
this.getTabs();
}
delete pendingDashboardCreations[this.state.detectorId];
});
} else {
const dashboards = await this.props.savedObjectsService.getDashboards();
let detectorDashboardId;
dashboards.some((dashboard) => {
if (
dashboard.references.findIndex((reference) => reference.id === this.state.detectorId) > -1
) {
detectorDashboardId = dashboard.id;
return true;
}

return false;
});

if (detectorDashboardId) {
this.setState({ dashboardId: detectorDashboardId });
this.getTabs();
}
}
}

getDetector = async () => {
Expand Down Expand Up @@ -253,15 +286,8 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec

createHeaderActions(): React.ReactNode[] {
const { loading } = this.state;
const onClickActions = [
{ name: 'View Alerts', onClick: this.onViewAlertsClick },
{ name: 'View Findings', onClick: this.onViewFindingsClick },
];
const { isActionsMenuOpen } = this.state;
return [
...onClickActions.map((action) => (
<EuiButton onClick={action.onClick}>{action.name}</EuiButton>
)),
<EuiPopover
id={'detectorsActionsPopover'}
button={
Expand All @@ -285,16 +311,38 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec
items={[
<EuiContextMenuItem
disabled={loading}
key={'Delete'}
key={'ViewAlerts'}
icon={'empty'}
onClick={() => {
this.closeActionsPopover();
this.onDelete();
}}
data-test-subj={'editButton'}
onClick={this.onViewAlertsClick}
data-test-subj={'viewAlertsButton'}
>
Delete
View Alerts
</EuiContextMenuItem>,
<EuiContextMenuItem
disabled={loading}
key={'ViewFindings'}
icon={'empty'}
onClick={this.onViewFindingsClick}
data-test-subj={'viewFindingsButton'}
>
View Findings
</EuiContextMenuItem>,
<>
{this.state.dashboardId ? (
<EuiContextMenuItem
disabled={loading}
key={'ViewDashboard'}
icon={'empty'}
onClick={() =>
window.open(`dashboards#/view/${this.state.dashboardId}`, '_blank')
}
data-test-subj={'viewDashboard'}
>
View detector dashboard
</EuiContextMenuItem>
) : null}
</>,
<EuiHorizontalRule margin="xs" />,
<EuiContextMenuItem
disabled={loading}
key={'Toggle detector'}
Expand All @@ -307,6 +355,18 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec
>
{`${this.detectorHit._source.enabled ? 'Stop' : 'Start'} detector`}
</EuiContextMenuItem>,
<EuiContextMenuItem
disabled={loading}
key={'Delete'}
icon={'empty'}
onClick={() => {
this.closeActionsPopover();
this.onDelete();
}}
data-test-subj={'editButton'}
>
Delete
</EuiContextMenuItem>,
]}
/>
</EuiPopover>,
Expand Down
Loading

0 comments on commit 881f7bb

Please sign in to comment.