Skip to content

N
nexpie-grafana-theme
Commit ccbff592 by Peter Holmberg
Options

adding default value and update actions

parent affb04a3
Showing with 89 additions and 38 deletions
public/app/core/components/Picker/SimplePicker.tsx
...@@ -4,17 +4,19 @@ import DescriptionOption from './DescriptionOption'; ...@@ -4,17 +4,19 @@ import DescriptionOption from './DescriptionOption';
import ResetStyles from './ResetStyles'; import ResetStyles from './ResetStyles';
interface Props { interface Props {
options: any[];
className?: string; className?: string;
defaultValue: any;
getOptionLabel: (item: any) => string;
getOptionValue: (item: any) => string;
onSelected: (item: any) => {} | void;
options: any[];
placeholder?: string; placeholder?: string;
width: number; width: number;
onSelected: (item: any) => {} | void;
getOptionValue: (item: any) => string;
getOptionLabel: (item: any) => string;
} }
const SimplePicker: SFC<Props> = ({ const SimplePicker: SFC<Props> = ({
className, className,
defaultValue,
getOptionLabel, getOptionLabel,
getOptionValue, getOptionValue,
onSelected, onSelected,
...@@ -24,18 +26,19 @@ const SimplePicker: SFC<Props> = ({ ...@@ -24,18 +26,19 @@ const SimplePicker: SFC<Props> = ({
}) => { }) => {
return ( return (
<Select <Select
isSearchable={false}
classNamePrefix={`gf-form-select-box`} classNamePrefix={`gf-form-select-box`}
className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`} className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
placeholder={placeholder || 'Choose'}
options={options}
onChange={onSelected}
components={{ components={{
Option: DescriptionOption, Option: DescriptionOption,
}} }}
styles={ResetStyles} defaultValue={defaultValue}
getOptionValue={getOptionValue}
getOptionLabel={getOptionLabel} getOptionLabel={getOptionLabel}
getOptionValue={getOptionValue}
isSearchable={false}
onChange={onSelected}
options={options}
placeholder={placeholder || 'Choose'}
styles={ResetStyles}
/> />
); );
}; };
......
public/app/features/dashboard/state/actions.ts
...@@ -13,6 +13,7 @@ import { ...@@ -13,6 +13,7 @@ import {
export enum ActionTypes { export enum ActionTypes {
LoadDashboardPermissions = 'LOAD_DASHBOARD_PERMISSIONS', LoadDashboardPermissions = 'LOAD_DASHBOARD_PERMISSIONS',
LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS',
} }
export interface LoadDashboardPermissionsAction { export interface LoadDashboardPermissionsAction {
...@@ -20,7 +21,12 @@ export interface LoadDashboardPermissionsAction { ...@@ -20,7 +21,12 @@ export interface LoadDashboardPermissionsAction {
payload: DashboardAcl[]; payload: DashboardAcl[];
} }
export type Action = LoadDashboardPermissionsAction; export interface LoadStarredDashboardsAction {
type: ActionTypes.LoadStarredDashboards;
payload: DashboardAcl[];
}
export type Action = LoadDashboardPermissionsAction | LoadStarredDashboardsAction;
type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>; type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
...@@ -29,6 +35,11 @@ export const loadDashboardPermissions = (items: DashboardAclDTO[]): LoadDashboar ...@@ -29,6 +35,11 @@ export const loadDashboardPermissions = (items: DashboardAclDTO[]): LoadDashboar
payload: items, payload: items,
}); });
const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
type: ActionTypes.LoadStarredDashboards,
payload: dashboards,
});
export function getDashboardPermissions(id: number): ThunkResult<void> { export function getDashboardPermissions(id: number): ThunkResult<void> {
return async dispatch => { return async dispatch => {
const permissions = await getBackendSrv().get(`/api/dashboards/id/${id}/permissions`); const permissions = await getBackendSrv().get(`/api/dashboards/id/${id}/permissions`);
...@@ -36,6 +47,13 @@ export function getDashboardPermissions(id: number): ThunkResult<void> { ...@@ -36,6 +47,13 @@ export function getDashboardPermissions(id: number): ThunkResult<void> {
}; };
} }
export function loadStarredDashboards(): ThunkResult<void> {
return async dispatch => {
const starredDashboards = await getBackendSrv().search({ starred: true });
dispatch(starredDashboardsLoaded(starredDashboards));
};
}
function toUpdateItem(item: DashboardAcl): DashboardAclUpdateDTO { function toUpdateItem(item: DashboardAcl): DashboardAclUpdateDTO {
return { return {
userId: item.userId, userId: item.userId,
......
public/app/features/org/OrgDetailsPage.tsx
...@@ -12,7 +12,10 @@ import { ...@@ -12,7 +12,10 @@ import {
setOrganizationTheme, setOrganizationTheme,
setOrganizationHomeDashboard, setOrganizationHomeDashboard,
setOrganizationTimezone, setOrganizationTimezone,
updateOrganization,
updateOrganizationPreferences,
} from './state/actions'; } from './state/actions';
import { loadStarredDashboards } from '../dashboard/state/actions';
import { DashboardAcl, NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types'; import { DashboardAcl, NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types';
import { getNavModel } from '../../core/selectors/navModel'; import { getNavModel } from '../../core/selectors/navModel';
...@@ -23,29 +26,33 @@ export interface Props { ...@@ -23,29 +26,33 @@ export interface Props {
starredDashboards: DashboardAcl[]; starredDashboards: DashboardAcl[];
loadOrganization: typeof loadOrganization; loadOrganization: typeof loadOrganization;
loadOrganizationPreferences: typeof loadOrganizationPreferences; loadOrganizationPreferences: typeof loadOrganizationPreferences;
loadStarredDashboards: typeof loadStarredDashboards;
setOrganizationName: typeof setOrganizationName; setOrganizationName: typeof setOrganizationName;
setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard; setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
setOrganizationTheme: typeof setOrganizationTheme; setOrganizationTheme: typeof setOrganizationTheme;
setOrganizationTimezone: typeof setOrganizationTimezone; setOrganizationTimezone: typeof setOrganizationTimezone;
updateOrganization: typeof updateOrganization;
updateOrganizationPreferences: typeof updateOrganizationPreferences;
} }
export class OrgDetailsPage extends PureComponent<Props> { export class OrgDetailsPage extends PureComponent<Props> {
async componentDidMount() { async componentDidMount() {
this.fetchOrganisation(); await this.props.loadStarredDashboards();
}
async fetchOrganisation() {
await this.props.loadOrganization(); await this.props.loadOrganization();
await this.props.loadOrganizationPreferences(); await this.props.loadOrganizationPreferences();
} }
onOrgNameChange = event => { onOrgNameChange = name => {
this.props.setOrganizationName(event.target.value); this.props.setOrganizationName(name);
}; };
onSubmitForm = () => {}; onUpdateOrganization = () => {
this.props.updateOrganization();
};
onSubmitPreferences = () => {}; onSubmitPreferences = () => {
this.props.updateOrganizationPreferences();
};
onThemeChange = theme => { onThemeChange = theme => {
this.props.setOrganizationTheme(theme); this.props.setOrganizationTheme(theme);
...@@ -72,7 +79,7 @@ export class OrgDetailsPage extends PureComponent<Props> { ...@@ -72,7 +79,7 @@ export class OrgDetailsPage extends PureComponent<Props> {
<div> <div>
<OrgProfile <OrgProfile
onOrgNameChange={name => this.onOrgNameChange(name)} onOrgNameChange={name => this.onOrgNameChange(name)}
onSubmit={this.onSubmitForm} onSubmit={this.onUpdateOrganization}
orgName={organization.name} orgName={organization.name}
/> />
<OrgPreferences <OrgPreferences
...@@ -103,10 +110,13 @@ function mapStateToProps(state: StoreState) { ...@@ -103,10 +110,13 @@ function mapStateToProps(state: StoreState) {
const mapDispatchToProps = { const mapDispatchToProps = {
loadOrganization, loadOrganization,
loadOrganizationPreferences, loadOrganizationPreferences,
loadStarredDashboards,
setOrganizationName, setOrganizationName,
setOrganizationTheme, setOrganizationTheme,
setOrganizationHomeDashboard, setOrganizationHomeDashboard,
setOrganizationTimezone, setOrganizationTimezone,
updateOrganization,
updateOrganizationPreferences,
}; };
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage)); export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));
public/app/features/org/OrgPreferences.tsx
...@@ -29,15 +29,22 @@ const OrgPreferences: SFC<Props> = ({ ...@@ -29,15 +29,22 @@ const OrgPreferences: SFC<Props> = ({
]; ];
return ( return (
<form className="section gf-form-group" onSubmit={onSubmit}> <form
className="section gf-form-group"
onSubmit={event => {
event.preventDefault();
onSubmit();
}}
>
<h3 className="page-heading">Preferences</h3> <h3 className="page-heading">Preferences</h3>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-11">UI Theme</span> <span className="gf-form-label width-11">UI Theme</span>
<SimplePicker <SimplePicker
defaultValue={themes.find(theme => theme.value === preferences.theme)}
options={themes} options={themes}
getOptionValue={i => i.value} getOptionValue={i => i.value}
getOptionLabel={i => i.text} getOptionLabel={i => i.text}
onSelected={theme => onThemeChange(theme)} onSelected={theme => onThemeChange(theme.value)}
width={20} width={20}
/> />
</div> </div>
...@@ -53,6 +60,7 @@ const OrgPreferences: SFC<Props> = ({ ...@@ -53,6 +60,7 @@ const OrgPreferences: SFC<Props> = ({
</Tooltip> </Tooltip>
</span> </span>
<SimplePicker <SimplePicker
defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
getOptionValue={i => i.id} getOptionValue={i => i.id}
getOptionLabel={i => i.title} getOptionLabel={i => i.title}
onSelected={(dashboard: DashboardAcl) => onDashboardChange(dashboard.id)} onSelected={(dashboard: DashboardAcl) => onDashboardChange(dashboard.id)}
...@@ -64,9 +72,10 @@ const OrgPreferences: SFC<Props> = ({ ...@@ -64,9 +72,10 @@ const OrgPreferences: SFC<Props> = ({
<div className="gf-form"> <div className="gf-form">
<label className="gf-form-label width-11">Timezone</label> <label className="gf-form-label width-11">Timezone</label>
<SimplePicker <SimplePicker
defaultValue={timezones.find(timezone => timezone.value === preferences.timezone)}
getOptionValue={i => i.value} getOptionValue={i => i.value}
getOptionLabel={i => i.text} getOptionLabel={i => i.text}
onSelected={timezone => onTimeZoneChange(timezone)} onSelected={timezone => onTimeZoneChange(timezone.value)}
options={timezones} options={timezones}
width={20} width={20}
/> />
......
public/app/features/org/OrgProfile.tsx
...@@ -10,7 +10,14 @@ const OrgProfile: SFC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => { ...@@ -10,7 +10,14 @@ const OrgProfile: SFC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
return ( return (
<div> <div>
<h3 className="page-sub-heading">Organization profile</h3> <h3 className="page-sub-heading">Organization profile</h3>
<form name="orgForm" className="gf-form-group" onSubmit={onSubmit}> <form
name="orgForm"
className="gf-form-group"
onSubmit={event => {
event.preventDefault();
onSubmit();
}}
>
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-28"> <div className="gf-form max-width-28">
<span className="gf-form-label">Organization name</span> <span className="gf-form-label">Organization name</span>
......
public/app/features/org/state/actions.ts
...@@ -59,11 +59,6 @@ const preferencesLoaded = (preferences: OrganizationPreferences) => ({ ...@@ -59,11 +59,6 @@ const preferencesLoaded = (preferences: OrganizationPreferences) => ({
payload: preferences, payload: preferences,
}); });
const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
type: ActionTypes.LoadStarredDashboards,
payload: dashboards,
});
export const setOrganizationName = (orgName: string) => ({ export const setOrganizationName = (orgName: string) => ({
type: ActionTypes.SetOrganizationName, type: ActionTypes.SetOrganizationName,
payload: orgName, payload: orgName,
...@@ -95,7 +90,7 @@ export type Action = ...@@ -95,7 +90,7 @@ export type Action =
export function loadOrganization(): ThunkResult<void> { export function loadOrganization(): ThunkResult<void> {
return async dispatch => { return async dispatch => {
const organisationResponse = await loadOrg(); const organisationResponse = await getBackendSrv().get('/api/org');
dispatch(organisationLoaded(organisationResponse)); dispatch(organisationLoaded(organisationResponse));
return organisationResponse; return organisationResponse;
...@@ -104,18 +99,27 @@ export function loadOrganization(): ThunkResult<void> { ...@@ -104,18 +99,27 @@ export function loadOrganization(): ThunkResult<void> {
export function loadOrganizationPreferences(): ThunkResult<void> { export function loadOrganizationPreferences(): ThunkResult<void> {
return async dispatch => { return async dispatch => {
const preferencesResponse = await loadPreferences(); const preferencesResponse = await getBackendSrv().get('/api/org/preferences');
dispatch(preferencesLoaded(preferencesResponse)); dispatch(preferencesLoaded(preferencesResponse));
const starredDashboards = await getBackendSrv().search({ starred: true });
dispatch(starredDashboardsLoaded(starredDashboards));
}; };
} }
export async function loadOrg() { export function updateOrganization() {
return await await getBackendSrv().get('/api/org'); return async (dispatch, getStore) => {
const organization = getStore().organization.organization;
await getBackendSrv().put('/api/org', { name: organization.name });
dispatch(loadOrganization());
};
} }
export async function loadPreferences() { export function updateOrganizationPreferences() {
return await getBackendSrv().get('/api/org/preferences'); return async (dispatch, getStore) => {
const preferences = getStore().organization.preferences;
await getBackendSrv().put('/api/org/preferences', preferences);
dispatch(loadOrganizationPreferences());
};
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment