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

Jump to bottom

[Cloud Security] Rules Combo Box filters Custom component #175175

Merged
merged 14 commits into from
Jan 24, 2024
Merged

[Cloud Security] Rules Combo Box filters Custom component #175175

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
03fdd91
Rules API update -still dirty
animehart Jan 19, 2024
4a03581
api updates, added helper test
animehart Jan 19, 2024
11a0180
added custom component for Section and Rule number filter as well as FTR
animehart Jan 20, 2024
e220abc
FTR fix
animehart Jan 21, 2024
4a144ef
ftr fix
animehart Jan 21, 2024
390dfe9
ftr fix again
animehart Jan 21, 2024
f0aab5c
clean up + attempt to check ftr issue
animehart Jan 22, 2024
fad1882
update ftr
animehart Jan 22, 2024
7563a50
update comment
animehart Jan 22, 2024
05284d1
pr comments
animehart Jan 24, 2024
f704d7b
Merge branch 'main' into new-section-ruleNumber-component
animehart Jan 24, 2024
a41599d
pr comments
animehart Jan 24, 2024
5aaeffe
ui update
animehart Jan 24, 2024
28fa96d
pr comments and ftr fix
animehart Jan 24, 2024
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/cloud_security_posture/common/types/rules/v3.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { schema, TypeOf } from '@kbn/config-schema';
import { CSPM_POLICY_TEMPLATE, KSPM_POLICY_TEMPLATE } from '../../constants';

const DEFAULT_BENCHMARK_RULES_PER_PAGE = 25;
export const DEFAULT_BENCHMARK_RULES_PER_PAGE = 25;

