Make dashboards table into a component

ui/src/dashboards/components/DashboardsTable.js

@@ -0,0 +1,73 @@
+import React, {PropTypes} from 'react'
+import {Link} from 'react-router'
+import _ from 'lodash'
+
+import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+
+const DashboardsTable = ({
+  dashboards,
+  onDeleteDashboard,
+  onCreateDashboard,
+  dashboardLink,
+}) => {
+  return dashboards && dashboards.length
+    ? <table className="table v-center admin-table table-highlight">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Template Variables</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {_.sortBy(dashboards, d => d.name.toLowerCase()).map(dashboard =>
+            <tr key={dashboard.id}>
+              <td>
+                <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
+                  {dashboard.name}
+                </Link>
+              </td>
+              <td>
+                {dashboard.templates.length
+                  ? dashboard.templates.map(tv =>
+                      <code className="table--temp-var" key={tv.id}>
+                        {tv.tempVar}
+                      </code>
+                    )
+                  : <span className="empty-string">
+                      None
+                    </span>}
+              </td>
+              <DeleteConfirmTableCell
+                onDelete={onDeleteDashboard}
+                item={dashboard}
+                buttonSize="btn-xs"
+              />
+            </tr>
+          )}
+        </tbody>
+      </table>
+    : <div className="generic-empty-state">
+        <h4 style={{marginTop: '90px'}}>
+          Looks like you dont have any dashboards
+        </h4>
+        <button
+          className="btn btn-sm btn-primary"
+          onClick={onCreateDashboard}
+          style={{marginBottom: '90px'}}
+        >
+          Create Dashboard
+        </button>
+      </div>
+}
+
+const {func, shape, string} = PropTypes
+
+DashboardsTable.propTypes = {
+  dashboards: shape.isRequired,
+  onDeleteDashboard: func.isRequired,
+  onCreateDashboard: func.isRequired,
+  dashboardLink: string.isRequired,
+}
+
+export default DashboardsTable

ui/src/dashboards/containers/DashboardsPage.js

@@ -1,12 +1,10 @@
 import React, {PropTypes} from 'react'
-import {Link, withRouter} from 'react-router'
+import {withRouter} from 'react-router'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
-import _ from 'lodash'
-
 import DashboardsHeader from 'src/dashboards/components/DashboardsHeader'
-import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import DashboardsTable from 'src/dashboards/components/DashboardsTable'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import {createDashboard} from 'src/dashboards/apis'
@@ -79,7 +77,13 @@ const DashboardsPage = React.createClass({
                     </button>
                   </div>
                   <div className="panel-body">
-                    {dashboards && dashboards.length
+                    <DashboardsTable
+                      dashboards={dashboards}
+                      onDeleteDashboard={this.handleDeleteDashboard}
+                      onCreateDashboard={this.handleCreateDashbord}
+                      dashboardLink={dashboardLink}
+                    />
+                    {/* {dashboards && dashboards.length
                       ? <table className="table v-center admin-table table-highlight">
                           <thead>
                             <tr>
@@ -134,7 +138,7 @@ const DashboardsPage = React.createClass({
                           >
                             Create Dashboard
                           </button>
-                        </div>}
+                        </div>} */}
                   </div>
                 </div>
               </div>