Skip to content

Commit f408054

Browse files
djangolivogiorgis
djangoliv
and
ogiorgis
authored
Intermittent failures filter (#8760)
* feat: add materialUI lib * feat: add mui autocomplete checkboxes for product filters * feat: add mui autocomplete checkboxes for component filter --------- Co-authored-by: Olivier Giorgis <[email protected]>
1 parent 95a6b43 commit f408054

File tree

4 files changed

+234
-9
lines changed

4 files changed

+234
-9
lines changed

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
"@fortawesome/free-regular-svg-icons": "6.7.2",
1717
"@fortawesome/free-solid-svg-icons": "6.7.2",
1818
"@fortawesome/react-fontawesome": "0.2.2",
19+
"@mui/material": "7.1.1",
20+
"@mui/styled-engine-sc": "npm:@mui/styled-engine-sc@latest",
1921
"@types/react": "*",
2022
"@types/react-dom": "*",
2123
"ajv": "8.17.1",
@@ -70,7 +72,6 @@
7072
},
7173
"devDependencies": {
7274
"@babel/core": "7.26.10",
73-
"@babel/eslint-parser": "7.25.9",
7475
"@babel/eslint-parser": "7.26.10",
7576
"@babel/plugin-proposal-class-properties": "7.18.6",
7677
"@babel/plugin-syntax-dynamic-import": "7.8.3",
@@ -135,6 +136,7 @@
135136
"test:watch": "node ./node_modules/jest/bin/jest --watch"
136137
},
137138
"resolutions": {
138-
"cacache": "19.0.1"
139+
"cacache": "19.0.1",
140+
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
139141
}
140142
}

‎ui/css/react-table.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,3 +504,12 @@
504504
-ms-user-select: none;
505505
user-select: none;
506506
}
507+
508+
.ReactTable .MuiAutocomplete-inputRoot {
509+
max-height: 2em;
510+
}
511+
512+
.ReactTable .MuiAutocomplete-inputRoot .MuiOutlinedInput-input {
513+
border: none;
514+
height: 1em;
515+
}

‎ui/intermittent-failures/MainView.jsx

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
33
import PropTypes from 'prop-types';
44
import moment from 'moment';
55
import ReactTable from 'react-table-6';
6+
import Checkbox from '@mui/material/Checkbox';
7+
import TextField from '@mui/material/TextField';
8+
import Autocomplete from '@mui/material/Autocomplete';
9+
import Popper from '@mui/material/Popper';
610

711
import { bugsEndpoint } from '../helpers/url';
812
import { setUrlParam, getUrlParam } from '../helpers/location';
@@ -18,6 +22,16 @@ import withView from './View';
1822
import Layout from './Layout';
1923
import DateRangePicker from './DateRangePicker';
2024

