put some formatting into the activity tab layout.

resources/frontend_client/app/home/actions.js

 "use strict";
 
+import _ from "underscore";
 import { createAction } from "redux-actions";
 import { normalize, Schema, arrayOf } from "normalizr";
 import moment from "moment";
@@ -62,6 +63,23 @@ export const setSelectedTab = createAction(SET_SELECTED_TAB);
 export const fetchActivity = createThunkAction(FETCH_ACTIVITY, function() {
     return async function(dispatch, getState) {
         let activityItems = await Activity.list();
+        for (var ai of activityItems) {
+            ai.timestamp = moment(ai.timestamp);
+            ai.hasLinkableModel = function() {
+                return (_.contains(["card", "dashboard"], this.model));
+            };
+            ai.activityDescription = function() {
+                switch (this.topic) {
+                    case "card-create": return "saved a question about";
+                    case "card-update": return "saved a question about";
+                    case "card-delete": return "deleted a question";
+                    case "dashboard-create": return "created a dashboard";
+                    case "dashboard-update": return "";
+                    case "dashboard-delete": return "deleted a dashboard";
+                    default: return "did some super awesome stuff";
+                }
+            }
+        }
         return normalize(activityItems, arrayOf(activity));
     };
 });

resources/frontend_client/app/home/components/Activity.react.js

@@ -2,7 +2,10 @@
 
 import React, { Component, PropTypes } from "react";
 
+import Icon from "metabase/components/Icon.react";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.react";
+import Urls from "metabase/lib/urls";
+
 import { fetchActivity } from "../actions";
 
 
@@ -11,6 +14,12 @@ export default class Activity extends Component {
     constructor() {
         super();
         this.state = { error: null };
+
+        this.styles = {
+            modelLink: {
+                borderWidth: "2px"
+            }
+        }
     }
 
     async componentDidMount() {
@@ -27,13 +36,38 @@ export default class Activity extends Component {
         // do we show user initials or the MB user icon
 
         return (
-            <div>
-            {activity.map(item =>
-                <div key={item.id} className="ActivityItem">
-                    user = {item.user}, {item.topic}
-                </div>
-            )}
-            </div>
+            <ul className="pt2 pb4">
+                {activity.map(item =>
+                    <li key={item.id} className="flex pt2">
+                        <div className="mr3">
+                            <Icon name={'filter'} width={36} height={36}></Icon>
+                        </div>
+                        <div className="flex-full">
+                            <div className="">
+                                <div className="float-left text-grey-4">
+                                    <span className="text-dark">{item.user.common_name}</span>
+                                    &nbsp;{item.activityDescription()}&nbsp;
+                                    { item.table ?
+                                        <a className="link text-dark" href={Urls.tableRowsQuery(item.database_id, item.table_id)}>{item.table.display_name}</a>
+                                    :
+                                        null
+                                    }
+                                </div>
+                                <div className="text-right text-grey-2">
+                                    {item.timestamp.fromNow()}
+                                </div>
+                            </div>
+                            { item.hasLinkableModel() ?
+                                <div style={this.styles.modelLink} className="bordered rounded p2 mt1">
+                                    <a className="link" href={Urls.modelToUrl(item.model, item.model_id)}>{item.details.name}</a>
+                                </div>
+                            :
+                                null
+                            }
+                        </div>
+                    </li>
+                )}
+            </ul>
         );
     }
 

resources/frontend_client/app/home/components/HeaderTabs.react.js

@@ -28,7 +28,6 @@ export default class HeaderTabs extends Component {
     render() {
         const { selectedTab } = this.props;
 
-        // component = Tab (selected, label, action)
         const activityTab = cx({
             'HomeTab': true,
             'inline-block': true,

resources/frontend_client/app/lib/urls.js

+'use strict';
+
+// provides functions for building urls to things we care about
+var Urls = {
+    card: function(card_id) {
+        // NOTE that this is for an ephemeral card link, not an editable card
+        return "/card/"+card_id+"?clone";
+    },
+
+    dashboard: function(dashboard_id) {
+        return "/dash/"+dashboard_id;
+    },
+
+    modelToUrl: function(model, model_id) {
+        switch (model) {
+            case "card":      return Urls.card(model_id);
+            case "dashboard": return Urls.dashboard(model_id);
+            default:          return null;
+        }
+    },
+
+    tableRowsQuery: function(database_id, table_id) {
+        return "/q/?db="+database_id+"&table="+table_id;
+    }
+}
+
+export default Urls;