// Since version 8.7.0
export const cspBenchmarkRuleMetadataSchema = schema.object({
Expand Down
3 changes: 1 addition & 2 deletions x-pack/plugins/cloud_security_posture/common/types/rules/v4.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import { schema, TypeOf } from '@kbn/config-schema';
import { BenchmarksCisId } from '../latest';
import { DEFAULT_BENCHMARK_RULES_PER_PAGE } from './v3';
export type {
cspBenchmarkRuleMetadataSchema,
CspBenchmarkRuleMetadata,
Expand All @@ -15,8 +16,6 @@ export type {
FindCspBenchmarkRuleResponse,
} from './v3';

const DEFAULT_BENCHMARK_RULES_PER_PAGE = 25;

export const findCspBenchmarkRuleRequestSchema = schema.object({
/**
* An Elasticsearch simple_query_string
Expand Down
3 changes: 1 addition & 2 deletions x-pack/plugins/cloud_security_posture/common/types/rules/v5.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* 2.0.
*/
import { schema, TypeOf } from '@kbn/config-schema';
import { DEFAULT_BENCHMARK_RULES_PER_PAGE } from './v3';

export type {
cspBenchmarkRuleMetadataSchema,
Expand All @@ -25,8 +26,6 @@ export type {
BulkActionBenchmarkRulesResponse,
} from './v4';

const DEFAULT_BENCHMARK_RULES_PER_PAGE = 25;

export const findCspBenchmarkRuleRequestSchema = schema.object({
Copy link
Contributor

Choose a reason for hiding this comment

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

can you highlight what is new here that requires a new version?

Copy link
Contributor Author

@animehart animehart Jan 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

just ruleNumber and section, previously its only string because we can only filter using 1 rule number and 1 cis section. now its an array because can filter using multiple rule number and cis section

/**
* An Elasticsearch simple_query_string
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/cloud_security_posture/public/common/component/multi_select_filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* 2.0.
*/

/* This code is based on MultiSelectFilter component from x-pack/plugins/cases/public/components/all_cases/multi_select_filter.tsx */
import React, { useState, useEffect } from 'react';
import { css } from '@emotion/react';
import type { EuiSelectableOption } from '@elastic/eui';
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/cloud_security_posture/public/pages/rules/rules_container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* 2.0.
*/
import React, { useState, useMemo } from 'react';
import compareVersions from 'compare-versions';
import { EuiPanel, EuiSpacer } from '@elastic/eui';
import { useParams } from 'react-router-dom';
import { buildRuleKey } from '../../../common/utils/rules_states';
Expand Down Expand Up @@ -146,7 +147,7 @@ export const RulesContainer = () => {
const cleanedSectionList = [...new Set(sectionList)].sort((a, b) => {
return a.localeCompare(b, 'en', { sensitivity: 'base' });
});
const cleanedRuleNumberList = [...new Set(ruleNumberList)];
const cleanedRuleNumberList = [...new Set(ruleNumberList)].sort(compareVersions);

const rulesPageData = useMemo(
() => getRulesPage(filteredRulesWithStates, status, error, rulesQuery),
Expand Down
35 changes: 23 additions & 12 deletions x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* 2.0.
*/
import React, { useEffect, useMemo, useState } from 'react';
import { css } from '@emotion/react';
import {
Criteria,
EuiButtonEmpty,
Expand All @@ -14,6 +15,8 @@ import {
useEuiTheme,
EuiSwitch,
EuiCheckbox,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { uniqBy } from 'lodash';
Expand Down Expand Up @@ -190,7 +193,7 @@ const getColumns = ({
}}
/>
),
width: '3%',
width: '40px',
Copy link
Contributor

Choose a reason for hiding this comment

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

40px seems too much for a 16x16 checkbox, can you add a screen shot?

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 have updated the screenshot 👍

sortable: false,
render: (rules, item: CspBenchmarkRulesWithStates) => {
return (
Expand Down Expand Up @@ -219,7 +222,7 @@ const getColumns = ({
name: i18n.translate('xpack.csp.rules.rulesTable.ruleNumberColumnLabel', {
defaultMessage: 'Rule Number',
}),
width: '10%',
width: '15%',
sortable: true,
},
{
Expand Down Expand Up @@ -248,20 +251,20 @@ const getColumns = ({
name: i18n.translate('xpack.csp.rules.rulesTable.cisSectionColumnLabel', {
defaultMessage: 'CIS Section',
}),
width: '15%',
width: '24%',
},
{
field: 'metadata.name',
name: i18n.translate('xpack.csp.rules.rulesTable.mutedColumnLabel', {
defaultMessage: 'Enabled',
}),
width: '5%',
width: '65px',
truncateText: true,
render: (name, rule: CspBenchmarkRulesWithStates) => {
const rulesObjectRequest = {
benchmark_id: rule?.metadata.benchmark.id,
benchmark_version: rule?.metadata.benchmark.version,
/* Rule number always exists* from 8.7 */
/* Rule number always exists from 8.7 */
rule_number: rule?.metadata.benchmark.rule_number!,
rule_id: rule?.metadata.id,
};
Expand All @@ -275,13 +278,21 @@ const getColumns = ({
}
};
return (
<EuiSwitch
className="eui-textTruncate"
checked={!isRuleMuted}
onChange={useChangeCspRuleStateFn}
data-test-subj={RULES_ROWS_ENABLE_SWITCH_BUTTON}
label=""
/>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiSwitch
className="eui-textTruncate"
checked={!isRuleMuted}
onChange={useChangeCspRuleStateFn}
data-test-subj={RULES_ROWS_ENABLE_SWITCH_BUTTON}
label=""
compressed={true}
css={css`
padding-left: 18px;
`}
Copy link
Contributor

Choose a reason for hiding this comment

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

why? can you add a screenshot? i think making the column the same width as the widget will be better

/>
</EuiFlexItem>
</EuiFlexGroup>
);
},
},
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export const RulesTableHeader = ({
defaultMessage: 'CIS Section',
}
)}
id={'section'}
id={'cis-section-multi-select-filter'}
onChange={(section) => {
setSelectedSection([...section?.selectedOptionKeys]);
onSectionChange(
Expand All @@ -167,7 +167,7 @@ export const RulesTableHeader = ({
defaultMessage: 'Rule Number',
}
)}
id={'rule-number'}
id={'rule-number-multi-select-filter'}
onChange={(ruleNumber) => {
setSelectedRuleNumber([...ruleNumber?.selectedOptionKeys]);
onRuleNumberChange(
Expand Down