mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Core: Show browser not supported notification (#19904)
* display appEvent on load * move to app.ts, create util and tests * adding case for ie edge * Updated browser notice text
This commit is contained in:
parent
8e824f0b25
commit
31a346fcf2
@ -18,7 +18,10 @@ import angular from 'angular';
|
||||
import config from 'app/core/config';
|
||||
// @ts-ignore ignoring this for now, otherwise we would have to extend _ interface with move
|
||||
import _ from 'lodash';
|
||||
import { AppEvents, setMarkdownOptions, setLocale } from '@grafana/data';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar';
|
||||
import { checkBrowserCompatibility } from 'app/core/utils/browser';
|
||||
import { importPluginModule } from 'app/features/plugins/plugin_loader';
|
||||
|
||||
// add move to lodash for backward compatabiltiy
|
||||
@ -34,8 +37,6 @@ import { setupAngularRoutes } from 'app/routes/routes';
|
||||
|
||||
import 'app/routes/GrafanaCtrl';
|
||||
import 'app/features/all';
|
||||
import { setLocale } from '@grafana/data';
|
||||
import { setMarkdownOptions } from '@grafana/data';
|
||||
|
||||
// import symlinked extensions
|
||||
const extensionsIndex = (require as any).context('.', true, /extensions\/index.ts/);
|
||||
@ -146,6 +147,15 @@ export class GrafanaApp {
|
||||
});
|
||||
|
||||
this.preBootModules = null;
|
||||
|
||||
if (!checkBrowserCompatibility()) {
|
||||
setTimeout(() => {
|
||||
appEvents.emit(AppEvents.alertWarning, [
|
||||
'Your browser is not fully supported',
|
||||
'A newer browser version is recommended',
|
||||
]);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
// Preload selected app plugins
|
||||
|
74
public/app/core/utils/browser.test.ts
Normal file
74
public/app/core/utils/browser.test.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import { checkBrowserCompatibility } from './browser';
|
||||
|
||||
const setUserAgentString = (userAgentString: string) => {
|
||||
Object.defineProperty(window.navigator, 'userAgent', {
|
||||
value: userAgentString,
|
||||
configurable: true,
|
||||
});
|
||||
};
|
||||
|
||||
const setVendor = (vendor: string) => {
|
||||
Object.defineProperty(window.navigator, 'vendor', {
|
||||
value: vendor,
|
||||
configurable: true,
|
||||
});
|
||||
};
|
||||
|
||||
describe('browser', () => {
|
||||
describe('check compatibility', () => {
|
||||
describe('Chrome', () => {
|
||||
it('should be true for chrome version 77', () => {
|
||||
setUserAgentString(
|
||||
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36'
|
||||
);
|
||||
setVendor('Google Inc.');
|
||||
|
||||
expect(checkBrowserCompatibility()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should be false for chrome version <= 54', () => {
|
||||
setUserAgentString(
|
||||
'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36'
|
||||
);
|
||||
setVendor('Google Inc.');
|
||||
|
||||
expect(checkBrowserCompatibility()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('IE', () => {
|
||||
it('should be false for IE 11', () => {
|
||||
setUserAgentString('Mozilla/5.0 (compatible, MSIE 11, Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko');
|
||||
setVendor('Microsoft');
|
||||
|
||||
expect(checkBrowserCompatibility()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('Edge', () => {
|
||||
it('should be false for Edge <= 16', () => {
|
||||
setUserAgentString(
|
||||
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393'
|
||||
);
|
||||
setVendor('Microsoft');
|
||||
|
||||
expect(checkBrowserCompatibility()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should be true for Edge version 44', () => {
|
||||
setUserAgentString(
|
||||
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36 Edg/44.18362.387.0'
|
||||
);
|
||||
setVendor('Microsoft');
|
||||
|
||||
expect(checkBrowserCompatibility()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
describe('Firefox', () => {
|
||||
it('should be true for version 69', () => {
|
||||
setUserAgentString('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:54.0) Gecko/20100101 Firefox/69.0');
|
||||
setVendor('Firefox');
|
||||
|
||||
expect(checkBrowserCompatibility()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
31
public/app/core/utils/browser.ts
Normal file
31
public/app/core/utils/browser.ts
Normal file
@ -0,0 +1,31 @@
|
||||
// Check to see if browser is not supported by Grafana
|
||||
export function checkBrowserCompatibility() {
|
||||
const isIE = navigator.userAgent.indexOf('MSIE') > -1;
|
||||
const isEdge = navigator.userAgent.indexOf('Edge/') > -1 || navigator.userAgent.indexOf('Edg/') > -1;
|
||||
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
|
||||
|
||||
/* Check for
|
||||
<= IE11 (Trident 7)
|
||||
Edge <= 16
|
||||
Firefox <= 64
|
||||
Chrome <= 54
|
||||
*/
|
||||
const isEdgeVersion = /Edge\/([0-9.]+)/.exec(navigator.userAgent);
|
||||
|
||||
if (isIE && parseFloat(/Trident\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 7) {
|
||||
return false;
|
||||
} else if (
|
||||
isEdge &&
|
||||
((isEdgeVersion && parseFloat(isEdgeVersion[1]) <= 16) ||
|
||||
parseFloat(/Edg\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 16)
|
||||
) {
|
||||
return false;
|
||||
} else if (isFirefox && parseFloat(/Firefox\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 64) {
|
||||
return false;
|
||||
} else if (isChrome && parseFloat(/Chrome\/([0-9.]+)/.exec(navigator.userAgent)[1]) <= 54) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
Loading…
Reference in New Issue
Block a user