From a98f7e548fe5eb1fe9a92aab7f9ed741952a6661 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 25 Oct 2018 16:56:49 +0200 Subject: [PATCH] simple select --- .../core/components/Picker/SimplePicker.tsx | 33 +++++ .../app/core/components/Tooltip/Tooltip.tsx | 41 +++--- .../features/dashboard/state/reducers.test.ts | 4 +- .../app/features/dashboard/state/reducers.ts | 4 +- public/app/features/org/OrgDetailsPage.tsx | 133 ++++++++---------- public/app/features/org/OrgPreferences.tsx | 83 +++++++++++ public/app/features/org/OrgProfile.tsx | 37 +++++ public/app/features/org/state/actions.ts | 37 ++++- public/app/features/org/state/reducers.ts | 8 +- public/app/types/index.ts | 4 +- .../{organisation.ts => organization.ts} | 7 +- 11 files changed, 273 insertions(+), 118 deletions(-) create mode 100644 public/app/core/components/Picker/SimplePicker.tsx create mode 100644 public/app/features/org/OrgPreferences.tsx create mode 100644 public/app/features/org/OrgProfile.tsx rename public/app/types/{organisation.ts => organization.ts} (61%) diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx new file mode 100644 index 00000000000..c7d0fcd0549 --- /dev/null +++ b/public/app/core/components/Picker/SimplePicker.tsx @@ -0,0 +1,33 @@ +import React, { SFC } from 'react'; +import Select from 'react-select'; +import DescriptionOption from './DescriptionOption'; +import ResetStyles from './ResetStyles'; + +interface Props { + options: any[]; + className?: string; + onSelected: (item: any) => {} | void; + getOptionValue: (item: any) => string; + getOptionLabel: (item: any) => string; +} + +const SimplePicker: SFC = ({ className, getOptionLabel, getOptionValue, onSelected, options }) => { + return ( + - + {!this.state.isReady ? ( + + ) : ( +
+ this.onOrgNameChange(name)} + onSubmit={this.onSubmitForm} + orgName={this.state.orgName} + /> + this.onDashboardSelected(dashboard)} + onTimeZoneChange={() => {}} + onSubmit={this.onSubmitPreferences} + />
- -
- -
- -
-

Preferences

- -
- UI Theme -
- -
-
- -
- - Home Dashboard - {/**/} - {/*Not finding dashboard you want? Star it first, then it should appear in this select box.*/} - {/**/} - - {/**/} -
- -
- -
- { + onOrgNameChange(event.target.value); + }} + value={orgName} + /> +
+
+
+ +
+
+ + ); +}; + +export default OrgProfile; diff --git a/public/app/features/org/state/actions.ts b/public/app/features/org/state/actions.ts index e495e04855d..321a0328fec 100644 --- a/public/app/features/org/state/actions.ts +++ b/public/app/features/org/state/actions.ts @@ -1,15 +1,16 @@ import { ThunkAction } from 'redux-thunk'; -import { Organisation, OrganisationPreferences, StoreState } from 'app/types'; +import { DashboardAcl, Organization, OrganisationPreferences, StoreState } from 'app/types'; import { getBackendSrv } from '../../../core/services/backend_srv'; export enum ActionTypes { LoadOrganisation = 'LOAD_ORGANISATION', LoadPreferences = 'LOAD_PREFERENCES', + LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS', } -interface LoadOrganisationAction { +interface LoadOrganizationAction { type: ActionTypes.LoadOrganisation; - payload: Organisation; + payload: Organization; } interface LoadPreferencesAction { @@ -17,7 +18,12 @@ interface LoadPreferencesAction { payload: OrganisationPreferences; } -const organisationLoaded = (organisation: Organisation) => ({ +interface LoadStarredDashboardsAction { + type: ActionTypes.LoadStarredDashboards; + payload: DashboardAcl[]; +} + +const organisationLoaded = (organisation: Organization) => ({ type: ActionTypes.LoadOrganisation, payload: organisation, }); @@ -27,14 +33,31 @@ const preferencesLoaded = (preferences: OrganisationPreferences) => ({ payload: preferences, }); -export type Action = LoadOrganisationAction | LoadPreferencesAction; +const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({ + type: ActionTypes.LoadStarredDashboards, + payload: dashboards, +}); + +export type Action = LoadOrganizationAction | LoadPreferencesAction | LoadStarredDashboardsAction; type ThunkResult = ThunkAction; -export function loadOrganisation(): ThunkResult { +export function loadOrganization(): ThunkResult { return async dispatch => { const organisationResponse = await getBackendSrv().get('/api/org'); - const preferencesResponse = await getBackendSrv().get('/api/org/preferences'); dispatch(organisationLoaded(organisationResponse)); + + return organisationResponse; + }; +} + +export function loadOrganizationPreferences(): ThunkResult { + return async dispatch => { + const preferencesResponse = await getBackendSrv().get('/api/org/preferences'); dispatch(preferencesLoaded(preferencesResponse)); + + const starredDashboards = await getBackendSrv().search({ starred: true }); + dispatch(starredDashboardsLoaded(starredDashboards)); + + return preferencesResponse; }; } diff --git a/public/app/features/org/state/reducers.ts b/public/app/features/org/state/reducers.ts index d8d484b118d..aafff9eefa9 100644 --- a/public/app/features/org/state/reducers.ts +++ b/public/app/features/org/state/reducers.ts @@ -1,9 +1,10 @@ -import { Organisation, OrganisationPreferences, OrganisationState } from 'app/types'; +import { DashboardAcl, Organization, OrganisationPreferences, OrganisationState } from 'app/types'; import { Action, ActionTypes } from './actions'; const initialState: OrganisationState = { - organisation: {} as Organisation, + organisation: {} as Organization, preferences: {} as OrganisationPreferences, + starredDashboards: [] as DashboardAcl[], }; const organisationReducer = (state = initialState, action: Action): OrganisationState => { @@ -13,6 +14,9 @@ const organisationReducer = (state = initialState, action: Action): Organisation case ActionTypes.LoadPreferences: return { ...state, preferences: action.payload }; + + case ActionTypes.LoadStarredDashboards: + return { ...state, starredDashboards: action.payload }; } return state; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index 0c733e43e6c..5ab400e938d 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -22,7 +22,7 @@ import { } from './series'; import { PanelProps } from './panel'; import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins'; -import { Organisation, OrganisationPreferences, OrganisationState } from './organisation'; +import { Organization, OrganisationPreferences, OrganisationState } from './organization'; export { Team, @@ -71,7 +71,7 @@ export { DataQueryResponse, DataQueryOptions, PluginDashboard, - Organisation, + Organization, OrganisationState, OrganisationPreferences, }; diff --git a/public/app/types/organisation.ts b/public/app/types/organization.ts similarity index 61% rename from public/app/types/organisation.ts rename to public/app/types/organization.ts index 2fd49f5db79..7b738f61584 100644 --- a/public/app/types/organisation.ts +++ b/public/app/types/organization.ts @@ -1,4 +1,6 @@ -export interface Organisation { +import { DashboardAcl } from './acl'; + +export interface Organization { name: string; id: number; } @@ -10,6 +12,7 @@ export interface OrganisationPreferences { } export interface OrganisationState { - organisation: Organisation; + organisation: Organization; preferences: OrganisationPreferences; + starredDashboards: DashboardAcl[]; }