Merge pull request #406 from coralproject/asset-comment-metrics

Asset comment metrics

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

@@ -0,0 +1,49 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+import styles from './Widget.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+
+const lang = new I18n(translations);
+
+const ActivityWidget = ({assets}) => {
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.heading}>Articles with the most conversations</h2>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('dashboard.comment_count')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          assets.length
+          ? assets.map(asset => {
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{asset.commentCount}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_activity')}</div>
+        }
+      </div>
+    </div>
+  );
+};
+
+ActivityWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    commentCount: PropTypes.number,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
+export default ActivityWidget;

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

@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import {getMetrics} from 'coral-admin/src/graphql/queries';
 import FlagWidget from './FlagWidget';
 import LikeWidget from './LikeWidget';
+import ActivityWidget from './ActivityWidget';
 import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
@@ -70,7 +71,7 @@ class Dashboard extends React.Component {
       return <Spinner />;
     }
 
-    const {data: {assetsByLike, assetsByFlag}} = this.props;
+    const {data: {assetsByLike, assetsByFlag, assetsByActivity}} = this.props;
     const hideReloadNote = window.localStorage.getItem('coral:dashboardNote') === 'hide' ||
       this.state.dashboardNote === 'hide'; // for Safari Incognito
 
@@ -86,6 +87,7 @@ class Dashboard extends React.Component {
         <div className={styles.Dashboard}>
           <FlagWidget assets={assetsByFlag} />
           <LikeWidget assets={assetsByLike} />
+          <ActivityWidget assets={assetsByActivity} />
         </div>
       </div>
     );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -6,8 +6,7 @@ import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
 
-const FlagWidget = (props) => {
-  const {assets} = props;
+const FlagWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
@@ -39,4 +38,14 @@ const FlagWidget = (props) => {
   );
 };
 
+FlagWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    action_summaries: PropTypes.array,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
 export default FlagWidget;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -6,9 +6,7 @@ import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
 
-const LikeWidget = (props) => {
-
-  const {assets} = props;
+const LikeWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
@@ -40,4 +38,14 @@ const LikeWidget = (props) => {
   );
 };
 
+LikeWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    action_summaries: PropTypes.array,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
 export default LikeWidget;

client/coral-admin/src/containers/Dashboard/Widget.css

@@ -23,7 +23,6 @@
   padding-left: 10px;
   font-size: 1.5rem;
   font-weight: bold;
-  background-color: #e0e0e0;
 }
 
 .widgetTable {

client/coral-admin/src/graphql/fragments/assetMetricsView.graphql

@@ -4,6 +4,7 @@ fragment metrics on Asset {
   url
   author
   created_at
+  commentCount
   action_summaries {
     type: __typename
     actionCount

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

@@ -7,4 +7,7 @@ query Metrics ($from: Date!, $to: Date!) {
   assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) {
     ...metrics
   }
+  assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
+    ...metrics
+  }
 }

client/coral-admin/src/translations.json

@@ -136,6 +136,7 @@
       "no_flags": "There have been no flags in the last 5 minutes! Hooray!",
       "no_likes": "There have been no likes in the last 5 minutes. All quiet.",
       "flags": "Flags",
+      "no_activity": "There haven't been any comments anywhere in the last five minutes.",
       "comment_count": "comments"
     },
     "streams": {
@@ -283,6 +284,7 @@
       "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!",
       "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.",
       "flags": "Marcados",
+      "no_activity": "No hubo comentarios en los ultimos 5 minutos",
       "comment_count": "comentarios"
     },
     "streams": {

graph/loaders/metrics.js

@@ -3,6 +3,53 @@ const DataLoader = require('dataloader');
 const {objectCacheKeyFn} = require('./util');
 
 const ActionModel = require('../../models/action');
+const CommentModel = require('../../models/comment');
+
+/**
+ * Returns the assets which have had comments made within the last time period.
+ */
+const getAssetActivityMetrics = ({loaders: {Assets}}, {from, to, limit}) => {
+  let assetMetrics = [];
+
+  return CommentModel.aggregate([
+    {$match: {
+      parent_id: null,
+      created_at: {
+        $gt: from,
+        $lt: to
+      }
+    }},
+    {$group: {
+      _id: '$asset_id',
+      commentCount: {
+        $sum: 1
+      }
+    }},
+    {$project: {
+      _id: false,
+      asset_id: '$_id',
+      commentCount: '$commentCount'
+    }},
+    {$sort: {
+      commentCount: -1
+    }},
+    {$limit: limit}
+  ])
+  .then((results) => {
+    assetMetrics = results;
+
+    return Assets.getByID.loadMany(results.map((result) => result.asset_id));
+  })
+  .then((assets) => assets.map((asset, i) => {
+
+    // We're leveraging the fact that the comments returned by the aggregation
+    // query are in the request order that we just made, it's what the
+    // Assets.getByID loader does.
+    asset.commentCount = assetMetrics[i].commentCount;
+
+    return asset;
+  }));
+};
 
 /**
  * Returns a list of assets with action metadata included on the models.
@@ -208,10 +255,11 @@ module.exports = (context) => ({
       cacheKeyFn: objectCacheKeyFn('from', 'to')
     }),
     Assets: {
-      get: ({from, to, sort, limit}) => getAssetMetrics(context, {from, to, sort, limit})
+      get: ({from, to, sort, limit}) => getAssetMetrics(context, {from, to, sort, limit}),
+      getActivity: ({from, to, limit}) => getAssetActivityMetrics(context, {from, to, limit}),
     },
     Comments: {
-      get: ({from, to, sort, limit}) => getCommentMetrics(context, {from, to, sort, limit})
+      get: ({from, to, sort, limit}) => getCommentMetrics(context, {from, to, sort, limit}),
     }
   }
 });

graph/resolvers/root_query.js

@@ -63,6 +63,10 @@ const RootQuery = {
       return null;
     }
 
+    if (sort === 'ACTIVITY') {
+      return Assets.getActivity({from, to, limit});
+    }
+
     return Assets.get({from, to, sort, limit});
   },
 

graph/typeDefs.graphql

@@ -496,6 +496,22 @@ enum USER_STATUS {
   APPROVED
 }
 
+# Metrics for the assets.
+enum ASSET_METRICS_SORT {
+
+  # Represents a LikeAction.
+  LIKE
+
+  # Represents a FlagAction.
+  FLAG
+
+  # Represents a don't agree action.
+  DONTAGREE
+
+  # Represents activity.
+  ACTIVITY
+}
+
 type RootQuery {
 
   # Site wide settings and defaults.
@@ -526,7 +542,7 @@ type RootQuery {
 
   # Asset metrics related to user actions are saturated into the assets
   # returned.
-  assetMetrics(from: Date!, to: Date!, sort: ACTION_TYPE!, limit: Int = 10): [Asset!]
+  assetMetrics(from: Date!, to: Date!, sort: ASSET_METRICS_SORT!, limit: Int = 10): [Asset!]
 
   # Comment metrics related to user actions are saturated into the comments
   # returned.