\n Solution Cards enable you to create a visual representation of\n information or details about your cloud account.\n
\n\n Widgets on the Solution Card display the results of saved searches,\n or framework status and summary information from the Control Center\n
\n\n \n \n \n {this.props.addingSolutionCard ? (\n
\n \n \n
\n \n\n \n \n \n
\n \n `/org/${org}/`}\n >\n \n
\n \n \n \n this.onClickSearch('num')}\n >\n \n {numerator}\n \n \n /\n this.onClickSearch('denom')}\n >\n \n {denominator}\n \n \n
\n )\n }\n\n getFontSize = display => {\n const width = this.props.layout.w\n const numChars = display.length\n\n let maxDigitsPerWidth = 1\n let fontSize = 50\n\n while (numChars > maxDigitsPerWidth * width && fontSize > 20) {\n maxDigitsPerWidth++\n fontSize = fontSize - 4\n }\n\n return {\n fontSize: `${fontSize}px`,\n }\n }\n\n getPercentNumber = (numerator, denominator) => {\n let percent = ((numerator / denominator) * 100).toFixed(2)\n const fontSize = this.getFontSize(`${percent}%`)\n if (percent === 'NaN') {\n percent = 0\n }\n if (denominator < 1) {\n percent = 'N/A'\n }\n return (\n \n {this.getNumber(data)}\n
\n \n {this.getNumber(this.props.data)}\n
\n \n
\n )\n}\n\nPreviewContainer.propTypes = {\n children: PropTypes.node,\n}\n\nexport default PreviewContainer\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Input } from 'reactstrap'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport { List } from 'immutable'\nimport _ from 'lodash'\nimport FormLabel from 'components/FormLabel'\nimport CombinedSearches from 'components/CombinedSearches'\nimport RatioWidget from 'components/RatioWidget'\nimport PreviewContainer from './PreviewContainer'\n\nconst styles = {\n wrapperWithPreview: {\n display: 'grid',\n gridTemplateColumns: '35% 1fr',\n gridColumnGap: '2em',\n },\n}\nexport class RatioConfig extends React.Component {\n componentDidUpdate() {\n this.updateValidity()\n }\n\n updateValidity = () => {\n const hasNumSonraiSearch = !!this.props.widgetSonraiSearches.num\n const hasNumSavedSearch =\n !!this.props.widgetSavedSearches.num && !!this.props.widgetSearchCards.num\n\n const hasDenomSonraiSearch = !!this.props.widgetSonraiSearches.denom\n const hasDenomSavedSearch =\n !!this.props.widgetSavedSearches.denom &&\n !!this.props.widgetSearchCards.denom\n\n const hasValidNumSearch = hasNumSavedSearch || hasNumSonraiSearch\n const hasValidDenomSearch = hasDenomSavedSearch || hasDenomSonraiSearch\n\n const hasTitle = this.props.widgetTitle\n\n const valid = hasValidNumSearch && hasValidDenomSearch && hasTitle\n this.props.setValidity(valid)\n }\n\n setTitle = e => {\n this.props.setWidgetTitle(e.target.value)\n }\n\n setDescription = e => {\n const string = e.target.value\n\n this.props.setWidgetOptions({\n description: string,\n })\n }\n\n setNumeratorSearch = option => {\n this.props.setWidgetSavedSearch(option ? option.value : null, 'num')\n }\n\n setDenominatorSearch = option => {\n this.props.setWidgetSavedSearch(option ? option.value : null, 'denom')\n }\n\n setOnclickSearch = option => {\n this.props.setWidgetSavedSearch(option ? option.value : null, 'onclick')\n }\n\n setSonraiOnclickSearch = selectedOption => {\n this.props.setWidgetSonraiSearch(\n selectedOption ? selectedOption.value : null,\n 'sonraionclick'\n )\n }\n\n setNumeratorField = option => {\n this.props.setWidgetSearchField(option ? option.value : null, 'num')\n }\n\n setDenominatorField = option => {\n this.props.setWidgetSearchField(option ? option.value : null, 'denom')\n }\n\n updateDisplayType = e => {\n this.props.setWidgetOptions({\n displayType: e.target.value,\n })\n }\n\n setSonraiSearchDenom = selectedOption => {\n this.props.setWidgetSonraiSearch(\n selectedOption ? selectedOption.value : null,\n 'denom'\n )\n }\n\n setSonraiSearchNum = selectedOption => {\n this.props.setWidgetSonraiSearch(\n selectedOption ? selectedOption.value : null,\n 'num'\n )\n }\n\n render() {\n const denominatorSearchId = this.props.widgetSavedSearches['denom']\n const denominatorField = this.props.widgetSearchCards['denom']\n\n const numeratorSearchId = this.props.widgetSavedSearches['num']\n const numeratorField = this.props.widgetSearchCards['num']\n\n const onclickSearchId = this.props.widgetSavedSearches['onclick']\n const sonraiOnclickSearch = this.props.widgetSonraiSearches['sonraionclick']\n\n const numeratorSonraiSearchName = this.props.widgetSonraiSearches['num']\n const denomSonraiSearchName = this.props.widgetSonraiSearches['denom']\n\n const denomSearchFieldsList = this.props.searchCards.get(\n denominatorSearchId,\n List()\n )\n const numSearchFieldsList = this.props.searchCards.get(\n numeratorSearchId,\n List()\n )\n return (\n Preview
\n {children}\n\n {this.props.previewWidget && (\n \n \n Widget Title\n )\n }\n />\n
\n \n )}\n \n \n \n \n \n \n\n
\n \n )\n }\n}\n\nRatioConfig.propTypes = {\n getQueryBuilder: PropTypes.func.isRequired,\n previewWidget: PropTypes.bool,\n savedSearches: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n searchCards: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetOptions: PropTypes.func.isRequired,\n setWidgetSavedSearch: PropTypes.func,\n setWidgetSearchField: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetSavedSearches: PropTypes.objectOf(PropTypes.array),\n widgetSearchCards: PropTypes.objectOf(PropTypes.object),\n widgetSonraiSearches: PropTypes.objectOf(PropTypes.string),\n widgetTitle: PropTypes.string,\n widgetOptions: PropTypes.shape({\n description: PropTypes.string,\n displayType: PropTypes.string,\n }),\n savedSonraiSearches: ImmutablePropTypes.iterableOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetSonraiSearch: PropTypes.func,\n}\n\nexport default RatioConfig\n","import { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n noColor: {\n id: 'app.components.ColorPicker.noColor',\n defaultMessage: 'Random Color',\n },\n})\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { TwitterPicker } from 'react-color'\nimport uuid from 'uuid/v4'\nimport { FormattedMessage } from 'react-intl'\n\nimport Popover, { PopoverAnchor, PopoverBody } from 'components/Popover'\nimport themeable, { themeShape } from 'containers/ThemeManager/Themeable'\nimport messages from './messages'\n\nconst styles = {\n colorPreview: {\n width: '1em',\n height: '1em',\n border: '1px solid #888',\n display: 'inline-block',\n marginRight: '0.5em',\n borderRadius: '0',\n },\n colorContainer: {\n display: 'flex',\n alignItems: 'center',\n },\n noColor: {\n fontStyle: 'italic',\n color: '#777',\n },\n}\n\nexport class ColorPicker extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n showColorPicker: false,\n }\n\n this.uuid = uuid()\n }\n\n onPickColor = color => {\n this.props.onPickColor(color.hex)\n this.setState({\n showColorPicker: false,\n })\n }\n\n toggleColorPicker = () => {\n this.setState(state => ({\n showColorPicker: !state.showColorPicker,\n }))\n }\n\n onPopoverToggle = newVisibility => {\n this.setState({\n showColorPicker: newVisibility,\n })\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n
\n )\n }\n}\n\nColorPicker.propTypes = {\n onPickColor: PropTypes.func,\n color: PropTypes.string,\n noColorMessage: PropTypes.string,\n theme: themeShape,\n}\n\nexport default themeable(ColorPicker)\n","import React, { Fragment } from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport PropTypes from 'prop-types'\nimport { Table, Input, Label } from 'reactstrap'\nimport { List } from 'immutable'\nimport _ from 'lodash'\n\nimport IHelp from 'containers/IHelp'\nimport BigStatWidget from 'components/BigStatWidget'\nimport TextLink from 'components/TextLink'\nimport Button from 'components/Button'\nimport ColorPicker from 'components/ColorPicker'\nimport BorderlessButton from 'components/BorderlessButton'\nimport Icon from 'components/Icon'\nimport FormLabel from 'components/FormLabel'\nimport CombinedSearches from 'components/CombinedSearches'\nimport { BOUNDARY_OPTIONS } from 'appConstants'\nimport PreviewContainer from './PreviewContainer'\n\nconst styles = {\n sectionTitle: {\n fontSize: '1em',\n fontWeight: '400',\n display: 'grid',\n gridTemplateColumns: '1fr auto',\n },\n addThresholdButton: {\n display: 'flex',\n alignItems: 'center',\n },\n addThresholdIcon: {\n marginRight: '0.5em',\n fontSize: '20px',\n },\n colorPreview: {\n width: '1em',\n height: '1em',\n border: '1px solid #888',\n display: 'inline-block',\n marginRight: '0.5em',\n borderRadius: '0',\n },\n cancelAddThreshold: {\n marginLeft: '0.5em',\n },\n colorContainer: {\n display: 'flex',\n alignItems: 'center',\n },\n newThresholdWrapper: {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr',\n },\n newcolorWrapper: {\n margin: '1em 0',\n },\n thresholdButton: {\n marginBottom: '15px',\n marginRight: '10px',\n width: '45%',\n outline: 'none',\n },\n bigCountPreview: {\n minWidth: '225px',\n height: '225px',\n },\n wrapperWithPreview: {\n display: 'grid',\n gridTemplateColumns: '35% 1fr',\n gridColumnGap: '2em',\n },\n config: {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr',\n gridColumnGap: '2em',\n },\n}\n\nexport class BigCountConfig extends React.Component {\n state = {\n showAddThreshold: false,\n startOfThreshold: 0,\n endOfThreshold: 0,\n showColorPicker: false,\n newThresholdColor: '#FFFFFF',\n operatorSign: '',\n operatorVal: 0,\n range: true,\n boundary: false,\n }\n\n componentDidUpdate() {\n this.updateValidity()\n }\n\n updateValidity = () => {\n const hasSonraiSearch = !!this.props.widgetSonraiSearches.bigcountsearch\n const hasSavedSearch =\n !!this.props.widgetSavedSearches.bigcountsearch &&\n !!this.props.widgetSearchCards.bigcountsearch\n const hasTitle = this.props.widgetTitle\n\n const valid = (hasSonraiSearch || hasSavedSearch) && hasTitle\n this.props.setValidity(valid)\n }\n\n setTitle = e => {\n this.props.setWidgetTitle(e.target.value)\n }\n\n selectSavedSearch = selectedOption => {\n this.props.setWidgetSavedSearch(\n selectedOption ? selectedOption.value : null,\n 'bigcountsearch'\n )\n }\n\n selectSearchField = selectedOption => {\n this.props.setWidgetSearchField(\n selectedOption ? selectedOption.value : null,\n 'bigcountsearch'\n )\n }\n\n setSonraiSearch = selectedOption => {\n this.props.setWidgetSonraiSearch(\n selectedOption ? selectedOption.value : null,\n 'bigcountsearch'\n )\n }\n\n setDescription = e => {\n const string = e.target.value\n\n this.props.setWidgetOptions({\n description: string,\n })\n }\n\n removeMarker = index => {\n const thresholds = [...this.props.widgetOptions.thresholds]\n\n thresholds.splice(index, 1)\n this.props.setWidgetOptions({\n thresholds,\n })\n }\n\n handleStartOfThreshold = e => {\n this.setState({\n startOfThreshold: e.target.value,\n })\n }\n\n showColorPicker = () => {\n this.setState({\n showColorPicker: true,\n })\n }\n\n onPickColor = color => {\n this.setState({\n newThresholdColor: color,\n })\n }\n\n toggleColorPicker = () => {\n this.setState(state => ({\n showColorPicker: !state.showColorPicker,\n }))\n }\n\n handleEndOfThreshold = e => {\n this.setState({\n endOfThreshold: e.target.value,\n })\n }\n\n toggleAddThreshold = () => {\n this.setState(state => ({\n showAddThreshold: !state.showAddThreshold,\n }))\n }\n\n handleSelect = event => {\n this.setState({\n operatorSign: event.target.value,\n })\n }\n\n handleOpperator = event => {\n this.setState({\n operatorVal: event.target.value,\n })\n }\n\n handleBoundaryButton = () => {\n this.setState({\n boundary: true,\n range: false,\n newThresholdColor: '#FFFFFF',\n startOfThreshold: 0,\n endOfThreshold: 0,\n operatorSign: BOUNDARY_OPTIONS.GREATER,\n operatorVal: 0,\n })\n }\n\n handleRangeButton = () => {\n this.setState({\n range: true,\n boundary: false,\n newThresholdColor: '#FFFFFF',\n startOfThreshold: 0,\n endOfThreshold: 0,\n operatorSign: '',\n operatorVal: 0,\n })\n }\n\n resetAddThreshold = () => {\n this.setState({\n showAddThreshold: false,\n showColorPicker: false,\n newThresholdColor: '#FFFFFF',\n startOfThreshold: 0,\n endOfThreshold: 0,\n operatorSign: '',\n operatorVal: 0,\n })\n }\n\n addThreshold = type => {\n const options = this.props.widgetOptions || {}\n const thresholds = options.thresholds || []\n\n if (type === 'between') {\n thresholds.push({\n start: this.state.startOfThreshold,\n end: this.state.endOfThreshold,\n color: this.state.newThresholdColor,\n type: type,\n })\n } else {\n thresholds.push({\n operatorSign: this.state.operatorSign,\n operatorVal: this.state.operatorVal,\n color: this.state.newThresholdColor,\n type: type,\n })\n }\n\n this.props.setWidgetOptions({\n thresholds,\n })\n\n this.resetAddThreshold()\n }\n\n renderThresholdsConfig = () => {\n const thresholds = this.props.widgetOptions.thresholds || []\n return (\n \n
\n | \n | \n {threshold.start} | \nTo | \n{threshold.end} | \n\n \n \n | \n \n | \n {threshold.operatorSign} | \n{threshold.operatorVal} | \n\n \n \n | \n
\n \n
\n )}\n \n \n Range\n \n \n Boundary\n \n
\n {this.state.range ? (\n \n
\n ) : (\n \n \n
\n \n \n
\n \n \n \n \n \n \n
\n \n
\n \n \n
\n\n \n \n this.addThreshold(\n this.state.endOfThreshold !== 0 ? 'between' : 'operator'\n )\n }\n >\n Add Threshold\n \n \n Cancel\n \n
\n \n )\n }\n\n renderPreview = () => {\n return (\n \n Widget Title\n )\n }\n />\n
\n \n {this.props.previewWidget && this.renderPreview()}\n\n
\n )\n }\n}\n\nBigCountConfig.propTypes = {\n getQueryBuilder: PropTypes.func,\n previewWidget: PropTypes.bool,\n savedSearches: ImmutablePropTypes.iterableOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n searchCards: ImmutablePropTypes.mapOf(\n PropTypes.oneOfType([\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n }),\n PropTypes.array,\n ])\n ),\n setWidgetOptions: PropTypes.func,\n setWidgetSavedSearch: PropTypes.func,\n setWidgetSearchField: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetSavedSearches: PropTypes.object,\n widgetSearchCards: PropTypes.object,\n widgetSonraiSearches: PropTypes.object,\n widgetTitle: PropTypes.string,\n widgetOptions: PropTypes.shape({\n thresholds: PropTypes.arrayOf(\n PropTypes.shape({\n start: PropTypes.number,\n end: PropTypes.number,\n color: PropTypes.string,\n })\n ),\n description: PropTypes.string,\n }).isRequired,\n savedSonraiSearches: ImmutablePropTypes.iterableOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetSonraiSearch: PropTypes.func,\n}\n\nexport default BigCountConfig\n","/**\n *\n * GaugeWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { Gauge } from './gauge.min'\nimport _ from 'lodash'\nimport themeable, { themeShape } from 'containers/ThemeManager/Themeable'\n\nclass GaugeComponent extends React.Component {\n constructor(props) {\n super(props)\n this.canvasRef = React.createRef()\n }\n\n waitForRef = () => {\n return new Promise(resolve => {\n const wait = () => {\n if (!this.canvasRef.current) {\n setTimeout(wait, 200)\n return\n }\n\n return resolve()\n }\n\n wait()\n })\n }\n\n componentDidMount() {\n this.waitForRef().then(this.drawGauge)\n }\n\n shouldComponentUpdate(newProps) {\n return (\n !_.isEqual(newProps.markers, this.props.markers) ||\n newProps.value !== this.props.value\n )\n }\n\n componentDidUpdate() {\n if (this.gauge) {\n this.setOptions(this.gauge)\n this.gauge.set(this.props.value) // set actual value\n this.gauge.render()\n }\n }\n\n setOptions = gauge => {\n const opts = {\n angle: 0, // The span of the gauge arc\n lineWidth: 0.3, // The line thickness\n radiusScale: 0.8,\n pointer: {\n length: 0.5, // // Relative to gauge radius\n strokeWidth: 0.035, // The thickness\n color: '#333', // Fill color\n hoveredColor: '#000000',\n valueColor: this.props.theme.primary,\n valueCircleColor: this.props.theme.secondary,\n },\n limitMax: true, // If false, max value increases automatically if value > maxValue\n limitMin: true, // If true, the min value of the gauge will be fixed\n highDpiSupport: true, // High resolution support\n staticZones: this.props.markers.map(marker => {\n return {\n strokeStyle: marker.color,\n min: marker.start,\n max: marker.end,\n }\n }),\n tipLabel: true,\n }\n\n gauge.setOptions(opts)\n }\n\n drawGauge = () => {\n if (!this.gauge && this.canvasRef.current) {\n const ref = this.canvasRef.current\n\n var gauge = new Gauge(ref)\n this.setOptions(gauge)\n\n gauge.maxValue = 100\n gauge.setMinValue(0)\n gauge.animationSpeed = 32\n gauge.set(this.props.value)\n gauge.render()\n\n this.gauge = gauge\n }\n }\n\n render() {\n return (\n \n
\n \n
\n\n \n \n Border Color Thresholds\n
\n {this.renderThresholdsConfig()}\n {this.state.showAddThreshold ? (\n this.renderNewThresholdConfig()\n ) : (\n \n
\n \n Border Color Thresholds\n
\n {this.renderThresholdsConfig()}\n {this.state.showAddThreshold ? (\n this.renderNewThresholdConfig()\n ) : (\n | \n | \n Ending at {slice.marker}% | \n\n\n | \n
\n {this.props.previewWidget && (\n \n \n Widget Title\n )\n }\n />\n
\n \n )}\n\n \n
\n \n )\n }\n}\n\nGaugeConfig.propTypes = {\n editMode: PropTypes.bool,\n getQueryBuilder: PropTypes.func,\n previewWidget: PropTypes.bool,\n savedSearches: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n searchCards: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetOptions: PropTypes.func.isRequired,\n setWidgetSavedSearch: PropTypes.func.isRequired,\n setWidgetSearchField: PropTypes.func.isRequired,\n setWidgetTitle: PropTypes.func.isRequired,\n setValidity: PropTypes.func.isRequired,\n widgetSavedSearches: PropTypes.objectOf(PropTypes.array),\n widgetSearchCards: PropTypes.objectOf(PropTypes.object),\n widgetTitle: PropTypes.string,\n widgetOptions: PropTypes.shape({\n slices: PropTypes.array,\n checkBoxValue: PropTypes.string,\n description: PropTypes.string,\n }).isRequired,\n widgetSonraiSearches: PropTypes.object,\n savedSonraiSearches: ImmutablePropTypes.iterableOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetSonraiSearch: PropTypes.func,\n}\n\nexport default GaugeConfig\n","import React, { Fragment } from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport PropTypes from 'prop-types'\nimport { Input } from 'reactstrap'\nimport { List } from 'immutable'\nimport CombinedSearches from 'components/CombinedSearches'\nimport FormLabel from 'components/FormLabel'\nimport { REGION_MAP_SEARCH_NAME, SUPPORT_EMAIL } from 'appConstants'\n\nexport class RegionsWidgetConfig extends React.Component {\n componentDidUpdate() {\n this.updateValidity()\n }\n\n updateValidity = () => {\n const hasSonraiSearch = !!this.props.widgetSonraiSearches.search\n const hasSavedSearch = !!this.props.widgetSavedSearches.search\n const hasTitle = this.props.widgetTitle\n\n const valid = (hasSonraiSearch || hasSavedSearch) && hasTitle\n this.props.setValidity(valid)\n }\n\n setTitle = e => {\n this.props.setWidgetTitle(e.target.value)\n }\n\n setDescription = e => {\n const string = e.target.value\n\n this.props.setWidgetOptions({\n description: string,\n })\n }\n\n setSubTitle = e => {\n this.props.setWidgetSubTitle(e.target.value)\n }\n\n setSavedSearch = selectedOption => {\n this.props.setWidgetSavedSearch(\n selectedOption ? selectedOption.value : null,\n 'search'\n )\n }\n\n selectSearchField = selectedOption => {\n this.props.setWidgetSearchField(\n selectedOption ? selectedOption.value : null,\n 'search'\n )\n }\n\n setSonraiSearch = selectedOption => {\n this.props.setWidgetSonraiSearch(\n selectedOption ? selectedOption.value : null,\n 'search'\n )\n }\n\n render() {\n const sonraiSearchName = this.props.widgetSonraiSearches['search']\n\n const savedSearchId = this.props.widgetSavedSearches['search']\n const savedSearchField = this.props.widgetSearchCards['search']\n const searchFieldsList = this.props.searchCards.get(\n this.props.widgetSavedSearches['search'],\n List()\n )\n\n return (\n \n
\n\n \n \n
\n Slices
\n {this.renderSlicesConfig()}\n {this.state.showAddSlice ? (\n this.renderAddNewSlice()\n ) : (\n\n Note: This widget only supports resources with a region property. For\n help, please contact support\n
\n\n
\n )\n }\n}\n\nTableConfig.propTypes = {\n savedSearches: ImmutablePropTypes.iterableOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n savedSonraiSearches: ImmutablePropTypes.iterableOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n searchCards: ImmutablePropTypes.mapOf(\n PropTypes.oneOfType([\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n }),\n PropTypes.array,\n ])\n ),\n setWidgetOptions: PropTypes.func,\n setWidgetSavedSearch: PropTypes.func,\n setWidgetSonraiSearch: PropTypes.func,\n setWidgetSearchField: PropTypes.func,\n setWidgetSubTitle: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n description: PropTypes.string,\n }),\n widgetSavedSearches: PropTypes.object,\n widgetSonraiSearches: PropTypes.object,\n widgetSearchCards: PropTypes.object,\n widgetSubTitle: PropTypes.string,\n widgetTitle: PropTypes.string,\n}\n\nexport default TableConfig\n","/**\n *\n * ListWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport _ from 'lodash'\nimport { Map } from 'immutable'\nimport { Query } from 'react-apollo'\nimport gql from 'graphql-tag'\nimport TextLink from 'components/TextLink'\nimport Card, { TopTitle, CardBody } from 'components/Card'\nimport WidgetCard from 'components/WidgetCard'\nimport {\n getFields,\n getTableSavedSearchQuery,\n getSonraiSearchQuery,\n getSearchCard,\n hasSonraiSearch,\n getSonraiSearchData,\n getSelection,\n getWidgetResultsExplorerSavedSearchQuery,\n} from 'query-builder'\nimport { getTypeFromSrn } from 'utils/graphDataUtils'\nimport { getSearchIdForSonraiSearches } from 'utils/sonraiUtils'\nimport themeable, { themeShape } from 'containers/ThemeManager/Themeable'\nimport { queryHasPivotFilter } from 'query-builder'\nimport EmptyWidgetResults from 'components/EmptyWidgetResults'\nimport { exists } from 'utils/sonraiUtils'\n\nconst styles = {\n title: {\n fontSize: '20px',\n fontWeight: '300',\n borderBottom: '1px solid #eee',\n cursor: 'pointer',\n marginRight: '0px',\n },\n containerStyle: {\n overflow: 'auto',\n },\n listContainer: {\n alignItems: 'start',\n },\n list: {\n margin: 0,\n padding: 0,\n width: '100%',\n },\n listItem: {\n listStyleType: 'none',\n padding: '0.5em 1em',\n fontSize: '14px',\n },\n listNumber: {\n color: '#888',\n fontSize: '1.2em',\n },\n noitems: {\n color: '#888',\n textAlign: 'center',\n marginTop: '1em',\n },\n}\n\nclass ListWidget extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n hoveredId: null,\n }\n }\n\n renderListItems = data => {\n if (!data || data.length === 0) {\n return - {this.renderListItems(values)}
- {this.renderListItems(items)}
\n {this.props.previewWidget && (\n \n \n Widget Title\n )\n }\n />\n
\n \n )}\n\n \n
\n \n )\n }\n}\n\nListWidgetConfig.propTypes = {\n getQueryBuilder: PropTypes.func.isRequired,\n previewWidget: PropTypes.bool,\n queryTypes: ImmutablePropTypes.map,\n savedSearches: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n savedSonraiSearches: ImmutablePropTypes.list,\n searchCards: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetSavedSearch: PropTypes.func,\n setWidgetSearchField: PropTypes.func,\n setWidgetSonraiSearch: PropTypes.func,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n items: PropTypes.array,\n properties: PropTypes.array,\n description: PropTypes.string,\n }).isRequired,\n widgetSavedSearches: PropTypes.objectOf(PropTypes.array),\n widgetSearchCards: PropTypes.objectOf(PropTypes.object),\n widgetSonraiSearches: PropTypes.object,\n widgetTitle: PropTypes.string,\n}\n\nexport default ListWidgetConfig\n","import React, { Fragment } from 'react'\nimport PropTypes from 'prop-types'\nimport ApexChart from 'react-apexcharts'\nimport _ from 'lodash'\nimport moment from 'moment'\nimport Scrollable from 'components/Scrollable'\nimport themeable, { themeShape } from 'containers/ThemeManager/Themeable'\nimport EmptyWidgetResults from 'components/EmptyWidgetResults'\nimport { colorForEntityString, stripTags } from 'utils/sonraiUtils'\n\nconst PIE_LEGEND_HEIGHT = 45\n\nexport class SizedChart extends React.Component {\n styles = {\n legendColor: {\n width: '10px',\n height: '10px',\n borderRadius: '50%',\n marginTop: '4px',\n },\n legendEntry: {\n display: 'inline-grid',\n padding: '0 0.3em',\n fontSize: '0.9em',\n wordBreak: 'break-word',\n gridTemplateColumns: '10px 1fr',\n gridColumnGap: '0.5em',\n },\n }\n pointsAreTheSame = () => {\n return _.uniq(this.props.yValues).length === 1\n }\n\n getBarPieOptions = () => {\n const maxYValue = _.max(this.props.yValues)\n const numGridLines = maxYValue < 6 ? maxYValue + 1 : 6 //Default value is 6\n\n return {\n yaxis: {\n //If the yValues are all less than 6, apexgrid will, by default, duplicate them to get 6 gridlines\n tickAmount: numGridLines,\n },\n width: this.props.width,\n chart: {\n toolbar: {\n show: false,\n },\n animations: {\n enabled: !this.props.static,\n },\n events: {\n mounted: this.props.onChartReady,\n beforeMount: apexChartInstance => {\n this.apexChartInstance = apexChartInstance\n },\n dataPointSelection: (e, chart, options) => {\n if (\n (this.props.onClickPoint &&\n this.props.yLabels[options.dataPointIndex] !== 'null') ||\n this.props.yLabels[options.dataPointIndex] !== '-'\n ) {\n this.props.onClickPoint({\n values: this.props.yValues,\n labels: this.props.yLabels,\n index: options.dataPointIndex,\n })\n }\n },\n },\n },\n dataLabels: {\n enabled: false,\n },\n xaxis: {\n categories: this.props.yLabels ? this.props.yLabels : [],\n },\n colors: this.props.colors || this.getPieBarChartColors(),\n labels: this.props.yLabels ? this.props.yLabels : [],\n legend: {\n show: false,\n },\n states: {\n active: {\n filter: 'lighten',\n },\n },\n plotOptions: {\n bar: {\n distributed: true,\n },\n },\n }\n }\n\n getRadialBarOptions = () => {\n return {\n chart: {\n type: 'radialBar',\n events: {\n mounted: this.props.onChartReady,\n },\n animations: {\n enabled: !this.props.static,\n },\n },\n colors: [this.props.theme.secondary],\n plotOptions: {\n radialBar: {\n offsetX: 0,\n offsetY: 0,\n size: undefined,\n startAngle: -135,\n endAngle: 135,\n track: {\n background: '#eaeef3',\n startAngle: -135,\n endAngle: 135,\n padding: 20,\n },\n dataLabels: {\n name: {\n show: false,\n },\n value: {\n fontSize: '20px',\n offsetY: 7,\n show: true,\n },\n },\n },\n },\n fill: {\n type: 'gradient',\n gradient: {\n shade: 'light',\n gradientToColors: [this.props.theme.secondary],\n stops: [0, 100],\n },\n },\n stroke: {\n lineCap: 'butt',\n },\n }\n }\n\n getSparkOptions = () => {\n return {\n chart: {\n toolbar: {\n show: false,\n },\n zoom: {\n enabled: false,\n },\n events: {\n mounted: this.props.onChartReady,\n },\n animations: {\n enabled: !this.props.static,\n },\n },\n markers: {\n size: this.props.xLabels.length <= 1 ? 5 : 0,\n hover: {\n size: this.props.xLabels.length <= 1 ? 6 : 5,\n },\n },\n grid: {\n clipMarkers: false,\n padding: {\n top: -25,\n bottom: -25,\n left: 20,\n right: 20,\n },\n xaxis: {\n lines: {\n show: true,\n },\n },\n yaxis: {\n lines: {\n show: this.props.xLabels.length <= 1 ? true : false,\n },\n },\n },\n stroke: {\n width: 3,\n curve: 'smooth',\n },\n xaxis: {\n min:\n this.props.xLabels.length <= 1\n ? moment(this.props.xLabels[0]).subtract(1, 'd').format('LLL')\n : undefined,\n max:\n this.props.xLabels.length <= 1\n ? moment(this.props.xLabels[0]).add(1, 'd').format('LLL')\n : undefined,\n axisBorder: {\n show: this.props.yValues.length <= 1 ? true : false,\n },\n tooltip: {\n enabled: false,\n },\n axisTicks: {\n show: false,\n },\n type: this.props.xLabels.length <= 1 ? '' : 'datetime',\n categories: this.props.xLabels ? this.props.xLabels : [],\n labels: {\n offsetY: this.props.xLabels.length <= 1 ? -4 : -5,\n },\n },\n yaxis: {\n min: this.props.minY,\n max: this.props.yValues.length <= 1 ? 100 : this.props.maxY,\n show: this.props.yValues.length <= 1 ? true : false,\n axisTicks: {\n show: false,\n },\n axisBorder: {\n show: this.props.yValues.length <= 1 ? true : false,\n },\n labels: {\n show: false,\n },\n },\n colors: [this.props.theme.secondary, ...this.props.theme.chartColors],\n fill: {\n type: this.pointsAreTheSame() ? 'solid' : 'gradient', //If all the data values are the same, for some reason using 'gradient' will not draw a line at all\n gradient: {\n gradientToColors: [this.props.theme.emphasis],\n shade: 'light',\n type: 'vertical',\n stops: [0, 100, 100, 100],\n },\n },\n tooltip: {\n marker: {\n show: false,\n },\n fixed: {\n enabled: false,\n },\n x: {\n show: false,\n },\n y: {\n title: {\n formatter: seriesName => seriesName,\n },\n },\n },\n }\n }\n\n getOptionsForType = () => {\n if (this.props.type === 'spark') {\n return this.getSparkOptions()\n }\n\n if (this.props.type === 'radialBar') {\n return this.getRadialBarOptions()\n }\n\n return this.getBarPieOptions()\n }\n\n getOptions = () => {\n const defaultOptions = this.getOptionsForType()\n\n return _.merge(defaultOptions, this.props.options)\n }\n\n getSeries = () => {\n if (this.props.type === 'spark') {\n return [\n {\n name: stripTags(this.props.yTitle),\n data: this.props.yValues,\n },\n ]\n }\n\n if (this.props.type === 'radialBar') {\n return this.props.yValues\n }\n\n if (this.props.type === 'bar') {\n return [\n {\n name: stripTags(this.props.yTitle),\n data: this.props.yValues,\n },\n ]\n }\n\n return this.props.yValues\n }\n\n getType = () => {\n if (this.props.type === 'spark') {\n return 'line'\n }\n\n return this.props.type\n }\n\n onHoverLegend = e => {\n let series = this.apexChartInstance.series\n series.toggleSeriesOnHover(e, e.target)\n }\n\n getPieBarChartColors = () => {\n return this.props.yLabels.map(label => {\n return colorForEntityString(label, this.props.typeColors)\n })\n }\n\n renderScrollableLegend = () => {\n const colors = this.props.colors || this.getPieBarChartColors()\n\n return (\n \n {this.props.previewWidget && (\n \n \n Widget Title\n )\n }\n />\n
\n \n )}\n \n
\n \n )\n }\n}\n\nPieChartWidgetConfig.propTypes = {\n getQueryBuilder: PropTypes.func,\n previewWidget: PropTypes.bool,\n queryTypes: ImmutablePropTypes.map,\n savedSearches: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n savedSonraiSearches: ImmutablePropTypes.list,\n searchCards: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetSavedSearch: PropTypes.func,\n setWidgetSearchField: PropTypes.func,\n setWidgetSonraiSearch: PropTypes.func,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n items: PropTypes.array,\n properties: PropTypes.array,\n description: PropTypes.string,\n }).isRequired,\n widgetSavedSearches: PropTypes.objectOf(PropTypes.array),\n widgetSearchCards: PropTypes.objectOf(PropTypes.object),\n widgetSonraiSearches: PropTypes.object,\n widgetTitle: PropTypes.string,\n}\n\nexport default PieChartWidgetConfig\n","/**\n *\n * BarChartWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport _ from 'lodash'\nimport { Query } from 'react-apollo'\nimport gql from 'graphql-tag'\n\nimport TextLink from 'components/TextLink'\nimport Chart from 'components/Chart'\nimport Card, { CardBody, BottomTitle } from 'components/Card'\nimport WidgetCard from 'components/WidgetCard'\nimport { Map } from 'immutable'\nimport {\n getFields,\n getGroupedSavedSearchQuery,\n getSearchCard,\n hasSonraiSearch,\n getSelection,\n getSonraiSearchQuery,\n getSonraiSearchData,\n} from 'query-builder'\nimport { queryHasPivotFilter } from 'query-builder'\nimport { flattenData, getSearchIdForSonraiSearches } from 'utils/sonraiUtils'\n\nclass BarChartWidget extends React.Component {\n getQuery = () => {\n if (hasSonraiSearch(this.props.options, 'bar')) {\n return getSonraiSearchQuery(this.props.options.sonraiSearches.bar)\n } else {\n return getGroupedSavedSearchQuery(\n this.props.getQueryBuilder,\n this.props.savedSearches,\n this.props.resultLayout.indexedSearches.bar,\n {},\n 'barchartQuery',\n this.props.resultLayout.widgetOptions.properties.value\n )\n }\n }\n\n onClickSearch = () => {\n this.props.onClickSearch({\n savedSearchId: this.props.resultLayout.indexedSearches.bar,\n sonraiSearchName: this.props.options.sonraiSearches.bar,\n searchTitle: this.props.title,\n })\n }\n\n getSearchName = () => {\n return hasSonraiSearch(this.props.options, 'bar')\n ? this.props.options.sonraiSearches.bar\n : this.props.savedSearches.getIn([\n this.props.resultLayout.indexedSearches.bar,\n 'name',\n ])\n }\n\n onClickPoint = params => {\n const clickedLabel = params.labels[params.index]\n const sliceRepresentsNull = clickedLabel === 'null' || clickedLabel === '-'\n const targetSliceValue = sliceRepresentsNull ? null : clickedLabel\n const property = this.props.resultLayout.widgetOptions.properties.value\n\n const filter = {\n label: property,\n value: targetSliceValue,\n }\n\n this.props.onClickSearch({\n savedSearchId: this.props.resultLayout.indexedSearches.bar,\n sonraiSearchName: this.props.options.sonraiSearches.bar,\n searchTitle: this.props.title,\n savedSearchFilterCardId: getSearchCard(this.props.resultLayout, 'bar').id,\n filter: filter,\n })\n }\n\n getData = data => {\n if (hasSonraiSearch(this.props.options, 'bar')) {\n const items = getSonraiSearchData(data).items\n const flattened = flattenData(items)\n\n const property = this.props.resultLayout.widgetOptions.properties.value\n const counts = {}\n flattened.forEach(\n item => (counts[item[property]] = 1 + (counts[item[property]] || 0))\n )\n\n const countKeys = Object.keys(counts)\n return {\n x: countKeys,\n y: countKeys.map(key => counts[key]),\n }\n } else {\n const fields = getFields(\n this.props.savedSearches,\n this.props.resultLayout.indexedSearches.bar\n ).toJS()\n const searchCard = getSearchCard(this.props.resultLayout, 'bar')\n const selection = getSelection(fields, searchCard, 'group')\n const savedSearchResults = _.get(data, selection) || []\n\n const labels = []\n const bars = []\n !_.isEmpty(this.props.resultLayout.widgetOptions.properties.value) &&\n savedSearchResults.map(item => {\n const label =\n item.key[this.props.resultLayout.widgetOptions.properties.value]\n labels.push(label === null ? 'null' : label)\n bars.push(item.count)\n })\n\n return {\n x: labels,\n y: bars,\n }\n }\n }\n\n getSearchId = () => {\n const { options, sonraiSearches, resultLayout } = this.props\n let searchObj = Map({ uiSearch: null, advancedSearch: null })\n if (hasSonraiSearch(options, 'bar')) {\n const searches = getSearchIdForSonraiSearches(options, sonraiSearches)\n searchObj = searchObj.set('advancedSearch', searches)\n } else {\n searchObj = searchObj.set('uiSearch', resultLayout.indexedSearches.bar)\n }\n return searchObj\n }\n\n render() {\n if (this.props.data === undefined) {\n const searchId = this.getSearchId()\n const queryConfig = this.getQuery()\n if (!queryConfig.gqlStatement) {\n return (\n \n {this.props.previewWidget && (\n \n \n
\n \n )}\n\n \n
\n \n )\n }\n}\n\nBarChartWidgetConfig.propTypes = {\n getQueryBuilder: PropTypes.func,\n queryTypes: ImmutablePropTypes.map,\n savedSearches: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n sid: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n savedSonraiSearches: ImmutablePropTypes.list,\n searchCards: ImmutablePropTypes.mapOf(\n ImmutablePropTypes.contains({\n id: PropTypes.string,\n name: PropTypes.string,\n })\n ),\n setWidgetSavedSearch: PropTypes.func,\n setWidgetSearchField: PropTypes.func,\n setWidgetSonraiSearch: PropTypes.func,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n previewWidget: PropTypes.bool,\n widgetOptions: PropTypes.shape({\n items: PropTypes.array,\n properties: PropTypes.array,\n description: PropTypes.string,\n }).isRequired,\n widgetSavedSearches: PropTypes.objectOf(PropTypes.array),\n widgetSearchCards: PropTypes.objectOf(PropTypes.object),\n widgetSonraiSearches: PropTypes.object,\n widgetTitle: PropTypes.string,\n}\n\nexport default BarChartWidgetConfig\n","import React from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport PropTypes from 'prop-types'\nimport { Input } from 'reactstrap'\nimport { Map } from 'immutable'\n\nimport { ARC_MAP_SEARCH_NAME, SUPPORT_EMAIL } from 'appConstants'\nimport CombinedSearches from 'components/CombinedSearches'\nimport FormLabel from 'components/FormLabel'\n\nexport class AdvMapWidgetConfig extends React.Component {\n componentDidUpdate() {\n this.updateValidity()\n }\n\n updateValidity = () => {\n const hasSonraiSearch = !!this.props.widgetSonraiSearches.advmapsearch\n const hasSavedSearch = !!this.props.widgetSavedSearches.advmapsearch\n\n const hasTitle = this.props.widgetTitle\n\n const valid = (hasSonraiSearch || hasSavedSearch) && hasTitle\n this.props.setValidity(valid)\n }\n\n setTitle = e => {\n this.props.setWidgetTitle(e.target.value)\n }\n\n setDescription = e => {\n const string = e.target.value\n\n this.props.setWidgetOptions({\n description: string,\n })\n }\n\n setSonraiSearch = selectedValue => {\n this.props.setWidgetSonraiSearch(\n selectedValue ? selectedValue.value : undefined,\n 'advmapsearch'\n )\n }\n\n selectSavedSearch = selectedOption => {\n this.props.setWidgetSavedSearch(\n selectedOption ? selectedOption.value : null,\n 'advmapsearch'\n )\n }\n\n selectSearchField = selectedOption => {\n this.props.setWidgetSearchField(\n selectedOption ? selectedOption.value : null,\n 'advmapsearch'\n )\n }\n\n render() {\n const sonraiSearchName = this.props.widgetSonraiSearches['advmapsearch']\n const savedSearchId = this.props.widgetSavedSearches['advmapsearch']\n\n const validSavedSearches = this.props.savedSearches.filter(search => {\n const fields = search.getIn(['query', 'fields'], Map())\n const actions = fields.filter(field => {\n return field.getIn(['definition', 'name'], '') === 'Actions'\n })\n\n const locations = fields.filter(field => {\n return (\n field.getIn(['definition', 'name'], '') === 'performedAt' &&\n actions.has(field.get('parentId'))\n )\n })\n\n return !actions.isEmpty() && !locations.isEmpty()\n })\n\n return (\n \n \n search.get('name').includes(ARC_MAP_SEARCH_NAME)\n )}\n setSonraiSearch={this.setSonraiSearch}\n selectedSonraiValue={sonraiSearchName}\n savedSearches={validSavedSearches}\n selectedSearchId={savedSearchId}\n selectSavedSearch={this.selectSavedSearch}\n savedSearchDisabled={!!sonraiSearchName}\n />\n
\n )\n }\n}\n\nAdvMapWidgetConfig.propTypes = {\n savedSearches: ImmutablePropTypes.iterable.isRequired,\n savedSonraiSearches: ImmutablePropTypes.list.isRequired,\n setWidgetSavedSearch: PropTypes.func.isRequired,\n setWidgetSearchField: PropTypes.func.isRequired,\n setWidgetSonraiSearch: PropTypes.func,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n items: PropTypes.array,\n properties: PropTypes.array,\n description: PropTypes.string,\n }).isRequired,\n widgetSavedSearches: PropTypes.object,\n widgetSonraiSearches: PropTypes.object,\n widgetTitle: PropTypes.string,\n}\n\nexport default AdvMapWidgetConfig\n","/*\n * AlertWidget Messages\n *\n * This contains all the text for the AlertWidget component.\n */\nimport { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n header: {\n id: 'app.components.AlertWidget.header',\n defaultMessage: 'This is the AlertWidget component !',\n },\n findings: {\n id: 'app.components.AlertWidget.findings',\n defaultMessage: 'Findings',\n },\n noData: {\n id: 'app.components.AlertWidget.noData',\n defaultMessage: 'No Data to show',\n },\n})\n","import React, { Component } from 'react'\nimport Icon from 'components/Icon'\nimport PropTypes from 'prop-types'\nimport { getAlertColors } from 'utils/widgetUtils'\nimport messages from './messages'\nimport { FormattedMessage } from 'react-intl'\nimport themeable, { themeShape } from 'containers/ThemeManager/Themeable'\nimport SonraiCountDisplay from 'components/SonraiCountDisplay'\n\nclass SingleAlert extends Component {\n constructor(props) {\n super(props)\n\n this.styles = {\n alertContainer: {\n minWidth: '100%',\n border: '1px solid whitesmoke',\n display: 'flex',\n borderRadius: 10,\n minHeight: '4.25rem',\n margin: '0.25rem 0rem',\n },\n numberContainer: {\n width: '25%',\n height: '100%',\n minHeight: '4.25rem',\n minWidth: '5rem',\n padding: '0.25rem 1rem',\n display: 'flex',\n alignItems: 'center',\n borderBottomLeftRadius: 10,\n borderTopLeftRadius: 10,\n flexDirection: 'column',\n backgroundColor: getAlertColors(props.level, props.theme)\n .backgroundColor,\n },\n alertCount: {\n fontSize: '1.85rem',\n fontWeight: '500',\n color: getAlertColors(props.level, props.theme).color,\n },\n findings: {\n fontSize: '0.8rem',\n fontWeight: '400',\n color: getAlertColors(props.level, props.theme).color,\n lineHeight: 0,\n },\n secondaryContainer: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n minWidth: '270px',\n },\n policyName: {\n alignSelf: 'flex-start',\n overflow: 'hidden',\n padding: '0.8rem 0rem 0rem 0.7rem',\n },\n policyText: {\n fontSize: '0.8rem',\n margin: 0,\n width: '235px',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n iconCont: {\n padding: '0rem 0.7rem 0.8rem 0.7rem',\n display: 'flex',\n alignSelf: 'flex-start',\n alignItems: 'center',\n },\n time: { fontSize: '0.65rem', marginLeft: '0.5rem' },\n }\n }\n render() {\n return (\n \n Note: The search must contain Actions attached to Locations. For help\n crafting these searches, please contact{' '}\n support\n
\n\n this.props.onClickAlert(this.props.id)}\n style={this.styles.numberContainer}\n >\n
\n \n
\n \n
\n \n
\n \n )\n }\n}\n\nSingleAlert.propTypes = {\n id: PropTypes.string.isRequired,\n onClickAlert: PropTypes.func.isRequired,\n style: PropTypes.object.isRequired,\n count: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n level: PropTypes.number.isRequired,\n time: PropTypes.string.isRequired,\n theme: themeShape,\n}\n\nexport default themeable(SingleAlert)\n","/**\n *\n * AlertWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport Radium from 'radium'\nimport { Query } from 'react-apollo'\nimport { exists } from 'utils/sonraiUtils'\nimport Card, { TopTitle, CardBody } from 'components/Card'\nimport moment from 'moment'\nimport _ from 'lodash'\nimport gql from 'graphql-tag'\nimport WidgetCard from 'components/WidgetCard'\nimport { ALERT_LEVELS, CONTROL_FRAMEWORKS } from '../../appConstants'\nimport SingleAlert from './SingleAlert'\nimport messages from './messages'\nimport { FormattedMessage } from 'react-intl'\nimport { Map } from 'immutable'\n\nconst styles = {\n header: { fontSize: '22px', fontWeight: '300' },\n alertsMainContainer: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n maxHeight: '5rem',\n margin: '0.5rem 0rem',\n },\n}\n\nclass AlertWidget extends React.Component {\n setLevel = policy => {\n switch (policy.alertingLevel) {\n case ALERT_LEVELS.INFO:\n return 1\n case ALERT_LEVELS.WARN:\n return 2\n case ALERT_LEVELS.ERROR:\n return 3\n default:\n return 3\n }\n }\n\n getData = data => {\n if (exists(data)) {\n if (exists(data.PolicyEvalLogs)) {\n const logs = data.PolicyEvalLogs.items.filter(item => !item.pass)\n if (!_.isEmpty(logs)) {\n return logs\n .map(policy => ({\n id: policy.policyId,\n key: policy.id,\n // default title just put an empty tick mark\n name: (policy.controlPolicy || { title: '-' }).title,\n count: policy.count || '-', // This is here until the count: null bug is fixed :)\n time: moment.unix(policy.time).fromNow(),\n level: this.setLevel(policy),\n }))\n .sort((a, b) => b.level - a.level)\n .sort((a, b) => new Date(b.time - new Date(a.time)))\n } else {\n return []\n }\n }\n } else []\n }\n\n renderAlerts = alerts => {\n if (exists(alerts)) {\n if (_.isEmpty(alerts)) {\n return (\n \n
\n {this.props.name}
\n\n
\n {this.props.time}
\n \n {' '}\n
\n )\n } else {\n return (\n \n {alerts.map(alert => (\n
\n )\n }\n }\n }\n\n getQuery = () => {\n const { widgetOptions } = this.props.resultLayout\n if (exists(widgetOptions)) {\n if (widgetOptions.alert) {\n if (\n widgetOptions.alert.value !==\n CONTROL_FRAMEWORKS.ALL_CONTROL_FRAMEWORKS\n ) {\n const query = gql`\n query getAlertsByControlFramework {\n PolicyEvalLogs(where: { \n controlFrameworkId: \"${widgetOptions.alert.value}\", \n collapse: true\n }) {\n count\n items {\n policyId\n controlPolicy {\n title\n srn\n }\n pass\n time\n alertingLevel\n count\n srnList\n id\n }\n }\n }\n `\n return query\n } else {\n return gql`\n query getAllAlerts {\n PolicyEvalLogs(where: { collapse: true }) {\n count\n items {\n policyId\n controlPolicy {\n title\n srn\n }\n pass\n time\n alertingLevel\n count\n srnList\n id\n }\n }\n }\n `\n }\n }\n }\n }\n\n renderHeader = () => {\n return (\n \n
\n )\n }\n\n getSearchId = () => {\n //Because it doesn't support saved or sonrai searches - just control frameworks\n return Map({\n uiSearch: null,\n advancedSearch: null,\n })\n }\n render() {\n if (this.props.data === undefined) {\n const searchId = this.getSearchId()\n const query = this.getQuery()\n if (!query) {\n return (\n {this.props.title}
\n \n {this.props.previewWidget && (\n \n \n )}\n
\n )\n }\n}\n\nAlertWidgetConfig.propTypes = {\n previewWidget: PropTypes.bool,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n alert: PropTypes.string,\n description: PropTypes.string,\n }),\n\n widgetTitle: PropTypes.string,\n controlGroupOptions: PropTypes.object,\n}\n\nexport default AlertWidgetConfig\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class WidgetModalErrorBoundary extends Component {\n constructor(props) {\n super(props)\n this.state = {\n hasError: false,\n errorMessage: '',\n errorSource: '',\n componentStack: '',\n errorStack: '',\n }\n\n this.styles = {\n errorWrapper: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n height: '20vh',\n color: '#666666',\n },\n }\n }\n\n componentDidCatch(error, info) {\n this.setState({\n hasError: true,\n errorMessage: error.message,\n errorStack: error.stack,\n componentStack: info.componentStack,\n errorSource: error.source ? error.source.body : '',\n })\n }\n\n logError = () => {\n // eslint-disable-next-line no-console\n console.log({ json: JSON.stringify(this.state), ...this.state })\n }\n\n render() {\n if (this.state.hasError) {\n return (\n \n Widget Title\n )\n }\n />\n
\n \n
\n \n
\n )\n }\n\n return this.props.children\n }\n}\nWidgetModalErrorBoundary.propTypes = {\n children: PropTypes.node.isRequired,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport Icon from 'components/Icon'\nimport Hoverable from 'components/Hoverable'\nimport themeable, { themeShape } from 'containers/ThemeManager/Themeable'\nimport IconLayer from 'components/IconLayer'\nimport Tooltip from 'components/Tooltip'\n\nexport const COMPOUND_ICONS = {\n BIG_STAT: 'bigstat',\n}\n\nclass WidgetType extends React.PureComponent {\n constructor(props) {\n super(props)\n\n this.styles = {\n pickerIcon: {\n display: 'flex',\n justifyContent: 'center',\n },\n pickerTitle: {\n gridArea: 'title',\n paddingTop: '1.5em',\n display: 'flex',\n justifyContent: 'center',\n },\n tooltip: {\n position: 'absolute',\n top: '3px',\n right: '3px',\n },\n wrapper: {\n borderRadius: '3px',\n padding: '1em',\n position: 'relative',\n height: '100%',\n },\n content: {\n display: 'grid',\n gridTemplateRows: '1fr auto',\n gridTemplateAreas: '\"icon\" \"title\"',\n justifyContent: 'center',\n height: '100%',\n },\n }\n }\n\n getIcon = hovered => {\n const commonIconProps = {\n color: hovered ? this.props.theme.primary : this.props.theme.neutralDark,\n style: { fontSize: '40px' },\n }\n\n if (this.props.icon) {\n return (\n \n
\n {localStorage.getItem('sonraiDebugMode') && (\n \n \n \n \n \n Oops... An error occured while editing this widget\n
\n\n {this.state.errorMessage}\n
\n \n{this.state.errorSource}\n {this.state.errorStack}\n {this.state.componentStack}\n \n \n )}\n \n \n {label}\n
\n \n {tooltipContent && (\n \n {this.getIcon(hovered)}\n
\n \n
\n )\n}\n\nWidgetTypePicker.propTypes = {\n selectType: PropTypes.func.isRequired,\n}\n\nexport default WidgetTypePicker\n","/*\n * SparkWidget Messages\n * This contains all the text for the SparkWidget component.\n */\nimport { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n header: {\n id: 'app.components.SparkWidget.header',\n defaultMessage: 'This is the SparkWidget component !',\n },\n noHistory: {\n id: 'app.components.SparkWidget.noHistory',\n defaultMessage: 'No History to show',\n },\n total: {\n id: 'app.components.SparkWidget.total',\n defaultMessage: 'Total: ',\n },\n logs: {\n id: 'app.components.SparkWidget.logs',\n defaultMessage: 'Logs',\n },\n})\n","/**\n *\n * SparkWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport Radium from 'radium'\nimport { FormattedMessage } from 'react-intl'\nimport { Query } from 'react-apollo'\nimport { Map } from 'immutable'\nimport messages from './messages'\nimport { exists } from 'utils/sonraiUtils'\nimport Chart from 'components/Chart'\nimport Card, { TopTitle, CardBody } from 'components/Card'\nimport _ from 'lodash'\nimport gql from 'graphql-tag'\nimport WidgetCard from 'components/WidgetCard'\nimport moment from 'moment'\nimport TextLink from 'components/TextLink'\nconst styles = {\n header: { fontSize: '22px', fontWeight: '300' },\n mainContain: {\n height: '100%',\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n subtitle: {\n alignSelf: 'flex-start',\n fontSize: '1.1rem',\n marginLeft: '0.25rem',\n color: 'rgb(125, 120, 120)',\n },\n chartContain: { height: '90%', width: '100%', padding: '0.5rem' },\n}\n\nclass SparkWidget extends React.Component {\n getData = data => {\n if (exists(data.ControlFrameworkEvalLogs)) {\n const logs = data.ControlFrameworkEvalLogs.items.filter(\n x =>\n x.controlFrameworkId ==\n this.props.resultLayout.widgetOptions.controlFramework.value\n )\n if (!_.isEmpty(logs)) {\n const x = logs.map(log => moment.unix(log.time).format())\n const y = logs.map(log => log.percentPass)\n return { x, y }\n } else {\n return {}\n }\n }\n }\n\n getId = data => {\n if (exists(data.ControlFrameworkEvalLogs)) {\n if (!_.isEmpty(data.ControlFrameworkEvalLogs.items)) {\n return this.props.resultLayout.widgetOptions.controlFramework.value\n }\n }\n }\n\n handleClick = id => {\n this.props.onClickControlFramework(id)\n }\n\n renderChart = (logs, id) => {\n if (_.isEmpty(logs)) {\n return (\n \n Widgets can display the results of saved searches in multiple different\n formats, or can display Control Framework status and summary\n information. Select a display type to configure a new widget\n
\n\n selectType(WIDGET_TYPES.BIG_COUNT)}\n compoundIcon={COMPOUND_ICONS.BIG_STAT}\n tooltipContent=\"The count of results returned by a saved search\"\n />\n selectType(WIDGET_TYPES.TABLE)}\n tooltipContent=\"Display the results of a saved search as a table. You can save the table configuration, such as grouping and hidden columns.\"\n />\n selectType(WIDGET_TYPES.RATIO)}\n tooltipContent=\"A comparison of the count of results returned by two saved searches. May be formatted as a percentage, a ratio, or an average.\"\n />\n selectType(WIDGET_TYPES.GAUGE)}\n tooltipContent=\"Display the results of two saved search as a percentage on a gauge. You can configure the marked ranges on the gauge.\"\n />\n selectType(WIDGET_TYPES.LIST)}\n tooltipContent=\"A numbered list of the first results returned from a saved search. You can configure how many items to show and which field will be displayed\"\n />\n selectType(WIDGET_TYPES.REGIONS)}\n tooltipContent=\"A map of cloud region data returned from an advanced search. These searches must be specially formatted and named. \"\n />\n selectType(WIDGET_TYPES.PIE_CHART)}\n tooltipContent=\"A pie chart that displays all the unique result values of the selected field in a saved search\"\n />\n selectType(WIDGET_TYPES.BAR_CHART)}\n tooltipContent=\"A bar chart that displays all the unique result values of the selected field in a saved search\"\n />\n selectType(WIDGET_TYPES.ADVMAP)}\n tooltipContent=\"An map of activity data returned from an advanced search. These searches must be specially formatted and named. \"\n />\n\n {/* \n ---------These are out for now------------\n selectType(WIDGET_TYPES.ALERT)}\n tooltipContent=\"A list of the active alerts for a control framework\"\n />\n selectType(WIDGET_TYPES.SPARK)}\n tooltipContent=\"A chart of the historical compliance level for a control framework\"\n />\n selectType(WIDGET_TYPES.COMPLIANCE)}\n tooltipContent=\"A gauge showing the current compliance percentage of a control framework\"\n /> \n ---------These are out for now------------\n */}\n selectType(WIDGET_TYPES.TEXT)}\n tooltipContent=\"A customizable text widget\"\n />\n
\n \n
\n )\n } else {\n return (\n \n
\n )\n }\n }\n\n getQuery = () => {\n const { widgetOptions } = this.props.resultLayout\n if (exists(widgetOptions)) {\n if (widgetOptions.controlFramework) {\n const query = {\n doc: gql`\n query controlFrameLogsOverTime {\n ControlFrameworkEvalLogs(where: { \n controlFrameworkId: \"${widgetOptions.controlFramework.value}\", \n from: \"${moment()\n .subtract(widgetOptions.sparkTimeFrame.value, 'days')\n .format('YYYY-MM-DD')}\"\n }) {\n items {\n id\n controlFrameworkId\n percentPass\n time\n }\n }\n }\n `,\n }\n return query\n }\n }\n }\n\n renderHeader = id => {\n if (exists(id)) {\n return (\n \n this.handleClick(id)}>\n \n
\n \n _.round(num, 1)) : logs.y\n }\n xLabels={logs.x}\n />\n
\n {this.props.title}
\n \n
\n )\n }\n }\n\n getSearchId = () => {\n //Because it doesn't support saved or sonrai searches - just control frameworks\n return Map({\n uiSearch: null,\n advancedSearch: null,\n })\n }\n\n render() {\n if (this.props.data === undefined) {\n const searchId = this.getSearchId()\n const query = this.getQuery()\n if (!query.doc) {\n return (\n {this.props.title}
\n \n {this.props.previewWidget && (\n \n \n )}\n
\n )\n }\n}\n\nSparkWidgetConfig.propTypes = {\n previewWidget: PropTypes.bool,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n controlFramework: PropTypes.object,\n description: PropTypes.string,\n sparkTimeFrame: PropTypes.object,\n }),\n\n widgetTitle: PropTypes.string,\n controlGroupOptions: PropTypes.object,\n}\n\nexport default SparkWidgetConfig\n","/*\n * ComplianceWidget Messages\n *\n * This contains all the text for the ComplianceWidget component.\n */\nimport { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n header: {\n id: 'app.components.ComplianceWidget.header',\n defaultMessage: 'This is the ComplianceWidget component !',\n },\n noData: {\n id: 'app.components.ComplianceWidget.noData',\n defaultMessage: 'No Data to show',\n },\n})\n","/**\n *\n * ComplianceWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { Query } from 'react-apollo'\nimport messages from './messages'\nimport { exists } from 'utils/sonraiUtils'\nimport Chart from 'components/Chart'\nimport Card, { TopTitle, CardBody } from 'components/Card'\nimport _ from 'lodash'\nimport gql from 'graphql-tag'\nimport WidgetCard from 'components/WidgetCard'\nimport { round } from 'utils/widgetUtils'\nimport { FormattedMessage } from 'react-intl'\nimport TextLink from 'components/TextLink'\nimport { Map } from 'immutable'\nconst styles = {\n header: { fontSize: '1.1rem', fontWeight: '300' },\n chartContainer: {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n}\n\nclass ComplianceWidgets extends React.Component {\n getData = data => {\n if (exists(data.ControlFrameworkEvalLogs)) {\n if (!_.isEmpty(data.ControlFrameworkEvalLogs.items)) {\n const percentage = data.ControlFrameworkEvalLogs.items[0].percentPass\n if (exists(percentage)) {\n return [round(percentage, 1)]\n } else {\n return []\n }\n }\n }\n }\n\n renderChart = value => {\n if (_.isEmpty(value)) {\n return (\n \n Widget Title\n )\n }\n />\n
\n \n
\n \n
\n )\n } else {\n return (\n {this.props.title}
\n \n
\n )\n }\n }\n\n getSearchId = () => {\n //Because it doesn't support saved or sonrai searches - just control frameworks\n return Map({\n uiSearch: null,\n advancedSearch: null,\n })\n }\n\n render() {\n if (this.props.data === undefined) {\n const searchId = this.getSearchId()\n const query = this.getQuery()\n if (!query) {\n return (\n {this.props.title}
\n \n {this.renderChart(value)}\n
\n \n {this.renderChart(this.props.data)}\n
\n \n {this.props.previewWidget && (\n \n \n )}\n\n
\n )\n }\n}\n\nComplianceWidgetConfig.propTypes = {\n previewWidget: PropTypes.bool,\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n setValidity: PropTypes.func,\n widgetOptions: PropTypes.shape({\n controlFramework: PropTypes.object,\n description: PropTypes.string,\n }),\n\n widgetTitle: PropTypes.string,\n controlGroupOptions: PropTypes.object,\n}\n\nexport default ComplianceWidgetConfig\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Input } from 'reactstrap'\nimport FormLabel from 'components/FormLabel'\nimport MarkdownEditor from 'components/MarkdownEditor'\n\nclass TextWidgetConfig extends React.Component {\n setTitle = e => {\n this.props.setWidgetTitle(e.target.value)\n }\n\n componentDidUpdate() {\n this.updateValidity()\n }\n\n updateValidity = () => {\n const hasTitle = !!this.props.widgetTitle\n const hasMarkdown = !!this.props.widgetOptions.description\n const isValid = hasTitle && hasMarkdown\n this.props.setValidity(isValid)\n }\n\n render() {\n return (\n \n Widget Title\n )\n }\n />\n
\n \n
\n \n
\n )\n }\n}\n\nTextWidgetConfig.propTypes = {\n setWidgetOptions: PropTypes.func,\n setWidgetTitle: PropTypes.func,\n widgetOptions: PropTypes.shape({\n description: PropTypes.string,\n }),\n setValidity: PropTypes.func,\n widgetTitle: PropTypes.string,\n}\n\nexport default TextWidgetConfig\n","/**\n *\n * WidgetModal\n *\n */\n\nimport React from 'react'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport { FormattedMessage } from 'react-intl'\nimport { createStructuredSelector } from 'reselect'\nimport { compose, bindActionCreators } from 'redux'\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'\nimport { Map } from 'immutable'\n\nimport Breadcrumb, { BreadcrumbItem } from 'components/Breadcrumb'\nimport TextLink from 'components/TextLink'\nimport Button from 'components/Button'\nimport { WIDGET_TYPES } from 'appConstants'\nimport {\n selectSavedSearches,\n selectSonraiSearches,\n selectQueryTypes,\n} from 'containers/SonraiData/selectors'\nimport { selectControlGroups } from 'containers/ControlFrameworkData/selectors'\n\nimport injectReducer from 'utils/injectReducer'\nimport injectSaga from 'utils/injectSaga'\nimport {\n updateEditWidget,\n addSCWidget,\n} from 'containers/SolutionCenter/actions'\nimport Icon from 'components/Icon'\n\nimport {\n selectSearchCardsBySearchId,\n selectWidgetSize,\n selectWidgetType,\n selectWidgetTitle,\n selectWidgetOptions,\n selectWidgetSelector,\n selectWidgetSubTitle,\n selectPreviewWidget,\n selectWidgetResultLayout,\n} from './selectors'\nimport reducer from './reducer'\nimport messages from './messages'\nimport {\n setWidgetTitle,\n setWidgetSubTitle,\n setWidgetType,\n setWidgetSelector,\n setWidgetFormatter,\n setWidgetSearchField,\n setWidgetSavedSearch,\n clearWidgetModal,\n togglePreviewWidget,\n setWidgetSize,\n setWidgetOptions,\n setWidgetSonraiSearch,\n loadWidget,\n} from './actions'\nimport sagas from './sagas'\nimport RatioConfig from './RatioConfig'\nimport BigCountConfig from './BigCountConfig'\nimport GaugeConfig from './GaugeConfig'\nimport RegionsWidgetConfig from './RegionsWidgetConfig'\nimport TableConfig from './TableConfig'\nimport ListWidgetConfig from './ListWidgetConfig'\nimport PieChartWidgetConfig from './PieChartWidgetConfig'\nimport BarChartWidgetConfig from './BarChartWidgetConfig'\nimport MapWidgetConfig from './AdvMapWidgetConfig'\nimport AlertWidgetConfig from './AlertWidgetConfig'\nimport WidgetModalErrorBoundary from './WidgetModalErrorBoundary'\nimport WidgetTypePicker from './WidgetTypePicker'\nimport SparkWidgetConfig from './SparkWidgetConfig'\nimport ComplianceWidgetConfig from './ComplianceWidgetConfig'\nimport TextWidgetConfig from './TextWidgetConfig'\n\nconst hasPreview = [\n 'bigCount',\n 'barChart',\n 'pieChart',\n 'alert',\n 'spark',\n 'compliance',\n 'gauge',\n 'ratio',\n 'list',\n]\n\nconst styles = {\n footerTextContainer: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '100%',\n },\n previewModalContainer: {\n display: 'flex',\n justifyContent: 'center',\n minWidth: '1100px',\n },\n footerContainer: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n position: 'relative',\n },\n breadcrumbContainer: {\n marginBottom: '1em',\n },\n}\n\nexport class WidgetModal extends React.PureComponent {\n state = {\n valid: false,\n }\n\n componentDidUpdate(oldProps) {\n if (\n !oldProps.isOpen &&\n this.props.isOpen &&\n !this.props.editingWidget.isEmpty()\n ) {\n this.props.loadWidget(this.props.editingWidget)\n }\n\n if (oldProps.isOpen && !this.props.isOpen) {\n this.props.clearWidgetModal()\n }\n }\n\n componentWillUnmount() {\n this.props.clearWidgetModal()\n }\n\n setValidity = valid => {\n this.setState({\n valid,\n })\n }\n\n getSelector = (widgetSelector, widgetType) => {\n if (widgetSelector) {\n return `${widgetSelector}`\n } else {\n return WIDGET_TYPES[widgetType]\n }\n }\n\n updateWidget = () => {\n const {\n widgetType,\n widgetTitle,\n widgetSubTitle,\n widgetSize,\n widgetSelector,\n widgetResultLayout,\n widgetOptions,\n } = this.props\n\n this.props.updateEditWidget(this.props.card, {\n sid: this.props.editingWidget.get('sid'),\n srn: this.props.editingWidget.get('srn'),\n title: widgetTitle,\n subtitle: widgetSubTitle,\n type: widgetType,\n widgetSize: widgetSize,\n resultLayout: widgetResultLayout,\n selection: this.getSelector(widgetSelector, widgetType),\n contains: {\n add: Object.values(widgetResultLayout.indexedSearches),\n },\n options: widgetOptions,\n })\n }\n\n addWidget = () => {\n const {\n widgetType,\n widgetTitle,\n widgetSubTitle,\n widgetSize,\n widgetSelector,\n widgetResultLayout,\n widgetOptions,\n } = this.props\n\n const searches = Object.values(\n widgetResultLayout.indexedSearches\n ).map(searchSID => this.props.savedSearches.get(searchSID).get('srn'))\n\n this.props.addSCWidget(this.props.card, {\n title: widgetTitle,\n subtitle: widgetSubTitle,\n type: widgetType,\n resultLayout: widgetResultLayout,\n selection: this.getSelector(widgetSelector, widgetType),\n widgetSize: [widgetSize[0], widgetSize[1]],\n widgetLocation: [0, 0],\n static: false,\n contains: { add: searches },\n options: widgetOptions,\n })\n }\n\n setWidgetType = e => {\n const type = e.target.value\n this.selectType(type)\n }\n\n resetType = () => {\n this.props.setWidgetType(null)\n if (this.props.previewWidget) {\n this.props.togglePreviewWidget()\n }\n }\n\n selectType = type => {\n this.props.setWidgetType(type)\n if (\n (hasPreview.includes(type) && !this.props.previewWidget) ||\n (!hasPreview.includes(type) && this.props.previewWidget)\n ) {\n this.props.togglePreviewWidget()\n }\n\n // [Width, Height]\n if (type === WIDGET_TYPES.TABLE || type === WIDGET_TYPES.TEXT) {\n this.props.setWidgetSize([20, 12])\n } else if (type === WIDGET_TYPES.GAUGE) {\n this.props.setWidgetSize([12, 8])\n } else if (type === WIDGET_TYPES.REGIONS) {\n this.props.setWidgetSize([20, 12])\n } else if (type === WIDGET_TYPES.ALERT) {\n this.props.setWidgetSize([14, 11])\n } else if (type === WIDGET_TYPES.ADVMAP) {\n this.props.setWidgetSize([30, 18])\n } else if (type === WIDGET_TYPES.LIST) {\n this.props.setWidgetSize([8, 12])\n } else if (type === WIDGET_TYPES.SPARK) {\n this.props.setWidgetSize([28, 8])\n } else if (type === WIDGET_TYPES.COMPLIANCE) {\n this.props.setWidgetSize([10, 8])\n } else {\n this.props.setWidgetSize([8, 6])\n }\n }\n\n setWidgetSearchField = (field, index) => {\n this.props.setWidgetSearchField(field, index, this.props.savedSearches)\n }\n\n getConfigComponent = () => {\n const type = this.props.widgetType\n switch (type) {\n case WIDGET_TYPES.BIG_COUNT:\n return BigCountConfig\n case WIDGET_TYPES.TABLE:\n return TableConfig\n case WIDGET_TYPES.RATIO:\n return RatioConfig\n case WIDGET_TYPES.GAUGE:\n return GaugeConfig\n case WIDGET_TYPES.LIST:\n return ListWidgetConfig\n case WIDGET_TYPES.REGIONS:\n return RegionsWidgetConfig\n case WIDGET_TYPES.PIE_CHART:\n return PieChartWidgetConfig\n case WIDGET_TYPES.BAR_CHART:\n return BarChartWidgetConfig\n case WIDGET_TYPES.ADVMAP:\n return MapWidgetConfig\n case WIDGET_TYPES.ALERT:\n return AlertWidgetConfig\n case WIDGET_TYPES.SPARK:\n return SparkWidgetConfig\n case WIDGET_TYPES.COMPLIANCE:\n return ComplianceWidgetConfig\n case WIDGET_TYPES.TEXT:\n return TextWidgetConfig\n default:\n return null\n }\n }\n\n getWidgetTypeLabel = () => {\n switch (this.props.widgetType) {\n case WIDGET_TYPES.BIG_COUNT:\n return 'Big Count'\n case WIDGET_TYPES.TABLE:\n return 'Table'\n case WIDGET_TYPES.RATIO:\n return 'Ratio'\n case WIDGET_TYPES.GAUGE:\n return 'Gauge'\n case WIDGET_TYPES.LIST:\n return 'List'\n case WIDGET_TYPES.REGIONS:\n return 'Regions'\n case WIDGET_TYPES.PIE_CHART:\n return 'Pie Chart'\n case WIDGET_TYPES.BAR_CHART:\n return 'Bar Chart'\n case WIDGET_TYPES.ADVMAP:\n return 'Arc Map'\n case WIDGET_TYPES.ALERT:\n return 'Alerts'\n case WIDGET_TYPES.SPARK:\n return 'Compliance over Time'\n case WIDGET_TYPES.COMPLIANCE:\n return 'Current Compliance'\n case WIDGET_TYPES.TEXT:\n return 'Text'\n default:\n return ''\n }\n }\n\n getWidgetInputs = () => {\n const ConfigComponent = this.getConfigComponent()\n\n if (!ConfigComponent) {\n return null\n }\n\n return (\n \n \n this.props.setWidgetOptions({\n description: value,\n })\n }\n />\n
\n \n {this.props.editingWidget.isEmpty() && (\n
\n )\n }\n\n render() {\n const widgetCanPreview = hasPreview.includes(this.props.widgetType)\n const isDisabled =\n !this.state.valid || this.props.saving || !this.props.widgetType\n\n return (\n \n \n \n \n Widget Types\n \n \n {this.getWidgetTypeLabel()} \n \n
\n )}\n {this.getWidgetInputs()}
\n \n {widgetCanPreview && (\n \n {this.props.previewWidget\n ? 'Hide Widget Preview'\n : 'Show Widget Preview'}\n \n )}\n
\n \n \n Cancel\n \n \n {this.props.saving ? (\n
\n \n {Object.keys(legend).map(type => {\n return (\n
\n )\n }\n\n shouldComponentUpdate = (nextProps, nextState) => {\n let wwjd =\n Math.abs(nextProps.size.width - this.props.size.width) > 10 ||\n Math.abs(nextProps.size.height - this.props.size.height) > 10\n if (\n wwjd ||\n nextState.zoom !== this.state.zoom ||\n this.state.activeMarker !== nextState.activeMarker ||\n this.state.selectedMarker !== nextState.selectedMarker ||\n this.state.itemsHover !== nextState.itemsHover\n ) {\n return true\n } else {\n return false\n }\n }\n\n render() {\n let sizes = {}\n\n if (!this.props.size.height || !this.props.size.width) {\n sizes = {\n height: '100%',\n width: '100%',\n }\n } else {\n sizes = {\n height: `${this.props.size.height}px`,\n width: `${this.props.size.width * 0.8}px`,\n }\n }\n\n return (\n \n
\n )\n })}\n {type}
\n \n {legend[type].map(thisLeg => {\n return thisLeg\n })}\n
\n \n {this.getLegend()}\n \n \n \n {this.renderGeography}\n \n {this.getMarkers()}\n \n \n
\n \n \n \n
\n \n )\n }\n}\n\nRegionsMap.defaultProps = {\n onClickRegion: () => {},\n}\n\nRegionsMap.propTypes = {\n onClickRegion: PropTypes.func.isRequired,\n regionCounts: PropTypes.objectOf(PropTypes.number),\n theme: themeShape,\n size: PropTypes.shape({\n width: PropTypes.number,\n height: PropTypes.number,\n }),\n}\n\nexport default themeable(RegionsMap)\n","/**\n *\n * RegionsWidget\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport _ from 'lodash'\nimport { List } from 'immutable'\n\nimport messages from './messages'\nimport { TopTitle, CardBody } from 'components/Card'\nimport WidgetCard from 'components/WidgetCard'\nimport gql from 'graphql-tag'\nimport { Query } from 'react-apollo'\nimport { queryHasPivotFilter } from 'query-builder'\nimport SizeMe from 'components/SizeMe'\nimport { getSearchIdForSonraiSearches } from 'utils/sonraiUtils'\nimport { Map } from 'immutable'\nimport {\n hasSonraiSearch,\n getSonraiSearchQuery,\n getSonraiSearchData,\n getBaseSonraiSearchData,\n getFields,\n getSearchCard,\n getSelection,\n} from 'query-builder'\nimport RegionsMap from './RegionsMap'\nimport { FormattedMessage } from 'react-intl'\nimport TextLink from 'components/TextLink'\nconst styles = {\n title: {\n fontSize: '22px',\n fontWeight: '300',\n marginBottom: '5px',\n },\n subtitle: {\n fontSize: '14px',\n fontWeight: '300',\n color: '#777777',\n },\n}\n\nconst SizedRegionsMap = SizeMe(RegionsMap)\n\nclass RegionsWidget extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n thisHeight: null,\n thisWidth: null,\n }\n }\n\n getTableSavedSearchQuery = () => {\n let fields = getFields(\n this.props.savedSearches,\n this.props.resultLayout.indexedSearches.search\n )\n\n if (fields.isEmpty()) {\n return {}\n }\n\n const rootField = fields.find(\n statement => !statement.get('parentId'),\n null,\n Map()\n )\n\n const queryBuilder = this.props.getQueryBuilder(fields)\n queryBuilder.enableFlattenMode()\n queryBuilder.skipCounts()\n\n //Force-add the required columns if they are not present\n const searchCard = getSearchCard(this.props.resultLayout, 'search')\n\n queryBuilder.fields = queryBuilder.fields.update(searchCard.id, field => {\n if (!field.get('displayFields', List()).includes('region')) {\n field = field.update('displayFields', List(), propList =>\n propList.push('region')\n )\n }\n\n return field\n })\n\n const query = queryBuilder.buildPivotableSource(\n rootField.get('id'),\n 'regionmapwidget',\n { limit: 1000 }\n )\n\n return { ...query, flatten: true }\n }\n\n getWidgetQueryConfig = () => {\n if (hasSonraiSearch(this.props.options, 'search')) {\n return getSonraiSearchQuery(this.props.options.sonraiSearches.search)\n } else {\n return this.getTableSavedSearchQuery()\n }\n }\n\n getRootItem = data => {\n const keys = Object.keys(data)\n const rootKey = keys[0]\n\n return data[rootKey]\n }\n\n onClickSearch = () => {\n this.props.onClickSearch({\n savedSearchId: this.props.resultLayout.indexedSearches.search,\n sonraiSearchName: this.props.options.sonraiSearches.search,\n searchTitle: this.props.title,\n })\n }\n\n getSearchName = () => {\n return hasSonraiSearch(this.props.options, 'search')\n ? this.props.options.sonraiSearches.search\n : ''\n }\n\n onClickSonraiSearchRegion = (allData, regionName) => {\n const baseData = getBaseSonraiSearchData(allData)\n const dataType = Object.keys(baseData)[0]\n const baseQuery = this.props.sonraiSearches.find(\n search => search.get('name') === this.props.options.sonraiSearches.search\n )\n\n if (!baseQuery) {\n return\n }\n\n const baseQueryContent = baseQuery.get('query')\n\n let finalQuery\n\n const hasWhereClauseRegex = new RegExp(\n `${dataType}\\\\s*\\\\(.*where\\\\s*:\\\\s*(\\\\{.*\\\\})\\\\).*\\\\{`\n )\n const whereMatch = baseQueryContent.match(hasWhereClauseRegex)\n if (whereMatch && whereMatch.length > 1) {\n //The sonrai search has a built-in where clause, so we want to preserve that\n const originalWhereClause = whereMatch[1]\n finalQuery = `\n {\n ${dataType} ( where: {\n and: [\n {region: {op: EQ, value: \"${regionName}\"}},\n ${originalWhereClause}\n ]\n }) {\n items {\n name\n region\n srn\n }\n }\n }\n `\n } else {\n finalQuery = `\n {\n ${dataType} ( where: {\n region: {op: EQ, value: \"${regionName}\"}\n }) {\n items {\n name\n region\n srn\n }\n }\n }\n `\n }\n\n this.props.onClickSearch({\n advancedQuery: finalQuery,\n sonraiSearchName: this.props.options.sonraiSearches.search,\n searchTitle: `${this.props.title} - ${regionName}`,\n })\n }\n\n onClickRegion = (allData, regionName) => {\n if (!regionName || !this.props.onClickSearch) {\n return\n }\n\n if (hasSonraiSearch(this.props.options, 'search')) {\n this.onClickSonraiSearchRegion(allData, regionName)\n } else {\n const filter = {\n label: 'region',\n value: regionName,\n }\n\n this.props.onClickSearch({\n savedSearchId: this.props.resultLayout.indexedSearches.search,\n searchTitle: this.props.title,\n filter: filter,\n })\n }\n }\n\n getUsedRegionInfo = data => {\n if (_.isEmpty(data)) {\n return {}\n }\n\n if (hasSonraiSearch(this.props.options, 'search')) {\n //This widget expects the results to be a shape like:\n // {\n // \"data\": {\n // \"Data\": {\n // \"group\": [\n // {\n // \"key\": {\n // \"region\": \"eu-west-2\"\n // },\n // \"count\": 7\n // },\n // {\n // \"key\": {\n // \"region\": \"eastus\"\n // },\n // \"count\": 1\n // }\n // ]\n // }\n // }\n // }\n\n const rootData = getSonraiSearchData(data)\n const groupResults = rootData.group || []\n const formatted = {}\n\n groupResults.forEach(result => {\n const regionName = _.get(result, ['key', 'region'], 'UNMAPPED')\n formatted[regionName] = result.count\n })\n\n return formatted\n } else {\n const fields = getFields(\n this.props.savedSearches,\n this.props.resultLayout.indexedSearches.search\n ).toJS()\n\n const searchCard = getSearchCard(this.props.resultLayout, 'search')\n const selection = getSelection(fields, searchCard, 'items', 'items')\n\n if (!selection) {\n return 'DATA ERROR'\n }\n\n const items = _.get(data, [...selection])\n const counts = _.countBy(items, 'region')\n return counts\n }\n }\n\n handleSizeChange = _.throttle(size => {\n this.setState({ thisHeight: size.height })\n\n this.setState({ thisWidth: size.width })\n }, 100)\n\n getSearchId = () => {\n const { options, sonraiSearches, resultLayout } = this.props\n let searchObj = Map({ uiSearch: null, advancedSearch: null })\n if (hasSonraiSearch(options, 'search')) {\n const searches = getSearchIdForSonraiSearches(options, sonraiSearches)\n searchObj = searchObj.set('advancedSearch', searches)\n } else {\n searchObj = searchObj.set('uiSearch', resultLayout.indexedSearches.search)\n }\n return searchObj\n }\n\n render() {\n if (this.props.data === undefined) {\n const queryConfig = this.getWidgetQueryConfig()\n const searchId = this.getSearchId()\n\n if (queryConfig) {\n if (!queryConfig.gqlStatement) {\n return (\n {this.props.subtitle}
\n{this.props.title}
\n{this.props.subtitle}
\n\n
\n \n \n )\n }\n } else {\n const regionCounts = this.props.data\n return (\n \n \n this.getGradient(conf, index))}\n >\n \n \n {this.renderGeography}\n \n\n \n {arcs.map((conf, index) => (\n \n \n \n \n
\n \n \n \n
\n \n )\n }\n}\n\nArcMap.defaultProps = {\n arcs: [],\n combine: true,\n onClickRegion: () => {},\n}\n\nArcMap.propTypes = {\n arcs: PropTypes.array,\n combine: PropTypes.bool,\n theme: themeShape,\n}\n\nexport default themeable(ArcMap)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport { Query } from 'react-apollo'\nimport gql from 'graphql-tag'\nimport _ from 'lodash'\nimport { Map, List } from 'immutable'\n\nimport { TopTitle, CardBody } from 'components/Card'\nimport WidgetCard from 'components/WidgetCard'\nimport { getCoordConf } from 'utils/widgetUtils'\nimport { getSearchIdForSonraiSearches } from 'utils/sonraiUtils'\nimport TextLink from 'components/TextLink'\n\nimport {\n getSonraiSearchQuery,\n getSonraiSearchData,\n hasSonraiSearch,\n queryHasPivotFilter,\n getFields,\n getSelection,\n} from 'query-builder'\nimport ArcMap from './ArcMap'\n\nexport class ArcMapWidget extends React.Component {\n styles = {\n title: {\n fontSize: '22px',\n fontWeight: '300',\n },\n }\n\n getText = locations => {\n if (_.isEmpty(locations)) {\n return []\n }\n\n const points = []\n const locs = new Set() //eslint-disable-line no-restricted-globals\n locations.items.forEach(item => {\n const name = _.get(item, ['isInRegion', 'items', 0, 'name'])\n locs.add(name)\n })\n locs.forEach(name => {\n const { coordinates } = getCoordConf(name)\n const nme = name || 'null'\n if (\n coordinates &&\n coordinates[0] !== null &&\n coordinates[1] !== null &&\n nme !== null\n ) {\n points.push({ position: coordinates, name: nme })\n }\n })\n\n return points\n }\n\n getArcs = locations => {\n if (_.isEmpty(locations)) {\n return []\n }\n\n const arcs = []\n\n locations.items.forEach(item => {\n const name = item.region\n const { coordinates } = getCoordConf(name)\n if (coordinates !== null && coordinates.indexOf(null) === -1) {\n const attachedLocations = _.get(item, ['performedAt', 'items'])\n attachedLocations.forEach(loc => {\n arcs.push({\n from: {\n name: loc.srn,\n coordinates: [loc.longitude, loc.latitude],\n },\n to: {\n name,\n coordinates,\n },\n })\n })\n }\n })\n\n return arcs\n }\n\n getTableSavedSearchQuery = () => {\n let fields = getFields(\n this.props.savedSearches,\n this.props.resultLayout.indexedSearches.advmapsearch\n )\n\n if (fields.isEmpty()) {\n return {}\n }\n\n const rootField = fields.find(\n statement => !statement.get('parentId'),\n null,\n Map()\n )\n\n const queryBuilder = this.props.getQueryBuilder(fields)\n queryBuilder.enableFlattenMode()\n queryBuilder.skipCounts()\n\n //Force-add the required columns if they are not present\n queryBuilder.fields = queryBuilder.fields.map(field => {\n const nodeType = field.getIn(['definition', 'type', 'name'])\n if (nodeType === 'LocationEdgeRelation') {\n if (!field.get('displayFields', List()).includes('latitude')) {\n field = field.update('displayFields', List(), propList =>\n propList.push('latitude')\n )\n }\n\n if (!field.get('displayFields', List()).includes('longitude')) {\n field = field.update('displayFields', List(), propList =>\n propList.push('longitude')\n )\n }\n } else if (nodeType === 'ActionEdgeRelation') {\n if (!field.get('displayFields', List()).includes('region')) {\n field = field.update('displayFields', List(), propList =>\n propList.push('region')\n )\n }\n }\n\n return field\n })\n\n const query = queryBuilder.buildPivotableSource(\n rootField.get('id'),\n 'arcmapQuery',\n { limit: 500 }\n )\n\n return {\n ...query,\n flatten: true,\n }\n }\n\n getQuery = () => {\n if (hasSonraiSearch(this.props.options, 'advmapsearch')) {\n return getSonraiSearchQuery(\n this.props.options.sonraiSearches.advmapsearch\n )\n } else {\n return this.getTableSavedSearchQuery()\n }\n }\n\n getSearchName = () => {\n return hasSonraiSearch(this.props.options, 'advmapsearch')\n ? this.props.options.sonraiSearches.advmapsearch\n : this.props.savedSearches.getIn([\n this.props.resultLayout.indexedSearches.advmapsearch,\n 'name',\n ])\n }\n\n onClickSearch = () => {\n this.props.onClickSearch({\n savedSearchId: this.props.resultLayout.indexedSearches.advmapsearch,\n sonraiSearchName: this.props.options.sonraiSearches.advmapsearch,\n searchTitle: this.props.title,\n })\n }\n\n getData = data => {\n if (!_.isEmpty(this.props.options.sonraiSearches.advmapsearch)) {\n return getSonraiSearchData(data)\n } else {\n return this.getSavedSearchData(data)\n }\n }\n\n getSavedSearchData = data => {\n const fields = getFields(\n this.props.savedSearches,\n this.props.resultLayout.indexedSearches.advmapsearch\n )\n\n const hasPerformedAts = fields\n .filter(\n field => field.getIn(['definition', 'name'], '') === 'performedAt'\n )\n .map(field => field.get('parentId'))\n .toList()\n\n const actions = hasPerformedAts\n .map(id => fields.get(id))\n .filter(field => field.getIn(['definition', 'name'], '') === 'Actions')\n\n if (actions.isEmpty()) {\n return []\n }\n\n const selection = getSelection(\n fields.toJS(),\n actions.first().toJS(),\n undefined,\n 'items'\n )\n\n if (!selection) {\n return []\n }\n\n return _.get(data, [...selection], [])\n }\n\n getSearchId = () => {\n const { options } = this.props\n let searchObj = Map({ uiSearch: null, advancedSearch: null })\n if (hasSonraiSearch(options, 'advmapsearch')) {\n const searches = getSearchIdForSonraiSearches(\n options,\n this.props.sonraiSearches\n )\n searchObj = searchObj.set('advancedSearch', searches)\n } else {\n searchObj = searchObj.set(\n 'uiSearch',\n this.props.resultLayout.indexedSearches.advmapsearch\n )\n }\n\n return searchObj\n }\n\n render() {\n if (this.props.data === undefined) {\n const query = this.getQuery()\n const searchId = this.getSearchId()\n if (!query.gqlStatement) {\n return {title}
\n \n
\n \n )\n }\n}\n\nTextWidget.propTypes = {\n resultLayout: PropTypes.shape({\n widgetOptions: PropTypes.shape({\n description: PropTypes.string,\n }),\n }),\n title: PropTypes.string,\n allowDelete: PropTypes.bool,\n allowUpdate: PropTypes.bool,\n onRemove: PropTypes.func,\n onEdit: PropTypes.func,\n static: PropTypes.bool,\n widget: PropTypes.object,\n}\n\nexport default TextWidget\n","import { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n widgetError: {\n id: 'app.containers.SolutionCenterWidgets.widgetError',\n defaultMessage: 'Oops...There was an error loading your widget data',\n },\n widgetNoPermission: {\n id: 'app.containers.SolutionCenterWidgets.widgetNoPermission',\n defaultMessage: 'Insufficent Permissions to view data',\n },\n logError: {\n id: 'app.containers.SolutionCenterWidgets.logError',\n defaultMessage: 'Click to Log',\n },\n})\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { FormattedMessage } from 'react-intl'\n\nimport WidgetCard from 'components/WidgetCard'\nimport fail from 'assets/sadcloud.png'\n\nimport messages from './messages'\n\nexport default class WidgetErrorBoundry extends Component {\n constructor(props) {\n super(props)\n this.state = {\n hasError: false,\n errorMessage: '',\n errorSource: '',\n componentStack: '',\n errorStack: '',\n }\n\n this.styles = {\n errorWrapper: {\n overflow: 'auto',\n color: '#666666',\n textAlign: 'center',\n },\n errorImg: {\n height: '40px',\n maxWidth: '150px',\n },\n }\n }\n\n componentDidCatch(error, info) {\n this.setState({\n hasError: true,\n errorMessage: error.message,\n errorStack: error.stack,\n componentStack: info.componentStack,\n errorSource: error.source ? error.source.body : '',\n })\n }\n\n render() {\n if (this.state.hasError || !this.props.canViewData) {\n return (\n \n {this.props.canViewData && (\n 
\n )}\n
\n \n )\n }\n\n return this.props.children\n }\n}\n\nWidgetErrorBoundry.defaultProps = {\n allowDelete: true,\n allowUpdate: false,\n}\n\nWidgetErrorBoundry.propTypes = {\n allowDelete: PropTypes.bool,\n allowUpdate: PropTypes.bool,\n onEdit: PropTypes.func,\n onRemove: PropTypes.func,\n children: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.arrayOf(PropTypes.object),\n ]).isRequired,\n title: PropTypes.string,\n canViewData: PropTypes.bool,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport { connect } from 'react-redux'\nimport { createStructuredSelector } from 'reselect'\nimport { compose, bindActionCreators } from 'redux'\nimport permissionChecker from 'containers/PermissionChecker'\nimport {\n selectSavedSearches,\n selectSonraiSearches,\n selectPivot,\n} from 'containers/SonraiData/selectors'\nimport { WIDGET_TYPES } from 'appConstants'\nimport BigStatWidget from 'components/BigStatWidget'\nimport TableWidget from 'components/TableWidget'\nimport RatioWidget from 'components/RatioWidget'\nimport GaugeWidget from 'components/GaugeWidget'\nimport RegionsWidget from 'components/RegionsWidget'\nimport ListWidget from 'components/ListWidget'\nimport PieChartWidget from 'components/PieChartWidget'\nimport BarChartWidget from 'components/BarChartWidget'\nimport ArcMapWidget from 'components/ArcMapWidget'\nimport AlertWidget from 'components/AlertWidget'\nimport SparkWidget from 'components/SparkWidget'\nimport ComplianceWidget from 'components/ComplianceWidget'\nimport TextWidget from 'components/TextWidget'\nimport WidgetErrorBoundry from './WidgetErrorBoundry'\nimport _ from 'lodash'\n\nexport class Widget extends React.Component {\n getWidgetComponent = widgetType => {\n switch (widgetType) {\n case WIDGET_TYPES.LIST:\n return ListWidget\n case WIDGET_TYPES.BIG_COUNT:\n return BigStatWidget\n case WIDGET_TYPES.TABLE:\n return TableWidget\n case WIDGET_TYPES.RATIO:\n return RatioWidget\n case WIDGET_TYPES.GAUGE:\n return GaugeWidget\n case WIDGET_TYPES.REGIONS:\n return RegionsWidget\n case WIDGET_TYPES.PIE_CHART:\n return PieChartWidget\n case WIDGET_TYPES.BAR_CHART:\n return BarChartWidget\n case WIDGET_TYPES.ADVMAP:\n return ArcMapWidget\n case WIDGET_TYPES.ALERT:\n return AlertWidget\n case WIDGET_TYPES.SPARK:\n return SparkWidget\n case WIDGET_TYPES.COMPLIANCE:\n return ComplianceWidget\n case WIDGET_TYPES.TEXT:\n return TextWidget\n default:\n return null\n }\n }\n\n removeWidget = () => {\n this.props.removeWidget(this.props.widget.get('srn'))\n }\n\n editWidget = () => {\n this.props.onEdit(this.props.widget.get('srn'))\n }\n\n toggleStatic = () => {\n this.props.toggleStatic(this.props.widget.get('srn'))\n }\n\n getWidgetResultsTitle = (searchTitle, sonraiSearchName) => {\n const { widget } = this.props\n let widgetObj = widget.toJS()\n\n if (\n widgetObj.resultLayout &&\n widgetObj.resultLayout.indexedSearches &&\n widgetObj.resultLayout.indexedSearches\n ) {\n const key = _.keys(widgetObj.resultLayout.indexedSearches)\n const id = widgetObj.resultLayout.indexedSearches[key]\n const search = this.props.savedSearches.get(id)\n if (search && !sonraiSearchName) {\n return search.get('name')\n }\n }\n\n return searchTitle || sonraiSearchName\n }\n\n setWidgetOptions = options => {\n this.props.setWidgetOptions(this.props.widget.get('srn'), options)\n }\n\n shouldComponentUpdate(nextProps) {\n let render = nextProps.canRender === false ? false : true\n return render\n }\n\n render() {\n const WidgetComponent = this.getWidgetComponent(\n this.props.widget.get('type')\n )\n\n if (!WidgetComponent) {\n return \n }\n const canEdit = this.props.userHasPermission({\n permissionName: 'edit.solutioncards',\n resourceId: this.props.widget.get('resourceId'),\n })\n\n const canViewData = this.props.canViewData\n\n return (\n \n {!this.props.canViewData ? (\n `${messages.widgetNoPermission.defaultMessage} for Widget: ${\n this.props.title\n }`\n ) : (\n
{this.state.errorMessage}
\n\n
\n )\n })}\n \n {canUpdateSolutionCard && (\n \n
\n )\n }\n}\n\nFilterPanel.propTypes = {\n applyFilters: PropTypes.func,\n children: PropTypes.node,\n hasChanges: PropTypes.bool,\n theme: themeShape,\n title: PropTypes.node,\n toggle: PropTypes.func,\n}\n\nexport default themeable(FilterPanel)\nexport { default as Filter } from './Filter'\nexport { default as TypeaheadFilter } from './TypeaheadFilter'\n","export const SET_SELECTED_PIVOT =\n 'app/SolutionCenterFilterPanel/SET_SELECTED_PIVOT'\nexport const CLEAR_SELECTED_PIVOTS =\n 'app/SolutionCenterFilterPanel/CLEAR_SELECTED_PIVOTS'\nexport const ADD_TAG_FILTER = 'app/SolutionCenterFilterPanel/ADD_TAG_FILTER'\n","import { fromJS, Map } from 'immutable'\nimport { handleActions } from 'redux-actions'\nimport {\n SET_SELECTED_PIVOT,\n CLEAR_SELECTED_PIVOTS,\n ADD_TAG_FILTER,\n} from './constants'\n\nconst initialState = fromJS({\n selectedPivots: {},\n tagFilters: [],\n})\n\nconst solutionCenterReducer = handleActions(\n {\n [ADD_TAG_FILTER]: (state, { payload }) =>\n state.updateIn(['tagFilters'], tagFilters => tagFilters.push(payload)),\n [CLEAR_SELECTED_PIVOTS]: state => state.set('selectedPivots', Map()),\n [SET_SELECTED_PIVOT]: (state, { payload }) => {\n return state.setIn(\n ['selectedPivots', payload.type],\n fromJS(payload.value)\n )\n },\n },\n initialState\n)\n\nexport default solutionCenterReducer\n","import { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n filtersTitle: {\n id: 'app.containers.SolutionCenterFilterPanel.filtersTitle',\n defaultMessage: 'Filters',\n },\n dateRange: {\n id: 'app.containers.SolutionCenterFilterPanel.dateRange',\n defaultMessage: 'Date Range',\n },\n days1: {\n id: 'app.containers.SolutionCenterFilterPanel.days1',\n defaultMessage: 'Since 24 Hours',\n },\n days7: {\n id: 'app.containers.SolutionCenterFilterPanel.days7',\n defaultMessage: 'Since 7 Days Ago',\n },\n days30: {\n id: 'app.containers.SolutionCenterFilterPanel.days30',\n defaultMessage: 'Since 30 Days Ago',\n },\n days90: {\n id: 'app.containers.SolutionCenterFilterPanel.days90',\n defaultMessage: 'Since 90 Days Ago',\n },\n accountFilterTitle: {\n id: 'app.containers.SolutionCenterFilterPanel.accountFilterTitle',\n defaultMessage: 'Account',\n },\n tagFilterTitle: {\n id: 'app.containers.SolutionCenterFilterPanel.tagFilterTitle',\n defaultMessage: 'Tag Set',\n },\n})\n","import {\n SET_SELECTED_PIVOT,\n CLEAR_SELECTED_PIVOTS,\n ADD_TAG_FILTER,\n} from './constants'\nimport { createAction } from 'redux-actions'\n\nexport const setSelectedPivot = createAction(SET_SELECTED_PIVOT)\nexport const clearSelectedPivots = createAction(CLEAR_SELECTED_PIVOTS)\nexport const addTagFilter = createAction(ADD_TAG_FILTER)\n","import { createSelector } from 'reselect'\nimport { Map, List } from 'immutable'\n\nexport const selectSolutionCenterFilterPanelDomain = state =>\n state.get('solutionCenterFilterPanel') || Map()\n\nexport const selectSelectedPivots = createSelector(\n selectSolutionCenterFilterPanelDomain,\n state => state.get('selectedPivots') || Map()\n)\n\nexport const selectTagFilters = createSelector(\n selectSolutionCenterFilterPanelDomain,\n state => state.get('tagFilters') || List()\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport { connect } from 'react-redux'\nimport { createStructuredSelector } from 'reselect'\nimport { compose, bindActionCreators } from 'redux'\nimport { isImmutable } from 'immutable'\nimport { FormattedMessage, injectIntl } from 'react-intl'\n\nimport SelectBar from 'components/SelectBar'\nimport DateRangePicker from 'components/DateRangePicker'\nimport { CLOUD_TYPES } from 'appConstants'\nimport IHelp from 'containers/IHelp'\nimport AccountSelector from 'components/AccountSelector'\nimport injectReducer from 'utils/injectReducer'\nimport { selectPivot } from 'containers/SonraiData/selectors'\nimport { exists } from 'utils/sonraiUtils'\nimport {\n setPivot,\n fetchTags,\n fetchDataContainers,\n fetchAccounts,\n fetchSubscriptions,\n} from 'containers/SonraiData/actions'\nimport FilterPanel, { Filter, TypeaheadFilter } from 'components/FilterPanel'\nimport { PIVOT_FILEDS } from 'query-builder'\nimport {\n selectAccounts,\n selectDataContainers,\n selectTags,\n selectSubscriptions,\n} from 'containers/SonraiData/selectors'\nimport _ from 'lodash'\nimport reducer from './reducer'\nimport messages from './messages'\nimport { setSelectedPivot, clearSelectedPivots, addTagFilter } from './actions'\nimport { selectSelectedPivots, selectTagFilters } from './selectors'\n\nexport class SolutionCenterFilterPanel extends React.Component {\n onChangeAccountFilter = selectedAccounts => {\n this.props.setSelectedPivot({\n type: PIVOT_FILEDS.ACCOUNTS,\n value:\n Array.isArray(selectedAccounts) && selectedAccounts.length > 0\n ? selectedAccounts\n : null,\n })\n }\n\n onChangeSpecificDates = (newDates = {}) => {\n this.props.setSelectedPivot({\n type: PIVOT_FILEDS.SPECIFIC_DATES,\n value: newDates.startDate && newDates.endDate ? newDates : null,\n })\n }\n\n onChangePivotFilter = (type, selectedOption) => {\n if (Array.isArray(selectedOption)) {\n this.props.setSelectedPivot({\n type,\n value:\n selectedOption.length === 0\n ? null\n : selectedOption.map(option => option.value),\n })\n } else {\n this.props.setSelectedPivot({\n type,\n value: _.isEmpty(selectedOption) ? null : selectedOption.value,\n })\n }\n }\n\n onChangeSpecificDate = newDates => {\n this.props.setSelectedPivot({\n type: PIVOT_FILEDS.SPECIFIC_DATES,\n value: newDates,\n })\n }\n\n hasChanges = () => {\n const nonEmptyPivots = this.props.selectedPivots.filter(pivot => {\n if (isImmutable(pivot)) {\n return !pivot.isEmpty()\n } else {\n return exists(pivot)\n }\n })\n\n return !nonEmptyPivots.isEmpty()\n }\n\n applyFilters = () => {\n this.props.selectedPivots.forEach((value, key) => {\n this.props.setPivot({\n type: key,\n value,\n })\n })\n\n this.props.clearSelectedPivots()\n }\n\n getSelectedValue = type => {\n const pivotValue = this.props.selectedPivots.has(type)\n ? this.props.selectedPivots.get(type)\n : this.props.pivot.get(type)\n\n return isImmutable(pivotValue) ? pivotValue.toJS() : pivotValue\n }\n\n getTagOptions = () => {\n const serverTags = this.props.tags\n .filter(tag => !!tag.get('key'))\n .sortBy(tag => tag.get('key').toLowerCase())\n .toJS()\n .map(tag => ({ value: tag.key, label: tag.key }))\n\n const additionalOptions = this.props.tagFilters\n .toJS()\n .map(tagStr => ({ value: tagStr, label: tagStr }))\n\n return serverTags.concat(additionalOptions)\n }\n\n render() {\n if (!this.props.isOpen) {\n return null\n }\n\n return (\n \n
\n \n
\n {this.props.title}
\n \n \n \n
\n {this.props.children}
\n \n \n Apply Filters\n \n
\n | Card Name | \nWidgets | \nStatus | \n\n \n \n {hiddenCards.map(card => (\n |
|---|---|---|---|
| {card.name} | \n{card.widgets && card.widgets.length} Widgets | \n\n {this.state.reVisibleCards.includes(card.srn)\n ? 'Visible'\n : 'Hidden'}\n | \n\n | \n
\n \n {!this.props.pivot.isEmpty() ? (\n \n \n ) : (\n
\n )\n }\n}\n\nSolutionCenterCardActions.propTypes = {\n hasUnsavedChanges: PropTypes.bool,\n pivot: ImmutablePropTypes.map.isRequired,\n savingLayout: PropTypes.bool,\n saveLayout: PropTypes.func.isRequired,\n selectedSolutionCard: ImmutablePropTypes.map.isRequired,\n theme: themeShape,\n toggleFiltersPanel: PropTypes.func,\n userHasPermission: PropTypes.func,\n}\n\nconst mapStateToProps = createStructuredSelector({\n hasUnsavedChanges: selectHasUnsavedChanges,\n pivot: selectPivot,\n savingLayout: selectSavingLayout,\n selectedSolutionCard: selectSelectedCard,\n})\n\nfunction mapDispatchToProps(dispatch) {\n return bindActionCreators(\n {\n saveLayout,\n },\n dispatch\n )\n}\n\nconst withConnect = connect(mapStateToProps, mapDispatchToProps)\n\nexport default compose(\n withConnect,\n injectIntl,\n permissionChecker,\n themeable\n)(SolutionCenterCardActions)\n","/*\n *\n * SolutionCenter reducer\n *\n */\n\nimport { fromJS, List } from 'immutable'\nimport { handleActions } from 'redux-actions'\nimport {\n LOAD_SOLUTION_CARDS,\n TOGGLE_SC_WIDGET_STATIC,\n UPDATE_WIDGET,\n UPDATE_WIDGET_SUCCESS,\n ADD_SOLUTION_CARD_SUCCESS,\n DELETE_SOLUTION_CARD_SUCCESS,\n ADD_WIDGET_SUCCESS,\n REMOVE_WIDGET_SUCCESS,\n SET_WIDGET_OPTIONS,\n UPDATE_SOLUTION_CARD_SUCCESS,\n SET_SHOW_CREATE_WIDGET_MODAL,\n COPY_SOLUTION_CARD,\n COPY_SOLUTION_CARD_SUCCESS,\n} from './constants'\n\nconst initialState = fromJS({\n solutionCards: [],\n showCreateWidgetModal: false,\n})\n\nconst solutionCenterReducer = handleActions(\n {\n [ADD_SOLUTION_CARD_SUCCESS]: (state, { payload }) =>\n state\n .update('solutionCards', cards => cards.push(fromJS(payload)))\n .set('showCreateWidgetModal', true),\n [ADD_WIDGET_SUCCESS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.cardsrn)\n\n return state\n .updateIn(['solutionCards', solutionCardIndex, 'widgets'], widgets =>\n widgets.push(fromJS(payload.widget))\n )\n .set('showCreateWidgetModal', false)\n },\n [DELETE_SOLUTION_CARD_SUCCESS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload)\n\n return state.deleteIn(['solutionCards', solutionCardIndex])\n },\n [LOAD_SOLUTION_CARDS]: (state, { payload }) => {\n return state.set('solutionCards', fromJS(payload.cards))\n },\n [REMOVE_WIDGET_SUCCESS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.cardId)\n const widgetIndex = state\n .getIn(['solutionCards', solutionCardIndex, 'widgets'], List())\n .findIndex(widget => widget.get('srn') === payload.widgetId)\n\n return state.deleteIn([\n 'solutionCards',\n solutionCardIndex,\n 'widgets',\n widgetIndex,\n ])\n },\n [SET_SHOW_CREATE_WIDGET_MODAL]: (state, { payload }) =>\n state.set('showCreateWidgetModal', payload),\n [TOGGLE_SC_WIDGET_STATIC]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.cardId)\n const widgetIndex = state\n .getIn(['solutionCards', solutionCardIndex, 'widgets'], List())\n .findIndex(widget => widget.get('srn') === payload.widgetId)\n\n return state.updateIn(\n ['solutionCards', solutionCardIndex, 'widgets', widgetIndex],\n widget => widget.set('static', !widget.get('static'))\n )\n },\n [UPDATE_SOLUTION_CARD_SUCCESS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.srn)\n\n return state.mergeIn(['solutionCards', solutionCardIndex], payload)\n },\n [UPDATE_WIDGET]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.cardId)\n const widgetIndex = state\n .getIn(['solutionCards', solutionCardIndex, 'widgets'], List())\n .findIndex(widget => widget.get('srn') === payload.widget.srn)\n\n return state.setIn(\n ['solutionCards', solutionCardIndex, 'widgets', widgetIndex],\n fromJS(payload.widget)\n )\n },\n [UPDATE_WIDGET_SUCCESS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.cardsrn)\n const widgetIndex = state\n .getIn(['solutionCards', solutionCardIndex, 'widgets'], List())\n .findIndex(widget => widget.get('srn') === payload.widget.srn)\n\n return state.mergeIn(\n ['solutionCards', solutionCardIndex, 'widgets', widgetIndex],\n fromJS(payload.widget)\n )\n },\n [SET_WIDGET_OPTIONS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.cardId)\n const widgetIndex = state\n .getIn(['solutionCards', solutionCardIndex, 'widgets'], List())\n .findIndex(widget => widget.get('srn') === payload.widgetId)\n\n return state.mergeIn(\n ['solutionCards', solutionCardIndex, 'widgets', widgetIndex, 'options'],\n fromJS(payload.options)\n )\n },\n [COPY_SOLUTION_CARD]: state => state.set('copySolutionCardSaving', true),\n [COPY_SOLUTION_CARD_SUCCESS]: (state, { payload }) => {\n const solutionCardIndex = state\n .get('solutionCards')\n .findIndex(card => card.get('srn') === payload.card.srn)\n\n return state\n .update('solutionCards', cards => cards.push(fromJS(payload.card)))\n .setIn(\n ['solutionCards', solutionCardIndex, 'widgets'],\n fromJS(payload.widgets)\n )\n .set('copySolutionCardSaving', false)\n },\n },\n initialState\n)\n\nexport default solutionCenterReducer\n","export const FETCH_SOLUTION_CARDS_QUERY = `\n query getSCCards {\n SolutionCards {\n count\n items {\n __typename\n name\n createdDate\n sid\n srn\n lastModified\n resourceId\n createdBy\n contains {\n items {\n resourceId\n title\n subtitle\n name\n resultLayout\n static\n type\n widgetLocation\n createdDate\n createdBy\n sid\n srn\n lastModified\n widgetSize\n selection\n options\n contains {\n items {\n name\n sid\n srn\n ... on Search {\n rootQueryName\n lastModified\n createdDate\n query\n resourceId\n }\n }\n }\n }\n }\n }\n }\n }\n`\n","import { all, put, takeLatest, take, race, call } from 'redux-saga/effects'\nimport { Map, List } from 'immutable'\nimport { fetchSavedSearches } from 'containers/SonraiData/sagas'\nimport { push } from 'connected-react-router'\nimport qs from 'query-string'\nimport omit from 'lodash/omit'\nimport { delay } from 'redux-saga'\nimport {\n loadSolutionCards,\n handleSCAdd,\n saveLayoutSuccess,\n addSolutionCardSuccess,\n deleteSolutionCardSuccess,\n addWidgetSuccess,\n removeWidgetSuccess,\n updateWidgetSuccess,\n updateSolutionCardSuccess,\n copySolutionCardSuccess,\n} from './actions'\nimport {\n GET_SOLUTION_CARDS,\n UPDATE_EDIT_WIDGET,\n HANDLE_SC_ADD,\n DELETE_SOLUTION_CARD,\n ADD_SC_WIDGET,\n REMOVE_SC_WIDGET,\n SAVE_LAYOUT,\n UPDATE_SOLUTION_CARD,\n START_UPDATE_SC_POLL,\n STOP_UPDATE_SC_POLL,\n COPY_SOLUTION_CARD,\n} from './constants'\nimport { FETCH_SOLUTION_CARDS_QUERY } from './queries'\nimport { getClient } from 'apolloClient'\nimport gql from 'graphql-tag'\n\nfunction* getSolnCards() {\n try {\n const client = getClient()\n const result = yield client.query({\n query: gql`\n ${FETCH_SOLUTION_CARDS_QUERY}\n `,\n })\n\n if (result.data.SolutionCards.items === null) {\n throw new Error('Bad formatting of response from server: items is null')\n }\n\n let cards = result.data.SolutionCards.items.map(sysCard => {\n return {\n __typename: sysCard.__typename,\n sid: sysCard.sid,\n srn: sysCard.srn,\n name: sysCard.name,\n resourceId: sysCard.resourceId,\n createdDate: sysCard.createdDate,\n createdBy: sysCard.createdBy,\n widgets: sysCard.contains.items.map(widget => {\n if (widget.contains.items.length > 0) {\n return {\n ...widget,\n query: widget.contains.items[0], // TODO: Handle multiple widget queries\n }\n } else {\n return widget\n }\n }),\n }\n })\n\n if (cards.length === 0) {\n yield put(handleSCAdd('Dashboard 1'))\n } else {\n yield put(loadSolutionCards(cards))\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error loading solution cards', e)\n }\n}\n\nfunction* addSolutionCard(action) {\n try {\n const client = getClient()\n const response = yield client.mutate({\n mutation: gql`\n mutation createSolutionCard {\n CreateSolutioncard(value: {\n name: \"${action.payload.name}\"\n }) {\n name\n sid\n srn\n lastModified\n createdDate\n resourceId\n }\n }\n `,\n forceFetch: true,\n fetchPolicy: 'no-cache',\n })\n\n const newCard = response.data.CreateSolutioncard\n newCard.widgets = []\n\n yield put(\n push({\n search: qs.stringify({ tabId: newCard.srn }),\n })\n )\n\n yield put(addSolutionCardSuccess(newCard))\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error adding solution card', e)\n }\n}\n\nfunction* deleteSolutionCard(action) {\n try {\n const client = getClient()\n yield client.mutate({\n mutation: gql`\n mutation deleteSolutionCard {\n DeleteSolutioncard(srn: \"${action.payload.srn}\")\n }\n `,\n })\n yield put(deleteSolutionCardSuccess(action.payload.srn))\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error deleting solution card', e)\n }\n}\n\nfunction* addWidget(action) {\n try {\n let widg = Object.assign({}, action.payload.widget, {\n containedBy: {\n add: [action.payload.card.srn],\n },\n })\n\n delete widg.query\n const client = getClient()\n const result = yield client.mutate({\n mutation: gql`\n mutation addWidget($widget: WidgetCreator!) {\n CreateWidget(value: $widget) {\n sid\n srn\n label\n type\n icon\n title\n lastModified\n createdDate\n widgetSize\n subtitle\n selection\n resultLayout\n static\n options\n widgetLocation\n name\n resourceId\n contains {\n items {\n name\n sid\n srn\n }\n }\n }\n }\n `,\n variables: { widget: widg },\n })\n\n if (!result.data.CreateWidget) {\n throw new Error('received null in response to CreateWidget')\n }\n\n yield put(\n addWidgetSuccess({\n cardsrn: action.payload.card.srn,\n widget: result.data.CreateWidget,\n })\n )\n\n yield call(fetchSavedSearches, { poll: false })\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error adding widget to solution card', e)\n }\n}\n\nfunction* updateEditWidget(action) {\n const values = omit(action.payload.widget, [\n '__typename',\n 'query',\n 'sid',\n 'srn',\n 'lastModified',\n 'createdDate',\n 'contains',\n 'name',\n 'selection',\n 'resourceId',\n ])\n\n const { srn } = action.payload.widget\n\n try {\n const client = getClient()\n const updateResult = yield client.mutate({\n mutation: gql`\n mutation updateWidget($widget: WidgetUpdater!) {\n UpdateWidget(srn: \"${srn}\", value: $widget) {\n title\n subtitle\n name\n resultLayout\n static\n type\n widgetLocation\n createdDate \n sid\n srn\n lastModified\n widgetSize\n options\n selection\n resourceId\n contains {\n items {\n name\n sid\n }\n }\n }\n }\n `,\n variables: {\n widget: values,\n },\n })\n\n yield put(\n updateWidgetSuccess({\n cardsrn: action.payload.card.srn,\n widget: updateResult.data.UpdateWidget,\n })\n )\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error updating widget', e)\n }\n}\n\nfunction* removeWidget(action) {\n try {\n const client = getClient()\n yield client.mutate({\n mutation: gql`\n mutation delWidget{\n DeleteWidget(srn:\"${action.payload.srn}\")\n }\n `,\n })\n yield put(\n removeWidgetSuccess({\n cardId: action.payload.cardId,\n widgetId: action.payload.srn,\n })\n )\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error removing widget from solution card', e)\n }\n}\n\nfunction* saveLayout(action) {\n try {\n const widgets = action.payload.card.get('widgets')\n if (!widgets.isEmpty()) {\n const widgetsByIndex = Map(\n widgets.map((widget, index) => List([`widget${index}`, widget]))\n )\n\n const variables = widgetsByIndex\n .map(widget =>\n Map({\n widgetLocation: widget.get('widgetLocation'),\n static: widget.get('static'),\n widgetSize: widget.get('widgetSize'),\n options: widget.get('options'),\n })\n )\n .toJS()\n\n const variableNames = widgets.map(\n (widget, index) => `\n $widget${index}: WidgetUpdater!\n `\n )\n\n const queryStrings = widgets.map(\n (widget, index) => `\n widget${index}: UpdateWidget(\n srn: \"${widget.get('srn')}\",\n value: $widget${index}\n ) { sid srn }\n `\n )\n const client = getClient()\n yield client.mutate({\n mutation: gql`\n mutation updateWidgets(${variableNames.join(', ')}) {\n ${queryStrings.join(',')}\n }\n `,\n variables: variables,\n })\n }\n\n yield put(saveLayoutSuccess())\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error saving widget layout', e)\n }\n}\n\nfunction* updateSolutionCard(action) {\n try {\n const client = getClient()\n const updateResult = yield client.mutate({\n mutation: gql`\n mutation updateCard($card: SolutioncardUpdater!){\n UpdateSolutioncard(\n srn:\"${action.payload.srn}\"\n value: $card\n ) {\n srn,\n name,\n lastModified\n }\n }\n `,\n variables: {\n card: {\n name: action.payload.name,\n },\n },\n })\n\n yield put(updateSolutionCardSuccess(updateResult.data.UpdateSolutioncard))\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error editing solution card', e)\n }\n}\n\nfunction* copySolutionCard(action) {\n const { title, widgets } = action.payload\n\n try {\n const client = getClient()\n const newSolutionCard = yield client.mutate({\n mutation: gql`\n mutation createSolutionCard {\n CreateSolutioncard(value: {\n name: \"${title}\"\n }) {\n name\n sid\n srn\n lastModified\n createdDate\n resourceId\n }\n }\n `,\n })\n\n if (!newSolutionCard.data) {\n throw new Error('No copied solution card returned')\n }\n\n const srn = newSolutionCard.data.CreateSolutioncard.srn\n const widgetsJS = widgets.toJS()\n\n const newWidgets = yield all(\n widgetsJS.map(widg => {\n const contains = []\n widg.contains.items.forEach(item => {\n contains.push(item.srn)\n })\n const coolWidg = {\n title: widg.title,\n subtitle: '',\n type: widg.type,\n resultLayout: widg.resultLayout,\n widgetSize: widg.widgetSize,\n widgetLocation: widg.widgetLocation,\n static: widg.static,\n contains: { add: contains },\n options: widg.options,\n containedBy: { add: [srn] },\n }\n\n return client.mutate({\n mutation: gql`\n mutation addWidget($widget: WidgetCreator!) {\n CreateWidget(value: $widget) {\n sid\n srn\n label\n type\n icon\n title\n lastModified\n createdDate\n widgetSize\n subtitle\n selection\n resultLayout\n static\n options\n widgetLocation\n name\n resourceId\n contains {\n items {\n name\n sid\n srn\n }\n }\n }\n }\n `,\n variables: { widget: coolWidg },\n })\n })\n )\n\n const unpackedWidgets = []\n newWidgets.forEach(guy => {\n unpackedWidgets.push(guy.data.CreateWidget)\n })\n\n yield put(\n push({\n search: qs.stringify({\n tabId: newSolutionCard.data.CreateSolutioncard.srn,\n }),\n })\n )\n\n yield put(\n copySolutionCardSuccess({\n card: newSolutionCard.data.CreateSolutioncard,\n widgets: unpackedWidgets,\n })\n )\n } catch (e) {\n // eslint-disable-next-line no-console\n console.error('Error copying solution card', e)\n }\n}\n\nfunction* runSolutionCenterFetcher() {\n while (true) {\n yield call(getSolnCards)\n yield call(delay, 300000)\n }\n}\n\nfunction* mySaga() {\n yield all([\n takeLatest(GET_SOLUTION_CARDS, getSolnCards),\n takeLatest(HANDLE_SC_ADD, addSolutionCard),\n takeLatest(DELETE_SOLUTION_CARD, deleteSolutionCard),\n takeLatest(ADD_SC_WIDGET, addWidget),\n takeLatest(REMOVE_SC_WIDGET, removeWidget),\n takeLatest(SAVE_LAYOUT, saveLayout),\n takeLatest(UPDATE_EDIT_WIDGET, updateEditWidget),\n takeLatest(UPDATE_SOLUTION_CARD, updateSolutionCard),\n takeLatest(COPY_SOLUTION_CARD, copySolutionCard),\n ])\n\n while (true) {\n yield take(START_UPDATE_SC_POLL)\n yield race([call(runSolutionCenterFetcher), take(STOP_UPDATE_SC_POLL)])\n }\n}\n\nexport default mySaga\n","/*\n * SolutionCenter Messages\n *\n * This contains all the text for the SolutionCenter component.\n */\nimport { defineMessages } from 'react-intl'\n\nexport default defineMessages({\n identity: {\n id: 'app.container.SolutionCenter.header',\n defaultMessage: 'Identity',\n },\n infrastructure: {\n id: 'app.container.SolutionCenter.infrastructure',\n defaultMessage: 'Infrastructure',\n },\n data: {\n id: 'app.container.SolutionCenter.data',\n defaultMessage: 'Data',\n },\n cloud: {\n id: 'app.container.SolutionCenter.cloud',\n defaultMessage: 'Cloud',\n },\n header: {\n id: 'app.containers.SolutionCenter.header',\n defaultMessage: 'This is SolutionCenter container !',\n },\n createSC: {\n id: 'app.containers.SolutionCenter.createSC',\n defaultMessage: 'Create New Solution Card',\n },\n saveLayoutButton: {\n id: 'app.containers.SolutionCenter.saveLayoutButton',\n defaultMessage: 'Save Layout',\n },\n saveScEditButton: {\n id: 'app.containers.SolutionCenter.saveScEditButton',\n defaultMessage: 'Update',\n },\n cancelScEditButton: {\n id: 'app.containers.SolutionCenter.cancelScEditButton',\n defaultMessage: 'Cancel',\n },\n error: {\n id: 'app.containers.SolutionCenter.error',\n defaultMessage: \"Ooops...that wasn't supposed to happen!\",\n },\n errorContact: {\n id: 'app.containers.SolutionCenter.contact',\n defaultMessage:\n \"We'd love to hear about it, though! You can contact support at\",\n },\n statusDaysAll: {\n id: 'app.containers.SolutionCenterFilterStatus.statusDaysAll',\n defaultMessage: 'all time',\n },\n statusDays1: {\n id: 'app.containers.SolutionCenterFilterStatus.statusDays1',\n defaultMessage: 'the past 24 hours',\n },\n statusDays7: {\n id: 'app.containers.SolutionCenterFilterStatus.statusDays7',\n defaultMessage: 'the past 7 days',\n },\n statusDays30: {\n id: 'app.containers.SolutionCenterFilterStatus.statusDays30',\n defaultMessage: 'the past 30 days',\n },\n statusDays90: {\n id: 'app.containers.SolutionCenterFilterStatus.statusDays90',\n defaultMessage: 'the past 90 days',\n },\n filterApplied: {\n id: 'app.containers.SolutionCenterFilterStatus.filterApplied',\n defaultMessage: 'Filter Applied',\n },\n newWidget: {\n id: 'app.container.SolutionCenterToolbar.newWidget',\n defaultMessage: 'New Widget',\n },\n})\n","import React, { Fragment } from 'react'\nimport PropTypes from 'prop-types'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport { connect } from 'react-redux'\nimport { createStructuredSelector } from 'reselect'\nimport { compose, bindActionCreators } from 'redux'\nimport { Map } from 'immutable'\nimport { injectIntl } from 'react-intl'\nimport { selectShowCreateWidgetModal } from './selectors'\nimport { setShowCreateWidgetModal } from './actions'\nimport {\n selectSavingWidget,\n selectLayout,\n} from 'containers/SolutionCenterWidgets/selectors'\nimport { selectQueryTypes, selectPivot } from 'containers/SonraiData/selectors'\nimport Icon from 'components/Icon'\nimport { FormattedMessage } from 'react-intl'\nimport messages from './messages'\nimport WidgetModal from 'containers/WidgetModal'\nimport Button from 'components/Button'\nimport { QueryBuilder } from 'query-builder'\n\nconst styles = {\n button: {\n margin: '0.15rem 0rem 0rem 0.15rem',\n padding: '0.5rem',\n fontSize: '0.8rem',\n },\n}\n\nexport class SolutionCenterToolbar extends React.Component {\n toggleAddWidgetModal = () => {\n this.props.setShowCreateWidgetModal(!this.props.showCreateWidgetModal)\n }\n\n getQueryBuilder = fields => {\n const queryBuilder = new QueryBuilder({\n query: fields,\n types: this.props.queryTypes,\n pivot: this.props.pivot,\n })\n\n return queryBuilder\n }\n\n render() {\n return (\n \n
\n
\n {key}: {accounts}\n
\n )\n }\n\n if (key === PIVOT_FILEDS.HAS_TAGS) {\n const tags = value || List()\n\n return `${key}: ${tags.toJS().join('; ')}`\n }\n\n if (key === PIVOT_FILEDS.SPECIFIC_DATES) {\n return `${key}: ${value.get('startDate')} - ${value.get('endDate')}`\n }\n\n if (List.isList(value)) {\n return `${key}: ${value.toJS().join('; ')}`\n }\n\n return `${key}: ${value}`\n })\n .toList()\n\n return (\n \n
\n )\n }\n}\n\nSolutionCenterFilterStatus.propTypes = {\n intl: PropTypes.shape({\n formatMessage: PropTypes.func.isRequired,\n }).isRequired,\n pivot: ImmutablePropTypes.map,\n theme: themeShape,\n}\n\nconst mapStateToProps = createStructuredSelector({\n pivot: selectPivot,\n})\n\nconst withConnect = connect(mapStateToProps)\n\nexport default compose(\n withConnect,\n themeable,\n injectIntl\n)(SolutionCenterFilterStatus)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport { createStructuredSelector } from 'reselect'\nimport { compose, bindActionCreators } from 'redux'\nimport ImmutablePropTypes from 'react-immutable-proptypes'\nimport { DAEMON } from 'utils/constants'\nimport LoadingAnim from 'components/LoadingAnim'\nimport injectReducer from 'utils/injectReducer'\nimport injectSaga from 'utils/injectSaga'\nimport { selectQueryTypes } from 'containers/SonraiData/selectors'\nimport SolutionCenterCards from 'containers/SolutionCenterCards'\nimport { selectSelectedCard } from 'containers/SolutionCenterCards/selectors'\nimport SolutionCenterWidgets from 'containers/SolutionCenterWidgets'\nimport SolutionCenterFilterPanel from 'containers/SolutionCenterFilterPanel'\nimport SolutionCenterCardActions from 'containers/SolutionCenterCardActions'\nimport WithPermission from 'containers/PermissionChecker/WithPermission'\nimport { selectCards } from './selectors'\nimport reducer from './reducer'\nimport { startUpdateScPoll, stopUpdateScPoll } from './actions'\nimport sagas from './sagas'\nimport SolutionCenterToolbar from './SolutionCenterToolbar'\nimport SolutionCenterErrorBoundry from './SolutionCenterErrorBoundry'\nimport SolutionCenterFilterStatus from './SolutionCenterFilterStatus'\nexport class SolutionCenter extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n error: false,\n showFiltersPanel: false,\n }\n\n this.styles = {\n wrapper: {\n height: '100%',\n display: 'grid',\n gridTemplateRows: 'auto 1fr',\n gridTemplateAreas: '\"toolbar\" \"content\"',\n position: 'relative',\n },\n toolbar: {\n gridArea: 'toolbar',\n },\n content: {\n gridArea: 'content',\n display: 'grid',\n gridTemplateRows: 'auto auto 1fr',\n gridTemplateAreas: '\"scToolbar\" \"widgets\"',\n overflow: 'hidden',\n },\n\n scToolbar: {\n gridArea: 'scToolbar',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: '\"add filterstatus cardActions\"',\n },\n filterStatus: {\n gridArea: 'filterstatus',\n },\n cardActions: {\n gridArea: 'cardActions',\n },\n widgets: {\n gridArea: 'widgets',\n overflow: 'auto',\n position: 'relative',\n zIndex: 0,\n },\n }\n }\n\n componentDidMount() {\n this.props.startUpdateScPoll()\n }\n\n componentDidCatch(error) {\n this.setState({ error })\n }\n\n componentWillUnmount() {\n this.props.stopUpdateScPoll()\n }\n\n toggleFiltersPanel = () => {\n this.setState(currentState => ({\n showFiltersPanel: !currentState.showFiltersPanel,\n }))\n }\n\n render() {\n if (this.state.error) {\n return \n
\n \n {!this.props.selectedCard.isEmpty() && (\n
\n\n \n
\n )}\n \n \n
\n \n
\n \n
\n \n
\n