@splunk/react-field-summary 27.4.0 → 28.0.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_FieldList_Basic.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummaryList_Basic.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Action_On_Click.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Discrete.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Long_Text.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_No_Actions.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_No_Selection_Actions.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Numeric.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_PX_337_Truncated_Values.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Short_Text.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Split_Button_No_Selection.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Split_Button_With_Selection.png +0 -0
- package/.loki/reference/chrome_a4_react_field_summary_FieldSummary_Value_On_Click.png +0 -0
- package/CHANGELOG.external.md +22 -2
- package/MIGRATION.md +3 -3
- package/components/FieldList/FieldList.js +1 -6
- package/components/FieldList/FieldList.js.map +2 -2
- package/components/FieldList/index.js +1 -6
- package/components/FieldList/index.js.map +2 -2
- package/components/FieldSummary/FieldActions.js +6 -1
- package/components/FieldSummary/FieldActions.js.map +2 -2
- package/components/FieldSummary/FieldSummary.js +27 -23
- package/components/FieldSummary/FieldSummary.js.map +2 -2
- package/components/FieldSummary/FieldSummaryTable.js +18 -14
- package/components/FieldSummary/FieldSummaryTable.js.map +2 -2
- package/components/FieldSummary/SelectionButtons.js +2 -3
- package/components/FieldSummary/SelectionButtons.js.map +2 -2
- package/components/FieldSummary/SplitButton.js +2 -2
- package/components/FieldSummary/SplitButton.js.map +2 -2
- package/components/FieldSummary/index.js +27 -23
- package/components/FieldSummary/index.js.map +2 -2
- package/components/FieldSummaryList/FieldSummaryList.js +35 -40
- package/components/FieldSummaryList/FieldSummaryList.js.map +3 -3
- package/components/FieldSummaryList/index.js +35 -40
- package/components/FieldSummaryList/index.js.map +3 -3
- package/index.js +35 -40
- package/index.js.map +3 -3
- package/package.json +81 -86
|
@@ -114,22 +114,18 @@ var formatNumber = new Intl.NumberFormat().format;
|
|
|
114
114
|
|
|
115
115
|
// src/components/FieldSummary/FieldSummaryTable.tsx
|
|
116
116
|
var BAR_WIDTH = "100px";
|
|
117
|
+
var BAR_HEIGHT = "20px";
|
|
117
118
|
var BarContainer = styled_components_default.div`
|
|
118
119
|
width: ${BAR_WIDTH};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
prisma: themes_exports.variables.interactiveColorOverlayHover
|
|
122
|
-
})};
|
|
120
|
+
height: ${BAR_HEIGHT};
|
|
121
|
+
background-color: ${themes_exports.variables.neutral200};
|
|
123
122
|
`;
|
|
124
123
|
var Bar = styled_components_default.div`
|
|
125
|
-
height: ${
|
|
126
|
-
background-color: ${
|
|
127
|
-
enterprise: themes_exports.variables.accentColor,
|
|
128
|
-
prisma: themes_exports.variables.interactiveColorPrimary
|
|
129
|
-
})};
|
|
124
|
+
height: ${BAR_HEIGHT};
|
|
125
|
+
background-color: ${themes_exports.variables.interactiveColorAccent};
|
|
130
126
|
`;
|
|
131
127
|
var StyledSwitch = styled_components_default(Switch_default)`
|
|
132
|
-
margin:
|
|
128
|
+
margin: -5px ${themes_exports.variables.spacingXSmall} -5px 0;
|
|
133
129
|
padding: 0;
|
|
134
130
|
`;
|
|
135
131
|
var NumericCell = styled_components_default.td`
|
|
@@ -153,13 +149,16 @@ var Truncated = styled_components_default.span`
|
|
|
153
149
|
`;
|
|
154
150
|
var Table = styled_components_default.table`
|
|
155
151
|
tbody {
|
|
152
|
+
line-height: 1;
|
|
156
153
|
td {
|
|
157
154
|
font-family: ${themes_exports.variables.monoFontFamily};
|
|
158
|
-
|
|
155
|
+
a {
|
|
159
156
|
font-family: ${themes_exports.variables.monoFontFamily};
|
|
157
|
+
display: inline-block;
|
|
158
|
+
vertical-align: middle;
|
|
159
|
+
line-height: normal;
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
|
-
|
|
163
162
|
th:last-child {
|
|
164
163
|
width: ${BAR_WIDTH};
|
|
165
164
|
}
|
|
@@ -180,7 +179,7 @@ var FieldSummaryTable = ({
|
|
|
180
179
|
total: formatNumber(total)
|
|
181
180
|
});
|
|
182
181
|
const labelId = (0, id_exports.createDOMID)();
|
|
183
|
-
return /* @__PURE__ */ react_default.createElement("tr", { key: value }, onFieldValueSelected && /* @__PURE__ */ react_default.createElement("td",
|
|
182
|
+
return /* @__PURE__ */ react_default.createElement("tr", { key: value }, onFieldValueSelected && /* @__PURE__ */ react_default.createElement("td", { style: { padding: 0, margin: 0 } }, /* @__PURE__ */ react_default.createElement(
|
|
184
183
|
StyledSwitch,
|
|
185
184
|
{
|
|
186
185
|
key: value,
|
|
@@ -193,7 +192,12 @@ var FieldSummaryTable = ({
|
|
|
193
192
|
)), /* @__PURE__ */ react_default.createElement(ValueCell, { title: value }, onFieldValueClicked ? /* @__PURE__ */ react_default.createElement(
|
|
194
193
|
Link_default,
|
|
195
194
|
{
|
|
196
|
-
|
|
195
|
+
role: "button",
|
|
196
|
+
appearance: "standalone",
|
|
197
|
+
onClick: (e) => {
|
|
198
|
+
e.preventDefault();
|
|
199
|
+
onFieldValueClicked(e, { value });
|
|
200
|
+
}
|
|
197
201
|
},
|
|
198
202
|
/* @__PURE__ */ react_default.createElement(Truncated, { id: labelId }, value)
|
|
199
203
|
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: labelId }, 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}%` } }))));
|
|
@@ -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", "esm-externals:@splunk/ui-utils/id", "../../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\
|
|
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;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,uBAAc;AACd,IAAO,aAAS,aAAaA,iBAA8B,yBAAUA;;;ACA9D,IAAM,eAAe,IAAI,KAAK,aAAa,EAAE;;;
|
|
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';\nimport { createDOMID } from '@splunk/ui-utils/id';\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: any, { value }) => 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 labelId = createDOMID();\n return (\n <tr key={value}>\n {onFieldValueSelected && (\n <td style={{ padding: 0, margin: 0 }}>\n <StyledSwitch\n key={value}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={labelId}\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={labelId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={labelId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n\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", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\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", "defaultImport"]
|
|
7
7
|
}
|
|
@@ -142,12 +142,11 @@ var SelectionButtons = (_a) => {
|
|
|
142
142
|
selectionCount,
|
|
143
143
|
actions,
|
|
144
144
|
onActionClicked,
|
|
145
|
-
showSelectionCount
|
|
145
|
+
showSelectionCount
|
|
146
146
|
} = _b, otherProps = __objRest(_b, [
|
|
147
147
|
"selectionCount",
|
|
148
148
|
"actions",
|
|
149
149
|
"onActionClicked",
|
|
150
|
-
// size = 'small',
|
|
151
150
|
"showSelectionCount"
|
|
152
151
|
]);
|
|
153
152
|
return /* @__PURE__ */ react_default.createElement(Container, __spreadValues({}, otherProps), showSelectionCount && /* @__PURE__ */ react_default.createElement("span", null, (0, format_exports.sprintf)((0, i18n_exports._)("%(selectionCount)d Selected:"), { selectionCount })), actions.map(({ label, name }) => /* @__PURE__ */ react_default.createElement(
|
|
@@ -157,7 +156,7 @@ var SelectionButtons = (_a) => {
|
|
|
157
156
|
"data-test": name,
|
|
158
157
|
label,
|
|
159
158
|
disabled: selectionCount === 0,
|
|
160
|
-
appearance: "
|
|
159
|
+
appearance: "default",
|
|
161
160
|
onClick: (e) => onActionClicked(e, { action: name })
|
|
162
161
|
}
|
|
163
162
|
)));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/FieldSummary/SelectionButtons.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/react-ui/Button", "esm-externals:@splunk/themes", "esm-externals:@splunk/ui-utils/format", "esm-externals:@splunk/ui-utils/i18n"],
|
|
4
|
-
"sourcesContent": ["import React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@splunk/react-ui/Button';\nimport { variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nexport type Action = {\n name: string;\n label: string;\n};\n\ninterface SelectionButtonsProps {\n actions: Action[];\n selectionCount: number;\n onActionClicked: (e: SyntheticEvent, { action }: { action: string }) => void;\n size?: string;\n showSelectionCount?: boolean;\n}\n\nconst Container = styled.div`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: -${variables.spacingXSmall};\n\n /* Could just be button other props added to win the specificity war */\n & > button[data-inline][data-size='small']:not([data-prepend]) {\n margin: ${variables.spacingXSmall} ${variables.spacingSmall} ${variables.spacingXSmall} 0;\n }\n\n button {\n flex-grow: 0;\n }\n\n & > span {\n padding-right: ${variables.spacingMedium};\n }\n`;\n\nconst SelectionButtons: React.FC<SelectionButtonsProps> = ({\n selectionCount,\n actions,\n onActionClicked,\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,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;;;ANkBrE,IAAM,YAAY,0BAAO;AAAA;AAAA;AAAA;AAAA,eAIV,yBAAU,aAAa;AAAA;AAAA;AAAA;AAAA,kBAIpB,yBAAU,aAAa,IAAI,yBAAU,YAAY,IAAI,yBAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQrE,yBAAU,aAAa;AAAA;AAAA;AAIhD,IAAM,mBAAoD,CAAC,
|
|
4
|
+
"sourcesContent": ["import React, { SyntheticEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@splunk/react-ui/Button';\nimport { variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nexport type Action = {\n name: string;\n label: string;\n};\n\ninterface SelectionButtonsProps {\n actions: Action[];\n selectionCount: number;\n onActionClicked: (e: SyntheticEvent, { action }: { action: string }) => void;\n size?: string;\n showSelectionCount?: boolean;\n}\n\nconst Container = styled.div`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: -${variables.spacingXSmall};\n\n /* Could just be button other props added to win the specificity war */\n & > button[data-inline][data-size='small']:not([data-prepend]) {\n margin: ${variables.spacingXSmall} ${variables.spacingSmall} ${variables.spacingXSmall} 0;\n }\n\n button {\n flex-grow: 0;\n }\n\n & > span {\n padding-right: ${variables.spacingMedium};\n }\n`;\n\nconst SelectionButtons: React.FC<SelectionButtonsProps> = ({\n selectionCount,\n actions,\n onActionClicked,\n showSelectionCount,\n ...otherProps\n}: SelectionButtonsProps) => (\n <Container {...otherProps}>\n {showSelectionCount && <span>{sprintf(_('%(selectionCount)d Selected:'), { selectionCount })}</span>}\n {actions.map(({ label, name }) => (\n <Button\n key={name}\n data-test={name}\n label={label}\n disabled={selectionCount === 0}\n appearance=\"default\"\n onClick={(e: SyntheticEvent): void => onActionClicked(e, { action: name })}\n />\n ))}\n </Container>\n);\n\nexport default SelectionButtons;\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/Button\";\nexport * from \"@splunk/react-ui/Button\";\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"],
|
|
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,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;;;ANkBrE,IAAM,YAAY,0BAAO;AAAA;AAAA;AAAA;AAAA,eAIV,yBAAU,aAAa;AAAA;AAAA;AAAA;AAAA,kBAIpB,yBAAU,aAAa,IAAI,yBAAU,YAAY,IAAI,yBAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQrE,yBAAU,aAAa;AAAA;AAAA;AAIhD,IAAM,mBAAoD,CAAC,OAMjC;AANiC,eACvD;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA7CJ,IAyC2D,IAKpD,uBALoD,IAKpD;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,qDAAC,8BAAc,aACV,sBAAsB,4CAAC,kBAAM,4BAAQ,gBAAE,8BAA8B,GAAG,EAAE,eAAe,CAAC,CAAE,GAC5F,QAAQ,IAAI,CAAC,EAAE,OAAO,KAAK,MACxB;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,aAAW;AAAA,MACX;AAAA,MACA,UAAU,mBAAmB;AAAA,MAC7B,YAAW;AAAA,MACX,SAAS,CAAC,MAA4B,gBAAgB,GAAG,EAAE,QAAQ,KAAK,CAAC;AAAA;AAAA,EAC7E,CACH,CACL;AAAA;AAGJ,IAAO,2BAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
|
@@ -151,7 +151,7 @@ var SplitButton = (_a) => {
|
|
|
151
151
|
key: "more-actions",
|
|
152
152
|
"data-test": "more-actions",
|
|
153
153
|
icon: /* @__PURE__ */ react_default.createElement(Caret_default, { screenReaderText: (0, i18n_exports._)("More Actions") }),
|
|
154
|
-
appearance: "
|
|
154
|
+
appearance: "default",
|
|
155
155
|
disabled: selectionCount === 0
|
|
156
156
|
}
|
|
157
157
|
);
|
|
@@ -172,7 +172,7 @@ var SplitButton = (_a) => {
|
|
|
172
172
|
key: first.name,
|
|
173
173
|
"data-test": first.name,
|
|
174
174
|
label: first.label,
|
|
175
|
-
appearance: "
|
|
175
|
+
appearance: "default",
|
|
176
176
|
onClick: clickHandler(first.name),
|
|
177
177
|
disabled: selectionCount === 0
|
|
178
178
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/FieldSummary/SplitButton.tsx", "esm-externals:react", "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", "esm-externals:@splunk/ui-utils/i18n"],
|
|
4
|
-
"sourcesContent": ["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 ? (action: string)
|
|
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,0BAAc;AACd,IAAO,gBAAS,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,gCAAc;AACd,IAAO,sBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,6BAAc;AACd,IAAO,mBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;APmBrE,IAAM,cAA0C,CAAC,OAKzB;AALyB,eAC7C;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EAzBJ,IAsBiD,IAI1C,uBAJ0C,IAI1C;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,MAAI,QAAQ,WAAW,GAAG;AACtB,WAAO;AAAA,EACX;AAEA,QAAM,CAAC,OAAO,GAAG,IAAI,IAAI;AAEzB,QAAM,eAAe,kBACf,CAAC,
|
|
4
|
+
"sourcesContent": ["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 ? (action: string) =>\n (e: SyntheticEvent): void =>\n onActionClicked(e, { action })\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", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\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", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\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,0BAAc;AACd,IAAO,gBAAS,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,gCAAc;AACd,IAAO,sBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,6BAAc;AACd,IAAO,mBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;APmBrE,IAAM,cAA0C,CAAC,OAKzB;AALyB,eAC7C;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EAzBJ,IAsBiD,IAI1C,uBAJ0C,IAI1C;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,MAAI,QAAQ,WAAW,GAAG;AACtB,WAAO;AAAA,EACX;AAEA,QAAM,CAAC,OAAO,GAAG,IAAI,IAAI;AAEzB,QAAM,eAAe,kBACf,CAAC,WACG,CAAC,MACG,gBAAgB,GAAG,EAAE,OAAO,CAAC,IACrC,MAAoB;AAE1B,MAAI,QAAQ;AACZ,MAAI,KAAK,SAAS,GAAG;AACjB,UAAM,SACF;AAAA,MAAC;AAAA;AAAA,QACG,SAAO;AAAA,QACP,KAAI;AAAA,QACJ,aAAU;AAAA,QACV,MAAM,4CAAC,iBAAM,sBAAkB,gBAAE,cAAc,GAAG;AAAA,QAClD,YAAW;AAAA,QACX,UAAU,mBAAmB;AAAA;AAAA,IACjC;AAEJ,YACI,4CAAC,oBAAS,UACN,4CAAC,oBACI,KAAK,IAAI,YACN;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,KAAK,OAAO;AAAA,QACZ,aAAW,OAAO;AAAA,QAClB,SAAS,aAAa,OAAO,IAAI;AAAA;AAAA,MAEhC,OAAO;AAAA,MAAO;AAAA,IACnB,CACH,CACL,CACJ;AAAA,EAER;AACA,SACI,4CAAC,sCAAY,aAAU,kBAAmB,aACtC;AAAA,IAAC;AAAA;AAAA,MACG,KAAK,MAAM;AAAA,MACX,aAAW,MAAM;AAAA,MACjB,OAAO,MAAM;AAAA,MACb,YAAW;AAAA,MACX,SAAS,aAAa,MAAM,IAAI;AAAA,MAChC,UAAU,mBAAmB;AAAA;AAAA,EACjC,GACC,KACL;AAER;AAEA,IAAO,sBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
|
@@ -155,12 +155,7 @@ var Container = styled_components_default.ol`
|
|
|
155
155
|
|
|
156
156
|
button:not([disabled]):hover,
|
|
157
157
|
button[aria-pressed='true'] {
|
|
158
|
-
background-color: ${
|
|
159
|
-
enterprise: themes_exports.variables.backgroundColorHover,
|
|
160
|
-
prisma: themes_exports.variables.interactiveColorOverlayHover
|
|
161
|
-
})};
|
|
162
|
-
}
|
|
163
|
-
|
|
158
|
+
background-color: ${themes_exports.variables.actionColorBackgroundSecondaryHover};
|
|
164
159
|
button:not([disabled]):focus {
|
|
165
160
|
outline: 0;
|
|
166
161
|
box-shadow: ${themes_exports.variables.focusShadowInset};
|
|
@@ -231,8 +226,13 @@ var StyledActions = styled_components_default.div`
|
|
|
231
226
|
var Actions = ({ field, actions, selected, onActionClicked }) => actions && actions.length > 0 ? /* @__PURE__ */ react_default.createElement(StyledActions, null, /* @__PURE__ */ react_default.createElement("h3", null, (0, i18n_exports._)("Actions")), /* @__PURE__ */ react_default.createElement("ul", null, actions.map(({ name, label, requiresSelection }) => /* @__PURE__ */ react_default.createElement("li", { key: name }, /* @__PURE__ */ react_default.createElement(
|
|
232
227
|
Link_default,
|
|
233
228
|
{
|
|
229
|
+
role: "button",
|
|
230
|
+
appearance: "standalone",
|
|
234
231
|
disabled: !onActionClicked || requiresSelection && selected.length === 0,
|
|
235
|
-
onClick: (e) =>
|
|
232
|
+
onClick: (e) => {
|
|
233
|
+
e.preventDefault();
|
|
234
|
+
onActionClicked(e, { action: name, field, selected });
|
|
235
|
+
}
|
|
236
236
|
},
|
|
237
237
|
label
|
|
238
238
|
))))) : null;
|
|
@@ -280,22 +280,18 @@ var id_default = "default" in defaultImport10 ? defaultImport10.default : defaul
|
|
|
280
280
|
|
|
281
281
|
// src/components/FieldSummary/FieldSummaryTable.tsx
|
|
282
282
|
var BAR_WIDTH = "100px";
|
|
283
|
+
var BAR_HEIGHT = "20px";
|
|
283
284
|
var BarContainer = styled_components_default.div`
|
|
284
285
|
width: ${BAR_WIDTH};
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
prisma: themes_exports.variables.interactiveColorOverlayHover
|
|
288
|
-
})};
|
|
286
|
+
height: ${BAR_HEIGHT};
|
|
287
|
+
background-color: ${themes_exports.variables.neutral200};
|
|
289
288
|
`;
|
|
290
289
|
var Bar = styled_components_default.div`
|
|
291
|
-
height: ${
|
|
292
|
-
background-color: ${
|
|
293
|
-
enterprise: themes_exports.variables.accentColor,
|
|
294
|
-
prisma: themes_exports.variables.interactiveColorPrimary
|
|
295
|
-
})};
|
|
290
|
+
height: ${BAR_HEIGHT};
|
|
291
|
+
background-color: ${themes_exports.variables.interactiveColorAccent};
|
|
296
292
|
`;
|
|
297
293
|
var StyledSwitch = styled_components_default(Switch_default)`
|
|
298
|
-
margin:
|
|
294
|
+
margin: -5px ${themes_exports.variables.spacingXSmall} -5px 0;
|
|
299
295
|
padding: 0;
|
|
300
296
|
`;
|
|
301
297
|
var NumericCell = styled_components_default.td`
|
|
@@ -319,13 +315,16 @@ var Truncated = styled_components_default.span`
|
|
|
319
315
|
`;
|
|
320
316
|
var Table = styled_components_default.table`
|
|
321
317
|
tbody {
|
|
318
|
+
line-height: 1;
|
|
322
319
|
td {
|
|
323
320
|
font-family: ${themes_exports.variables.monoFontFamily};
|
|
324
|
-
|
|
321
|
+
a {
|
|
325
322
|
font-family: ${themes_exports.variables.monoFontFamily};
|
|
323
|
+
display: inline-block;
|
|
324
|
+
vertical-align: middle;
|
|
325
|
+
line-height: normal;
|
|
326
326
|
}
|
|
327
327
|
}
|
|
328
|
-
|
|
329
328
|
th:last-child {
|
|
330
329
|
width: ${BAR_WIDTH};
|
|
331
330
|
}
|
|
@@ -346,7 +345,7 @@ var FieldSummaryTable = ({
|
|
|
346
345
|
total: formatNumber(total)
|
|
347
346
|
});
|
|
348
347
|
const labelId = (0, id_exports.createDOMID)();
|
|
349
|
-
return /* @__PURE__ */ react_default.createElement("tr", { key: value }, onFieldValueSelected && /* @__PURE__ */ react_default.createElement("td",
|
|
348
|
+
return /* @__PURE__ */ react_default.createElement("tr", { key: value }, onFieldValueSelected && /* @__PURE__ */ react_default.createElement("td", { style: { padding: 0, margin: 0 } }, /* @__PURE__ */ react_default.createElement(
|
|
350
349
|
StyledSwitch,
|
|
351
350
|
{
|
|
352
351
|
key: value,
|
|
@@ -359,7 +358,12 @@ var FieldSummaryTable = ({
|
|
|
359
358
|
)), /* @__PURE__ */ react_default.createElement(ValueCell, { title: value }, onFieldValueClicked ? /* @__PURE__ */ react_default.createElement(
|
|
360
359
|
Link_default,
|
|
361
360
|
{
|
|
362
|
-
|
|
361
|
+
role: "button",
|
|
362
|
+
appearance: "standalone",
|
|
363
|
+
onClick: (e) => {
|
|
364
|
+
e.preventDefault();
|
|
365
|
+
onFieldValueClicked(e, { value });
|
|
366
|
+
}
|
|
363
367
|
},
|
|
364
368
|
/* @__PURE__ */ react_default.createElement(Truncated, { id: labelId }, value)
|
|
365
369
|
) : /* @__PURE__ */ react_default.createElement(Truncated, { id: labelId }, 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}%` } }))));
|
|
@@ -437,7 +441,7 @@ var SplitButton = (_a) => {
|
|
|
437
441
|
key: "more-actions",
|
|
438
442
|
"data-test": "more-actions",
|
|
439
443
|
icon: /* @__PURE__ */ react_default.createElement(Caret_default, { screenReaderText: (0, i18n_exports._)("More Actions") }),
|
|
440
|
-
appearance: "
|
|
444
|
+
appearance: "default",
|
|
441
445
|
disabled: selectionCount === 0
|
|
442
446
|
}
|
|
443
447
|
);
|
|
@@ -458,7 +462,7 @@ var SplitButton = (_a) => {
|
|
|
458
462
|
key: first.name,
|
|
459
463
|
"data-test": first.name,
|
|
460
464
|
label: first.label,
|
|
461
|
-
appearance: "
|
|
465
|
+
appearance: "default",
|
|
462
466
|
onClick: clickHandler(first.name),
|
|
463
467
|
disabled: selectionCount === 0
|
|
464
468
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/FieldSummary/index.ts", "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", "esm-externals:@splunk/ui-utils/id", "../../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", "../../src/components/FieldSummary/FieldSummary.tsx"],
|
|
4
|
-
"sourcesContent": ["export { default, FieldData, FieldSummaryOptions, FieldSummaryProps } from './FieldSummary';\n\nexport { Action, ActionClicked } from './FieldActions';\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 { pick, 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: ${pick({\n enterprise: variables.backgroundColorHover,\n prisma: variables.interactiveColorOverlayHover,\n })};\n }\n\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 disabled={!onActionClicked || (requiresSelection && selected.length === 0)}\n onClick={(e: SyntheticEvent): void =>\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", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\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\n// import Link from '@splunk/react-ui/Link';\nimport Link from '@splunk/react-ui/Link';\nimport Switch from '@splunk/react-ui/Switch';\nimport { pick, variables } from '@splunk/themes';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { createDOMID } from '@splunk/ui-utils/id';\n\nimport { formatNumber } from './Abbreviate';\n\n// type FieldValueEvent = (e: SyntheticEvent, data: { field: string; value: string }) => void;\n\n// type FieldValueSelectedEvent = (e: SyntheticEvent, data: { field: string; value: string }) => void;\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: any, { value }) => void;\n}\n\nconst BAR_WIDTH = '100px';\n\nconst BarContainer = styled.div`\n width: ${BAR_WIDTH};\n background-color: ${pick({\n enterprise: variables.backgroundColorHover,\n prisma: variables.interactiveColorOverlayHover,\n })};\n`;\n\nconst Bar = styled.div`\n height: ${variables.lineHeight};\n background-color: ${pick({\n enterprise: variables.accentColor,\n prisma: variables.interactiveColorPrimary,\n })};\n`;\n\nconst StyledSwitch = styled(Switch)`\n margin: 0 ${variables.spacingXSmall} 0 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 td {\n font-family: ${variables.monoFontFamily};\n button {\n font-family: ${variables.monoFontFamily};\n }\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 labelId = createDOMID();\n return (\n <tr key={value}>\n {onFieldValueSelected && (\n <td>\n <StyledSwitch\n key={value}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={labelId}\n />\n </td>\n )}\n <ValueCell title={value}>\n {onFieldValueClicked ? (\n <Link\n onClick={(e: SyntheticEvent): void =>\n onFieldValueClicked(e, { value })\n }\n >\n <Truncated id={labelId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={labelId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n\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 ? (action: string) => (e: SyntheticEvent): void => onActionClicked(e, { action })\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=\"toggle\"\n // size=\"small\"\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=\"toggle\"\n onClick={clickHandler(first.name)}\n disabled={selectionCount === 0}\n />\n {popup}\n </ButtonGroup>\n );\n};\n\nexport default SplitButton;\n", "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([]);\n const handleSelectValue = useCallback(\n (e: 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"],
|
|
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;;;AC0BrE,IAAM,YAAY,0BAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKA,yBAAU,aAAa;AAAA,iBAC/B,yBAAU,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAU3B,yBAAU,mBAAmB;AAAA,qBACzB,yBAAU,QAAQ;AAAA,wBACf,yBAAU,aAAa,SAAS,yBAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAO9D,yBAAU,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["export { default, FieldData, FieldSummaryOptions, FieldSummaryProps } from './FieldSummary';\n\nexport { Action, ActionClicked } from './FieldActions';\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", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\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';\nimport { createDOMID } from '@splunk/ui-utils/id';\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: any, { value }) => 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 labelId = createDOMID();\n return (\n <tr key={value}>\n {onFieldValueSelected && (\n <td style={{ padding: 0, margin: 0 }}>\n <StyledSwitch\n key={value}\n value={value}\n selected={selected.indexOf(value) >= 0}\n appearance=\"checkbox\"\n onClick={onFieldValueSelected}\n labelledBy={labelId}\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={labelId}>{value}</Truncated>\n </Link>\n ) : (\n <Truncated id={labelId}>{value}</Truncated>\n )}\n </ValueCell>\n <NumericCell title={percentOfEvents}>{formatNumber(count)}</NumericCell>\n\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 ? (action: string) =>\n (e: SyntheticEvent): void =>\n onActionClicked(e, { action })\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", "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([]);\n const handleSelectValue = useCallback(\n (e: 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "Name"]
|
|
7
7
|
}
|