{{part.def.type}}
()
@@ -15,7 +15,7 @@ var template = `
/** @ngInject */
export function queryPartEditorDirective($compile, templateSrv) {
- var paramTemplate = '
';
+ const paramTemplate = '
';
return {
restrict: 'E',
@@ -26,17 +26,17 @@ export function queryPartEditorDirective($compile, templateSrv) {
debounce: '@',
},
link: function postLink($scope, elem) {
- var part = $scope.part;
- var partDef = part.def;
- var $paramsContainer = elem.find('.query-part-parameters');
- var debounceLookup = $scope.debounce;
+ const part = $scope.part;
+ const partDef = part.def;
+ const $paramsContainer = elem.find('.query-part-parameters');
+ const debounceLookup = $scope.debounce;
$scope.partActions = [];
- function clickFuncParam(paramIndex) {
+ function clickFuncParam(this: any, paramIndex) {
/*jshint validthis:true */
- var $link = $(this);
- var $input = $link.next();
+ const $link = $(this);
+ const $input = $link.next();
$input.val(part.params[paramIndex]);
$input.css('width', $link.width() + 16 + 'px');
@@ -46,18 +46,18 @@ export function queryPartEditorDirective($compile, templateSrv) {
$input.focus();
$input.select();
- var typeahead = $input.data('typeahead');
+ const typeahead = $input.data('typeahead');
if (typeahead) {
$input.val('');
typeahead.lookup();
}
}
- function inputBlur(paramIndex) {
+ function inputBlur(this: any, paramIndex) {
/*jshint validthis:true */
- var $input = $(this);
- var $link = $input.prev();
- var newValue = $input.val();
+ const $input = $(this);
+ const $link = $input.prev();
+ const newValue = $input.val();
if (newValue !== '' || part.def.params[paramIndex].optional) {
$link.html(templateSrv.highlightVariablesAsHtml(newValue));
@@ -72,14 +72,14 @@ export function queryPartEditorDirective($compile, templateSrv) {
$link.show();
}
- function inputKeyPress(paramIndex, e) {
+ function inputKeyPress(this: any, paramIndex, e) {
/*jshint validthis:true */
if (e.which === 13) {
inputBlur.call(this, paramIndex);
}
}
- function inputKeyDown() {
+ function inputKeyDown(this: any) {
/*jshint validthis:true */
this.style.width = (3 + this.value.length) * 8 + 'px';
}
@@ -89,20 +89,20 @@ export function queryPartEditorDirective($compile, templateSrv) {
return;
}
- var typeaheadSource = function(query, callback) {
+ const typeaheadSource = (query, callback) => {
if (param.options) {
- var options = param.options;
+ let options = param.options;
if (param.type === 'int') {
- options = _.map(options, function(val) {
+ options = _.map(options, val => {
return val.toString();
});
}
return options;
}
- $scope.$apply(function() {
- $scope.handleEvent({ $event: { name: 'get-param-options' } }).then(function(result) {
- var dynamicOptions = _.map(result, function(op) {
+ $scope.$apply(() => {
+ $scope.handleEvent({ $event: { name: 'get-param-options' } }).then(result => {
+ const dynamicOptions = _.map(result, op => {
return op.value;
});
callback(dynamicOptions);
@@ -116,18 +116,18 @@ export function queryPartEditorDirective($compile, templateSrv) {
source: typeaheadSource,
minLength: 0,
items: 1000,
- updater: function(value) {
- setTimeout(function() {
+ updater: value => {
+ setTimeout(() => {
inputBlur.call($input[0], paramIndex);
}, 0);
return value;
},
});
- var typeahead = $input.data('typeahead');
+ const typeahead = $input.data('typeahead');
typeahead.lookup = function() {
this.query = this.$element.val() || '';
- var items = this.source(this.query, $.proxy(this.process, this));
+ const items = this.source(this.query, $.proxy(this.process, this));
return items ? this.process(items) : items;
};
@@ -136,18 +136,18 @@ export function queryPartEditorDirective($compile, templateSrv) {
}
}
- $scope.showActionsMenu = function() {
+ $scope.showActionsMenu = () => {
$scope.handleEvent({ $event: { name: 'get-part-actions' } }).then(res => {
$scope.partActions = res;
});
};
- $scope.triggerPartAction = function(action) {
+ $scope.triggerPartAction = action => {
$scope.handleEvent({ $event: { name: 'action', action: action } });
};
function addElementsAndCompile() {
- _.each(partDef.params, function(param, index) {
+ _.each(partDef.params, (param, index) => {
if (param.optional && part.params.length <= index) {
return;
}
@@ -156,9 +156,9 @@ export function queryPartEditorDirective($compile, templateSrv) {
$('
, ').appendTo($paramsContainer);
}
- var paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
- var $paramLink = $('
' + paramValue + '');
- var $input = $(paramTemplate);
+ const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
+ const $paramLink = $('
' + paramValue + '');
+ const $input = $(paramTemplate);
$paramLink.appendTo($paramsContainer);
$input.appendTo($paramsContainer);
diff --git a/public/app/core/components/scroll/page_scroll.ts b/public/app/core/components/scroll/page_scroll.ts
index b6603f06175..2d6e27f8b22 100644
--- a/public/app/core/components/scroll/page_scroll.ts
+++ b/public/app/core/components/scroll/page_scroll.ts
@@ -4,7 +4,7 @@ import appEvents from 'app/core/app_events';
export function pageScrollbar() {
return {
restrict: 'A',
- link: function(scope, elem, attrs) {
+ link: (scope, elem, attrs) => {
let lastPos = 0;
appEvents.on(
diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts
index 5cdbdb62ee3..bd355817f92 100644
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
@@ -1,7 +1,6 @@
import $ from 'jquery';
import baron from 'baron';
import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
const scrollBarHTML = `
@@ -15,7 +14,7 @@ const scrollerClass = 'baron__scroller';
export function geminiScrollbar() {
return {
restrict: 'A',
- link: function(scope, elem, attrs) {
+ link: (scope, elem, attrs) => {
let scrollRoot = elem.parent();
const scroller = elem;
@@ -39,43 +38,6 @@ export function geminiScrollbar() {
const scrollbar = baron(scrollParams);
- let lastPos = 0;
-
- appEvents.on(
- 'dash-scroll',
- evt => {
- if (evt.restore) {
- elem[0].scrollTop = lastPos;
- return;
- }
-
- lastPos = elem[0].scrollTop;
-
- if (evt.animate) {
- elem.animate({ scrollTop: evt.pos }, 500);
- } else {
- elem[0].scrollTop = evt.pos;
- }
- },
- scope
- );
-
- // force updating dashboard width
- appEvents.on('toggle-sidemenu', forceUpdate, scope);
- appEvents.on('toggle-sidemenu-hidden', forceUpdate, scope);
- appEvents.on('toggle-view-mode', forceUpdate, scope);
- appEvents.on('toggle-kiosk-mode', forceUpdate, scope);
- appEvents.on('toggle-inactive-mode', forceUpdate, scope);
-
- function forceUpdate() {
- scrollbar.scroll();
- }
-
- scope.$on('$routeChangeSuccess', () => {
- lastPos = 0;
- elem[0].scrollTop = 0;
- });
-
scope.$on('$destroy', () => {
scrollbar.dispose();
});
diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts
index 162eeb1b9f3..e347fcd829a 100644
--- a/public/app/core/components/search/search.ts
+++ b/public/app/core/components/search/search.ts
@@ -130,8 +130,8 @@ export class SearchCtrl {
}
const max = flattenedResult.length;
- let newIndex = this.selectedIndex + direction;
- this.selectedIndex = (newIndex %= max) < 0 ? newIndex + max : newIndex;
+ const newIndex = (this.selectedIndex + direction) % max;
+ this.selectedIndex = newIndex < 0 ? newIndex + max : newIndex;
const selectedItem = flattenedResult[this.selectedIndex];
if (selectedItem.dashboardIndex === undefined && this.results[selectedItem.folderIndex].id === 0) {
@@ -159,7 +159,7 @@ export class SearchCtrl {
searchDashboards() {
this.currentSearchId = this.currentSearchId + 1;
- var localSearchId = this.currentSearchId;
+ const localSearchId = this.currentSearchId;
return this.searchSrv.search(this.query).then(results => {
if (localSearchId < this.currentSearchId) {
@@ -172,7 +172,7 @@ export class SearchCtrl {
}
queryHasNoFilters() {
- var query = this.query;
+ const query = this.query;
return query.query === '' && query.starred === false && query.tag.length === 0;
}
diff --git a/public/app/core/components/sidemenu/BottomNavLinks.test.tsx b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
new file mode 100644
index 00000000000..8eaed4ca264
--- /dev/null
+++ b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BottomNavLinks from './BottomNavLinks';
+import appEvents from '../../app_events';
+
+jest.mock('../../app_events', () => ({
+ emit: jest.fn(),
+}));
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ link: {},
+ user: {
+ isGrafanaAdmin: false,
+ isSignedIn: false,
+ orgCount: 2,
+ orgRole: '',
+ orgId: 1,
+ orgName: 'Grafana',
+ timezone: 'UTC',
+ helpFlags1: 1,
+ lightTheme: false,
+ hasEditPermissionInFolders: false,
+ },
+ },
+ propOverrides
+ );
+ return shallow(
);
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render organisation switcher', () => {
+ const wrapper = setup({
+ link: {
+ showOrgSwitcher: true,
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render subtitle', () => {
+ const wrapper = setup({
+ link: {
+ subTitle: 'subtitle',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render children', () => {
+ const wrapper = setup({
+ link: {
+ children: [
+ {
+ id: '1',
+ },
+ {
+ id: '2',
+ },
+ {
+ id: '3',
+ },
+ {
+ id: '4',
+ hideFromMenu: true,
+ },
+ ],
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
+
+describe('Functions', () => {
+ describe('item clicked', () => {
+ const wrapper = setup();
+ const mockEvent = { preventDefault: jest.fn() };
+ it('should emit show modal event if url matches shortcut', () => {
+ const child = { url: '/shortcuts' };
+ const instance = wrapper.instance() as BottomNavLinks;
+ instance.itemClicked(mockEvent, child);
+
+ expect(appEvents.emit).toHaveBeenCalledWith('show-modal', { templateHtml: '
' });
+ });
+ });
+});
diff --git a/public/app/core/components/sidemenu/BottomNavLinks.tsx b/public/app/core/components/sidemenu/BottomNavLinks.tsx
new file mode 100644
index 00000000000..21c83864c62
--- /dev/null
+++ b/public/app/core/components/sidemenu/BottomNavLinks.tsx
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react';
+import appEvents from '../../app_events';
+import { User } from '../../services/context_srv';
+
+export interface Props {
+ link: any;
+ user: User;
+}
+
+class BottomNavLinks extends PureComponent
{
+ itemClicked = (event, child) => {
+ if (child.url === '/shortcuts') {
+ event.preventDefault();
+ appEvents.emit('show-modal', {
+ templateHtml: '',
+ });
+ }
+ };
+
+ switchOrg = () => {
+ appEvents.emit('show-modal', {
+ templateHtml: '',
+ });
+ };
+
+ render() {
+ const { link, user } = this.props;
+ return (
+
+ );
+ }
+}
+
+export default BottomNavLinks;
diff --git a/public/app/core/components/sidemenu/BottomSection.test.tsx b/public/app/core/components/sidemenu/BottomSection.test.tsx
new file mode 100644
index 00000000000..40307895c57
--- /dev/null
+++ b/public/app/core/components/sidemenu/BottomSection.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BottomSection from './BottomSection';
+
+jest.mock('../../config', () => ({
+ bootData: {
+ navTree: [
+ {
+ id: 'profile',
+ hideFromMenu: true,
+ },
+ {
+ hideFromMenu: true,
+ },
+ {
+ hideFromMenu: false,
+ },
+ {
+ hideFromMenu: true,
+ },
+ ],
+ },
+ user: {
+ orgCount: 5,
+ orgName: 'Grafana',
+ },
+}));
+
+jest.mock('app/core/services/context_srv', () => ({
+ contextSrv: {
+ sidemenu: true,
+ isSignedIn: false,
+ isGrafanaAdmin: false,
+ hasEditPermissionFolders: false,
+ },
+}));
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = shallow();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/sidemenu/BottomSection.tsx b/public/app/core/components/sidemenu/BottomSection.tsx
new file mode 100644
index 00000000000..ee5175ca763
--- /dev/null
+++ b/public/app/core/components/sidemenu/BottomSection.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import _ from 'lodash';
+import SignIn from './SignIn';
+import BottomNavLinks from './BottomNavLinks';
+import { contextSrv } from 'app/core/services/context_srv';
+import config from '../../config';
+
+export default function BottomSection() {
+ const navTree = _.cloneDeep(config.bootData.navTree);
+ const bottomNav = _.filter(navTree, item => item.hideFromMenu);
+ const isSignedIn = contextSrv.isSignedIn;
+ const user = contextSrv.user;
+
+ if (user && user.orgCount > 1) {
+ const profileNode = _.find(bottomNav, { id: 'profile' });
+ if (profileNode) {
+ profileNode.showOrgSwitcher = true;
+ }
+ }
+
+ return (
+
+ {!isSignedIn && }
+ {bottomNav.map((link, index) => {
+ return ;
+ })}
+
+ );
+}
diff --git a/public/app/core/components/sidemenu/DropDownChild.test.tsx b/public/app/core/components/sidemenu/DropDownChild.test.tsx
new file mode 100644
index 00000000000..6a15ca5b23f
--- /dev/null
+++ b/public/app/core/components/sidemenu/DropDownChild.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import DropDownChild from './DropDownChild';
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ child: {
+ divider: true,
+ },
+ },
+ propOverrides
+ );
+
+ return shallow();
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render icon if exists', () => {
+ const wrapper = setup({
+ child: {
+ divider: false,
+ icon: 'icon-test',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/sidemenu/DropDownChild.tsx b/public/app/core/components/sidemenu/DropDownChild.tsx
new file mode 100644
index 00000000000..1a577d185e5
--- /dev/null
+++ b/public/app/core/components/sidemenu/DropDownChild.tsx
@@ -0,0 +1,21 @@
+import React, { SFC } from 'react';
+
+export interface Props {
+ child: any;
+}
+
+const DropDownChild: SFC = props => {
+ const { child } = props;
+ const listItemClassName = child.divider ? 'divider' : '';
+
+ return (
+
+
+ {child.icon && }
+ {child.text}
+
+
+ );
+};
+
+export default DropDownChild;
diff --git a/public/app/core/components/sidemenu/SideMenu.test.tsx b/public/app/core/components/sidemenu/SideMenu.test.tsx
new file mode 100644
index 00000000000..2a262adca5a
--- /dev/null
+++ b/public/app/core/components/sidemenu/SideMenu.test.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { SideMenu } from './SideMenu';
+import appEvents from '../../app_events';
+import { contextSrv } from 'app/core/services/context_srv';
+
+jest.mock('../../app_events', () => ({
+ emit: jest.fn(),
+}));
+
+jest.mock('app/core/services/context_srv', () => ({
+ contextSrv: {
+ sidemenu: true,
+ user: {},
+ isSignedIn: false,
+ isGrafanaAdmin: false,
+ isEditor: false,
+ hasEditPermissionFolders: false,
+ toggleSideMenu: jest.fn(),
+ },
+}));
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ loginUrl: '',
+ user: {},
+ mainLinks: [],
+ bottomeLinks: [],
+ isSignedIn: false,
+ },
+ propOverrides
+ );
+
+ return shallow();
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
+
+describe('Functions', () => {
+ describe('toggle side menu', () => {
+ const wrapper = setup();
+ const instance = wrapper.instance() as SideMenu;
+ instance.toggleSideMenu();
+
+ it('should call contextSrv.toggleSideMenu', () => {
+ expect(contextSrv.toggleSideMenu).toHaveBeenCalled();
+ });
+
+ it('should emit toggle sidemenu event', () => {
+ expect(appEvents.emit).toHaveBeenCalledWith('toggle-sidemenu');
+ });
+ });
+
+ describe('toggle side menu on mobile', () => {
+ const wrapper = setup();
+ const instance = wrapper.instance() as SideMenu;
+ instance.toggleSideMenuSmallBreakpoint();
+
+ it('should emit toggle sidemenu event', () => {
+ expect(appEvents.emit).toHaveBeenCalledWith('toggle-sidemenu-mobile');
+ });
+ });
+});
diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx
new file mode 100644
index 00000000000..0092c1e3842
--- /dev/null
+++ b/public/app/core/components/sidemenu/SideMenu.tsx
@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import appEvents from '../../app_events';
+import { contextSrv } from 'app/core/services/context_srv';
+import TopSection from './TopSection';
+import BottomSection from './BottomSection';
+
+export class SideMenu extends PureComponent {
+ toggleSideMenu = () => {
+ contextSrv.toggleSideMenu();
+ appEvents.emit('toggle-sidemenu');
+ };
+
+ toggleSideMenuSmallBreakpoint = () => {
+ appEvents.emit('toggle-sidemenu-mobile');
+ };
+
+ render() {
+ return [
+
+
+
+
+
+ Close
+
+
,
+ ,
+ ,
+ ];
+ }
+}
diff --git a/public/app/core/components/sidemenu/SideMenuDropDown.test.tsx b/public/app/core/components/sidemenu/SideMenuDropDown.test.tsx
new file mode 100644
index 00000000000..c98d78ca021
--- /dev/null
+++ b/public/app/core/components/sidemenu/SideMenuDropDown.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SideMenuDropDown from './SideMenuDropDown';
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ link: {
+ text: 'link',
+ },
+ },
+ propOverrides
+ );
+
+ return shallow();
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render children', () => {
+ const wrapper = setup({
+ link: {
+ text: 'link',
+ children: [{ id: 1 }, { id: 2 }, { id: 3 }],
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/sidemenu/SideMenuDropDown.tsx b/public/app/core/components/sidemenu/SideMenuDropDown.tsx
new file mode 100644
index 00000000000..7cd7554f82c
--- /dev/null
+++ b/public/app/core/components/sidemenu/SideMenuDropDown.tsx
@@ -0,0 +1,23 @@
+import React, { SFC } from 'react';
+import DropDownChild from './DropDownChild';
+
+interface Props {
+ link: any;
+}
+
+const SideMenuDropDown: SFC = props => {
+ const { link } = props;
+ return (
+
+ -
+ {link.text}
+
+ {link.children &&
+ link.children.map((child, index) => {
+ return ;
+ })}
+
+ );
+};
+
+export default SideMenuDropDown;
diff --git a/public/app/core/components/sidemenu/SignIn.test.tsx b/public/app/core/components/sidemenu/SignIn.test.tsx
new file mode 100644
index 00000000000..c202926086f
--- /dev/null
+++ b/public/app/core/components/sidemenu/SignIn.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SignIn from './SignIn';
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = shallow();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/sidemenu/SignIn.tsx b/public/app/core/components/sidemenu/SignIn.tsx
new file mode 100644
index 00000000000..17dd913823a
--- /dev/null
+++ b/public/app/core/components/sidemenu/SignIn.tsx
@@ -0,0 +1,23 @@
+import React, { SFC } from 'react';
+
+const SignIn: SFC = () => {
+ const loginUrl = `login?redirect=${encodeURIComponent(window.location.pathname)}`;
+ return (
+
+ );
+};
+
+export default SignIn;
diff --git a/public/app/core/components/sidemenu/TopSection.test.tsx b/public/app/core/components/sidemenu/TopSection.test.tsx
new file mode 100644
index 00000000000..6ed01479833
--- /dev/null
+++ b/public/app/core/components/sidemenu/TopSection.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TopSection from './TopSection';
+
+jest.mock('../../config', () => ({
+ bootData: {
+ navTree: [
+ { id: '1', hideFromMenu: true },
+ { id: '2', hideFromMenu: true },
+ { id: '3', hideFromMenu: false },
+ { id: '4', hideFromMenu: true },
+ ],
+ },
+}));
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ mainLinks: [],
+ },
+ propOverrides
+ );
+
+ return shallow();
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render items', () => {
+ const wrapper = setup({
+ mainLinks: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/sidemenu/TopSection.tsx b/public/app/core/components/sidemenu/TopSection.tsx
new file mode 100644
index 00000000000..c6bf5df8242
--- /dev/null
+++ b/public/app/core/components/sidemenu/TopSection.tsx
@@ -0,0 +1,19 @@
+import React, { SFC } from 'react';
+import _ from 'lodash';
+import TopSectionItem from './TopSectionItem';
+import config from '../../config';
+
+const TopSection: SFC = () => {
+ const navTree = _.cloneDeep(config.bootData.navTree);
+ const mainLinks = _.filter(navTree, item => !item.hideFromMenu);
+
+ return (
+
+ {mainLinks.map((link, index) => {
+ return ;
+ })}
+
+ );
+};
+
+export default TopSection;
diff --git a/public/app/core/components/sidemenu/TopSectionItem.test.tsx b/public/app/core/components/sidemenu/TopSectionItem.test.tsx
new file mode 100644
index 00000000000..e7d3c4b7c75
--- /dev/null
+++ b/public/app/core/components/sidemenu/TopSectionItem.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TopSectionItem from './TopSectionItem';
+
+const setup = (propOverrides?: object) => {
+ const props = Object.assign(
+ {
+ link: {},
+ },
+ propOverrides
+ );
+
+ return shallow();
+};
+
+describe('Render', () => {
+ it('should render component', () => {
+ const wrapper = setup();
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/public/app/core/components/sidemenu/TopSectionItem.tsx b/public/app/core/components/sidemenu/TopSectionItem.tsx
new file mode 100644
index 00000000000..4a207cc0df9
--- /dev/null
+++ b/public/app/core/components/sidemenu/TopSectionItem.tsx
@@ -0,0 +1,23 @@
+import React, { SFC } from 'react';
+import SideMenuDropDown from './SideMenuDropDown';
+
+export interface Props {
+ link: any;
+}
+
+const TopSectionItem: SFC = props => {
+ const { link } = props;
+ return (
+
+ );
+};
+
+export default TopSectionItem;
diff --git a/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap
new file mode 100644
index 00000000000..f3181b617ad
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render children 1`] = `
+
+
+
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+ -
+
+ subtitle
+
+
+ -
+
+
+
+
+
+
+
+
+
+`;
diff --git a/public/app/core/components/sidemenu/__snapshots__/DropDownChild.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/DropDownChild.test.tsx.snap
new file mode 100644
index 00000000000..fcfd8ea936a
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/DropDownChild.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+
+
+
+`;
+
+exports[`Render should render icon if exists 1`] = `
+
+
+
+
+
+`;
diff --git a/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap
new file mode 100644
index 00000000000..78e64209749
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+Array [
+ ,
+ ,
+ ,
+ ,
+]
+`;
diff --git a/public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap
new file mode 100644
index 00000000000..861168c1cc3
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render children 1`] = `
+
+`;
+
+exports[`Render should render component 1`] = `
+
+`;
diff --git a/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap
new file mode 100644
index 00000000000..ba21be63b51
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+
+`;
diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap
new file mode 100644
index 00000000000..c78ec726302
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+
+
+
+`;
+
+exports[`Render should render items 1`] = `
+
+
+
+`;
diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
new file mode 100644
index 00000000000..f7ff56bff6b
--- /dev/null
+++ b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+
+`;
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
deleted file mode 100644
index 3a4ce11333e..00000000000
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ /dev/null
@@ -1,81 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts
deleted file mode 100644
index 5649963c3dc..00000000000
--- a/public/app/core/components/sidemenu/sidemenu.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import _ from 'lodash';
-import config from 'app/core/config';
-import $ from 'jquery';
-import coreModule from '../../core_module';
-import appEvents from 'app/core/app_events';
-
-export class SideMenuCtrl {
- user: any;
- mainLinks: any;
- bottomNav: any;
- loginUrl: string;
- isSignedIn: boolean;
- isOpenMobile: boolean;
-
- /** @ngInject */
- constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) {
- this.isSignedIn = contextSrv.isSignedIn;
- this.user = contextSrv.user;
-
- const navTree = _.cloneDeep(config.bootData.navTree);
- this.mainLinks = _.filter(navTree, item => !item.hideFromMenu);
- this.bottomNav = _.filter(navTree, item => item.hideFromMenu);
- this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
-
- if (contextSrv.user.orgCount > 1) {
- const profileNode = _.find(this.bottomNav, { id: 'profile' });
- if (profileNode) {
- profileNode.showOrgSwitcher = true;
- }
- }
-
- this.$scope.$on('$routeChangeSuccess', () => {
- this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
- });
- }
-
- toggleSideMenu() {
- this.contextSrv.toggleSideMenu();
- appEvents.emit('toggle-sidemenu');
-
- this.$timeout(() => {
- this.$rootScope.$broadcast('render');
- });
- }
-
- toggleSideMenuSmallBreakpoint() {
- appEvents.emit('toggle-sidemenu-mobile');
- }
-
- switchOrg() {
- this.$rootScope.appEvent('show-modal', {
- templateHtml: '',
- });
- }
-
- itemClicked(item, evt) {
- if (item.url === '/shortcuts') {
- appEvents.emit('show-modal', {
- templateHtml: '',
- });
- evt.preventDefault();
- }
- }
-}
-
-export function sideMenuDirective() {
- return {
- restrict: 'E',
- templateUrl: 'public/app/core/components/sidemenu/sidemenu.html',
- controller: SideMenuCtrl,
- bindToController: true,
- controllerAs: 'ctrl',
- scope: {},
- link: function(scope, elem) {
- // hack to hide dropdown menu
- elem.on('click.dropdown', '.dropdown-menu a', function(evt) {
- var menu = $(evt.target).parents('.dropdown-menu');
- var parent = menu.parent();
- menu.detach();
-
- setTimeout(function() {
- parent.append(menu);
- }, 100);
- });
- },
- };
-}
-
-coreModule.directive('sidemenu', sideMenuDirective);
diff --git a/public/app/core/components/sql_part/sql_part.ts b/public/app/core/components/sql_part/sql_part.ts
new file mode 100644
index 00000000000..a9b76b1ed2d
--- /dev/null
+++ b/public/app/core/components/sql_part/sql_part.ts
@@ -0,0 +1,74 @@
+import _ from 'lodash';
+
+export class SqlPartDef {
+ type: string;
+ style: string;
+ label: string;
+ params: any[];
+ defaultParams: any[];
+ wrapOpen: string;
+ wrapClose: string;
+ separator: string;
+
+ constructor(options: any) {
+ this.type = options.type;
+ if (options.label) {
+ this.label = options.label;
+ } else {
+ this.label = this.type[0].toUpperCase() + this.type.substring(1) + ':';
+ }
+ this.style = options.style;
+ if (this.style === 'function') {
+ this.wrapOpen = '(';
+ this.wrapClose = ')';
+ this.separator = ', ';
+ } else {
+ this.wrapOpen = ' ';
+ this.wrapClose = ' ';
+ this.separator = ' ';
+ }
+ this.params = options.params;
+ this.defaultParams = options.defaultParams;
+ }
+}
+
+export class SqlPart {
+ part: any;
+ def: SqlPartDef;
+ params: any[];
+ label: string;
+ name: string;
+ datatype: string;
+
+ constructor(part: any, def: any) {
+ this.part = part;
+ this.def = def;
+ if (!this.def) {
+ throw { message: 'Could not find sql part ' + part.type };
+ }
+
+ this.datatype = part.datatype;
+
+ if (part.name) {
+ this.name = part.name;
+ this.label = def.label + ' ' + part.name;
+ } else {
+ this.name = '';
+ this.label = def.label;
+ }
+
+ part.params = part.params || _.clone(this.def.defaultParams);
+ this.params = part.params;
+ }
+
+ updateParam(strValue, index) {
+ // handle optional parameters
+ if (strValue === '' && this.def.params[index].optional) {
+ this.params.splice(index, 1);
+ } else {
+ this.params[index] = strValue;
+ }
+
+ this.part.params = this.params;
+ }
+}
diff --git a/public/app/core/components/sql_part/sql_part_editor.ts b/public/app/core/components/sql_part/sql_part_editor.ts
new file mode 100644
index 00000000000..5d0f63a6953
--- /dev/null
+++ b/public/app/core/components/sql_part/sql_part_editor.ts
@@ -0,0 +1,199 @@
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+
+const template = `
+
+
{{part.label}}
+
{{part.def.wrapOpen}}{{part.def.wrapClose}}
+
+`;
+
+/** @ngInject */
+export function sqlPartEditorDirective($compile, templateSrv) {
+ const paramTemplate = '
';
+
+ return {
+ restrict: 'E',
+ template: template,
+ scope: {
+ part: '=',
+ handleEvent: '&',
+ debounce: '@',
+ },
+ link: function postLink($scope, elem) {
+ const part = $scope.part;
+ const partDef = part.def;
+ const $paramsContainer = elem.find('.query-part-parameters');
+ const debounceLookup = $scope.debounce;
+ let cancelBlur = null;
+
+ $scope.partActions = [];
+
+ function clickFuncParam(this: any, paramIndex) {
+ /*jshint validthis:true */
+ const $link = $(this);
+ const $input = $link.next();
+
+ $input.val(part.params[paramIndex]);
+ $input.css('width', $link.width() + 16 + 'px');
+
+ $link.hide();
+ $input.show();
+ $input.focus();
+ $input.select();
+
+ const typeahead = $input.data('typeahead');
+ if (typeahead) {
+ $input.val('');
+ typeahead.lookup();
+ }
+ }
+
+ function inputBlur($input, paramIndex) {
+ cancelBlur = setTimeout(function() {
+ switchToLink($input, paramIndex);
+ }, 200);
+ }
+
+ function switchToLink($input, paramIndex) {
+ /*jshint validthis:true */
+ const $link = $input.prev();
+ const newValue = $input.val();
+
+ if (newValue !== '' || part.def.params[paramIndex].optional) {
+ $link.html(templateSrv.highlightVariablesAsHtml(newValue));
+
+ part.updateParam($input.val(), paramIndex);
+ $scope.$apply(() => {
+ $scope.handleEvent({ $event: { name: 'part-param-changed' } });
+ });
+ }
+
+ $input.hide();
+ $link.show();
+ }
+
+ function inputKeyPress(this: any, paramIndex, e) {
+ /*jshint validthis:true */
+ if (e.which === 13) {
+ switchToLink($(this), paramIndex);
+ }
+ }
+
+ function inputKeyDown(this: any) {
+ /*jshint validthis:true */
+ this.style.width = (3 + this.value.length) * 8 + 'px';
+ }
+
+ function addTypeahead($input, param, paramIndex) {
+ if (!param.options && !param.dynamicLookup) {
+ return;
+ }
+
+ const typeaheadSource = function(query, callback) {
+ if (param.options) {
+ let options = param.options;
+ if (param.type === 'int') {
+ options = _.map(options, function(val) {
+ return val.toString();
+ });
+ }
+ return options;
+ }
+
+ $scope.$apply(function() {
+ $scope.handleEvent({ $event: { name: 'get-param-options', param: param } }).then(function(result) {
+ const dynamicOptions = _.map(result, function(op) {
+ return op.value;
+ });
+
+ // add current value to dropdown if it's not in dynamicOptions
+ if (_.indexOf(dynamicOptions, part.params[paramIndex]) === -1) {
+ dynamicOptions.unshift(part.params[paramIndex]);
+ }
+
+ callback(dynamicOptions);
+ });
+ });
+ };
+
+ $input.attr('data-provide', 'typeahead');
+
+ $input.typeahead({
+ source: typeaheadSource,
+ minLength: 0,
+ items: 1000,
+ updater: function(value) {
+ if (value === part.params[paramIndex]) {
+ clearTimeout(cancelBlur);
+ $input.focus();
+ return value;
+ }
+ return value;
+ },
+ });
+
+ const typeahead = $input.data('typeahead');
+ typeahead.lookup = function() {
+ this.query = this.$element.val() || '';
+ const items = this.source(this.query, $.proxy(this.process, this));
+ return items ? this.process(items) : items;
+ };
+
+ if (debounceLookup) {
+ typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true });
+ }
+ }
+
+ $scope.showActionsMenu = function() {
+ $scope.handleEvent({ $event: { name: 'get-part-actions' } }).then(res => {
+ $scope.partActions = res;
+ });
+ };
+
+ $scope.triggerPartAction = function(action) {
+ $scope.handleEvent({ $event: { name: 'action', action: action } });
+ };
+
+ function addElementsAndCompile() {
+ _.each(partDef.params, function(param, index) {
+ if (param.optional && part.params.length <= index) {
+ return;
+ }
+
+ if (index > 0) {
+ $('
' + partDef.separator + '').appendTo($paramsContainer);
+ }
+
+ const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
+ const $paramLink = $('
' + paramValue + '');
+ const $input = $(paramTemplate);
+
+ $paramLink.appendTo($paramsContainer);
+ $input.appendTo($paramsContainer);
+
+ $input.blur(_.partial(inputBlur, $input, index));
+ $input.keyup(inputKeyDown);
+ $input.keypress(_.partial(inputKeyPress, index));
+ $paramLink.click(_.partial(clickFuncParam, index));
+
+ addTypeahead($input, param, index);
+ });
+ }
+
+ function relink() {
+ $paramsContainer.empty();
+ addElementsAndCompile();
+ }
+
+ relink();
+ },
+ };
+}
+
+coreModule.directive('sqlPartEditor', sqlPartEditorDirective);
diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index d2de09216cc..d8c1da4e345 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -1,6 +1,6 @@
import coreModule from 'app/core/core_module';
-var template = `
+const template = `