Skip to content

Commit 0aaf7a8

Browse files
novykhnovykh
committed
v5.6.0
1 parent a006d19 commit 0aaf7a8

17 files changed

+582
-64
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@netdata/charts",
3-
"version": "5.5.12",
3+
"version": "5.6.0",
44
"description": "Netdata frontend SDK and chart utilities",
55
"main": "dist/index.js",
66
"module": "dist/es6/index.js",
@@ -22,7 +22,7 @@
2222
"clean": "rimraf lib dist es coverage",
2323
"prepublishOnly": "yarn clean && yarn build",
2424
"cp-cloud": "cp -R ./dist ../cloud-frontend/node_modules/@netdata/charts/",
25-
"to-cloud": "yarn build:cjs && yarn cp-cloud",
25+
"to-cloud": "yarn build:cjs && yarn build:es6 && yarn cp-cloud",
2626
"storybook": "storybook dev -p 6006",
2727
"build-storybook": "storybook build"
2828
},

‎src/components/filterToolbox/dropdownTable.js

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const defaultFilterSelectedCount = arr => arr
3737
const Dropdown = ({
3838
getOptions,
3939
onItemClick,
40-
close,
4140
columns,
4241
sortBy,
4342
onSortByChange,
@@ -51,6 +50,8 @@ const Dropdown = ({
5150
emptyMessage,
5251
title,
5352
filterSelectedCount = defaultFilterSelectedCount,
53+
sidebar,
54+
totalSelected,
5455
...rest
5556
}) => {
5657
const items = useMemo(getOptions, [getOptions])
@@ -78,27 +79,30 @@ const Dropdown = ({
7879
flex
7980
{...rest}
8081
>
81-
<Table
82-
title={title}
83-
background="dropdownTable"
84-
enableResizing
85-
enableSorting
86-
enableSelection
87-
dataColumns={columns}
88-
data={items}
89-
onRowSelected={onItemClick}
90-
onSearch={noop}
91-
meta={tableMeta}
92-
sortBy={sortBy}
93-
rowSelection={rowSelection}
94-
onSortingChange={onSortByChange}
95-
expanded={expanded}
96-
onExpandedChange={onExpandedChange}
97-
enableSubRowSelection={enableSubRowSelection}
98-
width={{ base: 250, max: "80vw" }}
99-
// bulkActions={bulkActions}
100-
// rowActions={rowActions}
101-
/>
82+
<Flex>
83+
<Table
84+
title={title}
85+
background="dropdownTable"
86+
enableResizing
87+
enableSorting
88+
enableSelection
89+
dataColumns={columns}
90+
data={items}
91+
onRowSelected={onItemClick}
92+
onSearch={noop}
93+
meta={tableMeta}
94+
sortBy={sortBy}
95+
rowSelection={rowSelection}
96+
onSortingChange={onSortByChange}
97+
expanded={expanded}
98+
onExpandedChange={onExpandedChange}
99+
enableSubRowSelection={enableSubRowSelection}
100+
width={{ base: 250, max: "80vw" }}
101+
// bulkActions={bulkActions}
102+
// rowActions={rowActions}
103+
/>
104+
{sidebar}
105+
</Flex>
102106

103107
<Flex
104108
padding={[2]}
@@ -145,7 +149,7 @@ const Dropdown = ({
145149
<TextSmall color="warningText">{emptyMessage}</TextSmall>
146150
)}
147151
</Flex>
148-
{totals && <Totals selected={value} {...totals} />}
152+
{totals && <Totals selected={value} totalSelected={totalSelected} {...totals} />}
149153
</Flex>
150154
</Container>
151155
)
@@ -182,6 +186,8 @@ const DropdownTable = ({
182186
resourceName,
183187
title,
184188
filterSelectedCount,
189+
sidebar,
190+
totalSelected,
185191
...rest
186192
}) => {
187193
const [isOpen, setIsOpen] = useState(false)
@@ -234,6 +240,8 @@ const DropdownTable = ({
234240
emptyMessage,
235241
title,
236242
filterSelectedCount,
243+
sidebar,
244+
totalSelected,
237245
}}
238246
value={value}
239247
onOpen={() => setIsOpen(true)}
@@ -243,7 +251,17 @@ const DropdownTable = ({
243251
<Label
244252
data-value={value.join("|") || `${resourceName} all-selected`}
245253
secondaryLabel={secondaryLabel}
246-
label={label || <Totals selected={value} {...totals} resourceName={resourceName} teaser />}
254+
label={
255+
label || (
256+
<Totals
257+
selected={value}
258+
totalSelected={totalSelected}
259+
{...totals}
260+
resourceName={resourceName}
261+
teaser
262+
/>
263+
)
264+
}
247265
title={tooltipProps.heading}
248266
tooltipProps={tooltipProps}
249267
{...labelProps}

‎src/components/filterToolbox/filterGroup.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react"
2+
import { TextSmall, Flex, Button, Pill } from "@netdata/netdata-ui"
3+
import { useAttributeValue } from "@/components/provider"
4+
5+
const FilterGroup = ({
6+
setSelected,
7+
testIdPrefix,
8+
param,
9+
children,
10+
border = { side: "bottom", color: "borderSecondary" },
11+
title = "Filters",
12+
...rest
13+
}) => {
14+
const selected = useAttributeValue(param)
15+
16+
return (
17+
<Flex
18+
data-testid={`${testIdPrefix}-filter`}
19+
column
20+
padding={[2, 2, 0]}
21+
border={border}
22+
{...rest}
23+
>
24+
<Flex justifyContent="between" gap={2} cursor="pointer">
25+
<Flex alignItems="center" gap={1} height={4.5}>
26+
<Flex alignItems="center" gap={0.5}>
27+
<TextSmall strong>{title}</TextSmall>
28+
</Flex>
29+
{!!selected?.length && (
30+
<Pill flavour="neutral" hollow data-testid={`${testIdPrefix}-selected-count`} tiny>
31+
{selected?.length}
32+
</Pill>
33+
)}
34+
</Flex>
35+
{!!selected?.length && (
36+
<Button
37+
padding={[0]}
38+
flavour="borderless"
39+
onClick={e => {
40+
e.stopPropagation()
41+
setSelected([])
42+
}}
43+
data-testid={`${testIdPrefix}-filter-resetAll`}
44+
label="Reset"
45+
small
46+
/>
47+
)}
48+
</Flex>
49+
{children}
50+
</Flex>
51+
)
52+
}
53+
54+
export default FilterGroup

‎src/components/filterToolbox/nodes/checkboxes.js

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import React from "react"
2+
import noop from "lodash/noop"
3+
import styled from "styled-components"
4+
import {
5+
Flex,
6+
MenuDropdown as Checkboxes,
7+
TextSmall,
8+
Icon,
9+
Checkbox,
10+
getRgbColor,
11+
getColor,
12+
Pill,
13+
} from "@netdata/netdata-ui"
14+
import Shortener from "@/components/helpers/shortener"
15+
16+
const capitalize = s => (s ? s[0].toUpperCase() + s.slice(1) : "Unknown")
17+
18+
const defaultItemsProps = {
19+
head: { textColor: "textLite" },
20+
row: { textColor: "text" },
21+
}
22+
const getBackground = ({ theme }) => {
23+
const { name } = theme
24+
25+
const background =
26+
name === "Dark" ? getRgbColor(["green", "green20"]) : getRgbColor(["green", "green170"])
27+
28+
return background({ theme })
29+
}
30+
31+
export const ItemContainer = styled(Flex).attrs(props => ({
32+
as: "li",
33+
role: "option",
34+
padding: [1, 2],
35+
gap: 1,
36+
justifyContent: "between",
37+
width: "100%",
38+
...props,
39+
}))`
40+
cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
41+
opacity: ${({ stale, disabled, selected }) => ((stale || disabled) && !selected ? 0.6 : 1)};
42+
align-items: ${({ alignItems }) => alignItems || "center"};
43+
${({ multi, selected, theme }) =>
44+
!multi &&
45+
selected &&
46+
`
47+
background-color: ${getBackground({ theme })};
48+
`}
49+
${({ multi, selected, disabled, theme }) =>
50+
!multi &&
51+
!selected &&
52+
!disabled &&
53+
`
54+
&:hover {
55+
background-color: ${getColor("secondaryHighlight")({ theme })};
56+
}
57+
`}
58+
`
59+
60+
const DefaultItem = ({ item, onItemClick, itemProps, ...rest }) => {
61+
const {
62+
value,
63+
disabled,
64+
onClick,
65+
label,
66+
selected,
67+
excluded,
68+
indeterminate,
69+
textColor,
70+
iconName,
71+
count,
72+
actualCount,
73+
pill,
74+
level = 0,
75+
stale,
76+
...restItem
77+
} = item
78+
const { capitalized } = itemProps
79+
80+
const { multi } = itemProps
81+
82+
const isDisabled = disabled || (!multi && selected)
83+
84+
const onSelect = event => {
85+
if (disabled) return
86+
if (onClick) onClick(event)
87+
onItemClick({ value, label, checked: !selected, item })
88+
}
89+
90+
return (
91+
<ItemContainer
92+
aria-selected={selected}
93+
selected={selected}
94+
disabled={isDisabled}
95+
stale={count === 0 || count === "0" || stale || excluded}
96+
{...restItem}
97+
{...rest}
98+
{...itemProps}
99+
data-testid={`${itemProps.testIdPrefix}-filters-item`}
100+
>
101+
<Flex
102+
gap={2}
103+
alignItems="center"
104+
padding={[0, 0, 0, level * 4]}
105+
width="100%"
106+
overflow="hidden"
107+
>
108+
{multi ? (
109+
<Checkbox
110+
data-testid={`${itemProps.testIdPrefix}-filters-checkbox-${label}`}
111+
checked={selected}
112+
disabled={isDisabled}
113+
indeterminate={indeterminate}
114+
onChange={onSelect}
115+
label={
116+
<Flex gap={1} alignItems="center" width="100%">
117+
{iconName && <Icon name={iconName} size="small" color="textLite" />}
118+
<Shortener
119+
Component={TextSmall}
120+
text={
121+
typeof label === "string" && capitalized ? capitalize(label) : label.toString()
122+
}
123+
color={textColor}
124+
/>
125+
</Flex>
126+
}
127+
/>
128+
) : (
129+
<Flex
130+
flex
131+
gap={1}
132+
padding={[0, 1]}
133+
alignItems="center"
134+
onClick={selected ? noop : onSelect}
135+
data-testid={`${itemProps.testIdPrefix}-filters-item-${label}`}
136+
>
137+
<Shortener
138+
Component={TextSmall}
139+
text={typeof label === "string" && capitalized ? capitalize(label) : label.toString()}
140+
color={textColor}
141+
/>
142+
</Flex>
143+
)}
144+
</Flex>
145+
{(!isNaN(count) || /%/.test(count || "") || pill) && (
146+
<Pill
147+
flavour="neutral"
148+
hollow
149+
data-testid={`${itemProps.testIdPrefix}-filters-${label}-count`}
150+
size="small"
151+
>
152+
{!!actualCount && <TextSmall>{actualCount} &#8835;&nbsp;</TextSmall>}
153+
{(pill || count).toString()}
154+
</Pill>
155+
)}
156+
</ItemContainer>
157+
)
158+
}
159+
160+
export const CheckboxesContainer = styled(Checkboxes).attrs(props => ({
161+
background: "transparent",
162+
hideShadow: true,
163+
height: { max: "300px" },
164+
width: { max: "600px" },
165+
overflow: "auto",
166+
...props,
167+
}))`
168+
-webkit-user-select: none;
169+
-ms-user-select: none;
170+
user-select: none;
171+
`
172+
173+
const identity = i => i
174+
175+
export const checkboxesDefaultProps = {
176+
itemProps: { padding: [1, 0.5], multi: true },
177+
itemsProps: defaultItemsProps,
178+
Item: DefaultItem,
179+
getValue: identity,
180+
getLabel: identity,
181+
}

0 commit comments

Comments
 (0)