opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-03 00:37:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Provisioning: Update ConfigForm (#103846)

Browse Source 
* Provisioning: Fix token permissions alignment

* Update config form

* Extract getDefaultValues
This commit is contained in:
Alex Khomenko
2025-04-11 08:33:11 +03:00
committed by GitHub
parent 7aa8628971
commit 04fae8bd46
6 changed files with 85 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/provisioning/Config/ConfigForm.tsx
View File

@ -14,39 +14,19 @@ import {
Stack,
Switch,
} from '@grafana/ui';
import { Repository, RepositorySpec } from 'app/api/clients/provisioning';
import { Repository } from 'app/api/clients/provisioning';
import { FormPrompt } from 'app/core/components/FormPrompt/FormPrompt';
import { t, Trans } from 'app/core/internationalization';
import { TokenPermissionsInfo } from '../Shared/TokenPermissionsInfo';
import { useCreateOrUpdateRepository } from '../hooks/useCreateOrUpdateRepository';
import { RepositoryFormData } from '../types';
import { dataToSpec, specToData } from '../utils/data';
import { dataToSpec } from '../utils/data';
import { ConfigFormGithubCollapse } from './ConfigFormGithubCollapse';
import { getDefaultValues } from './defaults';
export function getDefaultValues(repository?: RepositorySpec): RepositoryFormData {
if (!repository) {
return {
type: 'github',
title: 'Repository',
token: '',
url: '',
branch: 'main',
generateDashboardPreviews: false,
readOnly: false,
prWorkflow: true,
path: 'grafana/',
sync: {
enabled: false,
target: 'instance',
intervalSeconds: 60,
},
};
}
return specToData(repository);
}
// This needs to be a function for translations to work
const getOptions = () => {
const typeOptions = [
{ value: 'github', label: t('provisioning.config-form.option-github', 'GitHub') },
@ -254,11 +234,7 @@ export function ConfigForm({ data }: ConfigFormProps) {
}
/>
</Field>
{type === 'github' && (
<ConfigFormGithubCollapse
previews={<Switch {...register('generateDashboardPreviews')} id={'generateDashboardPreviews'} />}
/>
)}
{type === 'github' && <ConfigFormGithubCollapse register={register} />}
<ControlledCollapse
label={t('provisioning.config-form.label-automatic-pulling', 'Automatic pulling')}

128
public/app/features/provisioning/Config/ConfigFormGithubCollapse.tsx
View File

@ -1,96 +1,66 @@
import { ReactElement } from 'react';
import { useNavigate } from 'react-router-dom-v5-compat';
import { UseFormRegister } from 'react-hook-form';
import { config } from '@grafana/runtime';
import { Alert, ControlledCollapse, Field } from '@grafana/ui';
import { Checkbox, ControlledCollapse, Field, Text, TextLink } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { checkPublicAccess } from '../GettingStarted/features';
import { checkImageRenderer, checkPublicAccess } from '../GettingStarted/features';
import { GETTING_STARTED_URL } from '../constants';
import { RepositoryFormData } from '../types';
export interface ConfigFormGithubCollapseProps {
previews: ReactElement;
register: UseFormRegister<RepositoryFormData>;
}
export function ConfigFormGithubCollapse({ previews }: ConfigFormGithubCollapseProps) {
const navigate = useNavigate();
export function ConfigFormGithubCollapse({ register }: ConfigFormGithubCollapseProps) {
const isPublic = checkPublicAccess();
const hasImageRenderer = checkImageRenderer();
return (
<ControlledCollapse
label={t('provisioning.config-form-github-collapse.label-git-hub-features', 'GitHub features')}
isOpen={true}
>
<h3>
<Trans i18nKey="provisioning.config-form-github-collapse.realtime-feedback">Realtime feedback</Trans>
</h3>
{checkPublicAccess() ? (
<div>
<Alert
title={t(
'provisioning.config-form-github-collapse.title-webhook-will-be-created',
'Webhook will be created'
)}
severity={'info'}
>
<Trans i18nKey="provisioning.config-form-github-collapse.text-changes-in-git-quick-pull">
Changes in git will be quickly pulled into grafana. Pull requests can be processed.
</Trans>
</Alert>
</div>
) : (
<Alert
title={t(
'provisioning.config-form-github-collapse.title-public-url-not-configured',
'Public URL not configured'
)}
severity={'warning'}
buttonContent={<Trans i18nKey="provisioning.config-form-github-collapse.instructions">Instructions</Trans>}
onRemove={() => navigate(GETTING_STARTED_URL)}
>
<Trans i18nKey="provisioning.config-form-github-collapse.text-changes-in-git-eventually-pulled">
Changes in git will eventually be pulled depending on the synchronization interval. Pull requests will not
be processed
</Trans>
</Alert>
)}
<h3>
<Trans i18nKey="provisioning.config-form-github-collapse.pull-request-image-previews">
Pull Request image previews
</Trans>
</h3>
{!config.rendererAvailable && (
<Alert
title={t(
'provisioning.config-form-github-collapse.title-image-renderer-not-configured',
'Image renderer not configured'
)}
severity={'warning'}
buttonContent={<Trans i18nKey="provisioning.config-form-github-collapse.instructions">Instructions</Trans>}
onRemove={() => window.open('https://grafana.com/grafana/plugins/grafana-image-renderer/', '_blank')}
>
<Trans i18nKey="provisioning.config-form-github-collapse.text-when-image-renderer-configured">
When the image renderer is configured, pull requests can see preview images
</Trans>
</Alert>
)}
<Field
label={t(
'provisioning.config-form-github-collapse.label-attach-dashboard-previews',
'Attach dashboard previews to pull requests'
)}
description={
<span>
<Trans i18nKey="provisioning.config-form-github-collapse.description-attach-dashboard-previews">
Render before/after images and link them to the pull request.
<br />
NOTE: This will render dashboards into an image that can be access by a public URL
</Trans>
</span>
}
>
{previews}
<Field>
<Checkbox
disabled={!hasImageRenderer || !isPublic}
label={t('provisioning.finish-step.label-enable-previews', 'Enable dashboard previews in pull requests')}
description={
<>
<Trans i18nKey="provisioning.finish-step.description-enable-previews">
Adds an image preview of dashboard changes in pull requests. Images of your Grafana dashboards will be
shared in your Git repository and visible to anyone with repository access.
</Trans>{' '}
<Text italic>
<Trans i18nKey="provisioning.finish-step.description-image-rendering">
Requires image rendering.{' '}
<TextLink
variant="bodySmall"
external
href="https://grafana.com/grafana/plugins/grafana-image-renderer"
>
Set up image rendering
</TextLink>
</Trans>
</Text>
</>
}
{...register('generateDashboardPreviews')}
/>
</Field>
{!isPublic && (
<Field label={t('provisioning.config-form-github-collapse.label-realtime-feedback', 'Realtime feedback')}>
<Text variant="bodySmall" color={'secondary'}>
<Trans i18nKey={'provisioning.config-form-github-collapse.description-realtime-feedback'}>
<TextLink variant={'bodySmall'} href={GETTING_STARTED_URL}>
Configure webhooks
</TextLink>{' '}
to get instant updates in Grafana as soon as changes are committed. Review and approve changes using pull
requests before they go live.
</Trans>
</Text>
</Field>
)}
</ControlledCollapse>
);
}

25
public/app/features/provisioning/Config/defaults.ts Normal file
View File

@ -0,0 +1,25 @@
import { RepositorySpec } from '../../../api/clients/provisioning';
import { RepositoryFormData } from '../types';
import { specToData } from '../utils/data';
export function getDefaultValues(repository?: RepositorySpec): RepositoryFormData {
if (!repository) {
return {
type: 'github',
title: 'Repository',
token: '',
url: '',
branch: 'main',
generateDashboardPreviews: false,
readOnly: false,
prWorkflow: true,
path: 'grafana/',
sync: {
enabled: false,
target: 'instance',
intervalSeconds: 60,
},
};
}
return specToData(repository);
}

2
public/app/features/provisioning/Shared/TokenPermissionsInfo.tsx
View File

@ -11,7 +11,7 @@ export function TokenPermissionsInfo() {
<div className={styles.container}>
{/* GitHub UI is English only, so these strings are not translated */}
{/* eslint-disable-next-line @grafana/no-untranslated-strings */}
<Stack gap={0.5}>
<Stack gap={0.5} wrap={'wrap'}>
<Trans i18nKey="provisioning.token-permissions-info.go-to">Go to</Trans>
<TextLink external href="https://github.com/settings/personal-access-tokens/new">
GitHub Personal Access Tokens

4
public/app/features/provisioning/Wizard/ProvisioningWizard.tsx
View File

@ -10,7 +10,7 @@ import { useDeleteRepositoryMutation, useGetFrontendSettingsQuery } from 'app/ap
import { FormPrompt } from 'app/core/components/FormPrompt/FormPrompt';
import { t } from 'app/core/internationalization';
import { getDefaultValues } from '../Config/ConfigForm';
import { getDefaultValues } from '../Config/defaults';
import { PROVISIONING_URL } from '../constants';
import { useCreateOrUpdateRepository } from '../hooks/useCreateOrUpdateRepository';
import { dataToSpec } from '../utils/data';
@ -41,7 +41,7 @@ const getSteps = (): Array<Step<WizardStep>> => {
},
{
id: 'synchronize',
name: t('provisioning.wizard.step-synchronize', 'Synchronize'),
name: t('provisioning.wizard.step-synchronize', 'Synchronize with external storage'),
title: t('provisioning.wizard.title-synchronize', 'Synchronize with external storage'),
submitOnNext: false,
},

15
public/locales/en-US/grafana.json
View File

@ -6476,18 +6476,9 @@
"placeholder-select-repository-type": "Select repository type"
},
"config-form-github-collapse": {
"description-attach-dashboard-previews": "Render before/after images and link them to the pull request.<1></1>NOTE: This will render dashboards into an image that can be access by a public URL",
"instructions": "Instructions",
"label-attach-dashboard-previews": "Attach dashboard previews to pull requests",
"description-realtime-feedback": "<0>Configure webhooks</0> to get instant updates in Grafana as soon as changes are committed. Review and approve changes using pull requests before they go live.",
"label-git-hub-features": "GitHub features",
"pull-request-image-previews": "Pull Request image previews",
"realtime-feedback": "Realtime feedback",
"text-changes-in-git-eventually-pulled": "Changes in git will eventually be pulled depending on the synchronization interval. Pull requests will not be processed",
"text-changes-in-git-quick-pull": "Changes in git will be quickly pulled into grafana. Pull requests can be processed.",
"text-when-image-renderer-configured": "When the image renderer is configured, pull requests can see preview images",
"title-image-renderer-not-configured": "Image renderer not configured",
"title-public-url-not-configured": "Public URL not configured",
"title-webhook-will-be-created": "Webhook will be created"
"label-realtime-feedback": "Realtime feedback"
},
"connect-repository-button": {
"configure": "Configure",
@ -6777,7 +6768,7 @@
"step-bootstrap": "Choose what to synchronize",
"step-connect": "Connect",
"step-finish": "Choose additional settings",
"step-synchronize": "Synchronize",
"step-synchronize": "Synchronize with external storage",
"sync-description": "Sync resources with external storage. After this one-time step, all future updates will be automatically saved to the repository and provisioned back into the instance.",
"sync-option-history": "History",
"title-bootstrap": "Choose what to synchronize",