display most flagged assets in a table

client/coral-admin/src/components/FlagWidget.css

@@ -3,3 +3,27 @@
   font-size: 1.5rem;
   font-weight: bold;
 }
+
+.widgetTable {
+  width: 100%;
+  border-collapse: collapse;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+}
+
+.widgetTable thead th {
+  border-bottom: 1px solid #f47e6b;
+  padding: 10px;
+  text-align: left;
+}
+
+.widgetTable tbody tr {
+  border-bottom: 1px solid lightgrey;
+}
+
+.widgetTable tbody tr:last-child {
+  border-bottom: none;
+}
+
+.widgetTable tbody td {
+  padding: 10px;
+}

client/coral-admin/src/components/FlagWidget.js

@@ -1,25 +1,49 @@
 import React, {PropTypes} from 'react';
+import styles from './FlagWidget.css';
+
+const FlagWidget = ({assets}) => {
 
-const FlagWidget = () => {
   return (
-    <table>
-      <thead>
-        <tr><th>Article</th><th>Flags</th></tr>
+    <table className={styles.widgetTable}>
+      <thead className={styles.widgetHead}>
+        <tr>
+          <th>Article</th>
+          <th>Flags</th>
+          <th>Comment Count</th>
+        </tr>
       </thead>
       <tbody>
-        {/* display asset list as rows here */}
+        {assets.map(asset => {
+          const flagCount = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary').actionCount;
+          return (
+            <tr key={asset.id}>
+              <td><a href={asset.url} target="_blank">{asset.title}</a></td>
+              <td>{flagCount}</td>
+              <td>{asset.commentCount}</td>
+            </tr>
+          );
+        })}
       </tbody>
     </table>
   );
 };
 
 FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    title: PropTypes.string,
-    url: PropTypes.string,
-    count: PropTypes.number
-  })).isRequired
+  assets: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string,
+      commentCount: PropTypes.number,
+      action_summaries: PropTypes.arrayOf(
+        PropTypes.shape({
+          __typename: PropTypes.string.isRequired,
+          actionCount: PropTypes.number.isRequired,
+          actionableItemCount: PropTypes.number.isRequired
+        })
+      )
+    })
+  ).isRequired
 };
 
 export default FlagWidget;

client/coral-admin/src/containers/Dashboard/Dashboard.js

@@ -9,6 +9,7 @@ class Dashboard extends React.Component {
   render () {
 
     const {data} = this.props;
+    const {metrics: assets} = data;
 
     if (data.loading) {
       return <Spinner />;
@@ -22,7 +23,7 @@ class Dashboard extends React.Component {
       <div className={styles.Dashboard}>
         <div className={styles.widget}>
           <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
-          <FlagWidget assets={[]} />
+          <FlagWidget assets={assets} />
         </div>
         <div className={styles.widget}>
           <h2 className={styles.heading}>Top ten comments with the most likes</h2>

client/coral-admin/src/graphql/queries/index.js

@@ -3,7 +3,20 @@ import {graphql} from 'react-apollo';
 import MOST_FLAGS from './mostFlags.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 
-export const mostFlags = graphql(MOST_FLAGS, {});
+export const mostFlags = graphql(MOST_FLAGS, {
+  options: () => {
+
+    // currently hard-coded per Greg's advice
+    const fiveMinutesAgo = new Date();
+    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
+    return {
+      variables: {
+        from: fiveMinutesAgo.toISOString(),
+        to: new Date().toISOString()
+      }
+    };
+  }
+});
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   options: ({params: {id = ''}}) => {

client/coral-admin/src/graphql/queries/mostFlags.graphql

@@ -1,5 +1,12 @@
-query mostFlags {
-  metric {
+query Metrics ($from: Date!, $to: Date!) {
+  metrics(from: $from, to: $to) {
     id
+    title
+    url
+    commentCount
+    action_summaries {
+      actionCount
+      actionableItemCount
+    }
   }
 }

client/coral-docs/src/services/fetcher.js

@@ -1,5 +1,5 @@
 export default function fetcher(query) {
-  return fetch(`${window.location.host}/api/v1/graph/ql`, {
+  return fetch(`${window.location.origin}/api/v1/graph/ql`, {
     method: 'POST',
     headers: {
       Accept: 'application/json',