public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Provisioning: Add provider icons (#108510)

Browse Source 
* Provisioning: Add provider icons

* Use color logos

* format

* Move img to feature folder
This commit is contained in:
Alex Khomenko
2025-07-23 11:25:11 +00:00
committed by GitHub
parent 24d898d6a7
commit f2889c6cc4
11 changed files with 78 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/icon.ts
+2
View File
@@ -274,6 +274,8 @@ export const availableIconsIndex = {
attach: true,
'dollar-alt': true,
'ai-sparkle': true,
bitbucket: true,
git: true,
};
export type IconName = keyof typeof availableIconsIndex;
public/app/core/icons/cached.json
+3 -1
View File
@@ -180,5 +180,7 @@
"unicons/ai-sparkle",
"unicons/dollar-alt",
"unicons/window-grid",
"unicons/ban"
"unicons/ban",
"unicons/git",
"unicons/bitbucket"
]
public/app/features/provisioning/GettingStarted/GettingStarted.tsx
+2 -1
View File
@@ -7,7 +7,8 @@ import { Trans, t } from '@grafana/i18n';
import { config } from '@grafana/runtime';
import { Alert, Stack, useStyles2 } from '@grafana/ui';
import { Repository, useGetFrontendSettingsQuery } from 'app/api/clients/provisioning/v0alpha1';
import provisioningSvg from 'img/provisioning/provisioning.svg';
import provisioningSvg from '../img/provisioning.svg';
import { EnhancedFeatures } from './EnhancedFeatures';
import { FeaturesList } from './FeaturesList';
public/app/features/provisioning/Shared/RepositoryTypeCards.tsx
+14 -2
View File
@@ -26,7 +26,11 @@ export function RepositoryTypeCards() {
{gitProviders.map((config) => (
<Card key={config.type} href={`${CONNECT_URL}/${config.type}`} className={styles.card} noMargin>
<Stack gap={2} alignItems="center">
<Icon name={config.icon} size="xxl" />
{config.logo ? (
<img src={config.logo} alt={config.label} className={styles.logo} />
) : (
<Icon name={config.icon} size="xxl" />
)}
<Trans
i18nKey="provisioning.repository-type-cards.configure-with-provider"
values={{ provider: config.label }}
@@ -51,7 +55,11 @@ export function RepositoryTypeCards() {
{otherProviders.map((config) => (
<Card key={config.type} href={`${CONNECT_URL}/${config.type}`} className={styles.card} noMargin>
<Stack gap={2} alignItems="center">
<Icon name={config.icon} size="xxl" />
{config.logo ? (
<img src={config.logo} alt={config.label} className={styles.logo} />
) : (
<Icon name={config.icon} size="xxl" />
)}
{config.type === 'local' ? (
<Trans i18nKey="provisioning.repository-type-cards.configure-file">Configure file provisioning</Trans>
) : (
@@ -76,5 +84,9 @@ function getStyles() {
card: css({
width: 220,
}),
logo: css({
width: 36,
height: 36,
}),
};
}
public/app/features/provisioning/img/bitbucket.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-0.9662264221278978 -0.5824607696358868 257.93281329857973 230.8324730411935">
<linearGradient id="a" x1="108.633%" x2="46.927%" y1="13.818%" y2="78.776%">
<stop offset=".18" stop-color="#0052cc"/>
<stop offset="1" stop-color="#2684ff"/>
</linearGradient>
<g fill="none">
<path d="M101.272 152.561h53.449l12.901-75.32H87.06z"/>
<path
d="M8.308 0A8.202 8.202 0 0 0 .106 9.516l34.819 211.373a11.155 11.155 0 0 0 10.909 9.31h167.04a8.202 8.202 0 0 0 8.201-6.89l34.82-213.752a8.202 8.202 0 0 0-8.203-9.514zm146.616 152.768h-53.315l-14.436-75.42h80.67z"
fill="#2684ff"/>
<path
d="M244.61 77.242h-76.916l-12.909 75.36h-53.272l-62.902 74.663a11.105 11.105 0 0 0 7.171 2.704H212.73a8.196 8.196 0 0 0 8.196-6.884z"
fill="url(#a)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 841 B

public/app/features/provisioning/img/git.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
<defs>
<clipPath id="a">
<path d="M0 .113h91.887V92H0Zm0 0"/>
</clipPath>
</defs>
<g clip-path="url(#a)">
<path style="stroke:none;fill-rule:nonzero;fill:#f03c2e;fill-opacity:1"
d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 838 B

public/app/features/provisioning/img/gitlab.svg
+10
View File
@@ -0,0 +1,10 @@
<svg viewBox="0 0 256 236" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet">
<path d="M128.075 236.075l47.104-144.97H80.97l47.104 144.97z" fill="#E24329"/>
<path d="M128.075 236.074L80.97 91.104H14.956l113.119 144.97z" fill="#FC6D26"/>
<path d="M14.956 91.104L.642 135.16a9.752 9.752 0 0 0 3.542 10.903l123.891 90.012-113.12-144.97z" fill="#FCA326"/>
<path d="M14.956 91.105H80.97L52.601 3.79c-1.46-4.493-7.816-4.492-9.275 0l-28.37 87.315z" fill="#E24329"/>
<path d="M128.075 236.074l47.104-144.97h66.015l-113.12 144.97z" fill="#FC6D26"/>
<path d="M241.194 91.104l14.314 44.056a9.752 9.752 0 0 1-3.543 10.903l-123.89 90.012 113.119-144.97z" fill="#FCA326"/>
<path d="M241.194 91.105h-66.015l28.37-87.315c1.46-4.493 7.816-4.492 9.275 0l28.37 87.315z" fill="#E24329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 815 B

public/img/provisioning/provisioning.svg → public/app/features/provisioning/img/provisioning.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

public/app/features/provisioning/utils/repositoryTypes.ts
+9 -2
View File
@@ -2,12 +2,16 @@ import { t } from '@grafana/i18n';
import { IconName } from '@grafana/ui';
import { RepoType } from '../Wizard/types';
import bitbucketSvg from '../img/bitbucket.svg';
import gitSvg from '../img/git.svg';
import gitlabSvg from '../img/gitlab.svg';
export interface RepositoryTypeConfig {
type: RepoType;
label: string;
description: string;
icon: IconName;
logo?: string;
}
export const getRepositoryTypeConfigs = (): RepositoryTypeConfig[] => [
@@ -15,7 +19,8 @@ export const getRepositoryTypeConfigs = (): RepositoryTypeConfig[] => [
type: 'git',
label: t('provisioning.repository-types.pure-git', 'Pure Git'),
description: t('provisioning.repository-types.pure-git-description', 'Connect to any Git repository'),
icon: 'code-branch' as const,
icon: 'git' as const,
logo: gitSvg,
},
{
type: 'github',
@@ -28,12 +33,14 @@ export const getRepositoryTypeConfigs = (): RepositoryTypeConfig[] => [
label: t('provisioning.repository-types.gitlab', 'GitLab'),
description: t('provisioning.repository-types.gitlab-description', 'Connect to GitLab repositories'),
icon: 'gitlab' as const,
logo: gitlabSvg,
},
{
type: 'bitbucket',
label: t('provisioning.repository-types.bitbucket', 'Bitbucket'),
description: t('provisioning.repository-types.bitbucket-description', 'Connect to Bitbucket repositories'),
icon: 'cloud' as const,
icon: 'bitbucket' as const,
logo: bitbucketSvg,
},
{
type: 'local',
public/img/icons/unicons/bitbucket.svg
+5
View File
@@ -0,0 +1,5 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.454 1.816a.452.452 0 00-.345.153.435.435 0 00-.103.358L2.91 13.684c.049.287.3.498.596.5h9.135a.447.447 0 00.449-.37L14.994 2.33a.435.435 0 00-.1-.358.452.452 0 00-.342-.156H1.454zm8.018 8.208H6.557l-.79-4.05h4.412l-.707 4.05z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 320 B

public/img/icons/unicons/git.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
<g>
<path
d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 648 B