CloudMigrations: Refactor and unify resource naming/icon resolution (#103258)
This is more in preparation for the snapshot configuration option, to avoid having to duplicate the functions that would: - Find an icon based on resource type - Find a label based on resource type Since we use those for other components, I figured we could just make a helper function to reuse them.
This commit is contained in:
Matheus Macabu
@@ -12,6 +12,7 @@ import { useGetFolderQuery } from 'app/features/browse-dashboards/api/browseDash
|
||||
import { LocalPlugin } from '../../plugins/admin/types';
|
||||
import { useGetDashboardByUidQuery, useGetLibraryElementByUidQuery } from '../api';
|
||||
|
||||
import { iconNameForResource } from './resourceInfo';
|
||||
import { ResourceTableItem } from './types';
|
||||
|
||||
export function NameCell(props: CellProps<ResourceTableItem>) {
|
||||
@@ -210,39 +211,20 @@ function ResourceIcon({ resource }: { resource: ResourceTableItem }) {
|
||||
const datasource = useDatasource(resource.type === 'DATASOURCE' ? resource.refId : undefined);
|
||||
const pluginLogo = usePluginLogo(resource.type === 'PLUGIN' ? resource.plugin : undefined);
|
||||
|
||||
switch (resource.type) {
|
||||
case 'DASHBOARD':
|
||||
return <Icon size="xl" name="dashboard" />;
|
||||
case 'FOLDER':
|
||||
return <Icon size="xl" name="folder" />;
|
||||
case 'DATASOURCE':
|
||||
if (datasource?.meta?.info?.logos?.small) {
|
||||
return <img className={styles.icon} src={datasource.meta.info.logos.small} alt="" />;
|
||||
}
|
||||
|
||||
return <Icon size="xl" name="database" />;
|
||||
case 'LIBRARY_ELEMENT':
|
||||
return <Icon size="xl" name="library-panel" />;
|
||||
case 'MUTE_TIMING':
|
||||
return <Icon size="xl" name="bell" />;
|
||||
case 'NOTIFICATION_TEMPLATE':
|
||||
return <Icon size="xl" name="bell" />;
|
||||
case 'CONTACT_POINT':
|
||||
return <Icon size="xl" name="bell" />;
|
||||
case 'NOTIFICATION_POLICY':
|
||||
return <Icon size="xl" name="bell" />;
|
||||
case 'ALERT_RULE':
|
||||
return <Icon size="xl" name="bell" />;
|
||||
case 'ALERT_RULE_GROUP':
|
||||
return <Icon size="xl" name="bell" />;
|
||||
case 'PLUGIN':
|
||||
if (pluginLogo) {
|
||||
return <img className={styles.icon} src={pluginLogo} alt="" />;
|
||||
}
|
||||
return <Icon size="xl" name="plug" />;
|
||||
default:
|
||||
return undefined;
|
||||
// Handle special cases for icons.
|
||||
if (resource.type === 'DATASOURCE' && datasource?.meta?.info?.logos?.small) {
|
||||
return <img className={styles.icon} src={datasource.meta.info.logos.small} alt="" />;
|
||||
} else if (resource.type === 'PLUGIN' && pluginLogo) {
|
||||
return <img className={styles.icon} src={pluginLogo} alt="" />;
|
||||
} else {
|
||||
// Generic icons for all other resource types.
|
||||
const iconName = iconNameForResource(resource.type);
|
||||
if (iconName) {
|
||||
return <Icon size="xl" name={iconName} />;
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function getIconStyles() {
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import { t } from 'app/core/internationalization';
|
||||
|
||||
import { ResourceTableItem } from './types';
|
||||
|
||||
export function iconNameForResource(resource: ResourceTableItem['type']) {
|
||||
switch (resource) {
|
||||
case 'DASHBOARD':
|
||||
return 'dashboard';
|
||||
case 'FOLDER':
|
||||
return 'folder';
|
||||
case 'DATASOURCE':
|
||||
return 'database';
|
||||
case 'LIBRARY_ELEMENT':
|
||||
return 'library-panel';
|
||||
case 'MUTE_TIMING':
|
||||
return 'clock-nine';
|
||||
case 'NOTIFICATION_TEMPLATE':
|
||||
return 'file-alt';
|
||||
case 'CONTACT_POINT':
|
||||
return 'at';
|
||||
case 'NOTIFICATION_POLICY':
|
||||
return 'comment-alt';
|
||||
case 'ALERT_RULE':
|
||||
return 'bell';
|
||||
case 'ALERT_RULE_GROUP':
|
||||
return 'bell';
|
||||
case 'PLUGIN':
|
||||
return 'plug';
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export function pluralizeResourceName(resource: ResourceTableItem['type']) {
|
||||
switch (resource) {
|
||||
case 'DASHBOARD':
|
||||
return t('migrate-to-cloud.resource-types.dashboard', 'Dashboards');
|
||||
case 'FOLDER':
|
||||
return t('migrate-to-cloud.resource-types.folder', 'Folders');
|
||||
case 'DATASOURCE':
|
||||
return t('migrate-to-cloud.resource-types.datasource', 'Data Sources');
|
||||
case 'LIBRARY_ELEMENT':
|
||||
return t('migrate-to-cloud.resource-types.library_element', 'Library Elements');
|
||||
case 'MUTE_TIMING':
|
||||
return t('migrate-to-cloud.resource-types.mute_timing', 'Mute Timings');
|
||||
case 'NOTIFICATION_TEMPLATE':
|
||||
return t('migrate-to-cloud.resource-types.notification_template', 'Notification Templates');
|
||||
case 'CONTACT_POINT':
|
||||
return t('migrate-to-cloud.resource-types.contact_point', 'Contact Points');
|
||||
case 'NOTIFICATION_POLICY':
|
||||
return t('migrate-to-cloud.resource-types.notification_policy', 'Notification Policies');
|
||||
case 'ALERT_RULE':
|
||||
return t('migrate-to-cloud.resource-types.alert_rule', 'Alert Rules');
|
||||
case 'ALERT_RULE_GROUP':
|
||||
return t('migrate-to-cloud.resource-types.alert_rule_group', 'Alert Rule Groups');
|
||||
case 'PLUGIN':
|
||||
return t('migrate-to-cloud.resource-types.plugin', 'Plugins');
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,9 @@ import { t } from 'app/core/internationalization';
|
||||
|
||||
import { GetSnapshotResponseDto, SnapshotDto } from '../api';
|
||||
|
||||
import { pluralizeResourceName } from './resourceInfo';
|
||||
import { ResourceTableItem } from './types';
|
||||
|
||||
// After the number of distinct resource types migrated exceeeds this value, we display a generic success message.
|
||||
const SUCCESS_MESSAGE_ITEM_TYPES_THRESHOLD = 4;
|
||||
|
||||
@@ -44,30 +47,13 @@ function getTranslatedMessage(snapshot: GetSnapshotResponseDto) {
|
||||
|
||||
// We don't have per-resource status counts, so there's no way to accurately pluralize these
|
||||
// so we just don't :)
|
||||
if (type === 'DASHBOARD') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.dashboards', 'dashboards'));
|
||||
} else if (type === 'DATASOURCE') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.datasources', 'data sources'));
|
||||
} else if (type === 'FOLDER') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.folders', 'folders'));
|
||||
} else if (type === 'LIBRARY_ELEMENT') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.library_elements', 'library elements'));
|
||||
} else if (type === 'MUTE_TIMING') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.mute_timings', 'mute timings'));
|
||||
} else if (type === 'NOTIFICATION_TEMPLATE') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.notification_templates', 'notification templates'));
|
||||
} else if (type === 'CONTACT_POINT') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.contact_points', 'contact points'));
|
||||
} else if (type === 'NOTIFICATION_POLICY') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.notification_policies', 'notification policies'));
|
||||
} else if (type === 'ALERT_RULE') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.alert_rules', 'alert rules'));
|
||||
} else if (type === 'ALERT_RULE_GROUP') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.alert_rule_groups', 'alert rule groups'));
|
||||
} else if (type === 'PLUGIN') {
|
||||
types.push(t('migrate-to-cloud.migrated-counts.plugins', 'plugins'));
|
||||
const resourceType = pluralizeResourceName(type as ResourceTableItem['type']);
|
||||
if (!resourceType) {
|
||||
continue;
|
||||
}
|
||||
|
||||
types.push(resourceType);
|
||||
|
||||
distinctItems += 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -3871,19 +3871,6 @@
|
||||
"link-title": "View the full migration guide",
|
||||
"title": "Let us help you migrate to this stack"
|
||||
},
|
||||
"migrated-counts": {
|
||||
"alert_rule_groups": "alert rule groups",
|
||||
"alert_rules": "alert rules",
|
||||
"contact_points": "contact points",
|
||||
"dashboards": "dashboards",
|
||||
"datasources": "data sources",
|
||||
"folders": "folders",
|
||||
"library_elements": "library elements",
|
||||
"mute_timings": "mute timings",
|
||||
"notification_policies": "notification policies",
|
||||
"notification_templates": "notification templates",
|
||||
"plugins": "plugins"
|
||||
},
|
||||
"migration-token": {
|
||||
"delete-button": "Delete token",
|
||||
"delete-modal-body": "If you've already used this token with a self-managed installation, that installation will no longer be able to upload content.",
|
||||
@@ -3983,6 +3970,19 @@
|
||||
"plugin": "Plugin",
|
||||
"unknown": "Unknown"
|
||||
},
|
||||
"resource-types": {
|
||||
"alert_rule": "Alert Rules",
|
||||
"alert_rule_group": "Alert Rule Groups",
|
||||
"contact_point": "Contact Points",
|
||||
"dashboard": "Dashboards",
|
||||
"datasource": "Data Sources",
|
||||
"folder": "Folders",
|
||||
"library_element": "Library Elements",
|
||||
"mute_timing": "Mute Timings",
|
||||
"notification_policy": "Notification Policies",
|
||||
"notification_template": "Notification Templates",
|
||||
"plugin": "Plugins"
|
||||
},
|
||||
"summary": {
|
||||
"cancel-snapshot": "Cancel snapshot",
|
||||
"disconnect": "Disconnect",
|
||||
|
||||
Reference in New Issue
Block a user