1import React from 'react'; 2import { css } from '@emotion/css'; 3import { LinkButton, CallToActionCard, Icon, useTheme2 } from '@grafana/ui'; 4 5import { contextSrv } from 'app/core/core'; 6import { AccessControlAction } from 'app/types'; 7 8export const NoDataSourceCallToAction = () => { 9 const theme = useTheme2(); 10 11 const canCreateDataSource = 12 contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) && 13 contextSrv.hasPermission(AccessControlAction.DataSourcesWrite); 14 15 const message = 16 'Explore requires at least one data source. Once you have added a data source, you can query it here.'; 17 const footer = ( 18 <> 19 <Icon name="rocket" /> 20 <> ProTip: You can also define data sources through configuration files. </> 21 <a 22 href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore" 23 target="_blank" 24 rel="noreferrer" 25 className="text-link" 26 > 27 Learn more 28 </a> 29 </> 30 ); 31 32 const ctaElement = ( 33 <LinkButton size="lg" href="datasources/new" icon="database" disabled={!canCreateDataSource}> 34 Add data source 35 </LinkButton> 36 ); 37 38 const cardClassName = css` 39 max-width: ${theme.breakpoints.values.lg}px; 40 margin-top: ${theme.spacing(2)}; 41 align-self: center; 42 `; 43 44 return ( 45 <CallToActionCard callToActionElement={ctaElement} className={cardClassName} footer={footer} message={message} /> 46 ); 47}; 48