diff --git a/src/components/BarChartCard/BarChartCard.jsx b/src/components/BarChartCard/BarChartCard.jsx index 688056d68b..1777c8d3b2 100644 --- a/src/components/BarChartCard/BarChartCard.jsx +++ b/src/components/BarChartCard/BarChartCard.jsx @@ -7,7 +7,7 @@ import isNil from 'lodash/isNil'; import uniqBy from 'lodash/uniqBy'; import groupBy from 'lodash/groupBy'; -import { BarChartCardPropTypes, CardPropTypes } from '../../constants/PropTypes'; +import { BarChartCardPropTypes, CardPropTypes } from '../../constants/CardPropTypes'; import { CARD_SIZES, BAR_CHART_TYPES, BAR_CHART_LAYOUTS } from '../../constants/LayoutConstants'; import Card from '../Card/Card'; import { settings } from '../../constants/Settings'; diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index 594d7dec08..6d8f2e8948 100644 --- a/src/components/Card/Card.jsx +++ b/src/components/Card/Card.jsx @@ -16,7 +16,7 @@ import { DASHBOARD_COLUMNS, DASHBOARD_SIZES, } from '../../constants/LayoutConstants'; -import { CardPropTypes } from '../../constants/PropTypes'; +import { CardPropTypes } from '../../constants/CardPropTypes'; import { getCardMinSize } from '../../utils/componentUtilityFunctions'; import { getUpdatedCardSize } from '../../utils/cardUtilityFunctions'; diff --git a/src/components/Dashboard/DashboardGrid.jsx b/src/components/Dashboard/DashboardGrid.jsx index cac40d0301..d1afcba497 100644 --- a/src/components/Dashboard/DashboardGrid.jsx +++ b/src/components/Dashboard/DashboardGrid.jsx @@ -13,7 +13,7 @@ import { DASHBOARD_BREAKPOINTS, DASHBOARD_COLUMNS, } from '../../constants/LayoutConstants'; -import { DashboardLayoutPropTypes } from '../../constants/PropTypes'; +import { DashboardLayoutPropTypes } from '../../constants/CardPropTypes'; const GridLayout = WidthProvider(Responsive); diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index 777e5fcafa..b2573f89b0 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -1284,7 +1284,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb @@ -1293,7 +1293,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb autoComplete="off" className="bx--search-input" disabled={false} - id="Table-toolbar-search" + id="table-for-card-alert-table1-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -1645,7 +1645,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb @@ -3465,7 +3465,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb autoComplete="off" className="bx--search-input" disabled={false} - id="Table-toolbar-search" + id="table-for-card-alert-table1-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -3817,7 +3817,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb @@ -5669,7 +5669,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb autoComplete="off" className="bx--search-input" disabled={false} - id="Table-toolbar-search" + id="table-for-card-alert-table1-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -6021,7 +6021,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb @@ -7334,7 +7334,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb aria-hidden={true} autoComplete="off" className="bx--search-input" - id="Table-toolbar-search" + id="table-for-card-expandedcard-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -7834,7 +7834,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS" data-column="timestamp" data-offset={0} - id="cell-Table-row-0-timestamp" + id="cell-table-for-card-expandedcard-row-0-timestamp" offset={0} > @@ -10288,7 +10288,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb autoComplete="off" className="bx--search-input" disabled={false} - id="Table-toolbar-search" + id="table-for-card-alert-table1-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -10638,7 +10638,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb @@ -23742,7 +23742,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb autoComplete="off" className="bx--search-input" disabled={false} - id="Table-toolbar-search" + id="table-for-card-alert-table1-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -24094,7 +24094,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb { // If I don't have a threshold currently for this column currentThresholdIndex < 0 ) { - highestSeverityThreshold.push(threshold); //eslint-disable-line + highestSeverityThreshold.push({ ...threshold, currentValue: item[threshold.dataSourceId] }); //eslint-disable-line } // The lowest severity is actually the most severe else if (highestSeverityThreshold[currentThresholdIndex].severity > threshold.severity) { - highestSeverityThreshold[currentThresholdIndex] = threshold; //eslint-disable-line + // eslint-disable-next-line + highestSeverityThreshold[currentThresholdIndex] = { + ...threshold, + currentValue: item[threshold.dataSourceId], + }; } return highestSeverityThreshold; }, []); @@ -322,9 +327,9 @@ const TableCard = ({ return matchingThresholdValue ? ( ({ + id: `iconColumn-${columnId}`, + label: uniqueThresholds[index].label + ? uniqueThresholds[index].label + : `${capitalize(columnId)} ${strings.severityLabel}`, + width: uniqueThresholds[index].width, + isSortable: true, + renderDataFunction: renderThresholdIcon, + priority: 1, + filter: { + placeholderText: strings.selectSeverityPlaceholder, + options: [ + { + id: 1, + text: strings.criticalLabel, + }, + { + id: 2, + text: strings.moderateLabel, + }, + { + id: 3, + text: strings.lowLabel, + }, + ], + }, + }); + // Don't add the icon column in sample mode if (!isEditable) { const indexes = columns .map((column, index) => uniqueThresholds.filter(item => item.dataSourceId === column.dataSourceId)[0] - ? { i: index, columnId: column.dataSourceId } + ? { i: index, columnId: column.dataSourceId } // Find the column and put the threshold next to it : null ) .filter(i => !isNil(i)); indexes.forEach(({ i, columnId }, index) => - columnsUpdated.splice(index !== 0 ? i + 1 : i, 0, { - id: `iconColumn-${columnId}`, - label: uniqueThresholds[index].label - ? uniqueThresholds[index].label - : `${capitalize(columnId)} ${strings.severityLabel}`, - width: '200px', - isSortable: true, - renderDataFunction: renderThresholdIcon, - priority: 1, - filter: { - placeholderText: strings.selectSeverityPlaceholder, - options: [ - { - id: 1, - text: strings.criticalLabel, - }, - { - id: 2, - text: strings.moderateLabel, - }, - { - id: 3, - text: strings.lowLabel, - }, - ], - }, - }) + columnsUpdated.splice(index !== 0 ? i + 1 : i, 0, generateThresholdColumn(columnId, index)) + ); + // Check for any threshold columns that weren't matched (if the column was hidden) and add to the end of the array + const missingThresholdColumns = uniqueThresholds.filter( + threshold => !find(columnsUpdated, column => threshold.dataSourceId === column.dataSourceId) + ); + columnsUpdated.splice( + columnsUpdated.length, + 0, + ...missingThresholdColumns.map(({ dataSourceId }, index) => + generateThresholdColumn(dataSourceId, index) + ) ); } + const newColumns = thresholds ? columnsUpdated : columns; const columnsToRender = useMemo( @@ -623,6 +642,7 @@ const TableCard = ({ ); }) - .add('table with thresholds only with value', () => { - const size = select('size', [CARD_SIZES.LARGE, CARD_SIZES.LARGEWIDE], CARD_SIZES.LARGEWIDE); + .add( + 'table with thresholds only with icon', + () => { + const size = select('size', [CARD_SIZES.LARGE, CARD_SIZES.LARGEWIDE], CARD_SIZES.LARGEWIDE); - const thresholds = [ - // this threshold is applied to the whole row, not a particular attribute - { - dataSourceId: 'count', - comparison: '<', - value: 5, - severity: 3, // High threshold, medium, or low used for sorting and defined filtration - }, - { - dataSourceId: 'count', - comparison: '>=', - value: 10, - severity: 1, // High threshold, medium, or low used for sorting and defined filtration - label: 'Count Sev', - }, - { - dataSourceId: 'count', - comparison: '=', - value: 7, - severity: 2, // High threshold, medium, or low used for sorting and defined filtration - }, - { - dataSourceId: 'pressure', - comparison: '>=', - value: 10, - severity: 1, - label: 'Pressure Sev', - showOnContent: true, - }, - ]; + const thresholds = [ + // this threshold is applied to the whole row, not a particular attribute + { + dataSourceId: 'count', + comparison: '<', + value: 5, + severity: 3, // High threshold, medium, or low used for sorting and defined filtration + }, + { + dataSourceId: 'count', + comparison: '>=', + value: 10, + severity: 1, // High threshold, medium, or low used for sorting and defined filtration + label: 'Count Sev', + }, + { + dataSourceId: 'count', + comparison: '=', + value: 7, + severity: 2, // High threshold, medium, or low used for sorting and defined filtration + }, + { + dataSourceId: 'pressure', + comparison: '>=', + value: 10, + severity: 1, + label: 'Pressure Sev', + showOnContent: true, + }, + ]; - return ( -
- action('onCardAction', id, type, payload)} - size={size} - /> -
- ); - }) + return ( +
+ action('onCardAction', id, type, payload)} + size={size} + /> +
+ ); + }, + { + info: { + text: ` + If you don't pass the underlying 'pressure' or 'count' column we will show the threshold icon columns at the right of the table + `, + }, + } + ) .add('table with custom column sort', () => { const size = select('size', [CARD_SIZES.LARGE, CARD_SIZES.LARGEWIDE], CARD_SIZES.LARGEWIDE); diff --git a/src/components/TableCard/__snapshots__/TableCard.story.storyshot b/src/components/TableCard/__snapshots__/TableCard.story.storyshot index 74108946f4..e9e7063dda 100644 --- a/src/components/TableCard/__snapshots__/TableCard.story.storyshot +++ b/src/components/TableCard/__snapshots__/TableCard.story.storyshot @@ -72,7 +72,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table >
@@ -165,7 +165,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table autoComplete="off" className="bx--search-input" disabled={true} - id="Table-toolbar-search" + id="table-for-card-table-list-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -553,7 +553,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS" data-column="alert" data-offset={0} - id="cell-Table-sample-values-table-list-0-alert" + id="cell-table-for-card-table-list-sample-values-table-list-0-alert" offset={0} >
@@ -1544,7 +1544,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table autoComplete="off" className="bx--search-input" disabled={true} - id="Table-toolbar-search" + id="table-for-card-table-list-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -1972,7 +1972,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS" data-column="alert" data-offset={0} - id="cell-Table-sample-values-table-list-0-alert" + id="cell-table-for-card-table-list-sample-values-table-list-0-alert" offset={0} >
@@ -3286,7 +3286,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table aria-hidden={true} autoComplete="off" className="bx--search-input" - id="Table-toolbar-search" + id="table-for-card-table-list-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -3686,7 +3686,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table
@@ -3919,7 +3919,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table aria-hidden={true} autoComplete="off" className="bx--search-input" - id="Table-toolbar-search" + id="table-for-card-table-list-toolbar-search" onBlur={[Function]} onChange={[Function]} placeholder="Search" @@ -4150,7 +4150,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - - - - -