|
| 1 | +import React, {FC, useCallback, useContext} from 'react' |
| 2 | +import { |
| 3 | + ComponentSize, |
| 4 | + FlexBox, |
| 5 | + AlignItems, |
| 6 | + TextBlock, |
| 7 | + Dropdown, |
| 8 | + FlexDirection, |
| 9 | + ComponentStatus, |
| 10 | +} from '@influxdata/clockface' |
| 11 | + |
| 12 | +import {PipeContext} from 'src/flows/context/pipe' |
| 13 | +import 'src/flows/pipes/Notification/Threshold.scss' |
| 14 | + |
| 15 | +// Utils |
| 16 | +import {event} from 'src/cloud/utils/reporting' |
| 17 | + |
| 18 | +interface Props { |
| 19 | + readOnly?: boolean |
| 20 | +} |
| 21 | + |
| 22 | +const Measurement: FC<Props> = ({readOnly}) => { |
| 23 | + const {data, update, results} = useContext(PipeContext) |
| 24 | + const {measurement} = data |
| 25 | + |
| 26 | + const measurements = Array.from( |
| 27 | + new Set(results.parsed.table.columns['_measurement']?.data as string[]) |
| 28 | + ) |
| 29 | + |
| 30 | + const onSelect = useCallback( |
| 31 | + (measurement: string) => { |
| 32 | + event('Changed Notification Measurement') |
| 33 | + update({measurement}) |
| 34 | + }, |
| 35 | + [measurements, update] |
| 36 | + ) |
| 37 | + |
| 38 | + const menuItems = measurements.map(key => ( |
| 39 | + <Dropdown.Item |
| 40 | + testID="dropdown-item--measurement" |
| 41 | + key={key} |
| 42 | + value={key} |
| 43 | + onClick={() => onSelect(key)} |
| 44 | + selected={key === measurement} |
| 45 | + title={key} |
| 46 | + disabled={!!readOnly} |
| 47 | + > |
| 48 | + {key} |
| 49 | + </Dropdown.Item> |
| 50 | + )) |
| 51 | + |
| 52 | + const menu = onCollapse => ( |
| 53 | + <Dropdown.Menu onCollapse={onCollapse}>{menuItems}</Dropdown.Menu> |
| 54 | + ) |
| 55 | + |
| 56 | + const menuButton = (active, onClick) => ( |
| 57 | + <Dropdown.Button |
| 58 | + testID="dropdown--measurements" |
| 59 | + onClick={onClick} |
| 60 | + active={active} |
| 61 | + size={ComponentSize.Medium} |
| 62 | + status={!!readOnly ? ComponentStatus.Disabled : ComponentStatus.Default} |
| 63 | + > |
| 64 | + {measurement || 'Select a measurement'} |
| 65 | + </Dropdown.Button> |
| 66 | + ) |
| 67 | + |
| 68 | + return ( |
| 69 | + <FlexBox |
| 70 | + direction={FlexDirection.Row} |
| 71 | + margin={ComponentSize.Medium} |
| 72 | + alignItems={AlignItems.FlexStart} |
| 73 | + testID="component-spacer" |
| 74 | + style={{padding: '24px 0'}} |
| 75 | + > |
| 76 | + <TextBlock |
| 77 | + testID="measurement-value-text-block" |
| 78 | + text="For" |
| 79 | + style={{minWidth: 56, textAlign: 'center'}} |
| 80 | + /> |
| 81 | + <FlexBox.Child grow={0}> |
| 82 | + <Dropdown menu={menu} button={menuButton} /> |
| 83 | + </FlexBox.Child> |
| 84 | + </FlexBox> |
| 85 | + ) |
| 86 | +} |
| 87 | + |
| 88 | +export default Measurement |
0 commit comments