25+
const CustomPopper = (props) => {
26+
return (
27+
<Popper
28+
{...props}
29+
style={{ width: '350px', textAlign: 'left' }}
30+
placement="bottom-start"
31+
/>
32+
);
33+
};
34+
2135
const MainView = (props) => {
2236
const {
2337
graphData,
@@ -32,6 +46,10 @@ const MainView = (props) => {
3246
updateAppState,
3347
} = props;
3448

49+
const [selectedFilter, setSelectedFilter] = React.useState({
50+
product: [],
51+
component: [],
52+
});
3553
const textFilter = (filter, row) => {
3654
if (getUrlParam(filter.id) !== filter.value) {
3755
setUrlParam(filter.id, filter.value);
@@ -43,6 +61,49 @@ const MainView = (props) => {
4361
}
4462
};
4563

64+
const autoCompleteFilter = ({ column, onChange }) => {
65+
const options = [...new Set(tableData.map((d) => d[column.id]))];
66+
options.sort();
67+
return (
68+
<Autocomplete
69+
slots={{ popper: CustomPopper }}
70+
size="small"
71+
multiple
72+
limitTags={0}
73+
id="checkboxes-tags-filter"
74+
options={options}
75+
onChange={(_event, values) => {
76+
setUrlParam(column.id, values);
77+
onChange(values);
78+
setSelectedFilter({ ...selectedFilter, [column.id]: values });
79+
}}
80+
disableCloseOnSelect
81+
defaultValue={selectedFilter[column.id]}
82+
fullWidth
83+
renderOption={(props, option, { selected }) => {
84+
const { key, ...optionProps } = props;
85+
return (
86+
<li key={key} {...optionProps}>
87+
<Checkbox style={{ marginRight: 8 }} checked={selected} />
88+
{option}
89+
</li>
90+
);
91+
}}
92+
renderInput={(params) => (
93+
<TextField
94+
style={{
95+
maxHeight: '0.9em',
96+
border: 'none',
97+
padding: '0',
98+
minWidth: '140px',
99+
}}
100+
{...params}
101+
/>
102+
)}
103+
/>
104+
);
105+
};
106+
46107
const columns = [
47108
{
48109
Header: 'Bug',
@@ -75,13 +136,29 @@ const MainView = (props) => {
75136
Header: 'Product',
76137
accessor: 'product',
77138
maxWidth: 100,
78-
filterMethod: (filter, row) => textFilter(filter, row),
139+
filterMethod: (filter, row) => {
140+
if (filter.value) {
141+
const regex = RegExp(filter.value.join('|'), 'i');
142+
if (regex.test(row.product)) {
143+
return row;
144+
}
145+
}
146+
},
147+
Filter: autoCompleteFilter,
79148
},
80149
{
81150
Header: 'Component',
82151
accessor: 'component',
83152
maxWidth: 100,
84-
filterMethod: (filter, row) => textFilter(filter, row),
153+
filterMethod: (filter, row) => {
154+
if (filter.value) {
155+
const regex = RegExp(filter.value.join('|'), 'i');
156+
if (regex.test(row.component)) {
157+
return row;
158+
}
159+
}
160+
},
161+
Filter: autoCompleteFilter,
85162
},
86163
{
87164
Header: 'Summary',
@@ -128,7 +205,22 @@ const MainView = (props) => {
128205
for (const header of ['product', 'component', 'summary', 'whiteboard']) {
129206
const param = getUrlParam(header);
130207
if (param) {
131-
filters.push({ id: header, value: getUrlParam(header) });
208+
if (header === 'product') {
209+
filters.push({ id: header, value: param.split(',') });
210+
if (selectedFilter.product.length === 0) {
211+
setSelectedFilter({ ...selectedFilter, product: param.split(',') });
212+
}
213+
} else if (header === 'component') {
214+
filters.push({ id: header, value: param.split(',') });
215+
if (selectedFilter.component.length === 0) {
216+
setSelectedFilter({
217+
...selectedFilter,
218+
component: param.split(','),
219+
});
220+
}
221+
} else {
222+
filters.push({ id: header, value: param });
223+
}
132224
}
133225
}
134226
return filters;

‎yarn.lock

Lines changed: 126 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1015,6 +1015,11 @@
10151015
dependencies:
10161016
regenerator-runtime "^0.14.0"
10171017

1018+
"@babel/runtime@^7.27.1", "@babel/runtime@^7.5.5":
1019+
version "7.27.6"
1020+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6"
1021+
integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==
1022+
10181023
"@babel/template@^7.25.9", "@babel/template@^7.26.9", "@babel/template@^7.27.0", "@babel/template@^7.3.3":
10191024
version "7.27.0"
10201025
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.0.tgz#b253e5406cc1df1c57dcd18f11760c2dbf40c0b4"
@@ -1583,6 +1588,93 @@
15831588
dependencies:
15841589
"@types/whatwg-streams" "^0.0.7"
15851590

1591+
"@mui/core-downloads-tracker@^7.1.1":
1592+
version "7.1.1"
1593+
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz#43532ccf57be19055eb20e7802508520293cf286"
1594+
integrity sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==
1595+
1596+
"@mui/[email protected]":
1597+
version "7.1.1"
1598+
resolved "https://registry.yarnpkg.com/@mui/material/-/material-7.1.1.tgz#5f75b25936925be14cb34abe0489cda82a6f8413"
1599+
integrity sha512-mTpdmdZCaHCGOH3SrYM41+XKvNL0iQfM9KlYgpSjgadXx/fEKhhvOktxm8++Xw6FFeOHoOiV+lzOI8X1rsv71A==
1600+
dependencies:
1601+
"@babel/runtime" "^7.27.1"
1602+
"@mui/core-downloads-tracker" "^7.1.1"
1603+
"@mui/system" "^7.1.1"
1604+
"@mui/types" "^7.4.3"
1605+
"@mui/utils" "^7.1.1"
1606+
"@popperjs/core" "^2.11.8"
1607+
"@types/react-transition-group" "^4.4.12"
1608+
clsx "^2.1.1"
1609+
csstype "^3.1.3"
1610+
prop-types "^15.8.1"
1611+
react-is "^19.1.0"
1612+
react-transition-group "^4.4.5"
1613+
1614+
"@mui/private-theming@^7.1.1":
1615+
version "7.1.1"
1616+
resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-7.1.1.tgz#c2ecc57a9b97fbfdd850430de500c42a0f2571fe"
1617+
integrity sha512-M8NbLUx+armk2ZuaxBkkMk11ultnWmrPlN0Xe3jUEaBChg/mcxa5HWIWS1EE4DF36WRACaAHVAvyekWlDQf0PQ==
1618+
dependencies:
1619+
"@babel/runtime" "^7.27.1"
1620+
"@mui/utils" "^7.1.1"
1621+
prop-types "^15.8.1"
1622+
1623+
"@mui/styled-engine-sc@npm:@mui/styled-engine-sc@latest":
1624+
version "7.1.1"
1625+
resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-7.1.1.tgz#44fb74e14f36a091a37b64da0cab5f2678dd1367"
1626+
integrity sha512-wUh1/aUMLQ1JAD33oL+ZFdx97JB8On1XLFtpsllJR5lNNMAkeLKj+ZDRB4Bm2VqPgGMuv3aVYFYtlJR2FFg73A==
1627+
dependencies:
1628+
"@babel/runtime" "^7.27.1"
1629+
"@types/hoist-non-react-statics" "^3.3.6"
1630+
csstype "^3.1.3"
1631+
hoist-non-react-statics "^3.3.2"
1632+
prop-types "^15.8.1"
1633+
1634+
"@mui/styled-engine@^7.1.1", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
1635+
version "7.1.1"
1636+
resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-7.1.1.tgz#44fb74e14f36a091a37b64da0cab5f2678dd1367"
1637+
integrity sha512-wUh1/aUMLQ1JAD33oL+ZFdx97JB8On1XLFtpsllJR5lNNMAkeLKj+ZDRB4Bm2VqPgGMuv3aVYFYtlJR2FFg73A==
1638+
dependencies:
1639+
"@babel/runtime" "^7.27.1"
1640+
"@types/hoist-non-react-statics" "^3.3.6"
1641+
csstype "^3.1.3"
1642+
hoist-non-react-statics "^3.3.2"
1643+
prop-types "^15.8.1"
1644+
1645+
"@mui/system@^7.1.1":
1646+
version "7.1.1"
1647+
resolved "https://registry.yarnpkg.com/@mui/system/-/system-7.1.1.tgz#eff52e597b0bfed8ecf2e973f4575ef737430727"
1648+
integrity sha512-Kj1uhiqnj4Zo7PDjAOghtXJtNABunWvhcRU0O7RQJ7WOxeynoH6wXPcilphV8QTFtkKaip8EiNJRiCD+B3eROA==
1649+
dependencies:
1650+
"@babel/runtime" "^7.27.1"
1651+
"@mui/private-theming" "^7.1.1"
1652+
"@mui/styled-engine" "^7.1.1"
1653+
"@mui/types" "^7.4.3"
1654+
"@mui/utils" "^7.1.1"
1655+
clsx "^2.1.1"
1656+
csstype "^3.1.3"
1657+
prop-types "^15.8.1"
1658+
1659+
"@mui/types@^7.4.3":
1660+
version "7.4.3"
1661+
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.4.3.tgz#b205ee3404db0478cd93227fc21967e2cb8630fe"
1662+
integrity sha512-2UCEiK29vtiZTeLdS2d4GndBKacVyxGvReznGXGr+CzW/YhjIX+OHUdCIczZjzcRAgKBGmE9zCIgoV9FleuyRQ==
1663+
dependencies:
1664+
"@babel/runtime" "^7.27.1"
1665+
1666+
"@mui/utils@^7.1.1":
1667+
version "7.1.1"
1668+
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-7.1.1.tgz#de315ec45ac9e16c637dcc2b32cd7912edb4e234"
1669+
integrity sha512-BkOt2q7MBYl7pweY2JWwfrlahhp+uGLR8S+EhiyRaofeRYUWL2YKbSGQvN4hgSN1i8poN0PaUiii1kEMrchvzg==
1670+
dependencies:
1671+
"@babel/runtime" "^7.27.1"
1672+
"@mui/types" "^7.4.3"
1673+
"@types/prop-types" "^15.7.14"
1674+
clsx "^2.1.1"
1675+
prop-types "^15.8.1"
1676+
react-is "^19.1.0"
1677+
15861678
"@nicolo-ribaudo/[email protected]":
15871679
version "5.1.1-v1"
15881680
resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -1715,6 +1807,11 @@
17151807
qs "^6.10.1"
17161808
url-parse "^1.5.3"
17171809

1810+
"@popperjs/core@^2.11.8":
1811+
version "2.11.8"
1812+
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
1813+
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
1814+
17181815
"@puppeteer/[email protected]":
17191816
version "2.7.1"
17201817
resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-2.7.1.tgz#6df07e95d8e22239b77599f3ceaef4041b933e62"
@@ -2042,7 +2139,7 @@
20422139
dependencies:
20432140
"@types/node" "*"
20442141

2045-
"@types/hoist-non-react-statics@^3.3.1":
2142+
"@types/hoist-non-react-statics@^3.3.1", "@types/hoist-non-react-statics@^3.3.6":
20462143
version "3.3.6"
20472144
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz#6bba74383cdab98e8db4e20ce5b4a6b98caed010"
20482145
integrity sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==
@@ -2129,6 +2226,11 @@
21292226
dependencies:
21302227
undici-types "~6.20.0"
21312228

2229+
"@types/prop-types@^15.7.14":
2230+
version "15.7.15"
2231+
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
2232+
integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
2233+
21322234
"@types/qs@*":
21332235
version "6.9.18"
21342236
resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.18.tgz#877292caa91f7c1b213032b34626505b746624c2"
@@ -2144,6 +2246,11 @@
21442246
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.4.tgz#bedba97f9346bd4c0fe5d39e689713804ec9ac89"
21452247
integrity sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==
21462248

2249+
"@types/react-transition-group@^4.4.12":
2250+
version "4.4.12"
2251+
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
2252+
integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
2253+
21472254
"@types/react@*":
21482255
version "19.0.12"
21492256
resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.12.tgz#338b3f7854adbb784be454b3a83053127af96bd3"
@@ -3400,7 +3507,7 @@ clsx@^1.0.4:
34003507
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
34013508
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
34023509

3403-
clsx@^2.0.0:
3510+
clsx@^2.0.0, clsx@^2.1.1:
34043511
version "2.1.1"
34053512
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
34063513
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -3772,7 +3879,7 @@ cssstyle@^2.3.0:
37723879
dependencies:
37733880
cssom "~0.3.6"
37743881

3775-
[email protected], csstype@^3.0.2:
3882+
[email protected], csstype@^3.0.2, csstype@^3.1.3:
37763883
version "3.1.3"
37773884
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
37783885
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -4170,7 +4277,7 @@ dom-helpers@^3.4.0:
41704277
dependencies:
41714278
"@babel/runtime" "^7.1.2"
41724279

4173-
dom-helpers@^5.1.3:
4280+
dom-helpers@^5.0.1, dom-helpers@^5.1.3:
41744281
version "5.2.1"
41754282
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
41764283
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -8564,6 +8671,11 @@ react-is@^18.0.0:
85648671
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
85658672
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
85668673

8674+
react-is@^19.1.0:
8675+
version "19.1.0"
8676+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.0.tgz#805bce321546b7e14c084989c77022351bbdd11b"
8677+
integrity sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==
8678+
85678679
[email protected]:
85688680
version "4.5.3"
85698681
resolved "https://registry.yarnpkg.com/react-lazylog/-/react-lazylog-4.5.3.tgz#289e24995b5599e75943556ac63f5e2c04d0001e"
@@ -8725,6 +8837,16 @@ react-transition-group@^3.0.0:
87258837
prop-types "^15.6.2"
87268838
react-lifecycles-compat "^3.0.4"
87278839

8840+
react-transition-group@^4.4.5:
8841+
version "4.4.5"
8842+
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
8843+
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
8844+
dependencies:
8845+
"@babel/runtime" "^7.5.5"
8846+
dom-helpers "^5.0.1"
8847+
loose-envify "^1.4.0"
8848+
prop-types "^15.6.2"
8849+
87288850
react-virtualized@^9.21.0:
87298851
version "9.22.6"
87308852
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.6.tgz#3ae2aa69eca61cf3af332e2f9d6b4aa5638786d5"

0 commit comments

Comments
 (0)