apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Icons: Fixes iconCache not having same iconRoot as what Icon component used making the pre-cached items not match (#33356)

Browse Source
pull/33354/head
Torkel Ödegaard 5 years ago committed by GitHub
parent a1b7793959
commit 424925c3fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 169 additions and 165 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 18
      packages/grafana-ui/src/components/Icon/Icon.tsx
  2. 309
      packages/grafana-ui/src/components/Icon/iconBundle.ts
  3. 1
      public/app/app.ts
  4. 2
      public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
  5. 4
      public/app/index.ts

18
packages/grafana-ui/src/components/Icon/Icon.tsx
Unescape View File

@ -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);

309
packages/grafana-ui/src/components/Icon/iconBundle.ts
Unescape View File

@ -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;
// 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(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(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(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(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');
}

1
public/app/app.ts
Unescape View File

@ -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';

2
public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
Unescape View File

@ -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}
/>

4
public/app/index.ts
Unescape View File

@ -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();

Write Preview
Loading…
Cancel
Save