wip: redux

public/app/features/server-stats/ServerStats.tsx

@@ -3,53 +3,61 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { initNav } from 'app/core/actions';
 import { ContainerProps } from 'app/types';
+import { getServerStats, ServerStat } from './api';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 
-interface Props extends ContainerProps {}
+interface Props extends ContainerProps {
+  getServerStats: () => Promise<ServerStat[]>;
+}
+
+interface State {
+  stats: ServerStat[];
+}
 
-export class ServerStats extends React.Component<Props, any> {
+export class ServerStats extends React.Component<Props, State> {
   constructor(props) {
     super(props);
 
+    this.state = {
+      stats: [],
+    };
+
     this.props.initNav('cfg', 'admin', 'server-stats');
-    // const { nav, serverStats } = this.props;
-    //
-    // nav.load('cfg', 'admin', 'server-stats');
-    // serverStats.load();
-    //
-    // store.dispatch(setNav('new', { asd: 'tasd' }));
+  }
+
+  async componentDidMount() {
+    try {
+      const stats = await this.props.getServerStats();
+      this.setState({ stats });
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   render() {
     const { navModel } = this.props;
-    console.log('render', navModel);
+    const { stats } = this.state;
+
     return (
       <div>
         <PageHeader model={navModel} />
-        <h2>aasd</h2>
+        <div className="page-container page-body">
+          <table className="filter-table form-inline">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>{stats.map(StatItem)}</tbody>
+          </table>
+        </div>
       </div>
     );
-    // const { nav, serverStats } = this.props;
-    // return (
-    //   <div>
-    //     <PageHeader model={nav as any} />
-    //     <div className="page-container page-body">
-    //       <table className="filter-table form-inline">
-    //         <thead>
-    //           <tr>
-    //             <th>Name</th>
-    //             <th>Value</th>
-    //           </tr>
-    //         </thead>
-    //         <tbody>{serverStats.stats.map(StatItem)}</tbody>
-    //       </table>
-    //     </div>
-    //   </div>
-    // );
   }
 }
 
-function StatItem(stat) {
+function StatItem(stat: ServerStat) {
   return (
     <tr key={stat.name}>
       <td>{stat.name}</td>
@@ -60,6 +68,7 @@ function StatItem(stat) {
 
 const mapStateToProps = state => ({
   navModel: state.navModel,
+  getServerStats: getServerStats,
 });
 
 const mapDispatchToProps = {

public/app/features/server-stats/api.ts

+import { getBackendSrv } from 'app/core/services/backend_srv';
+
+export interface ServerStat {
+  name: string;
+  value: string;
+}
+
+export const getServerStats = async (): Promise<ServerStat[]> => {
+  try {
+    const res = await getBackendSrv().get('api/admin/stats');
+    return [
+      { name: 'Total users', value: res.users },
+      { name: 'Total dashboards', value: res.dashboards },
+      { name: 'Active users (seen last 30 days)', value: res.activeUsers },
+      { name: 'Total orgs', value: res.orgs },
+      { name: 'Total playlists', value: res.playlists },
+      { name: 'Total snapshots', value: res.snapshots },
+      { name: 'Total dashboard tags', value: res.tags },
+      { name: 'Total starred dashboards', value: res.stars },
+      { name: 'Total alerts', value: res.alerts },
+    ];
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};