import { flatMap , uniq } from 'lodash' ; import * as React from 'react' ; import type { Subject } from 'rxjs' ; import type { IMetricAlarmDimension , IServerGroup } from '@spinnaker/core' ; import { CloudMetricsReader , ReactSelectInput , TextInput , useData } from '@spinnaker/core' ; import type { IScalingPolicyAlarmView } from '../../../../../domain' ; import './dimensionsEditor.less' ; export interface IDimensionsEditorProps { alarm : IScalingPolicyAlarmView ; namespaceUpdated ? : Subject < void > ; serverGroup : IServerGroup ; updateAvailableMetrics : ( dimensions : IMetricAlarmDimension [ ] ) => void ; } export const DimensionsEditor = ( { alarm , serverGroup , updateAvailableMetrics } ) => { const dimensions = alarm . dimensions || [ ] ; const fetchDimensions = ( ) => { return CloudMetricsReader . listMetrics ( 'aws' , serverGroup . account , serverGroup . region , { namespace : alarm . namespace , } ) . then ( ( results ) => { const allDimensions = flatMap ( results , ( r ) => r . dimensions ) ; const sortedDimensions = uniq ( allDimensions . filter ( ( d ) => d ) . map ( ( d ) => d . name ) ) . sort ( ) ; return sortedDimensions ; } ) . catch ( ( ) => { return [ ] ; } ) ; } ; const { result : dimensionOptions } = useData ( fetchDimensions , [ ] , [ alarm . namespace , serverGroup . name ] ) ; const addDimension = ( ) => { const newDimensions = [ ... dimensions , { } as IMetricAlarmDimension ] ; updateAvailableMetrics ( newDimensions ) ; } ; const removeDimension = ( index ) => { const newDimensions = alarm . dimensions . filter ( ( _d , i ) => i !== index ) ; updateAvailableMetrics ( newDimensions ) ; } ; const updateDimension = ( key , value , index ) => { const newDimensions = [ ... dimensions ] ; const updatedDimension = newDimensions [ index ] ; updatedDimension [ key ] = value ; updateAvailableMetrics ( newDimensions ) ; } ; return ( < div > < div className = "row" > < div className = "col-md-12 small" > < h5 > Dimensions < /h5> < /div> < /div> { dimensions . map ( ( dimension , i ) => ( < div key = { `dimension-${ i }` } className = "row dimensions-row horizontal middle" > < div className = "col-md-6" > < ReactSelectInput onChange = { ( e ) => updateDimension ( 'name' , e . target . value , i ) } value = { dimension . name } stringOptions = { dimensionOptions } / > < /div> < TextInput onChange = { ( e ) => updateDimension ( 'value' , e . target . value , i ) } value = { dimension . value } / > { ! alarm . disableEditingDimensions && ( < div className = "col-md-1" onClick = { ( ) => removeDimension ( i ) } > < a > < i className = "glyphicon glyphicon-trash clickable" / > < /a> < /div>)} < /div>))} { ! alarm . disableEditingDimensions && ( < div className = "row" > < div > < button type = "button" className = "btn btn-block btn-xs add-new" onClick = { addDimension } > < span className = "glyphicon glyphicon-plus-sign sp-margin-xs-left" > < /span> Add dimension < /button> < /div> < /div>)} < /div>); } ;