chore: Fix typings and add Page-component to ServerStats #14762

public/app/features/admin/ServerStats.tsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { NavModel, StoreState } from 'app/types';
 import { NavModel, StoreState } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getServerStats, ServerStat } from './state/apis';
 import { getServerStats, ServerStat } from './state/apis';
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import Page from 'app/core/components/Page/Page';
 
 
 interface Props {
 interface Props {
   navModel: NavModel;
   navModel: NavModel;
@@ -13,21 +13,24 @@ interface Props {
 
 
 interface State {
 interface State {
   stats: ServerStat[];
   stats: ServerStat[];
+  isLoading: boolean;
 }
 }
 
 
 export class ServerStats extends PureComponent<Props, State> {
 export class ServerStats extends PureComponent<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     super(props);
 
 
     this.state = {
     this.state = {
       stats: [],
       stats: [],
+      isLoading: false
     };
     };
   }
   }
 
 
   async componentDidMount() {
   async componentDidMount() {
     try {
     try {
+      this.setState({ isLoading: true });
       const stats = await this.props.getServerStats();
       const stats = await this.props.getServerStats();
-      this.setState({ stats });
+      this.setState({ stats, isLoading: false });
     } catch (error) {
     } catch (error) {
       console.error(error);
       console.error(error);
     }
     }
@@ -35,12 +38,11 @@ export class ServerStats extends PureComponent<Props, State> {
 
 
   render() {
   render() {
     const { navModel } = this.props;
     const { navModel } = this.props;
-    const { stats } = this.state;
+    const { stats, isLoading } = this.state;
 
 
     return (
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={isLoading}>
           <table className="filter-table form-inline">
           <table className="filter-table form-inline">
             <thead>
             <thead>
               <tr>
               <tr>
@@ -50,8 +52,8 @@ export class ServerStats extends PureComponent<Props, State> {
             </thead>
             </thead>
             <tbody>{stats.map(StatItem)}</tbody>
             <tbody>{stats.map(StatItem)}</tbody>
           </table>
           </table>
-        </div>
-      </div>
+        </Page.Contents>
+      </Page>
     );
     );
   }
   }
 }
 }

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 
 exports[`ServerStats Should render table with stats 1`] = `
 exports[`ServerStats Should render table with stats 1`] = `
-<div>
+<div
+  className="page-scrollbar-wrapper"
+>
+  <div
+    className="custom-scrollbars"
+    style={
+      Object {
+        "height": "auto",
+        "maxHeight": "100%",
+        "minHeight": "100%",
+        "overflow": "hidden",
+        "position": "relative",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="view"
+      style={
+        Object {
+          "WebkitOverflowScrolling": "touch",
+          "bottom": undefined,
+          "left": undefined,
+          "marginBottom": 0,
+          "marginRight": 0,
+          "maxHeight": "calc(100% + 0px)",
+          "minHeight": "calc(100% + 0px)",
+          "overflow": "scroll",
+          "position": "relative",
+          "right": undefined,
+          "top": undefined,
+        }
+      }
+    >
+      <div
+        className="page-scrollbar-content"
+      >
         <div
         <div
           className="page-header-canvas"
           className="page-header-canvas"
         >
         >
@@ -114,5 +150,109 @@ exports[`ServerStats Should render table with stats 1`] = `
             </tbody>
             </tbody>
           </table>
           </table>
         </div>
         </div>
+        <footer
+          className="footer"
+        >
+          <div
+            className="text-center"
+          >
+            <ul>
+              <li>
+                <a
+                  href="http://docs.grafana.org"
+                  target="_blank"
+                >
+                  <i
+                    className="fa fa-file-code-o"
+                  />
+                   Docs
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://grafana.com/services/support"
+                  target="_blank"
+                >
+                  <i
+                    className="fa fa-support"
+                  />
+                   Support Plans
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://community.grafana.com/"
+                  target="_blank"
+                >
+                  <i
+                    className="fa fa-comments-o"
+                  />
+                   Community
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://grafana.com"
+                  target="_blank"
+                >
+                  Grafana
+                </a>
+                 
+                <span>
+                  v
+                  v1.0
+                   (commit: 
+                  1
+                  )
+                </span>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div
+      className="track-horizontal"
+      style={
+        Object {
+          "display": "none",
+          "height": 6,
+          "position": "absolute",
+        }
+      }
+    >
+      <div
+        className="thumb-horizontal"
+        style={
+          Object {
+            "display": "block",
+            "height": "100%",
+            "position": "relative",
+          }
+        }
+      />
+    </div>
+    <div
+      className="track-vertical"
+      style={
+        Object {
+          "display": "none",
+          "position": "absolute",
+          "width": 6,
+        }
+      }
+    >
+      <div
+        className="thumb-vertical"
+        style={
+          Object {
+            "display": "block",
+            "position": "relative",
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
 </div>
 </div>
 `;
 `;

public/app/features/alerting/AlertRuleList.tsx

@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
 import Page from 'app/core/components/Page/Page';
-// import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import AlertRuleItem from './AlertRuleItem';
 import AlertRuleItem from './AlertRuleItem';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
 import { updateLocation } from 'app/core/actions';
 import { updateLocation } from 'app/core/actions';