load preferences

public/app/features/org/OrgDetailsPage.tsx

@@ -0,0 +1,131 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+import PageHeader from '../../core/components/PageHeader/PageHeader';
+import { loadOrganisation } from './state/actions';
+import { NavModel, Organisation, OrganisationPreferences, StoreState } from 'app/types';
+import { getNavModel } from '../../core/selectors/navModel';
+
+export interface Props {
+  navModel: NavModel;
+  organisation: Organisation;
+  preferences: OrganisationPreferences;
+  loadOrganisation: typeof loadOrganisation;
+}
+
+interface State {
+  orgName: string;
+  hasSet: boolean;
+}
+
+export class OrgDetailsPage extends PureComponent<Props, State> {
+  state = {
+    orgName: '',
+    hasSet: false,
+  };
+
+  async componentDidMount() {
+    await this.props.loadOrganisation();
+  }
+
+  onOrgNameChange = event => {
+    this.setState({
+      orgName: event.target.value,
+    });
+  };
+
+  onSubmitForm = event => {};
+
+  render() {
+    const { navModel, preferences } = this.props;
+
+    const themes: any = [
+      { value: '', text: 'Default' },
+      { value: 'dark', text: 'Dark' },
+      { value: 'light', text: 'Light' },
+    ];
+
+    return (
+      <div>
+        <PageHeader model={navModel} />
+        <div className="page-container page-body">
+          <h3 className="page-sub-heading">Organisation profile</h3>
+          <form name="orgForm" className="gf-form-group" onSubmit={this.onSubmitForm}>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-28">
+                <span className="gf-form-label">Organization name</span>
+                <input
+                  className="gf-form-input"
+                  type="text"
+                  onChange={this.onOrgNameChange}
+                  value={this.state.orgName}
+                />
+              </div>
+            </div>
+
+            <div className="gf-form-button-row">
+              <button type="submit" className="btn btn-success">
+                Save
+              </button>
+            </div>
+          </form>
+          <form name="ctrl.prefsForm" className="section gf-form-group">
+            <h3 className="page-heading">Preferences</h3>
+
+            <div className="gf-form">
+              <span className="gf-form-label width-11">UI Theme</span>
+              <div className="gf-form-select-wrapper max-width-20">
+                <select className="gf-form-input" value={preferences.theme}>
+                  {themes.map((theme, index) => {
+                    return (
+                      <option key={`${theme.value}-${index}`} value={theme.value}>
+                        {theme.text}
+                      </option>
+                    );
+                  })}
+                </select>
+              </div>
+            </div>
+
+            <div className="gf-form">
+              <span className="gf-form-label width-11">
+                Home Dashboard
+                {/*<info-popover mode="right-normal">*/}
+                {/*Not finding dashboard you want? Star it first, then it should appear in this select box.*/}
+                {/*</info-popover>*/}
+              </span>
+              {/*<dashboard-selector className="gf-form-select-wrapper max-width-20" model="ctrl.prefs.homeDashboardId" />*/}
+            </div>
+
+            <div className="gf-form">
+              <label className="gf-form-label width-11">Timezone</label>
+              <div className="gf-form-select-wrapper max-width-20">
+                <select className="gf-form-input" ng-model="ctrl.prefs.timezone" />
+              </div>
+            </div>
+
+            <div className="gf-form-button-row">
+              <button type="submit" className="btn btn-success" ng-click="ctrl.updatePrefs()">
+                Save
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState) {
+  return {
+    navModel: getNavModel(state.navIndex, 'org-settings'),
+    organisation: state.organisation.organisation,
+    preferences: state.organisation.preferences,
+  };
+}
+
+const mapDispatchToProps = {
+  loadOrganisation,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));

public/app/features/org/state/actions.ts

@@ -0,0 +1,40 @@
+import { ThunkAction } from 'redux-thunk';
+import { Organisation, OrganisationPreferences, StoreState } from 'app/types';
+import { getBackendSrv } from '../../../core/services/backend_srv';
+
+export enum ActionTypes {
+  LoadOrganisation = 'LOAD_ORGANISATION',
+  LoadPreferences = 'LOAD_PREFERENCES',
+}
+
+interface LoadOrganisationAction {
+  type: ActionTypes.LoadOrganisation;
+  payload: Organisation;
+}
+
+interface LoadPreferencesAction {
+  type: ActionTypes.LoadPreferences;
+  payload: OrganisationPreferences;
+}
+
+const organisationLoaded = (organisation: Organisation) => ({
+  type: ActionTypes.LoadOrganisation,
+  payload: organisation,
+});
+
+const preferencesLoaded = (preferences: OrganisationPreferences) => ({
+  type: ActionTypes.LoadPreferences,
+  payload: preferences,
+});
+
+export type Action = LoadOrganisationAction | LoadPreferencesAction;
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
+
+export function loadOrganisation(): ThunkResult<void> {
+  return async dispatch => {
+    const organisationResponse = await getBackendSrv().get('/api/org');
+    const preferencesResponse = await getBackendSrv().get('/api/org/preferences');
+    dispatch(organisationLoaded(organisationResponse));
+    dispatch(preferencesLoaded(preferencesResponse));
+  };
+}

public/app/features/org/state/reducers.ts

@@ -0,0 +1,23 @@
+import { Organisation, OrganisationPreferences, OrganisationState } from 'app/types';
+import { Action, ActionTypes } from './actions';
+
+const initialState: OrganisationState = {
+  organisation: {} as Organisation,
+  preferences: {} as OrganisationPreferences,
+};
+
+const organisationReducer = (state = initialState, action: Action): OrganisationState => {
+  switch (action.type) {
+    case ActionTypes.LoadOrganisation:
+      return { ...state, organisation: action.payload };
+
+    case ActionTypes.LoadPreferences:
+      return { ...state, preferences: action.payload };
+  }
+
+  return state;
+};
+
+export default {
+  organisation: organisationReducer,
+};

public/app/routes/routes.ts

@@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
+import OrgDetailsPage from '../features/org/OrgDetailsPage';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -131,8 +132,10 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       },
     })
     .when('/org', {
-      templateUrl: 'public/app/features/org/partials/orgDetails.html',
-      controller: 'OrgDetailsCtrl',
+      template: '<react-container />',
+      resolve: {
+        component: () => OrgDetailsPage,
+      },
     })
     .when('/org/new', {
       templateUrl: 'public/app/features/org/partials/newOrg.html',

public/app/store/configureStore.ts

@@ -10,6 +10,7 @@ import dashboardReducers from 'app/features/dashboard/state/reducers';
 import pluginReducers from 'app/features/plugins/state/reducers';
 import dataSourcesReducers from 'app/features/datasources/state/reducers';
 import usersReducers from 'app/features/users/state/reducers';
+import organisationReducers from 'app/features/org/state/reducers';
 
 const rootReducers = {
   ...sharedReducers,
@@ -21,6 +22,7 @@ const rootReducers = {
   ...pluginReducers,
   ...dataSourcesReducers,
   ...usersReducers,
+  ...organisationReducers,
 };
 
 export let store;

public/app/types/index.ts

@@ -22,6 +22,7 @@ import {
 } from './series';
 import { PanelProps } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
+import { Organisation, OrganisationPreferences, OrganisationState } from './organisation';
 
 export {
   Team,
@@ -70,6 +71,9 @@ export {
   DataQueryResponse,
   DataQueryOptions,
   PluginDashboard,
+  Organisation,
+  OrganisationState,
+  OrganisationPreferences,
 };
 
 export interface StoreState {
@@ -82,4 +86,5 @@ export interface StoreState {
   dashboard: DashboardState;
   dataSources: DataSourcesState;
   users: UsersState;
+  organisation: OrganisationState;
 }

public/app/types/organisation.ts

@@ -0,0 +1,15 @@
+export interface Organisation {
+  name: string;
+  id: number;
+}
+
+export interface OrganisationPreferences {
+  homeDashboardId: number;
+  theme: string;
+  timezone: string;
+}
+
+export interface OrganisationState {
+  organisation: Organisation;
+  preferences: OrganisationPreferences;
+}