diff --git a/public/app/features/provisioning/Shared/StatusBadge.tsx b/public/app/features/provisioning/Shared/StatusBadge.tsx index 385e8d91bd0..7ddb8bb3d9d 100644 --- a/public/app/features/provisioning/Shared/StatusBadge.tsx +++ b/public/app/features/provisioning/Shared/StatusBadge.tsx @@ -1,3 +1,5 @@ +import { useCallback } from 'react'; + import { t } from '@grafana/i18n'; import { locationService } from '@grafana/runtime'; import { Badge, BadgeColor, IconName } from '@grafana/ui'; @@ -5,85 +7,93 @@ import { Repository } from 'app/api/clients/provisioning/v0alpha1'; import { PROVISIONING_URL } from '../constants'; +interface BadgeConfig { + color: BadgeColor; + text: string; + icon: IconName; + tooltip?: string; +} + +function getBadgeConfig(repo: Repository): BadgeConfig { + if (repo.metadata?.deletionTimestamp) { + return { + color: 'red', + text: t('provisioning.status-badge.deleting', 'Deleting'), + icon: 'spinner', + }; + } + + if (!repo.spec?.sync?.enabled) { + return { + color: 'orange', + text: t('provisioning.status-badge.automatic-pulling-disabled', 'Automatic pulling disabled'), + icon: 'info-circle', + }; + } + + if (!repo.status?.sync?.state?.length) { + return { + color: 'darkgrey', + text: t('provisioning.status-badge.pending', 'Pending'), + icon: 'spinner', + tooltip: t('provisioning.status-badge.waiting-for-health-check', 'Waiting for health check to run'), + }; + } + + // Sync state + switch (repo.status?.sync?.state) { + case 'success': + return { + icon: 'check', + text: t('provisioning.status-badge.up-to-date', 'Up-to-date'), + color: 'green', + }; + case 'warning': + return { + color: 'orange', + text: t('provisioning.status-badge.warning', 'Warning'), + icon: 'exclamation-triangle', + }; + case 'working': + case 'pending': + return { + color: 'darkgrey', + text: t('provisioning.status-badge.pulling', 'Pulling'), + icon: 'spinner', + }; + case 'error': + return { + color: 'red', + text: t('provisioning.status-badge.error', 'Error'), + icon: 'exclamation-triangle', + }; + default: + return { + color: 'purple', + text: t('provisioning.status-badge.unknown', 'Unknown'), + icon: 'exclamation-triangle', + }; + } +} + interface StatusBadgeProps { repo?: Repository; displayOnly?: boolean; // if true, disable click action and cursor will be default } -/** - * @description Displays a status badge for the given provisioned repository. - */ export function StatusBadge({ repo, displayOnly = false }: StatusBadgeProps) { + const handleClick = useCallback(() => { + if (displayOnly || !repo?.metadata?.name) { + return; + } + locationService.push(`${PROVISIONING_URL}/${repo.metadata.name}/?tab=overview`); + }, [repo?.metadata?.name, displayOnly]); + if (!repo) { return null; } - // TODO: remove after 12.2 - if (repo.spec?.type !== 'local' && !repo.secure?.token?.name) { - return ( - { - // navigate to edit page, rather than view page - locationService.push(`${PROVISIONING_URL}/${repo.metadata?.name}/edit`); - }} - /> - ); - } - - let tooltip: string | undefined = undefined; - let color: BadgeColor = 'purple'; - let text = 'Unknown'; - let icon: IconName = 'exclamation-triangle'; - - if (repo.metadata?.deletionTimestamp) { - color = 'red'; - text = 'Deleting'; - icon = 'spinner'; - } else if (!repo.spec?.sync?.enabled) { - color = 'red'; - text = 'Automatic pulling disabled'; - icon = 'info-circle'; - } else if (!repo.status?.sync?.state?.length) { - color = 'darkgrey'; - text = 'Pending'; - icon = 'spinner'; - tooltip = 'Waiting for health check to run'; - } else { - // Sync state - switch (repo.status?.sync?.state) { - case 'success': - icon = 'check'; - text = 'Up-to-date'; - color = 'green'; - break; - case 'working': - case 'warning': - color = 'orange'; - text = 'warning'; - icon = 'exclamation-triangle'; - break; - case 'pending': - color = 'darkgrey'; - text = 'Pulling'; - icon = 'spinner'; - break; - case 'error': - color = 'red'; - text = 'Error'; - icon = 'exclamation-triangle'; - break; - default: - break; - } - } + const { color, text, icon, tooltip } = getBadgeConfig(repo); return ( { - if (!displayOnly) { - locationService.push(`${PROVISIONING_URL}/${repo.metadata?.name}/?tab=overview`); - } - }} + onClick={handleClick} /> ); } diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 050e39bb67b..24db448f23e 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -9199,7 +9199,6 @@ "name-line-width": "Line width", "name-stacking": "Stacking" }, - "inline-token-warning-badge-tooltip": "The method to save the token is to re-enter it in the repository settings.", "inspector": { "inspect-data-tab": { "loading": "Loading", @@ -11654,7 +11653,6 @@ "unsupported-repository-type": "Unsupported repository type: {{repositoryType}}" }, "inline-secure-values-warning": "You need to save your access tokens again due to a system update", - "inline-token-warning-badge-text": "Token needs to be saved again", "job-status": { "label-view-details": "View details", "loading-finished-job": "Loading finished job...", @@ -11831,6 +11829,17 @@ "label-current-step": "Current step", "label-pending-step": "Pending step" }, + "status-badge": { + "automatic-pulling-disabled": "Automatic pulling disabled", + "deleting": "Deleting", + "error": "Error", + "pending": "Pending", + "pulling": "Pulling", + "unknown": "Unknown", + "up-to-date": "Up-to-date", + "waiting-for-health-check": "Waiting for health check to run", + "warning": "Warning" + }, "success-title-default": "Success", "sync-job": { "error-no-job-id": "Failed to start job",