diff --git a/public/app/core/components/Branding/OrangeBadge.tsx b/public/app/core/components/Branding/OrangeBadge.tsx index be9d080df79..3088c63cec5 100644 --- a/public/app/core/components/Branding/OrangeBadge.tsx +++ b/public/app/core/components/Branding/OrangeBadge.tsx @@ -1,19 +1,25 @@ -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; +import { HTMLAttributes } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Icon, useStyles2 } from '@grafana/ui'; -export function OrangeBadge({ text }: { text: string }) { - const styles = useStyles2(getStyles); +interface Props extends HTMLAttributes { + text?: string; + className?: string; +} + +export function OrangeBadge({ text, className, ...htmlProps }: Props) { + const styles = useStyles2(getStyles, text); return ( -
+
{text}
); } -const getStyles = (theme: GrafanaTheme2) => { +const getStyles = (theme: GrafanaTheme2, text: string | undefined) => { return { wrapper: css({ display: 'inline-flex', @@ -26,6 +32,11 @@ const getStyles = (theme: GrafanaTheme2) => { fontSize: theme.typography.bodySmall.fontSize, lineHeight: theme.typography.bodySmall.lineHeight, alignItems: 'center', + ...(text === undefined && { + svg: { + marginRight: 0, + }, + }), }), }; }; diff --git a/public/app/core/components/Upgrade/ProBadge.tsx b/public/app/core/components/Upgrade/ProBadge.tsx index a7e9eec4b50..dc5aadf5d13 100644 --- a/public/app/core/components/Upgrade/ProBadge.tsx +++ b/public/app/core/components/Upgrade/ProBadge.tsx @@ -5,13 +5,14 @@ import { GrafanaTheme2 } from '@grafana/data'; import { reportExperimentView } from '@grafana/runtime'; import { useStyles2 } from '@grafana/ui'; +import { OrangeBadge } from '../Branding/OrangeBadge'; + export interface Props extends HTMLAttributes { - text?: string; experimentId?: string; eventVariant?: string; } -export const ProBadge = ({ text = 'PRO', className, experimentId, eventVariant = '', ...htmlProps }: Props) => { +export const ProBadge = ({ className, experimentId, eventVariant = '', ...htmlProps }: Props) => { const styles = useStyles2(getStyles); useEffect(() => { @@ -20,23 +21,13 @@ export const ProBadge = ({ text = 'PRO', className, experimentId, eventVariant = } }, [experimentId, eventVariant]); - return ( - - {text} - - ); + return ; }; const getStyles = (theme: GrafanaTheme2) => { return { badge: css({ marginLeft: theme.spacing(1.25), - borderRadius: theme.shape.borderRadius(5), - backgroundColor: theme.colors.success.main, - padding: theme.spacing(0.25, 0.75), - color: 'white', // use the same color for both themes - fontWeight: theme.typography.fontWeightMedium, - fontSize: theme.typography.pxToRem(10), }), }; }; diff --git a/public/app/features/connections/Connections.tsx b/public/app/features/connections/Connections.tsx index 6d40a294c55..4d40c5684b7 100644 --- a/public/app/features/connections/Connections.tsx +++ b/public/app/features/connections/Connections.tsx @@ -2,14 +2,19 @@ import { Navigate, Routes, Route, useLocation } from 'react-router-dom-v5-compat import { StoreState, useSelector } from 'app/types/store'; +import { isOpenSourceBuildOrUnlicenced } from '../admin/EnterpriseAuthFeaturesCard'; + import { ROUTES } from './constants'; import { AddNewConnectionPage } from './pages/AddNewConnectionPage'; +import { CacheFeatureHighlightPage } from './pages/CacheFeatureHighlightPage'; import ConnectionsHomePage from './pages/ConnectionsHomePage'; import { DataSourceDashboardsPage } from './pages/DataSourceDashboardsPage'; import { DataSourceDetailsPage } from './pages/DataSourceDetailsPage'; import { DataSourcesListPage } from './pages/DataSourcesListPage'; import { EditDataSourcePage } from './pages/EditDataSourcePage'; +import { InsightsFeatureHighlightPage } from './pages/InsightsFeatureHighlightPage'; import { NewDataSourcePage } from './pages/NewDataSourcePage'; +import { PermissionsFeatureHighlightPage } from './pages/PermissionsFeatureHighlightPage'; function RedirectToAddNewConnection() { const { search } = useLocation(); @@ -27,6 +32,7 @@ function RedirectToAddNewConnection() { export default function Connections() { const navIndex = useSelector((state: StoreState) => state.navIndex); const isAddNewConnectionPageOverridden = Boolean(navIndex['standalone-plugin-page-/connections/add-new-connection']); + const shouldEnableFeatureHighlights = isOpenSourceBuildOrUnlicenced(); return ( @@ -41,6 +47,27 @@ export default function Connections() { element={} /> } /> + + {shouldEnableFeatureHighlights && ( + <> + } + /> + } + /> + } + /> + + )} + (); + useInitDataSourceSettings(uid); + + const { navId, pageNav, dataSourceHeader } = useDataSourceTabNav(pageName); + const styles = useStyles2(getStyles); + + const info = useDataSourceInfo({ + dataSourcePluginName: pageNav.dataSourcePluginName, + alertingSupported: dataSourceHeader.alertingSupported, + }); + + return ( + } + info={info} + actions={} + > + +
+
+
+ +
+

{title}

+
{header}
+
+ {items.map((item) => ( +
+ + {item} +
+ ))} +
+
+ + Create a Grafana Cloud Free account to start using data source permissions. This feature is also + available with a Grafana Enterprise license. + +
+ + + Learn about Enterprise + +
+
+ + + Create account + +

+ + After creating an account, you can easily{' '} + + migrate this instance to Grafana Cloud + {' '} + with our Migration Assistant. + +

+
+
+ {`${pageName} +
+
+ + + ); +} + +const getStyles = (theme: GrafanaTheme2) => ({ + container: css({ + display: 'flex', + gap: theme.spacing(4), + alignItems: 'flex-start', + [theme.breakpoints.down('lg')]: { + flexDirection: 'column', + }, + }), + content: css({ + flex: '0 0 40%', + }), + imageContainer: css({ + flex: '0 0 60%', + display: 'flex', + [theme.breakpoints.down('lg')]: { + flex: '1 1 auto', + }, + padding: `${theme.spacing(5)} 10% 0 ${theme.spacing(5)}`, + }), + image: css({ + width: '100%', + borderRadius: theme.shape.radius.default, + boxShadow: theme.shadows.z3, + }), + buttonIcon: css({ + marginRight: theme.spacing(1), + }), + badge: css({ + marginBottom: theme.spacing(1), + }), + title: css({ + marginBottom: theme.spacing(2), + marginTop: theme.spacing(2), + }), + header: css({ + color: theme.colors.text.primary, + }), + + itemsList: css({ + marginBottom: theme.spacing(3), + marginTop: theme.spacing(3), + }), + + listItem: css({ + display: 'flex', + alignItems: 'flex-start', + color: theme.colors.text.primary, + lineHeight: theme.typography.bodySmall.lineHeight, + marginBottom: theme.spacing(2), + }), + + linkButton: css({ + marginBottom: theme.spacing(2), + }), + + footer: css({ + marginBottom: theme.spacing(3), + marginTop: theme.spacing(3), + }), + + icon: css({ + marginRight: theme.spacing(1), + color: theme.colors.success.main, + }), + footNote: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + }), +}); diff --git a/public/app/features/connections/hooks/useDataSourceTabNav.ts b/public/app/features/connections/hooks/useDataSourceTabNav.ts new file mode 100644 index 00000000000..2c7231330b5 --- /dev/null +++ b/public/app/features/connections/hooks/useDataSourceTabNav.ts @@ -0,0 +1,95 @@ +import { useLocation, useParams } from 'react-router-dom-v5-compat'; + +import { NavModel, NavModelItem } from '@grafana/data'; +import { t } from '@grafana/i18n'; +import { getDataSourceSrv } from '@grafana/runtime'; +import { getNavModel } from 'app/core/selectors/navModel'; +import { useDataSource, useDataSourceMeta, useDataSourceSettings } from 'app/features/datasources/state/hooks'; +import { getDataSourceLoadingNav, buildNavModel, getDataSourceNav } from 'app/features/datasources/state/navModel'; +import { useGetSingle } from 'app/features/plugins/admin/state/hooks'; +import { useSelector } from 'app/types/store'; + +export function useDataSourceTabNav(pageName: string, pageIdParam?: string) { + const { uid = '' } = useParams<{ uid: string }>(); + const location = useLocation(); + const datasource = useDataSource(uid); + const dataSourceMeta = useDataSourceMeta(datasource.type); + const datasourcePlugin = useGetSingle(datasource.type); + const params = new URLSearchParams(location.search); + const pageId = pageIdParam || params.get('page'); + + const { plugin, loadError, loading } = useDataSourceSettings(); + const dsi = getDataSourceSrv()?.getInstanceSettings(uid); + const hasAlertingEnabled = Boolean(dsi?.meta?.alerting ?? false); + const isAlertManagerDatasource = dsi?.type === 'alertmanager'; + const alertingSupported = hasAlertingEnabled || isAlertManagerDatasource; + + const navIndex = useSelector((state) => state.navIndex); + const navIndexId = pageId ? `datasource-${pageId}-${uid}` : `datasource-${pageName}-${uid}`; + + let pageNav: NavModel = { + node: { + text: t('connections.use-data-source-settings-nav.page-nav.text.data-source-nav-node', 'Data Source Nav Node'), + }, + main: { + text: t('connections.use-data-source-settings-nav.page-nav.text.data-source-nav-node', 'Data Source Nav Node'), + }, + }; + + if (loadError) { + const node: NavModelItem = { + text: loadError, + subTitle: t('connections.use-data-source-settings-nav.node.subTitle.data-source-error', 'Data Source Error'), + icon: 'exclamation-triangle', + }; + + pageNav = { + node: node, + main: node, + }; + } + + if (loading || !plugin) { + pageNav = getNavModel(navIndex, navIndexId, getDataSourceLoadingNav(pageName)); + } + + if (!datasource.uid) { + const node: NavModelItem = { + text: t('connections.use-data-source-settings-nav.node.subTitle.data-source-error', 'Data Source Error'), + icon: 'exclamation-triangle', + }; + + pageNav = { + node: node, + main: node, + }; + } + + if (plugin) { + pageNav = getNavModel( + navIndex, + navIndexId, + getDataSourceNav(buildNavModel(datasource, plugin), pageId || pageName) + ); + } + + const connectionsPageNav = { + ...pageNav.main, + dataSourcePluginName: datasourcePlugin?.name || plugin?.meta.name || '', + active: true, + text: datasource.name || '', + subTitle: dataSourceMeta.name ? `Type: ${dataSourceMeta.name}` : '', + children: (pageNav.main.children || []).map((navModelItem) => ({ + ...navModelItem, + url: navModelItem.url?.replace('datasources/edit/', '/connections/datasources/edit/'), + })), + }; + + return { + navId: 'connections-datasources', + pageNav: connectionsPageNav, + dataSourceHeader: { + alertingSupported, + }, + }; +} diff --git a/public/app/features/connections/pages/CacheFeatureHighlightPage.tsx b/public/app/features/connections/pages/CacheFeatureHighlightPage.tsx new file mode 100644 index 00000000000..bb63af4e189 --- /dev/null +++ b/public/app/features/connections/pages/CacheFeatureHighlightPage.tsx @@ -0,0 +1,33 @@ +import { t } from '@grafana/i18n'; +import cacheScreenshot from 'img/cache-screenshot.png'; + +import { FeatureHighlightsTabPage } from '../components/FeatureHighlightsTabPage'; + +export function CacheFeatureHighlightPage() { + return ( + + ); +} diff --git a/public/app/features/connections/pages/InsightsFeatureHighlightPage.tsx b/public/app/features/connections/pages/InsightsFeatureHighlightPage.tsx new file mode 100644 index 00000000000..78f24a5026c --- /dev/null +++ b/public/app/features/connections/pages/InsightsFeatureHighlightPage.tsx @@ -0,0 +1,40 @@ +import { t } from '@grafana/i18n'; +import insightsScreenshot from 'img/insights-screenshot.png'; + +import { FeatureHighlightsTabPage } from '../components/FeatureHighlightsTabPage'; + +export function InsightsFeatureHighlightPage() { + return ( + + ); +} diff --git a/public/app/features/connections/pages/PermissionsFeatureHighlightPage.tsx b/public/app/features/connections/pages/PermissionsFeatureHighlightPage.tsx new file mode 100644 index 00000000000..4d5b8884b34 --- /dev/null +++ b/public/app/features/connections/pages/PermissionsFeatureHighlightPage.tsx @@ -0,0 +1,36 @@ +import { t } from '@grafana/i18n'; +import permissionsScreenshot from 'img/permissions-screenshot.png'; + +import { FeatureHighlightsTabPage } from '../components/FeatureHighlightsTabPage'; + +export function PermissionsFeatureHighlightPage() { + return ( + + ); +} diff --git a/public/app/features/connections/tabs/ConnectData/DataSourceTabs.test.tsx b/public/app/features/connections/tabs/ConnectData/DataSourceTabs.test.tsx new file mode 100644 index 00000000000..6a772be530b --- /dev/null +++ b/public/app/features/connections/tabs/ConnectData/DataSourceTabs.test.tsx @@ -0,0 +1,150 @@ +import { RenderResult, screen } from '@testing-library/react'; +import { Route, Routes } from 'react-router-dom-v5-compat'; +import { render } from 'test/test-utils'; + +import { LayoutModes, PluginType } from '@grafana/data'; +import { setPluginLinksHook, setPluginComponentsHook } from '@grafana/runtime'; +import { contextSrv } from 'app/core/services/context_srv'; +import * as api from 'app/features/datasources/api'; +import { getMockDataSources } from 'app/features/datasources/mocks/dataSourcesMocks'; +import { configureStore } from 'app/store/configureStore'; + +import { getPluginsStateMock } from '../../../plugins/admin/mocks/mockHelpers'; +import Connections from '../../Connections'; +import { ROUTES } from '../../constants'; +import { navIndex } from '../../mocks/store.navIndex.mock'; + +setPluginLinksHook(() => ({ links: [], isLoading: false })); +setPluginComponentsHook(() => ({ components: [], isLoading: false })); + +const mockDatasources = getMockDataSources(3); + +const renderPage = ( + path: string = ROUTES.Base, + store = configureStore({ + navIndex, + plugins: getPluginsStateMock([]), + dataSources: { + dataSources: mockDatasources, + dataSourcesCount: mockDatasources.length, + isLoadingDataSources: false, + searchQuery: '', + dataSourceTypeSearchQuery: '', + layoutMode: LayoutModes.List, + dataSource: mockDatasources[0], + dataSourceMeta: { + id: '', + name: '', + type: PluginType.panel, + info: { + author: { + name: '', + url: undefined, + }, + description: '', + links: [], + logos: { + large: '', + small: '', + }, + screenshots: [], + updated: '', + version: '', + }, + module: '', + baseUrl: '', + backend: true, + isBackend: true, + }, + isLoadingDataSourcePlugins: false, + plugins: [], + categories: [], + isSortAscending: true, + }, + }) +): RenderResult => { + return render( + + } /> + , + { + store, + historyOptions: { initialEntries: [path] }, + } + ); +}; + +jest.mock('@grafana/runtime', () => { + const original = jest.requireActual('@grafana/runtime'); + return { + ...original, + config: { + ...original.config, + bootData: { + user: { + orgId: 1, + timezone: 'UTC', + }, + navTree: [], + }, + featureToggles: { + ...original.config.featureToggles, + }, + datasources: {}, + defaultDatasource: '', + buildInfo: { + ...original.config.buildInfo, + edition: 'Open Source', + }, + caching: { + ...original.config.caching, + enabled: true, + }, + }, + getTemplateSrv: () => ({ + replace: (str: string) => str, + }), + getDataSourceSrv: () => { + return { + getInstanceSettings: (uid: string) => { + return { + id: uid, + uid: uid, + type: PluginType.datasource, + name: uid, + meta: { + id: uid, + name: uid, + type: PluginType.datasource, + backend: true, + isBackend: true, + }, + }; + }, + }; + }, + }; +}); + +describe('DataSourceEditTabs', () => { + beforeEach(() => { + process.env.NODE_ENV = 'test'; + (api.getDataSources as jest.Mock) = jest.fn().mockResolvedValue(mockDatasources); + (contextSrv.hasPermission as jest.Mock) = jest.fn().mockReturnValue(true); + }); + + it('should render Permissions and Insights tabs', () => { + const path = ROUTES.DataSourcesEdit.replace(':uid', mockDatasources[0].uid); + renderPage(path); + + const permissionsTab = screen.getByTestId('data-testid Tab Permissions'); + expect(permissionsTab).toBeInTheDocument(); + expect(permissionsTab).toHaveTextContent('Permissions'); + expect(permissionsTab).toHaveAttribute('href', '/connections/datasources/edit/x/permissions'); + + const insightsTab = screen.getByTestId('data-testid Tab Insights'); + expect(insightsTab).toBeInTheDocument(); + expect(insightsTab).toHaveTextContent('Insights'); + expect(insightsTab).toHaveAttribute('href', '/connections/datasources/edit/x/insights'); + }); +}); diff --git a/public/app/features/datasources/components/DataSourceTabPage.tsx b/public/app/features/datasources/components/DataSourceTabPage.tsx index 2857cebe084..03f43e400c5 100644 --- a/public/app/features/datasources/components/DataSourceTabPage.tsx +++ b/public/app/features/datasources/components/DataSourceTabPage.tsx @@ -13,7 +13,7 @@ export interface Props { } export function DataSourceTabPage({ uid, pageId }: Props) { - const { navId, pageNav, dataSourceHeader } = useDataSourceSettingsNav(); + const { navId, pageNav, dataSourceHeader } = useDataSourceSettingsNav('settings'); const info = useDataSourceInfo({ dataSourcePluginName: pageNav.dataSourcePluginName, diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts index 2c685beae68..b11c13c6c4f 100644 --- a/public/app/features/datasources/state/navModel.ts +++ b/public/app/features/datasources/state/navModel.ts @@ -4,6 +4,7 @@ import { featureEnabled } from '@grafana/runtime'; import { ProBadge } from 'app/core/components/Upgrade/ProBadge'; import config from 'app/core/config'; import { contextSrv } from 'app/core/core'; +import { isOpenSourceBuildOrUnlicenced } from 'app/features/admin/EnterpriseAuthFeaturesCard'; import { highlightTrial } from 'app/features/admin/utils'; import { AccessControlAction } from 'app/types/accessControl'; import icnDatasourceSvg from 'img/icn-datasource.svg'; @@ -53,6 +54,8 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat }); } + const shouldEnableFeatureHighlights = isOpenSourceBuildOrUnlicenced(); + const isLoadingNav = dataSource.type === loadingDSType; const permissionsExperimentId = 'feature-highlights-data-source-permissions-badge'; @@ -64,12 +67,15 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat url: `datasources/edit/${dataSource.uid}/permissions`, }; - if (highlightTrial() && !isLoadingNav) { + if ((highlightTrial() && !isLoadingNav) || shouldEnableFeatureHighlights) { dsPermissions.tabSuffix = () => ProBadge({ experimentId: permissionsExperimentId, eventVariant: 'trial' }); } - if (featureEnabled('dspermissions.enforcement')) { - if (contextSrv.hasPermissionInMetadata(AccessControlAction.DataSourcesPermissionsRead, dataSource)) { + if (featureEnabled('dspermissions.enforcement') || shouldEnableFeatureHighlights) { + if ( + contextSrv.hasPermissionInMetadata(AccessControlAction.DataSourcesPermissionsRead, dataSource) || + shouldEnableFeatureHighlights + ) { navModel.children!.push(dsPermissions); } } else if (highlightsEnabled && !isLoadingNav) { @@ -80,7 +86,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat }); } - if (config.analytics?.enabled) { + if (config.analytics?.enabled || shouldEnableFeatureHighlights) { const analyticsExperimentId = 'feature-highlights-data-source-insights-badge'; const analytics: NavModelItem = { active: false, @@ -90,12 +96,12 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat url: `datasources/edit/${dataSource.uid}/insights`, }; - if (highlightTrial() && !isLoadingNav) { + if ((highlightTrial() && !isLoadingNav) || shouldEnableFeatureHighlights) { analytics.tabSuffix = () => ProBadge({ experimentId: analyticsExperimentId, eventVariant: 'trial' }); } - if (featureEnabled('analytics')) { - if (contextSrv.hasPermission(AccessControlAction.DataSourcesInsightsRead)) { + if (featureEnabled('analytics') || shouldEnableFeatureHighlights) { + if (contextSrv.hasPermission(AccessControlAction.DataSourcesInsightsRead) || shouldEnableFeatureHighlights) { navModel.children!.push(analytics); } } else if (highlightsEnabled && !isLoadingNav) { @@ -118,12 +124,15 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat hideFromTabs: !pluginMeta.isBackend || !config.caching.enabled, }; - if (highlightTrial() && !isLoadingNav) { + if ((highlightTrial() && !isLoadingNav) || shouldEnableFeatureHighlights) { caching.tabSuffix = () => ProBadge({ experimentId: cachingExperimentId, eventVariant: 'trial' }); } - if (featureEnabled('caching')) { - if (contextSrv.hasPermissionInMetadata(AccessControlAction.DataSourcesCachingRead, dataSource)) { + if (featureEnabled('caching') || shouldEnableFeatureHighlights) { + if ( + contextSrv.hasPermissionInMetadata(AccessControlAction.DataSourcesCachingRead, dataSource) || + shouldEnableFeatureHighlights + ) { navModel.children!.push(caching); } } else if (highlightsEnabled && !isLoadingNav) { diff --git a/public/img/cache-screenshot.png b/public/img/cache-screenshot.png new file mode 100644 index 00000000000..501b5c38f96 Binary files /dev/null and b/public/img/cache-screenshot.png differ diff --git a/public/img/insights-screenshot.png b/public/img/insights-screenshot.png new file mode 100644 index 00000000000..e5291b318d3 Binary files /dev/null and b/public/img/insights-screenshot.png differ diff --git a/public/img/permissions-screenshot.png b/public/img/permissions-screenshot.png new file mode 100644 index 00000000000..affb902fab3 Binary files /dev/null and b/public/img/permissions-screenshot.png differ diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index ed29beb6afe..ed0738c373a 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -4142,6 +4142,13 @@ "body": "Try the new Advisor to uncover potential issues with your data sources and plugins.", "go-to-advisor": "Go to Advisor" }, + "cache-feature-highlight-page": { + "header": "Query caching can improve load times and reduce API costs by temporarily storing the results of data source queries. When you or other users submit the same query, the results will come back from the cache instead of from the data source.", + "item-1": "Faster dashboard load times, especially for popular dashboards.", + "item-2": "Reduced API costs.", + "item-3": "Reduced likelihood that APIs will rate-limit or throttle requests.", + "title": "Optimize queries with Query Caching in Grafana Cloud" + }, "cloud": { "connections-home-page": { "add-new-connection": { @@ -4190,6 +4197,20 @@ "unknown-datasource": "Unknown datasource" } }, + "feature-highlight-page": { + "foot-note": "After creating an account, you can easily <2>migrate this instance to Grafana Cloud with our Migration Assistant.", + "footer": "Create a Grafana Cloud Free account to start using data source permissions. This feature is also available with a Grafana Enterprise license.", + "footer-link": "Learn about Enterprise", + "link-button-label": "Create account" + }, + "insights-feature-highlight-page": { + "header": "Usage Insights provide detailed information about data source usage, like the number of views, queries, and errors users have experienced. You can use this to improve users’ experience and troubleshoot issues.", + "item-1": "Demonstrate and improve the value of your observability service by keeping track of user engagement", + "item-2": "Keep Grafana performant and by identifying and fixing slow, error-prone data sources", + "item-3": "Clean up your instance by finding and removing unused data sources", + "item-4": "Review individual data source usage insights at a glance in the UI, sort search results by usage and errors, or dig into detailed usage logs", + "title": "Understand usage of your data sources with Grafana Cloud" + }, "new-data-source-page": { "subTitle": { "choose-a-data-source-type": "Choose a data source type" @@ -4220,6 +4241,13 @@ "subtitle": "Manage your data source connections in one place. Use this page to add a new data source or manage your existing connections." } }, + "permissions-feature-highlight-page": { + "header": "With data source permissions, you can protect sensitive data by limiting access to this data source to specific users, teams, and roles.", + "item-1": "Protect sensitive data, like security logs, production databases, and personally-identifiable information", + "item-2": "Clean up users’ experience by hiding data sources they don’t need to use", + "item-3": "Share Grafana access more freely, knowing that users will not unwittingly see sensitive data", + "title": "Secure access to data with data source permissions in Grafana Cloud" + }, "search": { "aria-label-search-all": "Search all", "placeholder": "Search all"