mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
128fb8fa7e
* added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex * set fixed height to large button, removed xlarge button and replaced with large button * removed button-mini and replaced with button-small, set fixed height to default button and button-small * fixed padding for default and large button, fixed height for navbar button, fixed snapshots * fixed padding and margin on navbar buttons * gave special height to login btn-primary * readded btn-mini class with same styling as btn-small and a deprecated notice * fixed add panel widget buttons
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React, { useContext } from 'react';
|
|
import { css } from 'emotion';
|
|
import { ThemeContext, LargeLinkButton, CallToActionCard } from '@grafana/ui';
|
|
|
|
export const NoDataSourceCallToAction = () => {
|
|
const theme = useContext(ThemeContext);
|
|
|
|
const message =
|
|
'Explore requires at least one data source. Once you have added a data source, you can query it here.';
|
|
const footer = (
|
|
<>
|
|
<i className="fa fa-rocket" />
|
|
<> ProTip: You can also define data sources through configuration files. </>
|
|
<a
|
|
href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
|
|
target="_blank"
|
|
className="text-link"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</>
|
|
);
|
|
|
|
const ctaElement = (
|
|
<LargeLinkButton href="/datasources/new" icon="gicon gicon-datasources">
|
|
Add data source
|
|
</LargeLinkButton>
|
|
);
|
|
|
|
const cardClassName = css`
|
|
max-width: ${theme.breakpoints.lg};
|
|
`;
|
|
|
|
return (
|
|
<CallToActionCard
|
|
callToActionElement={ctaElement}
|
|
className={cardClassName}
|
|
footer={footer}
|
|
message={message}
|
|
theme={theme}
|
|
/>
|
|
);
|
|
};
|