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

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

@@ -1,118 +1,258 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ServerStats Should render table with stats 1`] = `
-<div>
+<div
+  className="page-scrollbar-wrapper"
+>
   <div
-    className="page-header-canvas"
+    className="custom-scrollbars"
+    style={
+      Object {
+        "height": "auto",
+        "maxHeight": "100%",
+        "minHeight": "100%",
+        "overflow": "hidden",
+        "position": "relative",
+        "width": "100%",
+      }
+    }
   >
     <div
-      className="page-container"
+      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-header"
+        className="page-scrollbar-content"
       >
         <div
-          className="page-header__inner"
+          className="page-header-canvas"
         >
-          <span
-            className="page-header__logo"
-          >
-            <i
-              className="page-header__icon fa fa-fw fa-warning"
-            />
-          </span>
           <div
-            className="page-header__info-block"
+            className="page-container"
           >
-            <h1
-              className="page-header__title"
-            >
-              Admin
-            </h1>
             <div
-              className="page-header__sub-title"
+              className="page-header"
             >
-              subTitle
+              <div
+                className="page-header__inner"
+              >
+                <span
+                  className="page-header__logo"
+                >
+                  <i
+                    className="page-header__icon fa fa-fw fa-warning"
+                  />
+                </span>
+                <div
+                  className="page-header__info-block"
+                >
+                  <h1
+                    className="page-header__title"
+                  >
+                    Admin
+                  </h1>
+                  <div
+                    className="page-header__sub-title"
+                  >
+                    subTitle
+                  </div>
+                </div>
+              </div>
+              <nav>
+                <div
+                  className="gf-form-select-wrapper width-20 page-header__select-nav"
+                >
+                  <label
+                    className="gf-form-select-icon icon"
+                    htmlFor="page-header-select-nav"
+                  />
+                  <select
+                    className="gf-select-nav gf-form-input"
+                    id="page-header-select-nav"
+                    onChange={[Function]}
+                    value="Admin"
+                  >
+                    <option
+                      value="Admin"
+                    >
+                      Admin
+                    </option>
+                  </select>
+                </div>
+                <ul
+                  className="gf-tabs page-header__tabs"
+                >
+                  <li
+                    className="gf-tabs-item"
+                  >
+                    <a
+                      className="gf-tabs-link active"
+                      href="Admin"
+                    >
+                      <i
+                        className="icon"
+                      />
+                      Admin
+                    </a>
+                  </li>
+                </ul>
+              </nav>
             </div>
           </div>
         </div>
-        <nav>
+        <div
+          className="page-container page-body"
+        >
+          <table
+            className="filter-table form-inline"
+          >
+            <thead>
+              <tr>
+                <th>
+                  Name
+                </th>
+                <th>
+                  Value
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  Total dashboards
+                </td>
+                <td>
+                  10
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  Total Users
+                </td>
+                <td>
+                  1
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <footer
+          className="footer"
+        >
           <div
-            className="gf-form-select-wrapper width-20 page-header__select-nav"
+            className="text-center"
           >
-            <label
+            <ul>
-              className="gf-form-select-icon icon"
+              <li>
-              htmlFor="page-header-select-nav"
+                <a
-            />
+                  href="http://docs.grafana.org"
-            <select
+                  target="_blank"
-              className="gf-select-nav gf-form-input"
+                >
-              id="page-header-select-nav"
+                  <i
-              onChange={[Function]}
+                    className="fa fa-file-code-o"
-              value="Admin"
+                  />
-            >
+                   Docs
-              <option
+                </a>
-                value="Admin"
+              </li>
-              >
+              <li>
-                Admin
+                <a
-              </option>
+                  href="https://grafana.com/services/support"
-            </select>
+                  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>
-          <ul
+        </footer>
-            className="gf-tabs page-header__tabs"
-          >
-            <li
-              className="gf-tabs-item"
-            >
-              <a
-                className="gf-tabs-link active"
-                href="Admin"
-              >
-                <i
-                  className="icon"
-                />
-                Admin
-              </a>
-            </li>
-          </ul>
-        </nav>
       </div>
     </div>
-  </div>
+    <div
-  <div
+      className="track-horizontal"
-    className="page-container page-body"
+      style={
-  >
+        Object {
-    <table
+          "display": "none",
-      className="filter-table form-inline"
+          "height": 6,
+          "position": "absolute",
+        }
+      }
     >
-      <thead>
+      <div
-        <tr>
+        className="thumb-horizontal"
-          <th>
+        style={
-            Name
+          Object {
-          </th>
+            "display": "block",
-          <th>
+            "height": "100%",
-            Value
+            "position": "relative",
-          </th>
+          }
-        </tr>
+        }
-      </thead>
+      />
-      <tbody>
+    </div>
-        <tr>
+    <div
-          <td>
+      className="track-vertical"
-            Total dashboards
+      style={
-          </td>
+        Object {
-          <td>
+          "display": "none",
-            10
+          "position": "absolute",
-          </td>
+          "width": 6,
-        </tr>
+        }
-        <tr>
+      }
-          <td>
+    >
-            Total Users
+      <div
-          </td>
+        className="thumb-vertical"
-          <td>
+        style={
-            1
+          Object {
-          </td>
+            "display": "block",
-        </tr>
+            "position": "relative",
-      </tbody>
+            "width": "100%",
-    </table>
+          }
+        }
+      />
+    </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 { connect } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
-// import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import AlertRuleItem from './AlertRuleItem';
 import appEvents from 'app/core/app_events';
 import { updateLocation } from 'app/core/actions';