mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Icons: Fixes iconCache not having same iconRoot as what Icon component used making the pre-cached items not match (#33356)
This commit is contained in:
Torkel Ödegaard
GitHub
parent
a1b7793959
commit
424925c3fb
@ -5,11 +5,8 @@ import { stylesFactory } from '../../themes/stylesFactory';
|
||||
import { useTheme } from '../../themes/ThemeContext';
|
||||
import { IconName, IconType, IconSize } from '../../types/icon';
|
||||
import SVG from '@leeoniya/react-inlinesvg';
|
||||
import { cacheInitialized, initIconCache, iconRoot } from './iconBundle';
|
||||
|
||||
declare let __webpack_public_path__: string;
|
||||
|
||||
// Lazy load the root url
|
||||
let iconRoot: string | undefined = undefined;
|
||||
const alwaysMonoIcons: IconName[] = ['grafana', 'favorite', 'heart-break', 'heart', 'panel-add', 'reusable-panel'];
|
||||
|
||||
export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@ -59,17 +56,8 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
|
||||
size = 'xl';
|
||||
}
|
||||
|
||||
// Lazy load -- this will give time the the CDN path to be injected on app init
|
||||
if (!iconRoot) {
|
||||
if (__webpack_public_path__) {
|
||||
const publicpath = // __webpack_public_path__ includes the 'build/' suffix
|
||||
__webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) ||
|
||||
__webpack_public_path__;
|
||||
|
||||
iconRoot = publicpath + 'img/icons/';
|
||||
} else {
|
||||
iconRoot = '/public/img/icons/'; // will only happen for non-grafana builds
|
||||
}
|
||||
if (!cacheInitialized) {
|
||||
initIconCache();
|
||||
}
|
||||
|
||||
const styles = getIconStyles(theme);
|
||||
|
||||
@ -159,161 +159,174 @@ fa fa-spinner
|
||||
fa fa-windows
|
||||
*/
|
||||
|
||||
const iconRoot = '/public/img/icons/';
|
||||
const unicons = 'unicons/';
|
||||
const custom = 'custom/';
|
||||
const mono = 'mono/';
|
||||
|
||||
export let cacheInitialized = false;
|
||||
export let iconRoot = 'public/img/icons';
|
||||
|
||||
function cacheItem(content: string, subdir: string, name: string) {
|
||||
cacheStore[iconRoot + subdir + name + '.svg'] = { content, status: 'loaded', queue: [] };
|
||||
}
|
||||
|
||||
cacheItem(u001, unicons, 'angle-double-down');
|
||||
cacheItem(u002, unicons, 'angle-double-right');
|
||||
cacheItem(u003, unicons, 'angle-down');
|
||||
cacheItem(u004, unicons, 'angle-left');
|
||||
cacheItem(u005, unicons, 'angle-right');
|
||||
cacheItem(u006, unicons, 'angle-up');
|
||||
cacheItem(u007, unicons, 'apps');
|
||||
cacheItem(u008, unicons, 'arrow');
|
||||
cacheItem(u009, unicons, 'arrow-down');
|
||||
cacheItem(u010, unicons, 'arrow-from-right');
|
||||
cacheItem(u011, unicons, 'arrow-left');
|
||||
cacheItem(u012, unicons, 'arrow-random');
|
||||
cacheItem(u013, unicons, 'arrow-right');
|
||||
cacheItem(u014, unicons, 'arrow-up');
|
||||
cacheItem(u015, unicons, 'arrows-h');
|
||||
//cacheItem(u016, unicons, 'asc');
|
||||
cacheItem(u017, unicons, 'backward');
|
||||
cacheItem(u018, unicons, 'bars');
|
||||
cacheItem(u019, unicons, 'bell');
|
||||
cacheItem(u020, unicons, 'bell-slash');
|
||||
cacheItem(u021, unicons, 'bolt');
|
||||
cacheItem(u022, unicons, 'book');
|
||||
cacheItem(u023, unicons, 'book-open');
|
||||
cacheItem(u024, unicons, 'brackets-curly');
|
||||
cacheItem(u025, unicons, 'bug');
|
||||
cacheItem(u026, unicons, 'building');
|
||||
cacheItem(u027, unicons, 'calculator-alt');
|
||||
cacheItem(u028, unicons, 'calendar-alt');
|
||||
cacheItem(u029, unicons, 'camera');
|
||||
cacheItem(u030, unicons, 'channel-add');
|
||||
cacheItem(u031, unicons, 'chart-line');
|
||||
cacheItem(u032, unicons, 'check');
|
||||
cacheItem(u033, unicons, 'check-circle');
|
||||
cacheItem(u034, unicons, 'circle');
|
||||
cacheItem(u035, unicons, 'clipboard-alt');
|
||||
cacheItem(u036, unicons, 'clock-nine');
|
||||
//cacheItem(u037, unicons, 'clock-o');
|
||||
//cacheItem(u038, unicons, 'close');
|
||||
cacheItem(u039, unicons, 'cloud');
|
||||
cacheItem(u040, unicons, 'cloud-download');
|
||||
cacheItem(u041, unicons, 'code-branch');
|
||||
cacheItem(u042, unicons, 'cog');
|
||||
cacheItem(u043, unicons, 'columns');
|
||||
cacheItem(u044, unicons, 'comment-alt');
|
||||
cacheItem(u045, unicons, 'comment-alt-share');
|
||||
cacheItem(u046, unicons, 'comments-alt');
|
||||
cacheItem(u047, unicons, 'compass');
|
||||
cacheItem(u048, unicons, 'copy');
|
||||
cacheItem(u049, unicons, 'cube');
|
||||
cacheItem(u050, unicons, 'dashboard');
|
||||
cacheItem(u051, unicons, 'database');
|
||||
cacheItem(u052, unicons, 'document-info');
|
||||
//cacheItem(u053, unicons, 'down');
|
||||
cacheItem(u054, unicons, 'download-alt');
|
||||
cacheItem(u055, unicons, 'draggabledots');
|
||||
cacheItem(u056, unicons, 'edit');
|
||||
cacheItem(u057, unicons, 'ellipsis-v');
|
||||
cacheItem(u058, unicons, 'envelope');
|
||||
cacheItem(u059, unicons, 'exchange-alt');
|
||||
cacheItem(u060, unicons, 'exclamation-triangle');
|
||||
cacheItem(u061, unicons, 'external-link-alt');
|
||||
cacheItem(u062, unicons, 'eye');
|
||||
cacheItem(u063, unicons, 'eye-slash');
|
||||
cacheItem(u064, unicons, 'file-alt');
|
||||
cacheItem(u065, unicons, 'file-blank');
|
||||
cacheItem(u066, unicons, 'filter');
|
||||
cacheItem(u067, unicons, 'folder');
|
||||
cacheItem(u068, unicons, 'folder-open');
|
||||
cacheItem(u069, unicons, 'folder-plus');
|
||||
cacheItem(u070, unicons, 'folder-upload');
|
||||
cacheItem(u071, unicons, 'forward');
|
||||
//cacheItem(u072, unicons, 'grafana_com');
|
||||
cacheItem(u073, unicons, 'graph-bar');
|
||||
cacheItem(u074, unicons, 'history');
|
||||
cacheItem(u075, unicons, 'home-alt');
|
||||
//cacheItem(u076, unicons, 'icon');
|
||||
//cacheItem(u077, unicons, 'icon-test');
|
||||
cacheItem(u078, unicons, 'import');
|
||||
cacheItem(u079, unicons, 'info');
|
||||
cacheItem(u080, unicons, 'info-circle');
|
||||
//cacheItem(u081, unicons, 'key');
|
||||
cacheItem(u082, unicons, 'key-skeleton-alt');
|
||||
cacheItem(u083, unicons, 'keyboard');
|
||||
cacheItem(u084, unicons, 'link');
|
||||
cacheItem(u085, unicons, 'list-ul');
|
||||
cacheItem(u086, unicons, 'lock');
|
||||
cacheItem(u087, unicons, 'minus');
|
||||
cacheItem(u088, unicons, 'minus-circle');
|
||||
cacheItem(u089, unicons, 'mobile-android');
|
||||
cacheItem(u090, unicons, 'monitor');
|
||||
cacheItem(u091, unicons, 'pause');
|
||||
cacheItem(u092, unicons, 'pen');
|
||||
cacheItem(u093, unicons, 'play');
|
||||
cacheItem(u094, unicons, 'plug');
|
||||
cacheItem(u095, unicons, 'plus');
|
||||
cacheItem(u096, unicons, 'plus-circle');
|
||||
cacheItem(u097, unicons, 'power');
|
||||
cacheItem(u098, unicons, 'presentation-play');
|
||||
cacheItem(u099, unicons, 'process');
|
||||
cacheItem(u100, unicons, 'question-circle');
|
||||
cacheItem(u101, unicons, 'repeat');
|
||||
cacheItem(u102, unicons, 'rocket');
|
||||
cacheItem(u103, unicons, 'save');
|
||||
cacheItem(u104, unicons, 'search');
|
||||
cacheItem(u105, unicons, 'search-minus');
|
||||
cacheItem(u106, unicons, 'search-plus');
|
||||
cacheItem(u107, unicons, 'share-alt');
|
||||
cacheItem(u108, unicons, 'shield');
|
||||
//cacheItem(u109, unicons, 'sign-in');
|
||||
cacheItem(u110, unicons, 'signal');
|
||||
cacheItem(u111, unicons, 'signin');
|
||||
cacheItem(u112, unicons, 'signout');
|
||||
cacheItem(u113, unicons, 'sitemap');
|
||||
cacheItem(u114, unicons, 'slack');
|
||||
cacheItem(u115, unicons, 'sliders-v-alt');
|
||||
cacheItem(u116, unicons, 'sort-amount-down');
|
||||
cacheItem(u117, unicons, 'sort-amount-up');
|
||||
cacheItem(u118, unicons, 'square-shape');
|
||||
cacheItem(u119, unicons, 'star');
|
||||
cacheItem(u120, unicons, 'step-backward');
|
||||
//cacheItem(u121, unicons, 'success');
|
||||
cacheItem(u122, unicons, 'sync');
|
||||
cacheItem(u123, unicons, 'table');
|
||||
cacheItem(u124, unicons, 'tag-alt');
|
||||
cacheItem(u125, unicons, 'times');
|
||||
cacheItem(u126, unicons, 'trash-alt');
|
||||
cacheItem(u127, unicons, 'unlock');
|
||||
//cacheItem(u128, unicons, 'up');
|
||||
cacheItem(u129, unicons, 'upload');
|
||||
cacheItem(u130, unicons, 'user');
|
||||
cacheItem(u131, unicons, 'users-alt');
|
||||
//cacheItem(u132, unicons, 'warning');
|
||||
cacheItem(u133, unicons, 'wrap-text');
|
||||
export function initIconCache() {
|
||||
cacheInitialized = true;
|
||||
|
||||
cacheItem(c001, custom, 'gf-bar-alignment-after');
|
||||
cacheItem(c002, custom, 'gf-bar-alignment-before');
|
||||
cacheItem(c003, custom, 'gf-bar-alignment-center');
|
||||
cacheItem(c004, custom, 'gf-interpolation-linear');
|
||||
cacheItem(c005, custom, 'gf-interpolation-smooth');
|
||||
cacheItem(c006, custom, 'gf-interpolation-step-after');
|
||||
cacheItem(c007, custom, 'gf-interpolation-step-before');
|
||||
cacheItem(c008, custom, 'gf-logs');
|
||||
// This function needs to be called after index.js loads to give the
|
||||
// application time to modify __webpack_public_path__ with a CDN path
|
||||
const grafanaPublicPath = (window as any).__grafana_public_path__;
|
||||
if (grafanaPublicPath) {
|
||||
iconRoot = grafanaPublicPath + 'img/icons/';
|
||||
}
|
||||
|
||||
cacheItem(m001, mono, 'favorite');
|
||||
cacheItem(m002, mono, 'grafana');
|
||||
cacheItem(m003, mono, 'heart');
|
||||
cacheItem(m004, mono, 'heart-break');
|
||||
cacheItem(m005, mono, 'panel-add');
|
||||
cacheItem(m006, mono, 'reusable-panel');
|
||||
cacheItem(u001, unicons, 'angle-double-down');
|
||||
cacheItem(u002, unicons, 'angle-double-right');
|
||||
cacheItem(u003, unicons, 'angle-down');
|
||||
cacheItem(u004, unicons, 'angle-left');
|
||||
cacheItem(u005, unicons, 'angle-right');
|
||||
cacheItem(u006, unicons, 'angle-up');
|
||||
cacheItem(u007, unicons, 'apps');
|
||||
cacheItem(u008, unicons, 'arrow');
|
||||
cacheItem(u009, unicons, 'arrow-down');
|
||||
cacheItem(u010, unicons, 'arrow-from-right');
|
||||
cacheItem(u011, unicons, 'arrow-left');
|
||||
cacheItem(u012, unicons, 'arrow-random');
|
||||
cacheItem(u013, unicons, 'arrow-right');
|
||||
cacheItem(u014, unicons, 'arrow-up');
|
||||
cacheItem(u015, unicons, 'arrows-h');
|
||||
//cacheItem(u016, unicons, 'asc');
|
||||
cacheItem(u017, unicons, 'backward');
|
||||
cacheItem(u018, unicons, 'bars');
|
||||
cacheItem(u019, unicons, 'bell');
|
||||
cacheItem(u020, unicons, 'bell-slash');
|
||||
cacheItem(u021, unicons, 'bolt');
|
||||
cacheItem(u022, unicons, 'book');
|
||||
cacheItem(u023, unicons, 'book-open');
|
||||
cacheItem(u024, unicons, 'brackets-curly');
|
||||
cacheItem(u025, unicons, 'bug');
|
||||
cacheItem(u026, unicons, 'building');
|
||||
cacheItem(u027, unicons, 'calculator-alt');
|
||||
cacheItem(u028, unicons, 'calendar-alt');
|
||||
cacheItem(u029, unicons, 'camera');
|
||||
cacheItem(u030, unicons, 'channel-add');
|
||||
cacheItem(u031, unicons, 'chart-line');
|
||||
cacheItem(u032, unicons, 'check');
|
||||
cacheItem(u033, unicons, 'check-circle');
|
||||
cacheItem(u034, unicons, 'circle');
|
||||
cacheItem(u035, unicons, 'clipboard-alt');
|
||||
cacheItem(u036, unicons, 'clock-nine');
|
||||
//cacheItem(u037, unicons, 'clock-o');
|
||||
//cacheItem(u038, unicons, 'close');
|
||||
cacheItem(u039, unicons, 'cloud');
|
||||
cacheItem(u040, unicons, 'cloud-download');
|
||||
cacheItem(u041, unicons, 'code-branch');
|
||||
cacheItem(u042, unicons, 'cog');
|
||||
cacheItem(u043, unicons, 'columns');
|
||||
cacheItem(u044, unicons, 'comment-alt');
|
||||
cacheItem(u045, unicons, 'comment-alt-share');
|
||||
cacheItem(u046, unicons, 'comments-alt');
|
||||
cacheItem(u047, unicons, 'compass');
|
||||
cacheItem(u048, unicons, 'copy');
|
||||
cacheItem(u049, unicons, 'cube');
|
||||
cacheItem(u050, unicons, 'dashboard');
|
||||
cacheItem(u051, unicons, 'database');
|
||||
cacheItem(u052, unicons, 'document-info');
|
||||
//cacheItem(u053, unicons, 'down');
|
||||
cacheItem(u054, unicons, 'download-alt');
|
||||
cacheItem(u055, unicons, 'draggabledots');
|
||||
cacheItem(u056, unicons, 'edit');
|
||||
cacheItem(u057, unicons, 'ellipsis-v');
|
||||
cacheItem(u058, unicons, 'envelope');
|
||||
cacheItem(u059, unicons, 'exchange-alt');
|
||||
cacheItem(u060, unicons, 'exclamation-triangle');
|
||||
cacheItem(u061, unicons, 'external-link-alt');
|
||||
cacheItem(u062, unicons, 'eye');
|
||||
cacheItem(u063, unicons, 'eye-slash');
|
||||
cacheItem(u064, unicons, 'file-alt');
|
||||
cacheItem(u065, unicons, 'file-blank');
|
||||
cacheItem(u066, unicons, 'filter');
|
||||
cacheItem(u067, unicons, 'folder');
|
||||
cacheItem(u068, unicons, 'folder-open');
|
||||
cacheItem(u069, unicons, 'folder-plus');
|
||||
cacheItem(u070, unicons, 'folder-upload');
|
||||
cacheItem(u071, unicons, 'forward');
|
||||
//cacheItem(u072, unicons, 'grafana_com');
|
||||
cacheItem(u073, unicons, 'graph-bar');
|
||||
cacheItem(u074, unicons, 'history');
|
||||
cacheItem(u075, unicons, 'home-alt');
|
||||
//cacheItem(u076, unicons, 'icon');
|
||||
//cacheItem(u077, unicons, 'icon-test');
|
||||
cacheItem(u078, unicons, 'import');
|
||||
cacheItem(u079, unicons, 'info');
|
||||
cacheItem(u080, unicons, 'info-circle');
|
||||
//cacheItem(u081, unicons, 'key');
|
||||
cacheItem(u082, unicons, 'key-skeleton-alt');
|
||||
cacheItem(u083, unicons, 'keyboard');
|
||||
cacheItem(u084, unicons, 'link');
|
||||
cacheItem(u085, unicons, 'list-ul');
|
||||
cacheItem(u086, unicons, 'lock');
|
||||
cacheItem(u087, unicons, 'minus');
|
||||
cacheItem(u088, unicons, 'minus-circle');
|
||||
cacheItem(u089, unicons, 'mobile-android');
|
||||
cacheItem(u090, unicons, 'monitor');
|
||||
cacheItem(u091, unicons, 'pause');
|
||||
cacheItem(u092, unicons, 'pen');
|
||||
cacheItem(u093, unicons, 'play');
|
||||
cacheItem(u094, unicons, 'plug');
|
||||
cacheItem(u095, unicons, 'plus');
|
||||
cacheItem(u096, unicons, 'plus-circle');
|
||||
cacheItem(u097, unicons, 'power');
|
||||
cacheItem(u098, unicons, 'presentation-play');
|
||||
cacheItem(u099, unicons, 'process');
|
||||
cacheItem(u100, unicons, 'question-circle');
|
||||
cacheItem(u101, unicons, 'repeat');
|
||||
cacheItem(u102, unicons, 'rocket');
|
||||
cacheItem(u103, unicons, 'save');
|
||||
cacheItem(u104, unicons, 'search');
|
||||
cacheItem(u105, unicons, 'search-minus');
|
||||
cacheItem(u106, unicons, 'search-plus');
|
||||
cacheItem(u107, unicons, 'share-alt');
|
||||
cacheItem(u108, unicons, 'shield');
|
||||
//cacheItem(u109, unicons, 'sign-in');
|
||||
cacheItem(u110, unicons, 'signal');
|
||||
cacheItem(u111, unicons, 'signin');
|
||||
cacheItem(u112, unicons, 'signout');
|
||||
cacheItem(u113, unicons, 'sitemap');
|
||||
cacheItem(u114, unicons, 'slack');
|
||||
cacheItem(u115, unicons, 'sliders-v-alt');
|
||||
cacheItem(u116, unicons, 'sort-amount-down');
|
||||
cacheItem(u117, unicons, 'sort-amount-up');
|
||||
cacheItem(u118, unicons, 'square-shape');
|
||||
cacheItem(u119, unicons, 'star');
|
||||
cacheItem(u120, unicons, 'step-backward');
|
||||
//cacheItem(u121, unicons, 'success');
|
||||
cacheItem(u122, unicons, 'sync');
|
||||
cacheItem(u123, unicons, 'table');
|
||||
cacheItem(u124, unicons, 'tag-alt');
|
||||
cacheItem(u125, unicons, 'times');
|
||||
cacheItem(u126, unicons, 'trash-alt');
|
||||
cacheItem(u127, unicons, 'unlock');
|
||||
//cacheItem(u128, unicons, 'up');
|
||||
cacheItem(u129, unicons, 'upload');
|
||||
cacheItem(u130, unicons, 'user');
|
||||
cacheItem(u131, unicons, 'users-alt');
|
||||
//cacheItem(u132, unicons, 'warning');
|
||||
cacheItem(u133, unicons, 'wrap-text');
|
||||
|
||||
cacheItem(c001, custom, 'gf-bar-alignment-after');
|
||||
cacheItem(c002, custom, 'gf-bar-alignment-before');
|
||||
cacheItem(c003, custom, 'gf-bar-alignment-center');
|
||||
cacheItem(c004, custom, 'gf-interpolation-linear');
|
||||
cacheItem(c005, custom, 'gf-interpolation-smooth');
|
||||
cacheItem(c006, custom, 'gf-interpolation-step-after');
|
||||
cacheItem(c007, custom, 'gf-interpolation-step-before');
|
||||
cacheItem(c008, custom, 'gf-logs');
|
||||
|
||||
cacheItem(m001, mono, 'favorite');
|
||||
cacheItem(m002, mono, 'grafana');
|
||||
cacheItem(m003, mono, 'heart');
|
||||
cacheItem(m004, mono, 'heart-break');
|
||||
cacheItem(m005, mono, 'panel-add');
|
||||
cacheItem(m006, mono, 'reusable-panel');
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@ import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
|
||||
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering
|
||||
import 'file-saver';
|
||||
import 'jquery';
|
||||
import '@grafana/ui/src/components/Icon/iconBundle';
|
||||
|
||||
// eslint-disable-next-line lodash/import-scope
|
||||
import _ from 'lodash';
|
||||
|
||||
@ -87,7 +87,7 @@ exports[`Render should render component 1`] = `
|
||||
cacheRequests={true}
|
||||
className="css-sr6nr"
|
||||
height={24}
|
||||
src="/public/img/icons/unicons/cloud.svg"
|
||||
src="public/img/iconsunicons/cloud.svg"
|
||||
uniquifyIDs={false}
|
||||
width={24}
|
||||
/>
|
||||
|
||||
@ -7,5 +7,9 @@ if ((window as any).public_cdn_path) {
|
||||
__webpack_public_path__ = (window as any).public_cdn_path;
|
||||
}
|
||||
|
||||
// This is a path to the public folder without '/build'
|
||||
(window as any).__grafana_public_path__ =
|
||||
__webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) || __webpack_public_path__;
|
||||
|
||||
import app from './app';
|
||||
app.init();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user