From f0e905f3c9993135603b74bb6de3b9b41e31e404 Mon Sep 17 00:00:00 2001 From: Dan Doyle Date: Wed, 12 Sep 2018 13:17:15 +0000 Subject: [PATCH 01/16] First pass at a text based template var, getting feedback from devs --- .../features/dashboard/submenu/submenu.html | 3 +- public/app/features/templating/all.ts | 2 + .../features/templating/partials/editor.html | 8 +++ .../app/features/templating/text_variable.ts | 58 +++++++++++++++++++ 4 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 public/app/features/templating/text_variable.ts diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index f240a86efba..9d3332b06e2 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -4,7 +4,8 @@ - + + diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index 16465740642..424494f66b2 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -9,6 +9,7 @@ import { DatasourceVariable } from './datasource_variable'; import { CustomVariable } from './custom_variable'; import { ConstantVariable } from './constant_variable'; import { AdhocVariable } from './adhoc_variable'; +import { TextVariable } from './text_variable'; coreModule.factory('templateSrv', () => { return templateSrv; @@ -22,4 +23,5 @@ export { CustomVariable, ConstantVariable, AdhocVariable, + TextVariable }; diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 0d8b0ace327..ed8398738da 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -155,6 +155,14 @@ +
+
Text options
+
+ Value + +
+
+
Query Options
diff --git a/public/app/features/templating/text_variable.ts b/public/app/features/templating/text_variable.ts new file mode 100644 index 00000000000..3459b99f602 --- /dev/null +++ b/public/app/features/templating/text_variable.ts @@ -0,0 +1,58 @@ +import { Variable, assignModelProperties, variableTypes } from './variable'; + +export class TextVariable implements Variable { + query: string; + current: any; + options: any[]; + skipUrlSync: boolean; + + defaults = { + type: 'text', + name: '', + hide: 2, + label: '', + query: '', + current: {}, + options: [], + skipUrlSync: false, + }; + + /** @ngInject */ + constructor(private model, private variableSrv) { + assignModelProperties(this, model, this.defaults); + } + + getSaveModel() { + assignModelProperties(this.model, this, this.defaults); + return this.model; + } + + setValue(option) { + this.variableSrv.setOptionAsCurrent(this, option); + } + + updateOptions() { + this.options = [{ text: this.query.trim(), value: this.query.trim() }]; + this.current = this.options[0]; + return Promise.resolve(); + } + + dependsOn(variable) { + return false; + } + + setValueFromUrl(urlValue) { + this.query = urlValue; + return this.variableSrv.setOptionFromUrl(this, urlValue); + } + + getValueForUrl() { + return this.current.value; + } +} + +variableTypes['text'] = { + name: 'Text', + ctor: TextVariable, + description: 'Define a textbox variable, where users can enter any arbitrary string', +}; From e8cc0f3fff88f12a9759cbc30efc158a636901d7 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 25 Sep 2018 14:53:55 +0200 Subject: [PATCH 02/16] render list --- .../app/features/plugins/PluginActionBar.tsx | 24 +++++++++ public/app/features/plugins/PluginList.tsx | 21 ++++++++ .../app/features/plugins/PluginListItem.tsx | 30 +++++++++++ .../app/features/plugins/PluginListPage.tsx | 53 +++++++++++++++++++ public/app/features/plugins/state/actions.ts | 28 ++++++++++ public/app/features/plugins/state/reducers.ts | 16 ++++++ .../app/features/plugins/state/selectors.ts | 1 + public/app/routes/routes.ts | 8 +-- public/app/store/configureStore.ts | 2 + public/app/types/index.ts | 5 +- public/app/types/plugins.ts | 30 +++++++++++ 11 files changed, 214 insertions(+), 4 deletions(-) create mode 100644 public/app/features/plugins/PluginActionBar.tsx create mode 100644 public/app/features/plugins/PluginList.tsx create mode 100644 public/app/features/plugins/PluginListItem.tsx create mode 100644 public/app/features/plugins/PluginListPage.tsx create mode 100644 public/app/features/plugins/state/actions.ts create mode 100644 public/app/features/plugins/state/reducers.ts create mode 100644 public/app/features/plugins/state/selectors.ts diff --git a/public/app/features/plugins/PluginActionBar.tsx b/public/app/features/plugins/PluginActionBar.tsx new file mode 100644 index 00000000000..e420bc3eca6 --- /dev/null +++ b/public/app/features/plugins/PluginActionBar.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +export default function({ searchQuery, onQueryChange }) { + return ( +
+
+ +
+ + ); +} diff --git a/public/app/features/plugins/PluginList.tsx b/public/app/features/plugins/PluginList.tsx new file mode 100644 index 00000000000..02d7dac0dce --- /dev/null +++ b/public/app/features/plugins/PluginList.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import classNames from 'classnames/bind'; +import PluginListItem from './PluginListItem'; + +export default function PluginList({ plugins, layout }) { + const listStyle = classNames({ + 'card-section': true, + 'card-list-layout-grid': layout === 'grid', + 'card-list-layout-list': layout === 'list', + }); + + return ( +
+
    + {plugins.map((plugin, index) => { + return ; + })} +
+
+ ); +} diff --git a/public/app/features/plugins/PluginListItem.tsx b/public/app/features/plugins/PluginListItem.tsx new file mode 100644 index 00000000000..a143625459a --- /dev/null +++ b/public/app/features/plugins/PluginListItem.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +export default function PluginListItem({ plugin }) { + return ( +
  • + +
    +
    + + {plugin.type} +
    + {plugin.hasUpdate && ( +
    + Update available! +
    + )} +
    +
    +
    + +
    +
    +
    {plugin.name}
    +
    {`By ${plugin.info.author.name}`}
    +
    +
    +     +
    • + ); +} diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx new file mode 100644 index 00000000000..73837cfe75f --- /dev/null +++ b/public/app/features/plugins/PluginListPage.tsx @@ -0,0 +1,53 @@ +import React, { PureComponent } from 'react'; +import { hot } from 'react-hot-loader'; +import { connect } from 'react-redux'; +import PageHeader from '../../core/components/PageHeader/PageHeader'; +import PluginActionBar from './PluginActionBar'; +import PluginList from './PluginList'; +import { NavModel, Plugin } from '../../types'; +import { loadPlugins } from './state/actions'; +import { getNavModel } from '../../core/selectors/navModel'; +import { getPlugins } from './state/selectors'; + +interface Props { + navModel: NavModel; + plugins: Plugin[]; + loadPlugins: typeof loadPlugins; +} + +export class PluginListPage extends PureComponent { + componentDidMount() { + this.fetchPlugins(); + } + + async fetchPlugins() { + await this.props.loadPlugins(); + } + + render() { + const { navModel, plugins } = this.props; + + return ( +
    + +
    + {}} /> + {plugins && } +
    +
    + ); + } +} + +function mapStateToProps(state) { + return { + navModel: getNavModel(state.navIndex, 'plugins'), + plugins: getPlugins(state.plugins), + }; +} + +const mapDispatchToProps = { + loadPlugins, +}; + +export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(PluginListPage)); diff --git a/public/app/features/plugins/state/actions.ts b/public/app/features/plugins/state/actions.ts new file mode 100644 index 00000000000..d044a7ba56f --- /dev/null +++ b/public/app/features/plugins/state/actions.ts @@ -0,0 +1,28 @@ +import { Plugin, StoreState } from 'app/types'; +import { ThunkAction } from 'redux-thunk'; +import { getBackendSrv } from '../../../core/services/backend_srv'; + +export enum ActionTypes { + LoadPlugins = 'LOAD_PLUGINS', +} + +export interface LoadPluginsAction { + type: ActionTypes.LoadPlugins; + payload: Plugin[]; +} + +export const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({ + type: ActionTypes.LoadPlugins, + payload: plugins, +}); + +export type Action = LoadPluginsAction; + +type ThunkResult = ThunkAction; + +export function loadPlugins(): ThunkResult { + return async dispatch => { + const result = await getBackendSrv().get('api/plugins', { embedded: 0 }); + dispatch(pluginsLoaded(result)); + }; +} diff --git a/public/app/features/plugins/state/reducers.ts b/public/app/features/plugins/state/reducers.ts new file mode 100644 index 00000000000..af4089220b6 --- /dev/null +++ b/public/app/features/plugins/state/reducers.ts @@ -0,0 +1,16 @@ +import { Action, ActionTypes } from './actions'; +import { Plugin, PluginsState } from 'app/types'; + +export const initialState: PluginsState = { plugins: [] as Plugin[] }; + +export const pluginsReducer = (state = initialState, action: Action): PluginsState => { + switch (action.type) { + case ActionTypes.LoadPlugins: + return { ...state, plugins: action.payload }; + } + return state; +}; + +export default { + plugins: pluginsReducer, +}; diff --git a/public/app/features/plugins/state/selectors.ts b/public/app/features/plugins/state/selectors.ts new file mode 100644 index 00000000000..d436e9fa016 --- /dev/null +++ b/public/app/features/plugins/state/selectors.ts @@ -0,0 +1 @@ +export const getPlugins = state => state.plugins; diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index 015b4ae0b51..e4662c77367 100644 --- a/public/app/routes/routes.ts +++ b/public/app/routes/routes.ts @@ -5,6 +5,7 @@ import ServerStats from 'app/features/admin/ServerStats'; import AlertRuleList from 'app/features/alerting/AlertRuleList'; import TeamPages from 'app/features/teams/TeamPages'; import TeamList from 'app/features/teams/TeamList'; +import PluginListPage from 'app/features/plugins/PluginListPage'; import FolderSettingsPage from 'app/features/folders/FolderSettingsPage'; import FolderPermissions from 'app/features/folders/FolderPermissions'; @@ -245,9 +246,10 @@ export function setupAngularRoutes($routeProvider, $locationProvider) { controllerAs: 'ctrl', }) .when('/plugins', { - templateUrl: 'public/app/features/plugins/partials/plugin_list.html', - controller: 'PluginListCtrl', - controllerAs: 'ctrl', + template: '', + resolve: { + component: () => PluginListPage, + }, }) .when('/plugins/:pluginId/edit', { templateUrl: 'public/app/features/plugins/partials/plugin_edit.html', diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts index 8f6cf25043d..08d3d5bede0 100644 --- a/public/app/store/configureStore.ts +++ b/public/app/store/configureStore.ts @@ -6,6 +6,7 @@ import alertingReducers from 'app/features/alerting/state/reducers'; import teamsReducers from 'app/features/teams/state/reducers'; import foldersReducers from 'app/features/folders/state/reducers'; import dashboardReducers from 'app/features/dashboard/state/reducers'; +import pluginReducers from 'app/features/plugins/state/reducers'; const rootReducer = combineReducers({ ...sharedReducers, @@ -13,6 +14,7 @@ const rootReducer = combineReducers({ ...teamsReducers, ...foldersReducers, ...dashboardReducers, + ...pluginReducers, }); export let store; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index 778a1b21b55..4ec5c6f02cc 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -6,7 +6,7 @@ import { FolderDTO, FolderState, FolderInfo } from './folders'; import { DashboardState } from './dashboard'; import { DashboardAcl, OrgRole, PermissionLevel } from './acl'; import { DataSource } from './datasources'; -import { PluginMeta } from './plugins'; +import { PluginMeta, Plugin, PluginInfo, PluginsState } from './plugins'; export { Team, @@ -33,6 +33,9 @@ export { PermissionLevel, DataSource, PluginMeta, + PluginInfo, + Plugin, + PluginsState, }; export interface StoreState { diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index d26085f8e73..e1594296acb 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -17,3 +17,33 @@ export interface PluginMetaInfo { small: string; }; } + +export interface PluginInfo { + author: { + name: string; + url: string; + }; + description: string; + links: string[]; + logos: { small: string; large: string }; + screenshots: string; + updated: string; + version: string; +} + +export interface Plugin { + defaultNavUrl: string; + enabled: boolean; + hasUpdate: boolean; + id: string; + info: PluginInfo; + latestVersion: string; + name: string; + pinned: boolean; + state: string; + type: string; +} + +export interface PluginsState { + plugins: Plugin[]; +} From 0b7576a1f92992e87fb90ef6d519c676a81d5236 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 25 Sep 2018 16:21:52 +0200 Subject: [PATCH 03/16] filter plugins and layout mode --- .../LayoutSelector/LayoutSelector.tsx | 24 ++++++ .../app/features/plugins/PluginActionBar.tsx | 82 ++++++++++++++----- .../app/features/plugins/PluginListPage.tsx | 8 +- public/app/features/plugins/state/actions.ts | 26 +++++- public/app/features/plugins/state/reducers.ts | 8 +- .../app/features/plugins/state/selectors.ts | 11 ++- public/app/types/plugins.ts | 2 + 7 files changed, 132 insertions(+), 29 deletions(-) create mode 100644 public/app/core/components/LayoutSelector/LayoutSelector.tsx diff --git a/public/app/core/components/LayoutSelector/LayoutSelector.tsx b/public/app/core/components/LayoutSelector/LayoutSelector.tsx new file mode 100644 index 00000000000..85322dc9da0 --- /dev/null +++ b/public/app/core/components/LayoutSelector/LayoutSelector.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +export default function LayoutSelector({ mode, onLayoutModeChanged }) { + return ( +
    + + +
    + ); +} diff --git a/public/app/features/plugins/PluginActionBar.tsx b/public/app/features/plugins/PluginActionBar.tsx index e420bc3eca6..12b1353e9dd 100644 --- a/public/app/features/plugins/PluginActionBar.tsx +++ b/public/app/features/plugins/PluginActionBar.tsx @@ -1,24 +1,62 @@ -import React from 'react'; +import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; +import LayoutSelector from '../../core/components/LayoutSelector/LayoutSelector'; +import { setLayoutMode, setPluginsSearchQuery } from './state/actions'; +import { getPluginsSearchQuery, getLayoutMode } from './state/selectors'; -export default function({ searchQuery, onQueryChange }) { - return ( -
    -
    - -
    - - ); +export interface Props { + searchQuery: string; + layoutMode: string; + setLayoutMode: typeof setLayoutMode; + setPluginsSearchQuery: typeof setPluginsSearchQuery; } + +export class PluginActionBar extends PureComponent { + onSearchQueryChange = event => { + this.props.setPluginsSearchQuery(event.target.value); + }; + + render() { + const { searchQuery, layoutMode, setLayoutMode } = this.props; + + return ( +
    +
    + + setLayoutMode(mode)} /> +
    + + ); + } +} + +function mapStateToProps(state) { + return { + searchQuery: getPluginsSearchQuery(state.plugins), + layoutMode: getLayoutMode(state.plugins), + }; +} + +const mapDispatchToProps = { + setPluginsSearchQuery, + setLayoutMode, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(PluginActionBar); diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx index 73837cfe75f..a2b0348aefd 100644 --- a/public/app/features/plugins/PluginListPage.tsx +++ b/public/app/features/plugins/PluginListPage.tsx @@ -7,11 +7,12 @@ import PluginList from './PluginList'; import { NavModel, Plugin } from '../../types'; import { loadPlugins } from './state/actions'; import { getNavModel } from '../../core/selectors/navModel'; -import { getPlugins } from './state/selectors'; +import { getLayoutMode, getPlugins } from './state/selectors'; interface Props { navModel: NavModel; plugins: Plugin[]; + layoutMode: string; loadPlugins: typeof loadPlugins; } @@ -25,14 +26,14 @@ export class PluginListPage extends PureComponent { } render() { - const { navModel, plugins } = this.props; + const { navModel, plugins, layoutMode } = this.props; return (
    {}} /> - {plugins && } + {plugins && }
    ); @@ -43,6 +44,7 @@ function mapStateToProps(state) { return { navModel: getNavModel(state.navIndex, 'plugins'), plugins: getPlugins(state.plugins), + layoutMode: getLayoutMode(state.plugins), }; } diff --git a/public/app/features/plugins/state/actions.ts b/public/app/features/plugins/state/actions.ts index d044a7ba56f..b842037ffc7 100644 --- a/public/app/features/plugins/state/actions.ts +++ b/public/app/features/plugins/state/actions.ts @@ -4,6 +4,8 @@ import { getBackendSrv } from '../../../core/services/backend_srv'; export enum ActionTypes { LoadPlugins = 'LOAD_PLUGINS', + SetPluginsSearchQuery = 'SET_PLUGIN_SEARCH_QUERY', + SetLayoutMode = 'SET_LAYOUT_MODE', } export interface LoadPluginsAction { @@ -11,12 +13,32 @@ export interface LoadPluginsAction { payload: Plugin[]; } -export const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({ +export interface SetPluginsSearchQueryAction { + type: ActionTypes.SetPluginsSearchQuery; + payload: string; +} + +export interface SetLayoutModeAction { + type: ActionTypes.SetLayoutMode; + payload: string; +} + +export const setLayoutMode = (mode: string): SetLayoutModeAction => ({ + type: ActionTypes.SetLayoutMode, + payload: mode, +}); + +export const setPluginsSearchQuery = (query: string): SetPluginsSearchQueryAction => ({ + type: ActionTypes.SetPluginsSearchQuery, + payload: query, +}); + +const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({ type: ActionTypes.LoadPlugins, payload: plugins, }); -export type Action = LoadPluginsAction; +export type Action = LoadPluginsAction | SetPluginsSearchQueryAction | SetLayoutModeAction; type ThunkResult = ThunkAction; diff --git a/public/app/features/plugins/state/reducers.ts b/public/app/features/plugins/state/reducers.ts index af4089220b6..aadf78afe5e 100644 --- a/public/app/features/plugins/state/reducers.ts +++ b/public/app/features/plugins/state/reducers.ts @@ -1,12 +1,18 @@ import { Action, ActionTypes } from './actions'; import { Plugin, PluginsState } from 'app/types'; -export const initialState: PluginsState = { plugins: [] as Plugin[] }; +export const initialState: PluginsState = { plugins: [] as Plugin[], searchQuery: '', layoutMode: 'grid' }; export const pluginsReducer = (state = initialState, action: Action): PluginsState => { switch (action.type) { case ActionTypes.LoadPlugins: return { ...state, plugins: action.payload }; + + case ActionTypes.SetPluginsSearchQuery: + return { ...state, searchQuery: action.payload }; + + case ActionTypes.SetLayoutMode: + return { ...state, layoutMode: action.payload }; } return state; }; diff --git a/public/app/features/plugins/state/selectors.ts b/public/app/features/plugins/state/selectors.ts index d436e9fa016..80c74649a4b 100644 --- a/public/app/features/plugins/state/selectors.ts +++ b/public/app/features/plugins/state/selectors.ts @@ -1 +1,10 @@ -export const getPlugins = state => state.plugins; +export const getPlugins = state => { + const regex = new RegExp(state.searchQuery, 'i'); + + return state.plugins.filter(item => { + return regex.test(item.name); + }); +}; + +export const getPluginsSearchQuery = state => state.searchQuery; +export const getLayoutMode = state => state.layoutMode; diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index e1594296acb..25c5b13153e 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -46,4 +46,6 @@ export interface Plugin { export interface PluginsState { plugins: Plugin[]; + searchQuery: string; + layoutMode: string; } From 64eace96c0a3b62895525be1ce4cd59897bfb7c0 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 25 Sep 2018 16:50:13 +0200 Subject: [PATCH 04/16] first test --- .../features/plugins/PluginListPage.test.tsx | 31 +++++++++++++++++++ .../app/features/plugins/PluginListPage.tsx | 2 +- .../PluginListPage.test.tsx.snap | 21 +++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 public/app/features/plugins/PluginListPage.test.tsx create mode 100644 public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap diff --git a/public/app/features/plugins/PluginListPage.test.tsx b/public/app/features/plugins/PluginListPage.test.tsx new file mode 100644 index 00000000000..830d1176eae --- /dev/null +++ b/public/app/features/plugins/PluginListPage.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { PluginListPage, Props } from './PluginListPage'; +import { NavModel, Plugin } from '../../types'; + +const setup = (propOverrides?: object) => { + const props: Props = { + navModel: {} as NavModel, + plugins: [] as Plugin[], + layoutMode: 'grid', + loadPlugins: jest.fn(), + }; + + Object.assign(props, propOverrides); + + const wrapper = shallow(); + const instance = wrapper.instance() as PluginListPage; + + return { + wrapper, + instance, + }; +}; + +describe('Render', () => { + it('should render component', () => { + const { wrapper } = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx index a2b0348aefd..358eb4a7887 100644 --- a/public/app/features/plugins/PluginListPage.tsx +++ b/public/app/features/plugins/PluginListPage.tsx @@ -9,7 +9,7 @@ import { loadPlugins } from './state/actions'; import { getNavModel } from '../../core/selectors/navModel'; import { getLayoutMode, getPlugins } from './state/selectors'; -interface Props { +export interface Props { navModel: NavModel; plugins: Plugin[]; layoutMode: string; diff --git a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap new file mode 100644 index 00000000000..cb8c79bbcee --- /dev/null +++ b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
    + +
    + + +
    +
    +`; From 70c3e1f3bcae133e05463cbdaeb71b4dd1206d3d Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 26 Sep 2018 15:12:06 +0200 Subject: [PATCH 05/16] tests --- .../features/plugins/PluginActionBar.test.tsx | 30 +++ .../app/features/plugins/PluginList.test.tsx | 24 ++ .../features/plugins/PluginListItem.test.tsx | 33 +++ .../app/features/plugins/PluginListPage.tsx | 2 +- .../features/plugins/__mocks__/pluginMocks.ts | 59 +++++ .../PluginActionBar.test.tsx.snap | 40 ++++ .../__snapshots__/PluginList.test.tsx.snap | 210 ++++++++++++++++++ .../PluginListItem.test.tsx.snap | 106 +++++++++ .../PluginListPage.test.tsx.snap | 5 +- .../features/plugins/state/selectors.test.ts | 31 +++ .../app/features/plugins/state/selectors.ts | 2 +- 11 files changed, 536 insertions(+), 6 deletions(-) create mode 100644 public/app/features/plugins/PluginActionBar.test.tsx create mode 100644 public/app/features/plugins/PluginList.test.tsx create mode 100644 public/app/features/plugins/PluginListItem.test.tsx create mode 100644 public/app/features/plugins/__mocks__/pluginMocks.ts create mode 100644 public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap create mode 100644 public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap create mode 100644 public/app/features/plugins/__snapshots__/PluginListItem.test.tsx.snap create mode 100644 public/app/features/plugins/state/selectors.test.ts diff --git a/public/app/features/plugins/PluginActionBar.test.tsx b/public/app/features/plugins/PluginActionBar.test.tsx new file mode 100644 index 00000000000..c761b37d9ea --- /dev/null +++ b/public/app/features/plugins/PluginActionBar.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { PluginActionBar, Props } from './PluginActionBar'; + +const setup = (propOverrides?: object) => { + const props: Props = { + searchQuery: '', + layoutMode: 'grid', + setLayoutMode: jest.fn(), + setPluginsSearchQuery: jest.fn(), + }; + + Object.assign(props, propOverrides); + + const wrapper = shallow(); + const instance = wrapper.instance() as PluginActionBar; + + return { + wrapper, + instance, + }; +}; + +describe('Render', () => { + it('should render component', () => { + const { wrapper } = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/plugins/PluginList.test.tsx b/public/app/features/plugins/PluginList.test.tsx new file mode 100644 index 00000000000..74f3ef441eb --- /dev/null +++ b/public/app/features/plugins/PluginList.test.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import PluginList from './PluginList'; +import { getMockPlugins } from './__mocks__/pluginMocks'; + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + plugins: getMockPlugins(5), + layout: 'grid', + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/plugins/PluginListItem.test.tsx b/public/app/features/plugins/PluginListItem.test.tsx new file mode 100644 index 00000000000..175911c5e05 --- /dev/null +++ b/public/app/features/plugins/PluginListItem.test.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import PluginListItem from './PluginListItem'; +import { getMockPlugin } from './__mocks__/pluginMocks'; + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + plugin: getMockPlugin(), + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render has plugin section', () => { + const mockPlugin = getMockPlugin(); + mockPlugin.hasUpdate = true; + const wrapper = setup({ + plugin: mockPlugin, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/plugins/PluginListPage.tsx b/public/app/features/plugins/PluginListPage.tsx index 358eb4a7887..5a467881d94 100644 --- a/public/app/features/plugins/PluginListPage.tsx +++ b/public/app/features/plugins/PluginListPage.tsx @@ -32,7 +32,7 @@ export class PluginListPage extends PureComponent {
    - {}} /> + {plugins && }
    diff --git a/public/app/features/plugins/__mocks__/pluginMocks.ts b/public/app/features/plugins/__mocks__/pluginMocks.ts new file mode 100644 index 00000000000..d8dd67d5b61 --- /dev/null +++ b/public/app/features/plugins/__mocks__/pluginMocks.ts @@ -0,0 +1,59 @@ +import { Plugin } from 'app/types'; + +export const getMockPlugins = (amount: number): Plugin[] => { + const plugins = []; + + for (let i = 0; i <= amount; i++) { + plugins.push({ + defaultNavUrl: 'some/url', + enabled: false, + hasUpdate: false, + id: `${i}`, + info: { + author: { + name: 'Grafana Labs', + url: 'url/to/GrafanaLabs', + }, + description: 'pretty decent plugin', + links: ['one link'], + logos: { small: 'small/logo', large: 'large/logo' }, + screenshots: `screenshot/${i}`, + updated: '2018-09-26', + version: '1', + }, + latestVersion: `1.${i}`, + name: `pretty cool plugin-${i}`, + pinned: false, + state: '', + type: '', + }); + } + + return plugins; +}; + +export const getMockPlugin = () => { + return { + defaultNavUrl: 'some/url', + enabled: false, + hasUpdate: false, + id: '1', + info: { + author: { + name: 'Grafana Labs', + url: 'url/to/GrafanaLabs', + }, + description: 'pretty decent plugin', + links: ['one link'], + logos: { small: 'small/logo', large: 'large/logo' }, + screenshots: 'screenshot/1', + updated: '2018-09-26', + version: '1', + }, + latestVersion: '1', + name: 'pretty cool plugin 1', + pinned: false, + state: '', + type: '', + }; +}; diff --git a/public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap new file mode 100644 index 00000000000..30cb53cea27 --- /dev/null +++ b/public/app/features/plugins/__snapshots__/PluginActionBar.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/features/plugins/__snapshots__/PluginList.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap new file mode 100644 index 00000000000..176304b7b11 --- /dev/null +++ b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap @@ -0,0 +1,210 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
    +
      + + + + + + +
    +
    +`; diff --git a/public/app/features/plugins/__snapshots__/PluginListItem.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginListItem.test.tsx.snap new file mode 100644 index 00000000000..fc0cc68c522 --- /dev/null +++ b/public/app/features/plugins/__snapshots__/PluginListItem.test.tsx.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
  • + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + pretty cool plugin 1 +
    +
    + By Grafana Labs +
    +
    +
    +     +
    • +`; + +exports[`Render should render has plugin section 1`] = ` +
  • + +
    +
    + +
    +
    + + Update available! + +
    +
    +
    +
    + +
    +
    +
    + pretty cool plugin 1 +
    +
    + By Grafana Labs +
    +
    +
    +     +
    • +`; diff --git a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap index cb8c79bbcee..9c428b54ca0 100644 --- a/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap +++ b/public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap @@ -8,10 +8,7 @@ exports[`Render should render component 1`] = `
    - + { + const mockState = initialState; + + it('should return search query', () => { + mockState.searchQuery = 'test'; + const query = getPluginsSearchQuery(mockState); + + expect(query).toEqual(mockState.searchQuery); + }); + + it('should return plugins', () => { + mockState.plugins = getMockPlugins(5); + mockState.searchQuery = ''; + + const plugins = getPlugins(mockState); + + expect(plugins).toEqual(mockState.plugins); + }); + + it('should filter plugins', () => { + mockState.searchQuery = 'plugin-1'; + + const plugins = getPlugins(mockState); + + expect(plugins.length).toEqual(1); + }); +}); diff --git a/public/app/features/plugins/state/selectors.ts b/public/app/features/plugins/state/selectors.ts index 80c74649a4b..e1d16462527 100644 --- a/public/app/features/plugins/state/selectors.ts +++ b/public/app/features/plugins/state/selectors.ts @@ -2,7 +2,7 @@ export const getPlugins = state => { const regex = new RegExp(state.searchQuery, 'i'); return state.plugins.filter(item => { - return regex.test(item.name); + return regex.test(item.name) || regex.test(item.info.author.name) || regex.test(item.info.description); }); }; From 5c24fa68a5da8da124fd224dfdf2084ad6b528a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 27 Sep 2018 11:57:28 +0200 Subject: [PATCH 06/16] explore: fixes to dark theme, fixes #13349 --- public/app/features/explore/Explore.tsx | 9 +++++---- public/sass/components/_form_select_box.scss | 18 ++++++------------ public/sass/pages/_explore.scss | 2 +- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 187d68133cd..50d894de43f 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -528,10 +528,11 @@ export class Explore extends React.Component { {!datasourceMissing ? (
    + +
    diff --git a/public/app/features/templating/text_variable.ts b/public/app/features/templating/TextBoxVariable.ts similarity index 88% rename from public/app/features/templating/text_variable.ts rename to public/app/features/templating/TextBoxVariable.ts index 3459b99f602..331ff4f95b8 100644 --- a/public/app/features/templating/text_variable.ts +++ b/public/app/features/templating/TextBoxVariable.ts @@ -1,13 +1,13 @@ import { Variable, assignModelProperties, variableTypes } from './variable'; -export class TextVariable implements Variable { +export class TextBoxVariable implements Variable { query: string; current: any; options: any[]; skipUrlSync: boolean; defaults = { - type: 'text', + type: 'textbox', name: '', hide: 2, label: '', @@ -51,8 +51,8 @@ export class TextVariable implements Variable { } } -variableTypes['text'] = { - name: 'Text', - ctor: TextVariable, +variableTypes['textbox'] = { + name: 'Text box', + ctor: TextBoxVariable, description: 'Define a textbox variable, where users can enter any arbitrary string', }; diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index 424494f66b2..b872fa6cd4a 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -9,7 +9,7 @@ import { DatasourceVariable } from './datasource_variable'; import { CustomVariable } from './custom_variable'; import { ConstantVariable } from './constant_variable'; import { AdhocVariable } from './adhoc_variable'; -import { TextVariable } from './text_variable'; +import { TextBoxVariable } from './TextBoxVariable'; coreModule.factory('templateSrv', () => { return templateSrv; @@ -23,5 +23,5 @@ export { CustomVariable, ConstantVariable, AdhocVariable, - TextVariable + TextBoxVariable, }; diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index ed8398738da..ac4450c20a2 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -155,10 +155,10 @@
    -
    +
    Text options
    - Value + Default value
    From 11ee65d35a6c9fbab094bb950598ae3a3a779b87 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 27 Sep 2018 14:51:00 +0200 Subject: [PATCH 12/16] deletez --- public/app/features/plugins/PluginList.tsx | 2 +- public/app/features/plugins/all.ts | 1 - .../plugins/partials/plugin_list.html | 45 ------------------- .../app/features/plugins/plugin_list_ctrl.ts | 30 ------------- 4 files changed, 1 insertion(+), 77 deletions(-) delete mode 100644 public/app/features/plugins/partials/plugin_list.html delete mode 100644 public/app/features/plugins/plugin_list_ctrl.ts diff --git a/public/app/features/plugins/PluginList.tsx b/public/app/features/plugins/PluginList.tsx index 2c47e755de3..0074839e754 100644 --- a/public/app/features/plugins/PluginList.tsx +++ b/public/app/features/plugins/PluginList.tsx @@ -5,7 +5,7 @@ import { Plugin } from 'app/types'; import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; interface Props { - plugins: PluginListItem[]; + plugins: Plugin[]; layoutMode: LayoutMode; } diff --git a/public/app/features/plugins/all.ts b/public/app/features/plugins/all.ts index fd19ea963b6..5be7593f68d 100644 --- a/public/app/features/plugins/all.ts +++ b/public/app/features/plugins/all.ts @@ -1,6 +1,5 @@ import './plugin_edit_ctrl'; import './plugin_page_ctrl'; -import './plugin_list_ctrl'; import './import_list/import_list'; import './ds_edit_ctrl'; import './ds_dashboards_ctrl'; diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html deleted file mode 100644 index 04b5bf9c791..00000000000 --- a/public/app/features/plugins/partials/plugin_list.html +++ /dev/null @@ -1,45 +0,0 @@ - - -
    -
    -
    - - -
    -
    - - Find more plugins on Grafana.com - -
    - -
    - -
      -
    1. - -
      -
      - - {{plugin.type}} -
      -
      - Update available! -
      -
      -
      -
      - -
      -
      -
      {{plugin.name}}
      -
      By {{plugin.info.author.name}}
      -
      -
      -       -
      2. -
    -
    -
    diff --git a/public/app/features/plugins/plugin_list_ctrl.ts b/public/app/features/plugins/plugin_list_ctrl.ts deleted file mode 100644 index 315252364cc..00000000000 --- a/public/app/features/plugins/plugin_list_ctrl.ts +++ /dev/null @@ -1,30 +0,0 @@ -import angular from 'angular'; -import _ from 'lodash'; - -export class PluginListCtrl { - plugins: any[]; - tabIndex: number; - navModel: any; - searchQuery: string; - allPlugins: any[]; - - /** @ngInject */ - constructor(private backendSrv: any, $location, navModelSrv) { - this.tabIndex = 0; - this.navModel = navModelSrv.getNav('cfg', 'plugins', 0); - - this.backendSrv.get('api/plugins', { embedded: 0 }).then(plugins => { - this.plugins = plugins; - this.allPlugins = plugins; - }); - } - - onQueryUpdated() { - const regex = new RegExp(this.searchQuery, 'ig'); - this.plugins = _.filter(this.allPlugins, item => { - return regex.test(item.name) || regex.test(item.type); - }); - } -} - -angular.module('grafana.controllers').controller('PluginListCtrl', PluginListCtrl); From 5873a7132471297331d1bca7d42663a951e748df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 27 Sep 2018 14:58:46 +0200 Subject: [PATCH 13/16] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ecc3339600..e0fd5caf819 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * **Prometheus**: Adhoc-filtering for Prometheus dashboards [#13212](https://github.com/grafana/grafana/issues/13212) * **Singlestat**: Fix gauge display accuracy for percents [#13270](https://github.com/grafana/grafana/issues/13270), thx [@tianon](https://github.com/tianon) * **Dashboard**: Prevent auto refresh from starting when loading dashboard with absolute time range [#12030](https://github.com/grafana/grafana/issues/12030) +* **Templating**: New templating variable type `Text box` that allows free text input [#3173](https://github.com/grafana/grafana/issues/3173) # 5.3.0 (unreleased) From 88f36cbd22b1b0d9631fcd7bf34de10f7fa87b88 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Thu, 27 Sep 2018 15:15:41 +0200 Subject: [PATCH 14/16] Compile TS of the whole project to detect type errors - was not covered by TS lint - TS errors are only noticed in broken builds - added grunt task to run `tsc --noEmit` --- scripts/grunt/default_task.js | 9 +++++---- scripts/grunt/options/exec.js | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/scripts/grunt/default_task.js b/scripts/grunt/default_task.js index 07519cdd6c8..bfa4080da4c 100644 --- a/scripts/grunt/default_task.js +++ b/scripts/grunt/default_task.js @@ -1,5 +1,5 @@ // Lint and build CSS -module.exports = function(grunt) { +module.exports = function (grunt) { 'use strict'; grunt.registerTask('default', [ @@ -18,15 +18,16 @@ module.exports = function(grunt) { grunt.registerTask('precommit', [ 'sasslint', 'exec:tslint', + 'exec:tsc', 'no-only-tests' ]); - grunt.registerTask('no-only-tests', function() { + grunt.registerTask('no-only-tests', function () { var files = grunt.file.expand('public/**/*_specs\.ts', 'public/**/*_specs\.js'); - files.forEach(function(spec) { + files.forEach(function (spec) { var rows = grunt.file.read(spec).split('\n'); - rows.forEach(function(row) { + rows.forEach(function (row) { if (row.indexOf('.only(') > 0) { grunt.log.errorlns(row); grunt.fail.warn('found only statement in test: ' + spec) diff --git a/scripts/grunt/options/exec.js b/scripts/grunt/options/exec.js index 92e530cd5fd..d01a993be67 100644 --- a/scripts/grunt/options/exec.js +++ b/scripts/grunt/options/exec.js @@ -1,8 +1,9 @@ -module.exports = function(config, grunt) { +module.exports = function (config, grunt) { 'use strict'; return { tslint: 'node ./node_modules/tslint/lib/tslintCli.js -c tslint.json --project ./tsconfig.json', + tsc: 'yarn tsc --noEmit', jest: 'node ./node_modules/jest-cli/bin/jest.js --maxWorkers 2', webpack: 'node ./node_modules/webpack/bin/webpack.js --config scripts/webpack/webpack.prod.js', }; From 55e4db5cfce230432ab2cd1a15215047a4ec32bb Mon Sep 17 00:00:00 2001 From: Steve Kreitzer Date: Thu, 27 Sep 2018 19:58:07 -0400 Subject: [PATCH 15/16] Adding AWS Isolated Regions --- pkg/tsdb/cloudwatch/metric_find_query.go | 2 +- public/app/plugins/datasource/cloudwatch/partials/config.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/tsdb/cloudwatch/metric_find_query.go b/pkg/tsdb/cloudwatch/metric_find_query.go index e1e131d9f3a..ee9d9583c4e 100644 --- a/pkg/tsdb/cloudwatch/metric_find_query.go +++ b/pkg/tsdb/cloudwatch/metric_find_query.go @@ -235,7 +235,7 @@ func parseMultiSelectValue(input string) []string { func (e *CloudWatchExecutor) handleGetRegions(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) { regions := []string{ "ap-northeast-1", "ap-northeast-2", "ap-southeast-1", "ap-southeast-2", "ap-south-1", "ca-central-1", "cn-north-1", "cn-northwest-1", - "eu-central-1", "eu-west-1", "eu-west-2", "eu-west-3", "sa-east-1", "us-east-1", "us-east-2", "us-gov-west-1", "us-west-1", "us-west-2", + "eu-central-1", "eu-west-1", "eu-west-2", "eu-west-3", "sa-east-1", "us-east-1", "us-east-2", "us-gov-west-1", "us-west-1", "us-west-2", "us-isob-east-1", "us-iso-east-1", } result := make([]suggestData, 0) diff --git a/public/app/plugins/datasource/cloudwatch/partials/config.html b/public/app/plugins/datasource/cloudwatch/partials/config.html index a4df0c14807..e5ab0910cba 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/config.html +++ b/public/app/plugins/datasource/cloudwatch/partials/config.html @@ -39,7 +39,7 @@
    - + Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region. From abefadb333760f97a77731a09cb6adbe3234eb8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Sep 2018 09:30:56 +0200 Subject: [PATCH 16/16] fix: preloader element issue --- public/views/index.template.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/views/index.template.html b/public/views/index.template.html index ec51a12d34f..c39d5e08321 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -275,7 +275,10 @@ document.head.insertBefore(myCSS, document.head.childNodes[document.head.childNodes.length - 1].nextSibling); // switch loader to show all has loaded window.onload = function() { - document.getElementsByClassName("preloader")[0].className = "preloader preloader--done"; + var preloader = document.getElementsByClassName("preloader"); + if (preloader.length) { + preloader[0].className = "preloader preloader--done"; + } };