55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { SelectableValue } from '@grafana/data';
|
|
import { EditorField } from '@grafana/plugin-ui';
|
|
import { Select } from '@grafana/ui';
|
|
|
|
export interface Props {
|
|
onChange: (accountId?: string) => void;
|
|
accountOptions: Array<SelectableValue<string>>;
|
|
accountId?: string;
|
|
}
|
|
|
|
export const ALL_ACCOUNTS_OPTION = {
|
|
label: 'All',
|
|
value: 'all',
|
|
description: 'Target all linked accounts',
|
|
};
|
|
|
|
export function Account({ accountId, onChange, accountOptions }: Props) {
|
|
const selectedAccountExistsInOptions = useMemo(
|
|
() =>
|
|
accountOptions.find((a) => {
|
|
if (a.options) {
|
|
const matchingTemplateVar = a.options.find((tempVar: SelectableValue<string>) => {
|
|
return tempVar.value === accountId;
|
|
});
|
|
return matchingTemplateVar;
|
|
}
|
|
return a.value === accountId;
|
|
}),
|
|
[accountOptions, accountId]
|
|
);
|
|
|
|
if (accountOptions.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<EditorField
|
|
label="Account"
|
|
width={26}
|
|
tooltip="A CloudWatch monitoring account views data from source accounts so you can centralize monitoring and troubleshooting activities across multiple accounts. Go to the CloudWatch settings page in the AWS console for more details."
|
|
>
|
|
<Select
|
|
aria-label="Account Selection"
|
|
value={selectedAccountExistsInOptions ? accountId : ALL_ACCOUNTS_OPTION.value}
|
|
options={[ALL_ACCOUNTS_OPTION, ...accountOptions]}
|
|
onChange={({ value }) => {
|
|
onChange(value);
|
|
}}
|
|
/>
|
|
</EditorField>
|
|
);
|
|
}
|