1import React from 'react'; 2import { css, cx } from '@emotion/css'; 3import { GrafanaTheme2 } from '@grafana/data'; 4import { Button, HorizontalGroup, useTheme2 } from '@grafana/ui'; 5 6type Props = { 7 addQueryRowButtonDisabled?: boolean; 8 addQueryRowButtonHidden?: boolean; 9 richHistoryButtonActive?: boolean; 10 queryInspectorButtonActive?: boolean; 11 12 onClickAddQueryRowButton: () => void; 13 onClickRichHistoryButton: () => void; 14 onClickQueryInspectorButton: () => void; 15}; 16 17const getStyles = (theme: GrafanaTheme2) => { 18 return { 19 containerMargin: css` 20 margin-top: ${theme.spacing(2)}; 21 `, 22 }; 23}; 24export function SecondaryActions(props: Props) { 25 const theme = useTheme2(); 26 const styles = getStyles(theme); 27 return ( 28 <div className={styles.containerMargin}> 29 <HorizontalGroup> 30 {!props.addQueryRowButtonHidden && ( 31 <Button 32 variant="secondary" 33 aria-label="Add row button" 34 onClick={props.onClickAddQueryRowButton} 35 disabled={props.addQueryRowButtonDisabled} 36 icon="plus" 37 > 38 Add query 39 </Button> 40 )} 41 <Button 42 variant="secondary" 43 aria-label="Rich history button" 44 className={cx({ ['explore-active-button']: props.richHistoryButtonActive })} 45 onClick={props.onClickRichHistoryButton} 46 icon="history" 47 > 48 Query history 49 </Button> 50 <Button 51 variant="secondary" 52 aria-label="Query inspector button" 53 className={cx({ ['explore-active-button']: props.queryInspectorButtonActive })} 54 onClick={props.onClickQueryInspectorButton} 55 icon="info-circle" 56 > 57 Inspector 58 </Button> 59 </HorizontalGroup> 60 </div> 61 ); 62} 63