Migration: Migrates Admin settings from angular to react (#19594)

public/app/features/admin/AdminSettings.tsx

+import React from 'react';
+import { connect } from 'react-redux';
+import { hot } from 'react-hot-loader';
+
+import { getBackendSrv } from '@grafana/runtime';
+import { NavModel } from '@grafana/data';
+
+import { StoreState } from 'app/types';
+import { getNavModel } from 'app/core/selectors/navModel';
+import Page from 'app/core/components/Page/Page';
+
+const backendSrv = getBackendSrv();
+
+type Settings = { [key: string]: { [key: string]: string } };
+
+interface Props {
+  navModel: NavModel;
+}
+
+interface State {
+  settings: Settings;
+  isLoading: boolean;
+}
+
+export class AdminSettings extends React.PureComponent<Props, State> {
+  state: State = {
+    settings: {},
+    isLoading: true,
+  };
+
+  async componentDidMount() {
+    const settings: Settings = await backendSrv.get('/api/admin/settings');
+    this.setState({
+      settings,
+      isLoading: false,
+    });
+  }
+
+  render() {
+    const { settings, isLoading } = this.state;
+    const { navModel } = this.props;
+
+    return (
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={isLoading}>
+          <div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
+            These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
+            these you currently need to restart grafana.
+          </div>
+
+          <table className="filter-table">
+            <tbody>
+              {Object.entries(settings).map(([sectionName, sectionSettings], i) => (
+                <React.Fragment key={`section-${i}`}>
+                  <tr>
+                    <td className="admin-settings-section">{sectionName}</td>
+                    <td />
+                  </tr>
+                  {Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
+                    <tr key={`property-${j}`}>
+                      <td style={{ paddingLeft: '25px' }}>{settingName}</td>
+                      <td>{settingValue}</td>
+                    </tr>
+                  ))}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        </Page.Contents>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = (state: StoreState) => ({
+  navModel: getNavModel(state.navIndex, 'server-settings'),
+});
+
+export default hot(module)(connect(mapStateToProps)(AdminSettings));

public/app/features/admin/ServerStats.tsx

@@ -18,18 +18,13 @@ interface State {
 }
 
 export class ServerStats extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
+  state: State = {
     stats: [],
-      isLoading: false,
+    isLoading: true,
   };
-  }
 
   async componentDidMount() {
     try {
-      this.setState({ isLoading: true });
       const stats = await this.props.getServerStats();
       this.setState({ stats, isLoading: false });
     } catch (error) {

public/app/features/admin/index.ts

@@ -5,22 +5,8 @@ import AdminEditOrgCtrl from './AdminEditOrgCtrl';
 import StyleGuideCtrl from './StyleGuideCtrl';
 
 import coreModule from 'app/core/core_module';
-import { BackendSrv } from 'app/core/services/backend_srv';
 import { NavModelSrv } from 'app/core/core';
 
-class AdminSettingsCtrl {
-  navModel: any;
-
-  /** @ngInject */
-  constructor($scope: any, backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
-    this.navModel = navModelSrv.getNav('admin', 'server-settings', 0);
-
-    backendSrv.get('/api/admin/settings').then((settings: any) => {
-      $scope.settings = settings;
-    });
-  }
-}
-
 class AdminHomeCtrl {
   navModel: any;
 
@@ -34,6 +20,5 @@ coreModule.controller('AdminListUsersCtrl', AdminListUsersCtrl);
 coreModule.controller('AdminEditUserCtrl', AdminEditUserCtrl);
 coreModule.controller('AdminListOrgsCtrl', AdminListOrgsCtrl);
 coreModule.controller('AdminEditOrgCtrl', AdminEditOrgCtrl);
-coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl);
 coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
 coreModule.controller('StyleGuideCtrl', StyleGuideCtrl);

public/app/features/admin/partials/settings.html

-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body">
-
-	<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">
-		These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables).
-		To change these you currently need to restart grafana.
-	</div>
-
-	<table class="filter-table">
-		<tr ng-repeat-start="(secName, secValue) in settings">
-			<td class="admin-settings-section">{{secName}}</td>
-			<td></td>
-		</tr>
-		<tr ng-repeat="(keyName, keyValue) in secValue" ng-repeat-end>
-			<td style="padding-left: 25px;">{{keyName}}</td>
-			<td>{{keyValue}}</td>
-		</tr>
-	</table>
-</div>
-
-
-

public/app/routes/routes.ts

@@ -266,9 +266,11 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
       controllerAs: 'ctrl',
     })
     .when('/admin/settings', {
-      templateUrl: 'public/app/features/admin/partials/settings.html',
-      controller: 'AdminSettingsCtrl',
-      controllerAs: 'ctrl',
+      template: '<react-container />',
+      resolve: {
+        component: () =>
+          SafeDynamicImport(import(/* webpackChunkName: "AdminSettings" */ 'app/features/admin/AdminSettings')),
+      },
     })
     .when('/admin/users', {
       templateUrl: 'public/app/features/admin/partials/users.html',