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

Update alert type selection layout to rows instead of grid #73665

Merged
merged 31 commits into from
Nov 9, 2020
Merged
Changes from 2 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
64afacd
Update layout to rows for alert types
mdefazio Jul 29, 2020
923d398
Fix gutter usage
mdefazio Jul 29, 2020
1ed453b
Merge branch 'master' of github.com:elastic/kibana into alerting-desi…
mdefazio Aug 3, 2020
9f87047
Update heading, remove icons
mdefazio Aug 3, 2020
afd6cb4
Non-working update to the combo box
mdefazio Aug 17, 2020
2340875
Merge branch 'master' of github.com:elastic/kibana into alerting-desi…
mdefazio Sep 9, 2020
9721af1
Add incorrect updates with questions to fix
mdefazio Sep 9, 2020
e4f5ee3
Merge branch 'master' of github.com:elastic/kibana into alerting-desi…
mdefazio Sep 10, 2020
5ab4a7d
Fix combo box
mdefazio Sep 17, 2020
e371b53
Cleanup changes to specific to this module
mdefazio Sep 17, 2020
8c97177
Merge remote-tracking branch 'upstream/master' into alerting-design-u…
YulNaumenko Oct 20, 2020
50d565e
fixed type checks and made combobox always visible
YulNaumenko Oct 20, 2020
0ce9e8e
Added groups by producer
YulNaumenko Oct 26, 2020
bca7924
Merge remote-tracking branch 'upstream/master' into alerting-design-u…
YulNaumenko Oct 26, 2020
11ffae0
Added get producer name from kibana features names
YulNaumenko Oct 27, 2020
d8f3ae1
Merge remote-tracking branch 'upstream/master' into alerting-design-u…
YulNaumenko Nov 2, 2020
5634fc6
Added search bar with list of alert types
YulNaumenko Nov 3, 2020
7ace8d7
Added search support functionality
YulNaumenko Nov 3, 2020
db42de7
Merge remote-tracking branch 'upstream/master' into alerting-design-u…
YulNaumenko Nov 3, 2020
e45c7de
fixed links to alert type
YulNaumenko Nov 3, 2020
239712e
added alert type title
YulNaumenko Nov 3, 2020
850a030
Fixed failing tests
YulNaumenko Nov 4, 2020
00bfb1c
Design updates to list
mdefazio Nov 4, 2020
489ee44
Remove unsed items in import list
mdefazio Nov 4, 2020
22db484
Merge remote-tracking branch 'upstream/master' into alerting-design-u…
YulNaumenko Nov 6, 2020
8ba2a3f
fixed merge issue
YulNaumenko Nov 6, 2020
9d5595d
Fixed due to comments
YulNaumenko Nov 6, 2020
ae9faba
fixed tests
YulNaumenko Nov 6, 2020
6a96a4e
Design fixes
mdefazio Nov 6, 2020
e6ced0d
Merge branch 'alerting-design-updates' of github.com:mdefazio/kibana …
mdefazio Nov 6, 2020
a197fcf
Merge remote-tracking branch 'upstream/master' into alerting-design-u…
YulNaumenko Nov 9, 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
@@ -187,15 +187,15 @@ describe('alert_form', () => {

it('renders alert type description', async () => {
await setup();
wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
wrapper.find('button[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
const alertDescription = wrapper.find('[data-test-subj="alertDescription"]');
expect(alertDescription.exists()).toBeTruthy();
expect(alertDescription.first().text()).toContain('Alert when testing');
});

it('renders alert type documentation link', async () => {
await setup();
wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
wrapper.find('button[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
const alertDocumentationLink = wrapper.find('[data-test-subj="alertDocumentationLink"]');
expect(alertDocumentationLink.exists()).toBeTruthy();
expect(alertDocumentationLink.first().prop('href')).toBe('https://localhost.local/docs');
Original file line number Diff line number Diff line change
@@ -153,12 +153,7 @@ export const AlertForm = ({
>([]);
const [searchText, setSearchText] = useState<string | undefined>();
const [inputText, setInputText] = useState<string | undefined>();
const [solutions, setSolutions] = useState<
Array<{
id: string;
title: string;
}>
>([]);
const [solutions, setSolutions] = useState<Map<string, string> | undefined>(undefined);
const [solutionsFilter, setSolutionFilter] = useState<string[]>([]);

// load alert types
@@ -177,28 +172,23 @@ export const AlertForm = ({
const availableAlertTypesResult = getAvailableAlertTypes(alertTypesResult);
setAvailableAlertTypes(availableAlertTypesResult);

const solutionsResult = alertTypesResult.reduce(
(result: Array<{ id: string; title: string }>, alertTypeItem) => {
if (
availableAlertTypesResult.find(
(availableItem) => availableItem.alertTypeModel.id === alertTypeItem.id
) &&
!result.find((solution) => solution.id === alertTypeItem.producer)
) {
result.push({
id: alertTypeItem.producer,
title:
(kibanaFeatures
? getProducerFeatureName(alertTypeItem.producer, kibanaFeatures)
: capitalize(alertTypeItem.producer)) ?? capitalize(alertTypeItem.producer),
});
const solutionsResult = availableAlertTypesResult.reduce(
(result: Map<string, string>, alertTypeItem) => {
if (!result.has(alertTypeItem.alertType.producer)) {
result.set(
alertTypeItem.alertType.producer,
(kibanaFeatures
? getProducerFeatureName(alertTypeItem.alertType.producer, kibanaFeatures)
: capitalize(alertTypeItem.alertType.producer)) ??
capitalize(alertTypeItem.alertType.producer)
);
}
return result;
},
[]
new Map()
);
Copy link
Contributor

Choose a reason for hiding this comment

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

Would it be simpler here to reduce availableAlertTypesResult instead of alertTypesResult since that is already filtered down to the available?

const solutionsResult2 = availableAlertTypesResult.reduce(
    (result: Array<{ id: string; title: string }>, alertTypeItem) => {
        if (!result.find((solution) => solution.id === alertTypeItem.alertType.producer)) {
            result.push({
                id: alertTypeItem.alertType.producer,
                title:
                    (kibanaFeatures
                        ? getProducerFeatureName(alertTypeItem.alertType.producer, kibanaFeatures)
                        : capitalize(alertTypeItem.alertType.producer)) ?? capitalize(alertTypeItem.alertType.producer),
            });
        }
        return result;
    },
    []
);

setSolutions(
solutionsResult.sort((a, b) => a.title.toString().localeCompare(b.title.toString()))
new Map([...solutionsResult.entries()].sort(([, a], [, b]) => a.localeCompare(b)))
);
} catch (e) {
toastNotifications.addDanger({
@@ -313,7 +303,9 @@ export const AlertForm = ({
);

const alertTypeNodes = Object.entries(alertTypesByProducer)
.sort(([a], [b]) => a.localeCompare(b))
.sort(([a], [b]) =>
solutions ? solutions.get(a)!.localeCompare(solutions.get(b)!) : a.localeCompare(b)
)
.map(([solution, items], groupIndex) => (
<Fragment key={`group${groupIndex}`}>
<EuiFlexGroup
@@ -707,13 +699,15 @@ export const AlertForm = ({
)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<SolutionFilter
key="solution-filter"
solutions={solutions}
onChange={(selectedSolutions: string[]) => setSolutionFilter(selectedSolutions)}
/>
</EuiFlexItem>
{solutions ? (
<EuiFlexItem grow={false}>
<SolutionFilter
key="solution-filter"
solutions={solutions}
onChange={(selectedSolutions: string[]) => setSolutionFilter(selectedSolutions)}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFormRow>
<EuiSpacer />
Original file line number Diff line number Diff line change
@@ -8,13 +8,8 @@ import React, { useEffect, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFilterGroup, EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';

interface Solution {
id: string;
title: string;
}

interface SolutionFilterProps {
solutions: Solution[];
solutions: Map<string, string>;
onChange?: (selectedSolutions: string[]) => void;
}

@@ -54,21 +49,21 @@ export const SolutionFilter: React.FunctionComponent<SolutionFilterProps> = ({
}
>
<div className="euiFilterSelect__items">
{solutions.map((item) => (
{[...solutions.entries()].map(([id, title]) => (
<EuiFilterSelectItem
key={item.id}
key={id}
onClick={() => {
const isPreviouslyChecked = selectedValues.includes(item.id);
const isPreviouslyChecked = selectedValues.includes(id);
if (isPreviouslyChecked) {
setSelectedValues(selectedValues.filter((val) => val !== item.id));
setSelectedValues(selectedValues.filter((val) => val !== id));
} else {
setSelectedValues([...selectedValues, item.id]);
setSelectedValues([...selectedValues, id]);
}
}}
checked={selectedValues.includes(item.id) ? 'on' : undefined}
data-test-subj={`solution${item.id}FilterOption`}
checked={selectedValues.includes(id) ? 'on' : undefined}
data-test-subj={`solution${id}FilterOption`}
>
{item.title}
{title}
</EuiFilterSelectItem>
))}
</div>