Basic implementation of dashboard widgets, statistics

Currently not user-customizable. Just needed to display statistics for a
client, so figured I'd make a start at this. Nothing too fancy for now,
but I'm sure some people will be happy to have this information at their
fingertips.

js/admin/src/components/DashboardPage.js

@@ -1,20 +1,14 @@
 import Page from 'flarum/components/Page';
+import StatusWidget from 'flarum/components/StatusWidget';
+import StatisticsWidget from 'flarum/components/StatisticsWidget';
 
 export default class DashboardPage extends Page {
   view() {
     return (
       <div className="DashboardPage">
         <div className="container">
-          <h2>{app.translator.trans('core.admin.dashboard.welcome_text')}</h2>
-          <p>{app.translator.trans('core.admin.dashboard.version_text', {version: <strong>{app.forum.attribute('version')}</strong>})}</p>
-          <p>{app.translator.trans('core.admin.dashboard.beta_warning_text', {strong: <strong/>})}</p>
-          <ul>
-            <li>{app.translator.trans('core.admin.dashboard.contributing_text', {a: <a href="http://flarum.org/docs/contributing" target="_blank"/>})}</li>
-            <li>{app.translator.trans('core.admin.dashboard.troubleshooting_text', {a: <a href="http://flarum.org/docs/troubleshooting" target="_blank"/>})}</li>
-            <li>{app.translator.trans('core.admin.dashboard.support_text', {a: <a href="http://discuss.flarum.org/t/support" target="_blank"/>})}</li>
-            <li>{app.translator.trans('core.admin.dashboard.features_text', {a: <a href="http://discuss.flarum.org/t/features" target="_blank"/>})}</li>
-            <li>{app.translator.trans('core.admin.dashboard.extension_text', {a: <a href="http://flarum.org/docs/extend" target="_blank"/>})}</li>
-          </ul>
+          <StatusWidget/>
+          <StatisticsWidget/>
         </div>
       </div>
     );

js/admin/src/components/DashboardWidget.js

@@ -0,0 +1,38 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import Component from 'flarum/Component';
+
+export default class Widget extends Component {
+  view() {
+    return (
+      <div className={"Widget "+this.className()}>
+        {this.content()}
+      </div>
+    );
+  }
+
+  /**
+   * Get the class name to apply to the widget.
+   *
+   * @return {String}
+   */
+  className() {
+    return '';
+  }
+
+  /**
+   * Get the content of the widget.
+   *
+   * @return {VirtualElement}
+   */
+  content() {
+    return [];
+  }
+}

js/admin/src/components/StatisticsWidget.js

@@ -0,0 +1,60 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import DashboardWidget from 'flarum/components/DashboardWidget';
+import icon from 'flarum/helpers/icon';
+import listItems from 'flarum/helpers/listItems';
+import ItemList from 'flarum/utils/ItemList';
+
+export default class StatisticsWidget extends DashboardWidget {
+  className() {
+    return 'StatisticsWidget';
+  }
+
+  content() {
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>{app.translator.trans('core.admin.statistics.users_heading')}</th>
+            <th>{app.translator.trans('core.admin.statistics.discussions_heading')}</th>
+            <th>{app.translator.trans('core.admin.statistics.posts_heading')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className="StatisticsWidget-total">
+            <th>{app.translator.trans('core.admin.statistics.total_label')}</th>
+            <td>{app.data.statistics.total.users}</td>
+            <td>{app.data.statistics.total.discussions}</td>
+            <td>{app.data.statistics.total.posts}</td>
+          </tr>
+          <tr>
+            <th>{app.translator.trans('core.admin.statistics.last_28_days_label')}</th>
+            <td>{app.data.statistics.month.users}</td>
+            <td>{app.data.statistics.month.discussions}</td>
+            <td>{app.data.statistics.month.posts}</td>
+          </tr>
+          <tr>
+            <th>{app.translator.trans('core.admin.statistics.last_7_days_label')}</th>
+            <td>{app.data.statistics.week.users}</td>
+            <td>{app.data.statistics.week.discussions}</td>
+            <td>{app.data.statistics.week.posts}</td>
+          </tr>
+          <tr>
+            <th>{app.translator.trans('core.admin.statistics.today_label')}</th>
+            <td>{app.data.statistics.today.users}</td>
+            <td>{app.data.statistics.today.discussions}</td>
+            <td>{app.data.statistics.today.posts}</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}

js/admin/src/components/StatusWidget.js

@@ -0,0 +1,41 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import DashboardWidget from 'flarum/components/DashboardWidget';
+import icon from 'flarum/helpers/icon';
+import listItems from 'flarum/helpers/listItems';
+import ItemList from 'flarum/utils/ItemList';
+
+export default class StatusWidget extends DashboardWidget {
+  className() {
+    return 'StatusWidget';
+  }
+
+  content() {
+    return (
+      <ul>{listItems(this.items().toArray())}</ul>
+    );
+  }
+
+  items() {
+    const items = new ItemList();
+
+    items.add('help', (
+      <a href="http://flarum.org/docs/troubleshooting" target="_blank">
+        {icon('question-circle')} {app.translator.trans('core.admin.dashboard.help_link')}
+      </a>
+    ));
+
+    items.add('version-flarum', [<strong>Flarum</strong>, <br/>, app.forum.attribute('version')]);
+    items.add('version-php', [<strong>PHP</strong>, <br/>, app.data.phpVersion]);
+    items.add('version-mysql', [<strong>MySQL</strong>, <br/>, app.data.mysqlVersion]);
+
+    return items;
+  }
+}

js/admin/src/components/Widget.js

@@ -0,0 +1,38 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import Component from 'flarum/Component';
+
+export default class DashboardWidget extends Component {
+  view() {
+    return (
+      <div className={"DashboardWidget "+this.className()}>
+        {this.content()}
+      </div>
+    );
+  }
+
+  /**
+   * Get the class name to apply to the widget.
+   *
+   * @return {String}
+   */
+  className() {
+    return '';
+  }
+
+  /**
+   * Get the content of the widget.
+   *
+   * @return {VirtualElement}
+   */
+  content() {
+    return [];
+  }
+}