@splunk/react-field-summary 28.2.2 → 28.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummaryList_No_Fields.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummaryList_No_Fields_Found_Matching.png +0 -0
- package/CHANGELOG.external.md +13 -0
- package/components/FieldSummary/FieldStats.js +2 -2
- package/components/FieldSummary/FieldStats.js.map +2 -2
- package/components/FieldSummary/FieldSummary.js +6 -4
- package/components/FieldSummary/FieldSummary.js.map +2 -2
- package/components/FieldSummary/FieldSummaryTable.js +4 -2
- package/components/FieldSummary/FieldSummaryTable.js.map +2 -2
- package/components/FieldSummary/index.js +6 -4
- package/components/FieldSummary/index.js.map +2 -2
- package/components/FieldSummaryList/FieldSummaryList.js +60 -59
- package/components/FieldSummaryList/FieldSummaryList.js.map +2 -2
- package/components/FieldSummaryList/index.js +60 -59
- package/components/FieldSummaryList/index.js.map +2 -2
- package/index.js +60 -59
- package/index.js.map +2 -2
- package/package.json +6 -6
|
Binary file
|
package/.loki/reference/chrome_a4_react_field_summary_FieldSummaryList_No_Fields_Found_Matching.png
ADDED
|
Binary file
|
package/CHANGELOG.external.md
CHANGED
|
@@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file.
|
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
# 28.3.0 (2025-11-12)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @splunk/react-field-summary
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file.
|
|
17
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
19
|
+
|
|
7
20
|
## 28.2.2 (2025-10-15)
|
|
8
21
|
|
|
9
22
|
|
|
@@ -88,7 +88,7 @@ var Abbreviate = ({ value }) => /* @__PURE__ */ react_default.createElement("spa
|
|
|
88
88
|
var Abbreviate_default = Abbreviate;
|
|
89
89
|
|
|
90
90
|
// src/components/FieldSummary/FieldStats.tsx
|
|
91
|
-
var
|
|
91
|
+
var StatsList = styled_components_default.dl`
|
|
92
92
|
color: ${themes_exports.variables.contentColorDefault};
|
|
93
93
|
margin-top: ${themes_exports.variables.spacingSmall};
|
|
94
94
|
margin-bottom: ${themes_exports.variables.spacingSmall};
|
|
@@ -106,6 +106,6 @@ var DL = styled_components_default.dl`
|
|
|
106
106
|
}
|
|
107
107
|
`;
|
|
108
108
|
var Stat = ({ label, value }) => /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement("dt", null, label), /* @__PURE__ */ react_default.createElement("dd", null, /* @__PURE__ */ react_default.createElement(Abbreviate_default, { value })));
|
|
109
|
-
var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(
|
|
109
|
+
var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(StatsList, null, /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Min"), value: min }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Max"), value: max }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Avg"), value: mean }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Std Dev"), value: stdev }));
|
|
110
110
|
var FieldStats_default = FieldStats;
|
|
111
111
|
//# sourceMappingURL=FieldStats.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/FieldSummary/FieldStats.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/themes", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/ui-utils/format", "../../src/components/FieldSummary/Abbreviate.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { variables } from '@splunk/themes';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport Abbreviate from './Abbreviate';\n\nconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACA9D,IAAM,eAAe,IAAI,KAAK,aAAa,EAAE;AAEpD,IAAM,aAAa,CAAC,EAAE,MAAM,MACxB,4CAAC,UAAK,OAAO,aAAa,KAAK,SAAI,iCAAiB,KAAK,CAAE;AAG/D,IAAO,qBAAQ;;;ANDf,IAAM,
|
|
4
|
+
"sourcesContent": ["import React, { ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { variables } from '@splunk/themes';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport Abbreviate from './Abbreviate';\n\nconst StatsList = styled.dl`\n color: ${variables.contentColorDefault};\n margin-top: ${variables.spacingSmall};\n margin-bottom: ${variables.spacingSmall};\n dt {\n display: inline-block;\n font-weight: bold;\n }\n dt::after {\n content: ':';\n }\n dd {\n display: inline-block;\n margin-left: ${variables.spacingXSmall};\n margin-right: ${variables.spacingSmall};\n }\n`;\n\nexport interface FieldStatsProps {\n mean?: number;\n min?: number;\n max?: number;\n stdev?: number;\n}\n\nconst Stat = ({ label, value }: { label: string; value: number }): ReactElement => (\n <>\n <dt>{label}</dt>\n <dd>\n <Abbreviate value={value} />\n </dd>\n </>\n);\n\nconst FieldStats: React.FC<FieldStatsProps> = ({ mean, min, max, stdev }: FieldStatsProps) =>\n typeof mean !== 'number' ? null : (\n <StatsList>\n <Stat label={_('Min')} value={min} />\n <Stat label={_('Max')} value={max} />\n <Stat label={_('Avg')} value={mean} />\n <Stat label={_('Std Dev')} value={stdev} />\n </StatsList>\n );\n\nexport default FieldStats;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { ReactElement } from 'react';\nimport { abbreviateNumber } from '@splunk/ui-utils/format';\n\nexport const formatNumber = new Intl.NumberFormat().format;\n\nconst Abbreviate = ({ value }: { value: number }): ReactElement => (\n <span title={formatNumber(value)}>{abbreviateNumber(value)}</span>\n);\n\nexport default Abbreviate;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACA9D,IAAM,eAAe,IAAI,KAAK,aAAa,EAAE;AAEpD,IAAM,aAAa,CAAC,EAAE,MAAM,MACxB,4CAAC,UAAK,OAAO,aAAa,KAAK,SAAI,iCAAiB,KAAK,CAAE;AAG/D,IAAO,qBAAQ;;;ANDf,IAAM,YAAY,0BAAO;AAAA,aACZ,yBAAU,mBAAmB;AAAA,kBACxB,yBAAU,YAAY;AAAA,qBACnB,yBAAU,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUpB,yBAAU,aAAa;AAAA,wBACtB,yBAAU,YAAY;AAAA;AAAA;AAW9C,IAAM,OAAO,CAAC,EAAE,OAAO,MAAM,MACzB,0EACI,4CAAC,YAAI,KAAM,GACX,4CAAC,YACG,4CAAC,sBAAW,OAAc,CAC9B,CACJ;AAGJ,IAAM,aAAwC,CAAC,EAAE,MAAM,KAAK,KAAK,MAAM,MACnE,OAAO,SAAS,WAAW,OACvB,4CAAC,iBACG,4CAAC,QAAK,WAAO,gBAAE,KAAK,GAAG,OAAO,KAAK,GACnC,4CAAC,QAAK,WAAO,gBAAE,KAAK,GAAG,OAAO,KAAK,GACnC,4CAAC,QAAK,WAAO,gBAAE,KAAK,GAAG,OAAO,MAAM,GACpC,4CAAC,QAAK,WAAO,gBAAE,SAAS,GAAG,OAAO,OAAO,CAC7C;AAGR,IAAO,qBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
|
@@ -239,7 +239,7 @@ var Actions = ({ field, actions, selected, onActionClicked }) => actions && acti
|
|
|
239
239
|
var FieldActions_default = Actions;
|
|
240
240
|
|
|
241
241
|
// src/components/FieldSummary/FieldStats.tsx
|
|
242
|
-
var
|
|
242
|
+
var StatsList = styled_components_default.dl`
|
|
243
243
|
color: ${themes_exports.variables.contentColorDefault};
|
|
244
244
|
margin-top: ${themes_exports.variables.spacingSmall};
|
|
245
245
|
margin-bottom: ${themes_exports.variables.spacingSmall};
|
|
@@ -257,7 +257,7 @@ var DL = styled_components_default.dl`
|
|
|
257
257
|
}
|
|
258
258
|
`;
|
|
259
259
|
var Stat = ({ label, value }) => /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement("dt", null, label), /* @__PURE__ */ react_default.createElement("dd", null, /* @__PURE__ */ react_default.createElement(Abbreviate_default, { value })));
|
|
260
|
-
var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(
|
|
260
|
+
var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(StatsList, null, /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Min"), value: min }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Max"), value: max }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Avg"), value: mean }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Std Dev"), value: stdev }));
|
|
261
261
|
var FieldStats_default = FieldStats;
|
|
262
262
|
|
|
263
263
|
// esm-externals:@splunk/react-ui/Switch
|
|
@@ -344,20 +344,22 @@ var FieldSummaryTable = ({
|
|
|
344
344
|
selected: selected.indexOf(value) >= 0,
|
|
345
345
|
appearance: "checkbox",
|
|
346
346
|
onClick: onFieldValueSelected,
|
|
347
|
-
labelledBy: fieldValueId
|
|
347
|
+
labelledBy: fieldValueId,
|
|
348
|
+
"aria-label": (0, i18n_exports._)(`Select ${value}`)
|
|
348
349
|
}
|
|
349
350
|
)), /* @__PURE__ */ react_default.createElement(ValueCell, { title: value }, onFieldValueClicked ? /* @__PURE__ */ react_default.createElement(
|
|
350
351
|
Link_default,
|
|
351
352
|
{
|
|
352
353
|
role: "button",
|
|
353
354
|
appearance: "standalone",
|
|
355
|
+
"aria-label": (0, i18n_exports._)(value),
|
|
354
356
|
onClick: (e) => {
|
|
355
357
|
e.preventDefault();
|
|
356
358
|
onFieldValueClicked(e, { value });
|
|
357
359
|
}
|
|
358
360
|
},
|
|
359
361
|
/* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)
|
|
360
|
-
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { style: { width: `${percent}%` } }))));
|
|
362
|
+
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { "data-test": "percentage-bar", style: { width: `${percent}%` } }))));
|
|
361
363
|
})));
|
|
362
364
|
};
|
|
363
365
|
var FieldSummaryTable_default = FieldSummaryTable;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/FieldSummary/FieldSummary.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/themes", "esm-externals:@splunk/react-icons/enterprise/Number", "esm-externals:@splunk/react-icons/enterprise/String", "../../src/components/FieldList/FieldList.tsx", "esm-externals:@splunk/ui-utils/format", "../../src/components/FieldSummary/Abbreviate.tsx", "esm-externals:@splunk/react-ui/Link", "../../src/components/FieldSummary/FieldActions.tsx", "../../src/components/FieldSummary/FieldStats.tsx", "esm-externals:@splunk/react-ui/Switch", "../../src/components/FieldSummary/FieldSummaryTable.tsx", "esm-externals:@splunk/react-icons/enterprise/Caret", "esm-externals:@splunk/react-ui/Menu", "esm-externals:@splunk/react-ui/Button", "esm-externals:@splunk/react-ui/ButtonGroup", "esm-externals:@splunk/react-ui/Dropdown", "../../src/components/FieldSummary/SplitButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { FC, SyntheticEvent, ReactElement, useCallback, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport { variables } from '@splunk/themes';\n\nimport { isNumeric } from '../FieldList';\nimport Abbreviate, { formatNumber } from './Abbreviate';\nimport FieldActions, { Action } from './FieldActions';\n\nimport FieldStats, { FieldStatsProps } from './FieldStats';\nimport FieldSummaryTable, { FieldValue } from './FieldSummaryTable';\nimport SplitButton from './SplitButton';\n\nexport { FieldValue };\n\nexport interface FieldData extends FieldStatsProps {\n name: string;\n count: number;\n distinctCount: number;\n numericCount?: number;\n modes: FieldValue[];\n}\n\nexport type ActionsForField = (field: FieldData, defaultActions: Action[]) => Action[];\n\nconst defaultActionsForField = (field: FieldData, actionsForField?: ActionsForField): Action[] => {\n const actions = [];\n\n if (isNumeric(field)) {\n actions.push({ name: 'avgByTime', label: _('Average over time') });\n actions.push({ name: 'maxByTime', label: _('Maximum value over time') });\n actions.push({ name: 'minByTime', label: _('Minimum value over time') });\n }\n\n actions.push({ name: 'topValues', label: _('Top values') });\n actions.push({ name: 'topValuesByTime', label: _('Top values by time') });\n actions.push({ name: 'rareValues', label: _('Rare values') });\n actions.push({ name: 'allValues', label: _('Events with this field') });\n\n actions.push({\n name: 'includeValues',\n label: _('Include Selected'),\n requiresSelection: true,\n });\n actions.push({\n name: 'excludeValues',\n label: _('Exclude Selected'),\n requiresSelection: true,\n });\n\n return actionsForField ? actionsForField(field, actions) : actions;\n};\n\nexport interface FieldSummaryOptions {\n /** The total number of events that the query saw */\n eventCount?: number;\n\n /** Augment / replace the default actions available in the field summary\n *\n * Example Action:\n * ```\n * { \"name\": \"actionName\", \"label\": \"Action label\", requiresSelection: false }\n * ```\n */\n actionsForField?: (field: FieldData, defaultActions: Action[]) => Action[];\n\n /** Event triggered by the user clicking on one of the actions available in the field summary. */\n onActionClicked?: (\n e: SyntheticEvent,\n data: { action: string; field: string; selected: string[] }\n ) => void;\n\n /** Event triggered by the user clicking on one of the field values in the field summary. */\n onFieldValueClicked?: (e: SyntheticEvent, data: { field: string; value: string }) => void;\n}\n\nexport interface FieldSummaryProps extends FieldSummaryOptions {\n /** The field data to show summaries for\n *\n * Example Field:\n * ```\n * {\"name\": \"METHOD\", \"count\": 123456, \"distinctCount\": 2, \"numericCount\": 0,\n * \"mean\": null, \"min\": null, \"max\": null, \"stdev\": null,\n * \"modes\": [\n * { \"value\": \"GET\", \"count\": 113456 },\n * { \"value\": \"POST\", \"count\": 10000 }\n * ]}\n * ```\n */\n field: FieldData;\n}\n\nconst Name = styled.h2`\n font-size: ${variables.fontSizeXLarge};\n margin: ${variables.spacingSmall} 0;\n text-overflow: ellipsis;\n overflow: hidden;\n`;\n\nconst StyledCoverage = styled.div`\n color: ${variables.contentColorDefault};\n margin-bottom: ${variables.spacingSmall};\n`;\n\nconst TableAndActions = styled.div`\n display: flex;\n\n & > div:nth-child(1) {\n flex: 1 1;\n table {\n width: 100%;\n }\n }\n\n & > div:nth-child(2) {\n width: 150px;\n }\n`;\n\nconst Coverage = ({\n distinctCount,\n count,\n eventCount,\n}: {\n distinctCount: number;\n count: number;\n eventCount?: number;\n}): ReactElement => {\n const content = [<Abbreviate key=\"values\" value={distinctCount} />, _(' values')];\n if (eventCount) {\n content.push(_(' in '));\n content.push(`${formatNumber((count / eventCount) * 100)}%`);\n content.push(_(' of '));\n content.push(<Abbreviate key=\"events\" value={eventCount} />);\n content.push(_(' events'));\n }\n return <StyledCoverage>{content}</StyledCoverage>;\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n field,\n eventCount,\n actionsForField,\n onActionClicked,\n onFieldValueClicked,\n ...rest\n}: FieldSummaryProps) => {\n const [selected, setSelected] = useState<string[]>([]);\n const handleSelectValue = useCallback(\n (_event: React.MouseEvent<HTMLButtonElement>, data: { selected: boolean; value?: string }) => {\n setSelected(prev => {\n const filtered = prev.filter((x: string) => x !== data.value);\n if (prev.length !== filtered.length) {\n return filtered;\n }\n return [...filtered, data.value];\n });\n },\n []\n );\n\n const actions = useMemo(() => defaultActionsForField(field, actionsForField), [field, actionsForField]);\n const selectionActions = useMemo(() => actions.filter(action => action.requiresSelection), [actions]);\n const nonSelectionActions = useMemo(() => actions.filter(action => !action.requiresSelection), [actions]);\n\n const handleActionClicked = useMemo(() => {\n if (!onActionClicked) {\n return undefined;\n }\n\n return (e, { action }): void => onActionClicked(e, { action, field: field.name, selected });\n }, [onActionClicked, field.name, selected]);\n\n const handleFieldValueClicked = useMemo(() => {\n if (!onFieldValueClicked) {\n return undefined;\n }\n\n return (e, { value }): void => onFieldValueClicked(e, { field: field.name, value });\n }, [onFieldValueClicked, field.name]);\n\n return (\n <div data-test=\"field-summary\" {...rest}>\n <Name title={field.name}>{field.name}</Name>\n <Coverage distinctCount={field.distinctCount} count={field.count} eventCount={eventCount} />\n <FieldStats {...field} />\n <SplitButton\n actions={selectionActions}\n selectionCount={selected.length}\n onActionClicked={handleActionClicked}\n />\n <TableAndActions>\n <div>\n <FieldSummaryTable\n total={field.count}\n values={field.modes}\n selected={selected}\n onFieldValueSelected={selectionActions.length > 0 ? handleSelectValue : undefined}\n onFieldValueClicked={handleFieldValueClicked}\n />\n </div>\n <FieldActions\n field={field.name}\n actions={nonSelectionActions}\n selected={selected}\n onActionClicked={onActionClicked}\n />\n </TableAndActions>\n </div>\n );\n};\n\nexport default FieldSummary;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/Number\";\nexport * from \"@splunk/react-icons/enterprise/Number\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/String\";\nexport * from \"@splunk/react-icons/enterprise/String\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport NumberIcon from '@splunk/react-icons/enterprise/Number';\nimport StringIcon from '@splunk/react-icons/enterprise/String';\nimport { variables } from '@splunk/themes';\n\nconst ICON_SIZE = 0.6;\n\nexport interface FieldType {\n name: string;\n count: number;\n distinctCount: number;\n numericCount?: number;\n}\n\ntype FieldClicked = (e: SyntheticEvent, data: FieldType) => void;\n\ntype FieldListProps = {\n /** The name of the currently selected field */\n active?: string;\n /** FieldType {name:string, type:string, count: number} */\n fields: FieldType[];\n /** Callback (event:SyntheticEvent, data:FieldType) => void */\n onFieldClicked?: FieldClicked;\n};\n\ntype FieldProps = { active: boolean; field: FieldType; onFieldClicked?: FieldClicked };\n\nconst Container = styled.ol`\n list-style-type: none;\n margin: 0;\n padding: 0;\n svg {\n padding-right: ${variables.spacingXSmall};\n color: ${variables.contentColorMuted};\n }\n\n button {\n display: flex;\n align-items: baseline;\n border: none;\n text-align: left;\n width: 100%;\n height: 100%;\n color: ${variables.contentColorDefault};\n font-size: ${variables.fontSize};\n padding: calc(${variables.spacingXSmall} / 2) ${variables.spacingXSmall};\n margin: 0;\n background-color: inherit;\n }\n\n button:not([disabled]) {\n cursor: pointer;\n color: ${variables.linkColor};\n }\n\n li {\n background-color: inherit;\n\n padding: 0;\n margin: 0;\n }\n\n button:not([disabled]):hover,\n button[aria-pressed='true'] {\n background-color: ${variables.actionColorBackgroundSecondaryHover};\n button:not([disabled]):focus {\n outline: 0;\n box-shadow: ${variables.focusShadowInset};\n\n ::-moz-focus-inner {\n border: 0;\n }\n }\n`;\n\nconst Name = styled.span`\n min-width: 0;\n flex-shrink: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst Count = styled.span`\n padding-left: ${variables.spacingXSmall};\n color: ${variables.contentColorMuted};\n`;\n\nexport const isNumeric = (field: FieldType): boolean =>\n field.numericCount && Number(field.numericCount) / Number(field.count) > 0.7;\n\nconst Field: React.FC<FieldProps> = ({ active, field, onFieldClicked }: FieldProps) => {\n const clickHandler = onFieldClicked ? (e: SyntheticEvent): void => onFieldClicked(e, field) : undefined;\n const numeric = isNumeric(field);\n return (\n <li>\n <button type=\"button\" onClick={clickHandler} disabled={!onFieldClicked} aria-pressed={active}>\n {numeric ? <NumberIcon size={ICON_SIZE} /> : <StringIcon size={ICON_SIZE} />}\n <Name title={field.name}>{field.name}</Name>\n <Count>{field.distinctCount > 100 ? '100+' : field.distinctCount}</Count>\n </button>\n </li>\n );\n};\n\nconst FieldList: React.FC<FieldListProps> = ({ active, fields, onFieldClicked }: FieldListProps) => (\n <Container data-test=\"field-list\">\n {fields.map(field => (\n <Field\n key={field.name}\n field={field}\n onFieldClicked={onFieldClicked}\n active={field.name === active}\n />\n ))}\n </Container>\n);\n\nexport default FieldList;\n", "\nimport * as defaultImport from \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { ReactElement } from 'react';\nimport { abbreviateNumber } from '@splunk/ui-utils/format';\n\nexport const formatNumber = new Intl.NumberFormat().format;\n\nconst Abbreviate = ({ value }: { value: number }): ReactElement => (\n <span title={formatNumber(value)}>{abbreviateNumber(value)}</span>\n);\n\nexport default Abbreviate;\n", "\nimport * as defaultImport from \"@splunk/react-ui/Link\";\nexport * from \"@splunk/react-ui/Link\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Link from '@splunk/react-ui/Link';\nimport { variables } from '@splunk/themes';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nexport interface Action {\n name: string;\n label: string;\n requiresSelection?: boolean;\n}\n\nexport type ActionClicked = (\n e: SyntheticEvent,\n data: { action: string; field: string; selected: string[] }\n) => void;\n\nexport interface ActionsProps {\n field: string;\n actions?: Action[];\n selected: string[];\n onActionClicked?: ActionClicked;\n}\n\nconst StyledActions = styled.div`\n padding-left: ${variables.spacingMedium};\n\n h3 {\n font-size: ${variables.fontSize};\n margin: 0;\n padding: 1px;\n margin-top: 2px;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n\n button {\n line-height: calc(${variables.lineHeight} * 0.8);\n margin-bottom: ${variables.spacingXSmall};\n }\n }\n`;\n\nconst Actions: React.FC<ActionsProps> = ({ field, actions, selected, onActionClicked }: ActionsProps) =>\n actions && actions.length > 0 ? (\n <StyledActions>\n <h3>{_('Actions')}</h3>\n <ul>\n {actions.map(({ name, label, requiresSelection }) => (\n <li key={name}>\n <Link\n role=\"button\"\n appearance=\"standalone\"\n disabled={!onActionClicked || (requiresSelection && selected.length === 0)}\n onClick={(e: SyntheticEvent): void => {\n e.preventDefault();\n onActionClicked?.(e, { action: name, field, selected });\n }}\n >\n {label}\n </Link>\n </li>\n ))}\n </ul>\n </StyledActions>\n ) : null;\n\nexport default Actions;\n", "import React, { ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { variables } from '@splunk/themes';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport Abbreviate from './Abbreviate';\n\nconst DL = styled.dl`\n color: ${variables.contentColorDefault};\n margin-top: ${variables.spacingSmall};\n margin-bottom: ${variables.spacingSmall};\n dt {\n display: inline-block;\n font-weight: bold;\n }\n dt::after {\n content: ':';\n }\n dd {\n display: inline-block;\n margin-left: ${variables.spacingXSmall};\n margin-right: ${variables.spacingSmall};\n }\n`;\n\nexport interface FieldStatsProps {\n mean?: number;\n min?: number;\n max?: number;\n stdev?: number;\n}\n\nconst Stat = ({ label, value }: { label: string; value: number }): ReactElement => (\n <>\n <dt>{label}</dt>\n <dd>\n <Abbreviate value={value} />\n </dd>\n </>\n);\n\nconst FieldStats: React.FC<FieldStatsProps> = ({ mean, min, max, stdev }: FieldStatsProps) =>\n typeof mean !== 'number' ? null : (\n <DL>\n <Stat label={_('Min')} value={min} />\n <Stat label={_('Max')} value={max} />\n <Stat label={_('Avg')} value={mean} />\n <Stat label={_('Std Dev')} value={stdev} />\n </DL>\n );\n\nexport default FieldStats;\n", "\nimport * as defaultImport from \"@splunk/react-ui/Switch\";\nexport * from \"@splunk/react-ui/Switch\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "/* eslint-disable jsx-a11y/control-has-associated-label */\nimport React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Link from '@splunk/react-ui/Link';\nimport Switch from '@splunk/react-ui/Switch';\nimport { variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport { formatNumber } from './Abbreviate';\n\nexport interface FieldValue {\n count: number;\n value: string;\n}\n\nexport interface FieldSummaryProps {\n total: number;\n values: FieldValue[];\n selected: string[];\n onFieldValueSelected?: (\n e: React.MouseEvent<HTMLButtonElement>,\n data: { selected: boolean; value?: string }\n ) => void;\n onFieldValueClicked?: (e: SyntheticEvent, { value }: { value: string }) => void;\n}\n\nconst BAR_WIDTH = '100px';\nconst BAR_HEIGHT = '20px';\n\nconst BarContainer = styled.div`\n width: ${BAR_WIDTH};\n height: ${BAR_HEIGHT};\n background-color: ${variables.neutral200};\n`;\n\nconst Bar = styled.div`\n height: ${BAR_HEIGHT};\n background-color: ${variables.interactiveColorAccent};\n`;\n\nconst StyledSwitch = styled(Switch)`\n margin: -5px ${variables.spacingXSmall} -5px 0;\n padding: 0;\n`;\n\nconst NumericCell = styled.td`\n text-align: right;\n`;\n\nconst ValueCell = styled.td`\n width: 100%;\n`;\n\nconst NumericHeading = styled.th`\n text-align: right;\n`;\n\nconst Truncated = styled.span`\n text-overflow: ellipsis;\n min-width: 0;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-wrap: anywhere;\n word-break: break-all;\n`;\n\nconst Table = styled.table`\n tbody {\n line-height: 1;\n td {\n font-family: ${variables.monoFontFamily};\n a {\n font-family: ${variables.monoFontFamily};\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n }\n }\n th:last-child {\n width: ${BAR_WIDTH};\n }\n }\n`;\n\nconst FieldSummaryTable: React.FC<FieldSummaryProps> = ({\n total,\n values,\n selected,\n onFieldValueSelected,\n onFieldValueClicked,\n}: FieldSummaryProps) => {\n const firstColSpan = onFieldValueSelected ? 2 : 1;\n return (\n <Table>\n <thead>\n <tr>\n <th colSpan={firstColSpan}>{_('Top Values')}</th>\n <NumericHeading>{_('Count')}</NumericHeading>\n <th />\n </tr>\n </thead>\n <tbody>\n {values.map(({ count, value }) => {\n const percent = count < total ? (count / total) * 100 : 100;\n const percentOfEvents = sprintf(_('%(percent)s%% of %(total)s events'), {\n percent: formatNumber(percent),\n total: formatNumber(total),\n });\n const fieldValueId = `field-value-${value}`;\n return (\n <tr key={fieldValueId}>\n {onFieldValueSelected && (\n <td style={{ padding: 0, margin: 0 }}>\n <StyledSwitch\n key={fieldValueId}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={fieldValueId}\n />\n </td>\n )}\n <ValueCell title={value}>\n {onFieldValueClicked ? (\n <Link\n role=\"button\"\n appearance=\"standalone\"\n onClick={(e: SyntheticEvent): void => {\n e.preventDefault();\n onFieldValueClicked(e, { value });\n }}\n >\n <Truncated id={fieldValueId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={fieldValueId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n <td title={percentOfEvents}>\n <BarContainer>\n <Bar style={{ width: `${percent}%` }} />\n </BarContainer>\n </td>\n </tr>\n );\n })}\n </tbody>\n </Table>\n );\n};\n\nexport default FieldSummaryTable;\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/Caret\";\nexport * from \"@splunk/react-icons/enterprise/Caret\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ButtonGroup\";\nexport * from \"@splunk/react-ui/ButtonGroup\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { SyntheticEvent } from 'react';\n\nimport Caret from '@splunk/react-icons/enterprise/Caret';\n\nimport Menu from '@splunk/react-ui/Menu';\nimport Button from '@splunk/react-ui/Button';\nimport ButtonGroup from '@splunk/react-ui/ButtonGroup';\nimport Dropdown from '@splunk/react-ui/Dropdown';\n\nimport { _ } from '@splunk/ui-utils/i18n';\n\ntype Action = {\n name: string;\n label: string;\n};\n\ninterface SplitButtonProps {\n actions: Action[];\n selectionCount: number;\n onActionClicked: (e: SyntheticEvent, { action }: { action: string }) => void;\n}\n\nconst SplitButton: React.FC<SplitButtonProps> = ({\n actions,\n selectionCount,\n onActionClicked,\n ...otherProps\n}: SplitButtonProps) => {\n if (actions.length === 0) {\n return null;\n }\n\n const [first, ...rest] = actions;\n\n const clickHandler = onActionClicked\n ? (actionName: string) =>\n (event: SyntheticEvent): void =>\n onActionClicked(event, { action: actionName })\n : (): (() => void) => undefined;\n\n let popup = null;\n if (rest.length > 0) {\n const toggle = (\n <Button\n prepend\n key=\"more-actions\"\n data-test=\"more-actions\"\n icon={<Caret screenReaderText={_('More Actions')} />}\n appearance=\"default\"\n disabled={selectionCount === 0}\n />\n );\n popup = (\n <Dropdown toggle={toggle}>\n <Menu>\n {rest.map(action => (\n <Menu.Item\n key={action.name}\n data-test={action.name}\n onClick={clickHandler(action.name)}\n >\n {action.label}\n </Menu.Item>\n ))}\n </Menu>\n </Dropdown>\n );\n }\n return (\n <ButtonGroup data-test=\"split-button\" {...otherProps}>\n <Button\n key={first.name}\n data-test={first.name}\n label={first.label}\n appearance=\"default\"\n onClick={clickHandler(first.name)}\n disabled={selectionCount === 0}\n />\n {popup}\n </ButtonGroup>\n );\n};\n\nexport default SplitButton;\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { FC, SyntheticEvent, ReactElement, useCallback, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport { variables } from '@splunk/themes';\n\nimport { isNumeric } from '../FieldList';\nimport Abbreviate, { formatNumber } from './Abbreviate';\nimport FieldActions, { Action } from './FieldActions';\n\nimport FieldStats, { FieldStatsProps } from './FieldStats';\nimport FieldSummaryTable, { FieldValue } from './FieldSummaryTable';\nimport SplitButton from './SplitButton';\n\nexport { FieldValue };\n\nexport interface FieldData extends FieldStatsProps {\n name: string;\n count: number;\n distinctCount: number;\n numericCount?: number;\n modes: FieldValue[];\n}\n\nexport type ActionsForField = (field: FieldData, defaultActions: Action[]) => Action[];\n\nconst defaultActionsForField = (field: FieldData, actionsForField?: ActionsForField): Action[] => {\n const actions = [];\n\n if (isNumeric(field)) {\n actions.push({ name: 'avgByTime', label: _('Average over time') });\n actions.push({ name: 'maxByTime', label: _('Maximum value over time') });\n actions.push({ name: 'minByTime', label: _('Minimum value over time') });\n }\n\n actions.push({ name: 'topValues', label: _('Top values') });\n actions.push({ name: 'topValuesByTime', label: _('Top values by time') });\n actions.push({ name: 'rareValues', label: _('Rare values') });\n actions.push({ name: 'allValues', label: _('Events with this field') });\n\n actions.push({\n name: 'includeValues',\n label: _('Include Selected'),\n requiresSelection: true,\n });\n actions.push({\n name: 'excludeValues',\n label: _('Exclude Selected'),\n requiresSelection: true,\n });\n\n return actionsForField ? actionsForField(field, actions) : actions;\n};\n\nexport interface FieldSummaryOptions {\n /** The total number of events that the query saw */\n eventCount?: number;\n\n /** Augment / replace the default actions available in the field summary\n *\n * Example Action:\n * ```\n * { \"name\": \"actionName\", \"label\": \"Action label\", requiresSelection: false }\n * ```\n */\n actionsForField?: (field: FieldData, defaultActions: Action[]) => Action[];\n\n /** Event triggered by the user clicking on one of the actions available in the field summary. */\n onActionClicked?: (\n e: SyntheticEvent,\n data: { action: string; field: string; selected: string[] }\n ) => void;\n\n /** Event triggered by the user clicking on one of the field values in the field summary. */\n onFieldValueClicked?: (e: SyntheticEvent, data: { field: string; value: string }) => void;\n}\n\nexport interface FieldSummaryProps extends FieldSummaryOptions {\n /** The field data to show summaries for\n *\n * Example Field:\n * ```\n * {\"name\": \"METHOD\", \"count\": 123456, \"distinctCount\": 2, \"numericCount\": 0,\n * \"mean\": null, \"min\": null, \"max\": null, \"stdev\": null,\n * \"modes\": [\n * { \"value\": \"GET\", \"count\": 113456 },\n * { \"value\": \"POST\", \"count\": 10000 }\n * ]}\n * ```\n */\n field: FieldData;\n}\n\nconst Name = styled.h2`\n font-size: ${variables.fontSizeXLarge};\n margin: ${variables.spacingSmall} 0;\n text-overflow: ellipsis;\n overflow: hidden;\n`;\n\nconst StyledCoverage = styled.div`\n color: ${variables.contentColorDefault};\n margin-bottom: ${variables.spacingSmall};\n`;\n\nconst TableAndActions = styled.div`\n display: flex;\n\n & > div:nth-child(1) {\n flex: 1 1;\n table {\n width: 100%;\n }\n }\n\n & > div:nth-child(2) {\n width: 150px;\n }\n`;\n\nconst Coverage = ({\n distinctCount,\n count,\n eventCount,\n}: {\n distinctCount: number;\n count: number;\n eventCount?: number;\n}): ReactElement => {\n const content = [<Abbreviate key=\"values\" value={distinctCount} />, _(' values')];\n if (eventCount) {\n content.push(_(' in '));\n content.push(`${formatNumber((count / eventCount) * 100)}%`);\n content.push(_(' of '));\n content.push(<Abbreviate key=\"events\" value={eventCount} />);\n content.push(_(' events'));\n }\n return <StyledCoverage>{content}</StyledCoverage>;\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n field,\n eventCount,\n actionsForField,\n onActionClicked,\n onFieldValueClicked,\n ...rest\n}: FieldSummaryProps) => {\n const [selected, setSelected] = useState<string[]>([]);\n const handleSelectValue = useCallback(\n (_event: React.MouseEvent<HTMLButtonElement>, data: { selected: boolean; value?: string }) => {\n setSelected(prev => {\n const filtered = prev.filter((x: string) => x !== data.value);\n if (prev.length !== filtered.length) {\n return filtered;\n }\n return [...filtered, data.value];\n });\n },\n []\n );\n\n const actions = useMemo(() => defaultActionsForField(field, actionsForField), [field, actionsForField]);\n const selectionActions = useMemo(() => actions.filter(action => action.requiresSelection), [actions]);\n const nonSelectionActions = useMemo(() => actions.filter(action => !action.requiresSelection), [actions]);\n\n const handleActionClicked = useMemo(() => {\n if (!onActionClicked) {\n return undefined;\n }\n\n return (e, { action }): void => onActionClicked(e, { action, field: field.name, selected });\n }, [onActionClicked, field.name, selected]);\n\n const handleFieldValueClicked = useMemo(() => {\n if (!onFieldValueClicked) {\n return undefined;\n }\n\n return (e, { value }): void => onFieldValueClicked(e, { field: field.name, value });\n }, [onFieldValueClicked, field.name]);\n\n return (\n <div data-test=\"field-summary\" {...rest}>\n <Name title={field.name}>{field.name}</Name>\n <Coverage distinctCount={field.distinctCount} count={field.count} eventCount={eventCount} />\n <FieldStats {...field} />\n <SplitButton\n actions={selectionActions}\n selectionCount={selected.length}\n onActionClicked={handleActionClicked}\n />\n <TableAndActions>\n <div>\n <FieldSummaryTable\n total={field.count}\n values={field.modes}\n selected={selected}\n onFieldValueSelected={selectionActions.length > 0 ? handleSelectValue : undefined}\n onFieldValueClicked={handleFieldValueClicked}\n />\n </div>\n <FieldActions\n field={field.name}\n actions={nonSelectionActions}\n selected={selected}\n onActionClicked={onActionClicked}\n />\n </TableAndActions>\n </div>\n );\n};\n\nexport default FieldSummary;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/Number\";\nexport * from \"@splunk/react-icons/enterprise/Number\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/String\";\nexport * from \"@splunk/react-icons/enterprise/String\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport NumberIcon from '@splunk/react-icons/enterprise/Number';\nimport StringIcon from '@splunk/react-icons/enterprise/String';\nimport { variables } from '@splunk/themes';\n\nconst ICON_SIZE = 0.6;\n\nexport interface FieldType {\n name: string;\n count: number;\n distinctCount: number;\n numericCount?: number;\n}\n\ntype FieldClicked = (e: SyntheticEvent, data: FieldType) => void;\n\ntype FieldListProps = {\n /** The name of the currently selected field */\n active?: string;\n /** FieldType {name:string, type:string, count: number} */\n fields: FieldType[];\n /** Callback (event:SyntheticEvent, data:FieldType) => void */\n onFieldClicked?: FieldClicked;\n};\n\ntype FieldProps = { active: boolean; field: FieldType; onFieldClicked?: FieldClicked };\n\nconst Container = styled.ol`\n list-style-type: none;\n margin: 0;\n padding: 0;\n svg {\n padding-right: ${variables.spacingXSmall};\n color: ${variables.contentColorMuted};\n }\n\n button {\n display: flex;\n align-items: baseline;\n border: none;\n text-align: left;\n width: 100%;\n height: 100%;\n color: ${variables.contentColorDefault};\n font-size: ${variables.fontSize};\n padding: calc(${variables.spacingXSmall} / 2) ${variables.spacingXSmall};\n margin: 0;\n background-color: inherit;\n }\n\n button:not([disabled]) {\n cursor: pointer;\n color: ${variables.linkColor};\n }\n\n li {\n background-color: inherit;\n\n padding: 0;\n margin: 0;\n }\n\n button:not([disabled]):hover,\n button[aria-pressed='true'] {\n background-color: ${variables.actionColorBackgroundSecondaryHover};\n button:not([disabled]):focus {\n outline: 0;\n box-shadow: ${variables.focusShadowInset};\n\n ::-moz-focus-inner {\n border: 0;\n }\n }\n`;\n\nconst Name = styled.span`\n min-width: 0;\n flex-shrink: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst Count = styled.span`\n padding-left: ${variables.spacingXSmall};\n color: ${variables.contentColorMuted};\n`;\n\nexport const isNumeric = (field: FieldType): boolean =>\n field.numericCount && Number(field.numericCount) / Number(field.count) > 0.7;\n\nconst Field: React.FC<FieldProps> = ({ active, field, onFieldClicked }: FieldProps) => {\n const clickHandler = onFieldClicked ? (e: SyntheticEvent): void => onFieldClicked(e, field) : undefined;\n const numeric = isNumeric(field);\n return (\n <li>\n <button type=\"button\" onClick={clickHandler} disabled={!onFieldClicked} aria-pressed={active}>\n {numeric ? <NumberIcon size={ICON_SIZE} /> : <StringIcon size={ICON_SIZE} />}\n <Name title={field.name}>{field.name}</Name>\n <Count>{field.distinctCount > 100 ? '100+' : field.distinctCount}</Count>\n </button>\n </li>\n );\n};\n\nconst FieldList: React.FC<FieldListProps> = ({ active, fields, onFieldClicked }: FieldListProps) => (\n <Container data-test=\"field-list\">\n {fields.map(field => (\n <Field\n key={field.name}\n field={field}\n onFieldClicked={onFieldClicked}\n active={field.name === active}\n />\n ))}\n </Container>\n);\n\nexport default FieldList;\n", "\nimport * as defaultImport from \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { ReactElement } from 'react';\nimport { abbreviateNumber } from '@splunk/ui-utils/format';\n\nexport const formatNumber = new Intl.NumberFormat().format;\n\nconst Abbreviate = ({ value }: { value: number }): ReactElement => (\n <span title={formatNumber(value)}>{abbreviateNumber(value)}</span>\n);\n\nexport default Abbreviate;\n", "\nimport * as defaultImport from \"@splunk/react-ui/Link\";\nexport * from \"@splunk/react-ui/Link\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Link from '@splunk/react-ui/Link';\nimport { variables } from '@splunk/themes';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nexport interface Action {\n name: string;\n label: string;\n requiresSelection?: boolean;\n}\n\nexport type ActionClicked = (\n e: SyntheticEvent,\n data: { action: string; field: string; selected: string[] }\n) => void;\n\nexport interface ActionsProps {\n field: string;\n actions?: Action[];\n selected: string[];\n onActionClicked?: ActionClicked;\n}\n\nconst StyledActions = styled.div`\n padding-left: ${variables.spacingMedium};\n\n h3 {\n font-size: ${variables.fontSize};\n margin: 0;\n padding: 1px;\n margin-top: 2px;\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n\n button {\n line-height: calc(${variables.lineHeight} * 0.8);\n margin-bottom: ${variables.spacingXSmall};\n }\n }\n`;\n\nconst Actions: React.FC<ActionsProps> = ({ field, actions, selected, onActionClicked }: ActionsProps) =>\n actions && actions.length > 0 ? (\n <StyledActions>\n <h3>{_('Actions')}</h3>\n <ul>\n {actions.map(({ name, label, requiresSelection }) => (\n <li key={name}>\n <Link\n role=\"button\"\n appearance=\"standalone\"\n disabled={!onActionClicked || (requiresSelection && selected.length === 0)}\n onClick={(e: SyntheticEvent): void => {\n e.preventDefault();\n onActionClicked?.(e, { action: name, field, selected });\n }}\n >\n {label}\n </Link>\n </li>\n ))}\n </ul>\n </StyledActions>\n ) : null;\n\nexport default Actions;\n", "import React, { ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { variables } from '@splunk/themes';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport Abbreviate from './Abbreviate';\n\nconst StatsList = styled.dl`\n color: ${variables.contentColorDefault};\n margin-top: ${variables.spacingSmall};\n margin-bottom: ${variables.spacingSmall};\n dt {\n display: inline-block;\n font-weight: bold;\n }\n dt::after {\n content: ':';\n }\n dd {\n display: inline-block;\n margin-left: ${variables.spacingXSmall};\n margin-right: ${variables.spacingSmall};\n }\n`;\n\nexport interface FieldStatsProps {\n mean?: number;\n min?: number;\n max?: number;\n stdev?: number;\n}\n\nconst Stat = ({ label, value }: { label: string; value: number }): ReactElement => (\n <>\n <dt>{label}</dt>\n <dd>\n <Abbreviate value={value} />\n </dd>\n </>\n);\n\nconst FieldStats: React.FC<FieldStatsProps> = ({ mean, min, max, stdev }: FieldStatsProps) =>\n typeof mean !== 'number' ? null : (\n <StatsList>\n <Stat label={_('Min')} value={min} />\n <Stat label={_('Max')} value={max} />\n <Stat label={_('Avg')} value={mean} />\n <Stat label={_('Std Dev')} value={stdev} />\n </StatsList>\n );\n\nexport default FieldStats;\n", "\nimport * as defaultImport from \"@splunk/react-ui/Switch\";\nexport * from \"@splunk/react-ui/Switch\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "/* eslint-disable jsx-a11y/control-has-associated-label */\nimport React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Link from '@splunk/react-ui/Link';\nimport Switch from '@splunk/react-ui/Switch';\nimport { variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport { formatNumber } from './Abbreviate';\n\nexport interface FieldValue {\n count: number;\n value: string;\n}\n\nexport interface FieldSummaryProps {\n total: number;\n values: FieldValue[];\n selected: string[];\n onFieldValueSelected?: (\n e: React.MouseEvent<HTMLButtonElement>,\n data: { selected: boolean; value?: string }\n ) => void;\n onFieldValueClicked?: (e: SyntheticEvent, { value }: { value: string }) => void;\n}\n\nconst BAR_WIDTH = '100px';\nconst BAR_HEIGHT = '20px';\n\nconst BarContainer = styled.div`\n width: ${BAR_WIDTH};\n height: ${BAR_HEIGHT};\n background-color: ${variables.neutral200};\n`;\n\nconst Bar = styled.div`\n height: ${BAR_HEIGHT};\n background-color: ${variables.interactiveColorAccent};\n`;\n\nconst StyledSwitch = styled(Switch)`\n margin: -5px ${variables.spacingXSmall} -5px 0;\n padding: 0;\n`;\n\nconst NumericCell = styled.td`\n text-align: right;\n`;\n\nconst ValueCell = styled.td`\n width: 100%;\n`;\n\nconst NumericHeading = styled.th`\n text-align: right;\n`;\n\nconst Truncated = styled.span`\n text-overflow: ellipsis;\n min-width: 0;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-wrap: anywhere;\n word-break: break-all;\n`;\n\nconst Table = styled.table`\n tbody {\n line-height: 1;\n td {\n font-family: ${variables.monoFontFamily};\n a {\n font-family: ${variables.monoFontFamily};\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n }\n }\n th:last-child {\n width: ${BAR_WIDTH};\n }\n }\n`;\n\nconst FieldSummaryTable: React.FC<FieldSummaryProps> = ({\n total,\n values,\n selected,\n onFieldValueSelected,\n onFieldValueClicked,\n}: FieldSummaryProps) => {\n const firstColSpan = onFieldValueSelected ? 2 : 1;\n return (\n <Table>\n <thead>\n <tr>\n <th colSpan={firstColSpan}>{_('Top Values')}</th>\n <NumericHeading>{_('Count')}</NumericHeading>\n <th />\n </tr>\n </thead>\n <tbody>\n {values.map(({ count, value }) => {\n const percent = count < total ? (count / total) * 100 : 100;\n const percentOfEvents = sprintf(_('%(percent)s%% of %(total)s events'), {\n percent: formatNumber(percent),\n total: formatNumber(total),\n });\n const fieldValueId = `field-value-${value}`;\n return (\n <tr key={fieldValueId}>\n {onFieldValueSelected && (\n <td style={{ padding: 0, margin: 0 }}>\n <StyledSwitch\n key={fieldValueId}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={fieldValueId}\n aria-label={_(`Select ${value}`)}\n />\n </td>\n )}\n <ValueCell title={value}>\n {onFieldValueClicked ? (\n <Link\n role=\"button\"\n appearance=\"standalone\"\n aria-label={_(value)}\n onClick={(e: SyntheticEvent): void => {\n e.preventDefault();\n onFieldValueClicked(e, { value });\n }}\n >\n <Truncated id={fieldValueId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={fieldValueId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n <td title={percentOfEvents}>\n <BarContainer>\n <Bar data-test=\"percentage-bar\" style={{ width: `${percent}%` }} />\n </BarContainer>\n </td>\n </tr>\n );\n })}\n </tbody>\n </Table>\n );\n};\n\nexport default FieldSummaryTable;\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/Caret\";\nexport * from \"@splunk/react-icons/enterprise/Caret\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ButtonGroup\";\nexport * from \"@splunk/react-ui/ButtonGroup\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { SyntheticEvent } from 'react';\n\nimport Caret from '@splunk/react-icons/enterprise/Caret';\n\nimport Menu from '@splunk/react-ui/Menu';\nimport Button from '@splunk/react-ui/Button';\nimport ButtonGroup from '@splunk/react-ui/ButtonGroup';\nimport Dropdown from '@splunk/react-ui/Dropdown';\n\nimport { _ } from '@splunk/ui-utils/i18n';\n\ntype Action = {\n name: string;\n label: string;\n};\n\ninterface SplitButtonProps {\n actions: Action[];\n selectionCount: number;\n onActionClicked: (e: SyntheticEvent, { action }: { action: string }) => void;\n}\n\nconst SplitButton: React.FC<SplitButtonProps> = ({\n actions,\n selectionCount,\n onActionClicked,\n ...otherProps\n}: SplitButtonProps) => {\n if (actions.length === 0) {\n return null;\n }\n\n const [first, ...rest] = actions;\n\n const clickHandler = onActionClicked\n ? (actionName: string) =>\n (event: SyntheticEvent): void =>\n onActionClicked(event, { action: actionName })\n : (): (() => void) => undefined;\n\n let popup = null;\n if (rest.length > 0) {\n const toggle = (\n <Button\n prepend\n key=\"more-actions\"\n data-test=\"more-actions\"\n icon={<Caret screenReaderText={_('More Actions')} />}\n appearance=\"default\"\n disabled={selectionCount === 0}\n />\n );\n popup = (\n <Dropdown toggle={toggle}>\n <Menu>\n {rest.map(action => (\n <Menu.Item\n key={action.name}\n data-test={action.name}\n onClick={clickHandler(action.name)}\n >\n {action.label}\n </Menu.Item>\n ))}\n </Menu>\n </Dropdown>\n );\n }\n return (\n <ButtonGroup data-test=\"split-button\" {...otherProps}>\n <Button\n key={first.name}\n data-test={first.name}\n label={first.label}\n appearance=\"default\"\n onClick={clickHandler(first.name)}\n disabled={selectionCount === 0}\n />\n {popup}\n </ButtonGroup>\n );\n};\n\nexport default SplitButton;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "Name"]
|
|
7
7
|
}
|
|
@@ -178,20 +178,22 @@ var FieldSummaryTable = ({
|
|
|
178
178
|
selected: selected.indexOf(value) >= 0,
|
|
179
179
|
appearance: "checkbox",
|
|
180
180
|
onClick: onFieldValueSelected,
|
|
181
|
-
labelledBy: fieldValueId
|
|
181
|
+
labelledBy: fieldValueId,
|
|
182
|
+
"aria-label": (0, i18n_exports._)(`Select ${value}`)
|
|
182
183
|
}
|
|
183
184
|
)), /* @__PURE__ */ react_default.createElement(ValueCell, { title: value }, onFieldValueClicked ? /* @__PURE__ */ react_default.createElement(
|
|
184
185
|
Link_default,
|
|
185
186
|
{
|
|
186
187
|
role: "button",
|
|
187
188
|
appearance: "standalone",
|
|
189
|
+
"aria-label": (0, i18n_exports._)(value),
|
|
188
190
|
onClick: (e) => {
|
|
189
191
|
e.preventDefault();
|
|
190
192
|
onFieldValueClicked(e, { value });
|
|
191
193
|
}
|
|
192
194
|
},
|
|
193
195
|
/* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)
|
|
194
|
-
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { style: { width: `${percent}%` } }))));
|
|
196
|
+
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { "data-test": "percentage-bar", style: { width: `${percent}%` } }))));
|
|
195
197
|
})));
|
|
196
198
|
};
|
|
197
199
|
var FieldSummaryTable_default = FieldSummaryTable;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/FieldSummary/FieldSummaryTable.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/react-ui/Link", "esm-externals:@splunk/react-ui/Switch", "esm-externals:@splunk/themes", "esm-externals:@splunk/ui-utils/format", "esm-externals:@splunk/ui-utils/i18n", "../../src/components/FieldSummary/Abbreviate.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/control-has-associated-label */\nimport React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Link from '@splunk/react-ui/Link';\nimport Switch from '@splunk/react-ui/Switch';\nimport { variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport { formatNumber } from './Abbreviate';\n\nexport interface FieldValue {\n count: number;\n value: string;\n}\n\nexport interface FieldSummaryProps {\n total: number;\n values: FieldValue[];\n selected: string[];\n onFieldValueSelected?: (\n e: React.MouseEvent<HTMLButtonElement>,\n data: { selected: boolean; value?: string }\n ) => void;\n onFieldValueClicked?: (e: SyntheticEvent, { value }: { value: string }) => void;\n}\n\nconst BAR_WIDTH = '100px';\nconst BAR_HEIGHT = '20px';\n\nconst BarContainer = styled.div`\n width: ${BAR_WIDTH};\n height: ${BAR_HEIGHT};\n background-color: ${variables.neutral200};\n`;\n\nconst Bar = styled.div`\n height: ${BAR_HEIGHT};\n background-color: ${variables.interactiveColorAccent};\n`;\n\nconst StyledSwitch = styled(Switch)`\n margin: -5px ${variables.spacingXSmall} -5px 0;\n padding: 0;\n`;\n\nconst NumericCell = styled.td`\n text-align: right;\n`;\n\nconst ValueCell = styled.td`\n width: 100%;\n`;\n\nconst NumericHeading = styled.th`\n text-align: right;\n`;\n\nconst Truncated = styled.span`\n text-overflow: ellipsis;\n min-width: 0;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-wrap: anywhere;\n word-break: break-all;\n`;\n\nconst Table = styled.table`\n tbody {\n line-height: 1;\n td {\n font-family: ${variables.monoFontFamily};\n a {\n font-family: ${variables.monoFontFamily};\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n }\n }\n th:last-child {\n width: ${BAR_WIDTH};\n }\n }\n`;\n\nconst FieldSummaryTable: React.FC<FieldSummaryProps> = ({\n total,\n values,\n selected,\n onFieldValueSelected,\n onFieldValueClicked,\n}: FieldSummaryProps) => {\n const firstColSpan = onFieldValueSelected ? 2 : 1;\n return (\n <Table>\n <thead>\n <tr>\n <th colSpan={firstColSpan}>{_('Top Values')}</th>\n <NumericHeading>{_('Count')}</NumericHeading>\n <th />\n </tr>\n </thead>\n <tbody>\n {values.map(({ count, value }) => {\n const percent = count < total ? (count / total) * 100 : 100;\n const percentOfEvents = sprintf(_('%(percent)s%% of %(total)s events'), {\n percent: formatNumber(percent),\n total: formatNumber(total),\n });\n const fieldValueId = `field-value-${value}`;\n return (\n <tr key={fieldValueId}>\n {onFieldValueSelected && (\n <td style={{ padding: 0, margin: 0 }}>\n <StyledSwitch\n key={fieldValueId}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={fieldValueId}\n />\n </td>\n )}\n <ValueCell title={value}>\n {onFieldValueClicked ? (\n <Link\n role=\"button\"\n appearance=\"standalone\"\n onClick={(e: SyntheticEvent): void => {\n e.preventDefault();\n onFieldValueClicked(e, { value });\n }}\n >\n <Truncated id={fieldValueId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={fieldValueId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n <td title={percentOfEvents}>\n <BarContainer>\n <Bar style={{ width: `${percent}%` }} />\n </BarContainer>\n </td>\n </tr>\n );\n })}\n </tbody>\n </Table>\n );\n};\n\nexport default FieldSummaryTable;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Link\";\nexport * from \"@splunk/react-ui/Link\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Switch\";\nexport * from \"@splunk/react-ui/Switch\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { ReactElement } from 'react';\nimport { abbreviateNumber } from '@splunk/ui-utils/format';\n\nexport const formatNumber = new Intl.NumberFormat().format;\n\nconst Abbreviate = ({ value }: { value: number }): ReactElement => (\n <span title={formatNumber(value)}>{abbreviateNumber(value)}</span>\n);\n\nexport default Abbreviate;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACA9D,IAAM,eAAe,IAAI,KAAK,aAAa,EAAE;;;ARyBpD,IAAM,YAAY;AAClB,IAAM,aAAa;AAEnB,IAAM,eAAe,0BAAO;AAAA,aACf,SAAS;AAAA,cACR,UAAU;AAAA,wBACA,yBAAU,UAAU;AAAA;AAG5C,IAAM,MAAM,0BAAO;AAAA,cACL,UAAU;AAAA,wBACA,yBAAU,sBAAsB;AAAA;AAGxD,IAAM,eAAe,0BAAO,cAAM;AAAA,mBACf,yBAAU,aAAa;AAAA;AAAA;AAI1C,IAAM,cAAc,0BAAO;AAAA;AAAA;AAI3B,IAAM,YAAY,0BAAO;AAAA;AAAA;AAIzB,IAAM,iBAAiB,0BAAO;AAAA;AAAA;AAI9B,IAAM,YAAY,0BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,QAAQ,0BAAO;AAAA;AAAA;AAAA;AAAA,2BAIM,yBAAU,cAAc;AAAA;AAAA,+BAEpB,yBAAU,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOlC,SAAS;AAAA;AAAA;AAAA;AAK9B,IAAM,oBAAiD,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAyB;AACrB,QAAM,eAAe,uBAAuB,IAAI;AAChD,SACI,4CAAC,aACG,4CAAC,eACG,4CAAC,YACG,4CAAC,QAAG,SAAS,oBAAe,gBAAE,YAAY,CAAE,GAC5C,4CAAC,0BAAgB,gBAAE,OAAO,CAAE,GAC5B,4CAAC,UAAG,CACR,CACJ,GACA,4CAAC,eACI,OAAO,IAAI,CAAC,EAAE,OAAO,MAAM,MAAM;AAC9B,UAAM,UAAU,QAAQ,QAAS,QAAQ,QAAS,MAAM;AACxD,UAAM,sBAAkB,4BAAQ,gBAAE,mCAAmC,GAAG;AAAA,MACpE,SAAS,aAAa,OAAO;AAAA,MAC7B,OAAO,aAAa,KAAK;AAAA,IAC7B,CAAC;AACD,UAAM,eAAe,eAAe,KAAK;AACzC,WACI,4CAAC,QAAG,KAAK,gBACJ,wBACG,4CAAC,QAAG,OAAO,EAAE,SAAS,GAAG,QAAQ,EAAE,KAC/B;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL;AAAA,QACA,UAAU,SAAS,QAAQ,KAAK,KAAK;AAAA,QACrC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/control-has-associated-label */\nimport React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Link from '@splunk/react-ui/Link';\nimport Switch from '@splunk/react-ui/Switch';\nimport { variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport { formatNumber } from './Abbreviate';\n\nexport interface FieldValue {\n count: number;\n value: string;\n}\n\nexport interface FieldSummaryProps {\n total: number;\n values: FieldValue[];\n selected: string[];\n onFieldValueSelected?: (\n e: React.MouseEvent<HTMLButtonElement>,\n data: { selected: boolean; value?: string }\n ) => void;\n onFieldValueClicked?: (e: SyntheticEvent, { value }: { value: string }) => void;\n}\n\nconst BAR_WIDTH = '100px';\nconst BAR_HEIGHT = '20px';\n\nconst BarContainer = styled.div`\n width: ${BAR_WIDTH};\n height: ${BAR_HEIGHT};\n background-color: ${variables.neutral200};\n`;\n\nconst Bar = styled.div`\n height: ${BAR_HEIGHT};\n background-color: ${variables.interactiveColorAccent};\n`;\n\nconst StyledSwitch = styled(Switch)`\n margin: -5px ${variables.spacingXSmall} -5px 0;\n padding: 0;\n`;\n\nconst NumericCell = styled.td`\n text-align: right;\n`;\n\nconst ValueCell = styled.td`\n width: 100%;\n`;\n\nconst NumericHeading = styled.th`\n text-align: right;\n`;\n\nconst Truncated = styled.span`\n text-overflow: ellipsis;\n min-width: 0;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-wrap: anywhere;\n word-break: break-all;\n`;\n\nconst Table = styled.table`\n tbody {\n line-height: 1;\n td {\n font-family: ${variables.monoFontFamily};\n a {\n font-family: ${variables.monoFontFamily};\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n }\n }\n th:last-child {\n width: ${BAR_WIDTH};\n }\n }\n`;\n\nconst FieldSummaryTable: React.FC<FieldSummaryProps> = ({\n total,\n values,\n selected,\n onFieldValueSelected,\n onFieldValueClicked,\n}: FieldSummaryProps) => {\n const firstColSpan = onFieldValueSelected ? 2 : 1;\n return (\n <Table>\n <thead>\n <tr>\n <th colSpan={firstColSpan}>{_('Top Values')}</th>\n <NumericHeading>{_('Count')}</NumericHeading>\n <th />\n </tr>\n </thead>\n <tbody>\n {values.map(({ count, value }) => {\n const percent = count < total ? (count / total) * 100 : 100;\n const percentOfEvents = sprintf(_('%(percent)s%% of %(total)s events'), {\n percent: formatNumber(percent),\n total: formatNumber(total),\n });\n const fieldValueId = `field-value-${value}`;\n return (\n <tr key={fieldValueId}>\n {onFieldValueSelected && (\n <td style={{ padding: 0, margin: 0 }}>\n <StyledSwitch\n key={fieldValueId}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={fieldValueId}\n aria-label={_(`Select ${value}`)}\n />\n </td>\n )}\n <ValueCell title={value}>\n {onFieldValueClicked ? (\n <Link\n role=\"button\"\n appearance=\"standalone\"\n aria-label={_(value)}\n onClick={(e: SyntheticEvent): void => {\n e.preventDefault();\n onFieldValueClicked(e, { value });\n }}\n >\n <Truncated id={fieldValueId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={fieldValueId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n <td title={percentOfEvents}>\n <BarContainer>\n <Bar data-test=\"percentage-bar\" style={{ width: `${percent}%` }} />\n </BarContainer>\n </td>\n </tr>\n );\n })}\n </tbody>\n </Table>\n );\n};\n\nexport default FieldSummaryTable;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Link\";\nexport * from \"@splunk/react-ui/Link\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Switch\";\nexport * from \"@splunk/react-ui/Switch\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { ReactElement } from 'react';\nimport { abbreviateNumber } from '@splunk/ui-utils/format';\n\nexport const formatNumber = new Intl.NumberFormat().format;\n\nconst Abbreviate = ({ value }: { value: number }): ReactElement => (\n <span title={formatNumber(value)}>{abbreviateNumber(value)}</span>\n);\n\nexport default Abbreviate;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
|
@@ -239,7 +239,7 @@ var Actions = ({ field, actions, selected, onActionClicked }) => actions && acti
|
|
|
239
239
|
var FieldActions_default = Actions;
|
|
240
240
|
|
|
241
241
|
// src/components/FieldSummary/FieldStats.tsx
|
|
242
|
-
var
|
|
242
|
+
var StatsList = styled_components_default.dl`
|
|
243
243
|
color: ${themes_exports.variables.contentColorDefault};
|
|
244
244
|
margin-top: ${themes_exports.variables.spacingSmall};
|
|
245
245
|
margin-bottom: ${themes_exports.variables.spacingSmall};
|
|
@@ -257,7 +257,7 @@ var DL = styled_components_default.dl`
|
|
|
257
257
|
}
|
|
258
258
|
`;
|
|
259
259
|
var Stat = ({ label, value }) => /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement("dt", null, label), /* @__PURE__ */ react_default.createElement("dd", null, /* @__PURE__ */ react_default.createElement(Abbreviate_default, { value })));
|
|
260
|
-
var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(
|
|
260
|
+
var FieldStats = ({ mean, min, max, stdev }) => typeof mean !== "number" ? null : /* @__PURE__ */ react_default.createElement(StatsList, null, /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Min"), value: min }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Max"), value: max }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Avg"), value: mean }), /* @__PURE__ */ react_default.createElement(Stat, { label: (0, i18n_exports._)("Std Dev"), value: stdev }));
|
|
261
261
|
var FieldStats_default = FieldStats;
|
|
262
262
|
|
|
263
263
|
// esm-externals:@splunk/react-ui/Switch
|
|
@@ -344,20 +344,22 @@ var FieldSummaryTable = ({
|
|
|
344
344
|
selected: selected.indexOf(value) >= 0,
|
|
345
345
|
appearance: "checkbox",
|
|
346
346
|
onClick: onFieldValueSelected,
|
|
347
|
-
labelledBy: fieldValueId
|
|
347
|
+
labelledBy: fieldValueId,
|
|
348
|
+
"aria-label": (0, i18n_exports._)(`Select ${value}`)
|
|
348
349
|
}
|
|
349
350
|
)), /* @__PURE__ */ react_default.createElement(ValueCell, { title: value }, onFieldValueClicked ? /* @__PURE__ */ react_default.createElement(
|
|
350
351
|
Link_default,
|
|
351
352
|
{
|
|
352
353
|
role: "button",
|
|
353
354
|
appearance: "standalone",
|
|
355
|
+
"aria-label": (0, i18n_exports._)(value),
|
|
354
356
|
onClick: (e) => {
|
|
355
357
|
e.preventDefault();
|
|
356
358
|
onFieldValueClicked(e, { value });
|
|
357
359
|
}
|
|
358
360
|
},
|
|
359
361
|
/* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)
|
|
360
|
-
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { style: { width: `${percent}%` } }))));
|
|
362
|
+
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: fieldValueId }, value)), /* @__PURE__ */ react_default.createElement(NumericCell, { title: percentOfEvents }, formatNumber(count)), /* @__PURE__ */ react_default.createElement("td", { title: percentOfEvents }, /* @__PURE__ */ react_default.createElement(BarContainer, null, /* @__PURE__ */ react_default.createElement(Bar, { "data-test": "percentage-bar", style: { width: `${percent}%` } }))));
|
|
361
363
|
})));
|
|
362
364
|
};
|
|
363
365
|
var FieldSummaryTable_default = FieldSummaryTable;
|