1import { useEffect, useState } from 'react'; 2import { SelectableValue, toOption } from '@grafana/data'; 3import { appendTemplateVariables } from './utils/utils'; 4import { Dimensions } from './types'; 5import { CloudWatchDatasource } from './datasource'; 6import { useDeepCompareEffect } from 'react-use'; 7 8export const useRegions = (datasource: CloudWatchDatasource): [Array<SelectableValue<string>>, boolean] => { 9 const [regionsIsLoading, setRegionsIsLoading] = useState<boolean>(false); 10 const [regions, setRegions] = useState<Array<SelectableValue<string>>>([{ label: 'default', value: 'default' }]); 11 12 useEffect(() => { 13 setRegionsIsLoading(true); 14 15 const variableOptionGroup = { 16 label: 'Template Variables', 17 options: datasource.getVariables().map(toOption), 18 }; 19 20 datasource 21 .getRegions() 22 .then((regions: Array<SelectableValue<string>>) => setRegions([...regions, variableOptionGroup])) 23 .finally(() => setRegionsIsLoading(false)); 24 }, [datasource]); 25 26 return [regions, regionsIsLoading]; 27}; 28 29export const useNamespaces = (datasource: CloudWatchDatasource) => { 30 const [namespaces, setNamespaces] = useState<Array<SelectableValue<string>>>([]); 31 useEffect(() => { 32 datasource.getNamespaces().then((namespaces) => { 33 setNamespaces(appendTemplateVariables(datasource, namespaces)); 34 }); 35 }, [datasource]); 36 37 return namespaces; 38}; 39 40export const useMetrics = (datasource: CloudWatchDatasource, region: string, namespace: string | undefined) => { 41 const [metrics, setMetrics] = useState<Array<SelectableValue<string>>>([]); 42 useEffect(() => { 43 datasource.getMetrics(namespace, region).then((result: Array<SelectableValue<string>>) => { 44 setMetrics(appendTemplateVariables(datasource, result)); 45 }); 46 }, [datasource, region, namespace]); 47 48 return metrics; 49}; 50 51export const useDimensionKeys = ( 52 datasource: CloudWatchDatasource, 53 region: string, 54 namespace: string | undefined, 55 metricName: string | undefined, 56 dimensionFilter?: Dimensions 57) => { 58 const [dimensionKeys, setDimensionKeys] = useState<Array<SelectableValue<string>>>([]); 59 60 // doing deep comparison to avoid making new api calls to list metrics unless dimension filter object props changes 61 useDeepCompareEffect(() => { 62 datasource 63 .getDimensionKeys(namespace, region, dimensionFilter, metricName) 64 .then((result: Array<SelectableValue<string>>) => { 65 setDimensionKeys(appendTemplateVariables(datasource, result)); 66 }); 67 }, [datasource, region, namespace, metricName, dimensionFilter]); 68 69 return dimensionKeys; 70}; 71