Skip to content

Commit 82a7e4c

Browse files
jacekkolasajacekkolasa
authored
data-ga tagging updates (#440)
* data-ga tagging updates * v2.9.5
1 parent 466d63c commit 82a7e4c

9 files changed

Lines changed: 51 additions & 22 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@netdata/netdata-ui",
3-
"version": "2.9.4",
3+
"version": "2.9.5",
44
"description": "netdata UI kit",
55
"main": "./lib/index.js",
66
"files": [

‎src/components/tableV2/components/columnVisibilityAction.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ColumnsMenu from "./columnsMenu" //todo refactor this as right now is use
66
const ColumnVisibilityAction = ({
77
alwaysEnabled,
88
columnPinning = {},
9+
dataGa,
910
enableColumnPinning,
1011
handleAction,
1112
id,
@@ -60,10 +61,12 @@ const ColumnVisibilityAction = ({
6061
disabled={(!alwaysEnabled && selectedRows?.length < 1) || disabled}
6162
background="elementBackground"
6263
selectedRows={selectedRows}
64+
dataGa={dataGa}
6365
{...rest}
6466
/>
6567
<ColumnsMenu
6668
columns={columns}
69+
dataGa={dataGa}
6770
isOpen={isOpen}
6871
onClose={onClose}
6972
parentRef={actionRef}

‎src/components/tableV2/components/columnsMenu.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
import React from "react"
22
import Drop from "src/components/drops/drop/index.js"
33
import Flex from "src/components/templates/flex"
4-
import { Text } from "src/components/typography"
4+
import { ListItem, Text } from "src/components/typography"
55
import { Checkbox } from "src/components/checkbox"
6-
import { ListItem } from "src/components/typography"
76

8-
const ColumnsMenuItem = ({ column, disabled }) => (
9-
<Flex alignItems="center" as={ListItem} justifyContent="between" padding={[1]}>
10-
<Checkbox
11-
checked={column.getIsVisible()}
12-
disabled={disabled}
13-
label={column.id}
14-
onChange={column.getToggleVisibilityHandler()}
15-
/>
16-
</Flex>
17-
)
7+
const ColumnsMenuItem = ({ column, dataGa, disabled }) => {
8+
const checked = column.getIsVisible()
9+
return (
10+
<Flex alignItems="center" as={ListItem} justifyContent="between" padding={[1]}>
11+
<Checkbox
12+
checked={checked}
13+
disabled={disabled}
14+
label={column.id}
15+
onChange={column.getToggleVisibilityHandler()}
16+
data-ga={`columns-menu::click-${checked ? "disable" : "enable"}-${column.id}-::${dataGa}`}
17+
/>
18+
</Flex>
19+
)
20+
}
1821

19-
const ColumnsMenu = ({ parentRef, isOpen, columns, onClose, pinnedColumns }) => {
22+
const ColumnsMenu = ({ dataGa, parentRef, isOpen, columns, onClose, pinnedColumns }) => {
2023
if (parentRef.current && isOpen)
2124
return (
2225
<Drop
@@ -53,12 +56,17 @@ const ColumnsMenu = ({ parentRef, isOpen, columns, onClose, pinnedColumns }) =>
5356
column
5457
>
5558
{pinnedColumns.map(pinnedColumn => (
56-
<ColumnsMenuItem column={pinnedColumn} disabled key={pinnedColumn.id} />
59+
<ColumnsMenuItem
60+
column={pinnedColumn}
61+
dataGa={dataGa}
62+
disabled
63+
key={pinnedColumn.id}
64+
/>
5765
))}
5866
</Flex>
5967
) : null}
6068
{columns.map(column => (
61-
<ColumnsMenuItem column={column} key={column.id} />
69+
<ColumnsMenuItem column={column} dataGa={dataGa} key={column.id} />
6270
))}
6371
</Flex>
6472
</Drop>

‎src/components/tableV2/components/dropdownFilter.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
import React from "react"
22
import Select from "src/components/select"
33

4-
const DropdownFilter = ({ onChange, value, options, isMulti, styles }) => (
4+
const DropdownFilter = ({
5+
"data-ga": dataGA,
6+
"data-testid": dataTestId,
7+
onChange,
8+
value,
9+
options,
10+
isMulti,
11+
styles,
12+
}) => (
513
<Select
14+
data-testid={dataTestId}
15+
data-ga={dataGA}
616
isMulti={isMulti}
717
options={options}
818
value={value}

‎src/components/tableV2/components/selectFilter.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DropdownFilter from "./dropdownFilter"
33

44
const all = { value: "all", label: "All" }
55

6-
const SelectFilter = ({ column, isMulti = false, options = [], tiny = false }) => {
6+
const SelectFilter = ({ column, isMulti = false, options = [], tiny = false, ...rest }) => {
77
const { setFilterValue, getFilterValue } = column
88
const filterValue = getFilterValue()
99

@@ -17,6 +17,7 @@ const SelectFilter = ({ column, isMulti = false, options = [], tiny = false }) =
1717
options={optionsWithExtraChoice}
1818
onChange={value => setFilterValue(value)}
1919
styles={tiny && { size: "tiny" }}
20+
{...rest}
2021
/>
2122
)
2223
}

‎src/components/tableV2/core/base-table.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ Table.SortingHeadCell = forwardRef(
179179
sortDirection,
180180
filter,
181181
align = "left",
182+
dataGa,
182183
"data-testid": dataTestid,
183184
"sortby-testid": sortbyTestid,
184185
styles = {},
@@ -223,6 +224,9 @@ Table.SortingHeadCell = forwardRef(
223224
position="relative"
224225
cursor="pointer"
225226
data-testid={sortbyTestid}
227+
data-ga={`${dataGa}::click-${sortDirection ? "ascending" : "descending"}-column-${
228+
props.id
229+
}`}
226230
>
227231
<Flex
228232
position="relative"

‎src/components/tableV2/core/fullTable.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const FullTable = ({
3535
<Table.Head data-testid={`netdata-table-head${testPrefix}`}>
3636
<Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
3737
<HeadCell
38+
dataGa={dataGa}
3839
enableResize={enableResize}
3940
enableSorting={enableSorting}
4041
headers={headers}

‎src/components/tableV2/features/globalControls.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ const GlobalControls = ({
1111
searchPlaceholder = "Search",
1212
searchValue,
1313
}) => {
14+
const wordsCount = searchValue?.split(" ").filter(x => !!x).length
1415
return (
1516
<Flex width="100%" zIndex={10} background="mainBackground" padding={[0, 0, 4]}>
1617
{handleSearch && (
1718
<Flex width={{ max: 100, base: "40%" }}>
1819
<SearchInput
1920
data-testid="table-global-search-filter"
20-
data-ga={`${dataGa}::search::table-filter`}
21+
data-ga={`${dataGa}::search-${wordsCount}-words::table-filter`}
2122
defaultValue={searchValue}
2223
iconRight={<Icon name="magnify" color="textLite" />}
2324
onChange={debounce(300, e => {

‎src/components/tableV2/netdataTable.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
//TODO refactor bulk action and row action to single function to decrease repeatability
2-
import React, { useEffect, useState, useCallback, useRef } from "react"
2+
import React, { useCallback, useEffect, useRef, useState } from "react"
33
import {
44
getCoreRowModel,
55
getFilteredRowModel,
@@ -9,8 +9,8 @@ import {
99
} from "@tanstack/react-table"
1010
import Flex from "src/components/templates/flex"
1111
import { Text } from "src/components/typography"
12-
import { IconComponents, Icon } from "src/components/icon"
13-
import { comparison, select, includesString } from "./helpers/filterFns"
12+
import { Icon, IconComponents } from "src/components/icon"
13+
import { comparison, includesString, select } from "./helpers/filterFns"
1414
import useColumns from "./features/useColumns"
1515
import makePagination from "./features/pagination"
1616
import useBulkActions from "./features/useBulkActions"
@@ -167,6 +167,7 @@ const NetdataTable = ({
167167
const actions = useBulkActions({
168168
bulkActions,
169169
columnPinning,
170+
dataGa,
170171
enableColumnVisibility,
171172
enableColumnPinning,
172173
selectedRows,

0 commit comments

Comments
 (0)