Merge pull request #1106 from metabase/about_metabase

adding an `About Metabase` option to the user profile dropdown.  

build-uberjar

@@ -4,14 +4,16 @@
 version() {
     # Skip on CircleCI since this is interactive
     if [ ! $CI ]; then
-        VERSION=$(./version)
-        SHORT_VERSION=$(./version --short)
+        VERSION_INFO=$(./version)
+        IFS=', ' read -a info <<< ${VERSION_INFO}
 
-        echo "Tagging uberjar with version '$VERSION'..."
+        echo "Tagging uberjar with version '$VERSION_INFO'..."
 
         # Ok, now generate the appropriate version.properties file.
-        echo "long=$VERSION" > resources/version.properties
-        echo "short=$SHORT_VERSION" >> resources/version.properties
+        echo "tag=${info[0]}" > resources/version.properties
+        echo "hash=${info[1]}" >> resources/version.properties
+        echo "branch=${info[2]}" >> resources/version.properties
+        echo "date=${info[3]}" >> resources/version.properties
     fi
 }
 

frontend/app/components/ProfileLink.react.js

 import React, { Component, PropTypes } from 'react';
 import OnClickOut from 'react-onclickout';
 import cx from 'classnames';
+import _ from "underscore";
+
+import MetabaseSettings from "metabase/lib/settings";
+import Modal from "metabase/components/Modal.react";
 
 import UserAvatar from './UserAvatar.react';
 import Icon from './Icon.react';
+import LogoIcon from './LogoIcon.react';
+
 
 export default class ProfileLink extends Component {
+
     constructor() {
-        super()
-        this.state = { dropdownOpen: false };
-        this.toggleDropdown = this.toggleDropdown.bind(this);
-        this.closeDropdown = this.closeDropdown.bind(this);
+        super();
+
+        this.state = { dropdownOpen: false, aboutModalOpen: false };
+
+        _.bindAll(this, "toggleDropdown", "closeDropdown", "openModal", "closeModal");
     }
 
     toggleDropdown() {
@@ -21,15 +29,25 @@ export default class ProfileLink extends Component {
         this.setState({ dropdownOpen: false });
     }
 
+    openModal() {
+        this.setState({ dropdownOpen: false, aboutModalOpen: true });
+    }
+
+    closeModal() {
+        this.setState({ aboutModalOpen: false });
+    }
+
     render() {
         const { user, context } = this.props;
+        const { aboutModalOpen, dropdownOpen } = this.state;
+        const { tag, date } = MetabaseSettings.get('version');
+
         let dropDownClasses = cx({
             'NavDropdown': true,
             'inline-block': true,
             'cursor-pointer': true,
-            'open': this.state.dropdownOpen,
-        })
-
+            'open': dropdownOpen,
+        });
 
         return (
             <OnClickOut onClickOut={this.closeDropdown}>
@@ -43,7 +61,7 @@ export default class ProfileLink extends Component {
                         </div>
                     </a>
 
-                    { this.state.dropdownOpen ?
+                    { dropdownOpen ?
                         <div className="NavDropdown-content right">
                             <ul className="NavDropdown-content-layer">
                                 <li>
@@ -51,6 +69,7 @@ export default class ProfileLink extends Component {
                                         Account Settings
                                     </a>
                                 </li>
+
                                 { user.is_superuser && context !== 'admin' ?
                                     <li>
                                         <a onClick={this.closeDropdown} className="Dropdown-item block text-white no-decoration" href="/admin/">
@@ -66,12 +85,54 @@ export default class ProfileLink extends Component {
                                         </a>
                                     </li>
                                 : null }
+
+                                <li>
+                                    <a className="Dropdown-item block text-white no-decoration" href="http://www.metabase.com/docs/" target="_blank">
+                                        Help
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a onClick={this.openModal} className="Dropdown-item block text-white no-decoration">
+                                        About Metabase
+                                    </a>
+                                </li>
+
                                 <li className="border-top border-light">
                                     <a className="Dropdown-item block text-white no-decoration" href="/auth/logout">Logout</a>
                                 </li>
                             </ul>
                         </div>
                     : null }
+
+                    { aboutModalOpen ?
+                        <Modal className="Modal Modal--small">
+                            <div className="px4 pt4 pb2 text-centered relative">
+                                <span className="absolute top right p4 text-normal text-grey-3 cursor-pointer" onClick={this.closeModal}>
+                                    <Icon name={'close'} width={16} height={16} />
+                                </span>
+                                <div className="text-brand pb2">
+                                    <LogoIcon width={48} height={48} />
+                                </div>
+                                <h2 style={{fontSize: "1.75em"}} className="text-dark">Thanks for using Metabase!</h2>
+                                <p className="pt2">
+                                    <h3 className="text-dark">You're on version {tag}</h3>
+                                    <span className="text-grey-3 text-bold">built on {date}</span>
+                                </p>
+                                <p className="pt2 text-grey-3 text-bold">
+                                    If you require the legalese ...
+                                </p>
+                                <div className="pt1">
+                                    <span className="inline-block half text-centered py1"><a className="link text-bold" href="">License Agreement</a></span>
+                                    <span style={{borderWidth: "2px"}} className="inline-block half text-centered py1 border-left"><a className="link text-bold" href="">Terms of Service</a></span>
+                                </div>
+                            </div>
+                            <div style={{borderWidth: "2px"}} className="p2 h5 text-centered text-grey-3 border-top">
+                                <span className="block"><span className="text-bold">Metabase</span> is a registered Trademark of Metabase, Inc</span>
+                                <span>and is built with care in San Francisco, CA</span>
+                            </div>
+                        </Modal>
+                    : null }
                 </div>
             </OnClickOut>
         );

frontend/app/lib/analytics.js

 /*global ga*/
 
+import MetabaseSettings from "metabase/lib/settings";
+
+
 // Simple module for in-app analytics.  Currently sends data to GA but could be extended to anything else.
 var MetabaseAnalytics = {
     // track a pageview (a.k.a. route change)
@@ -15,8 +18,11 @@ var MetabaseAnalytics = {
 
     // track an event
     trackEvent: function(category, action, label, value) {
+        const { tag } = MetabaseSettings.get('version');
+
         // category & action are required, rest are optional
         if (category && action) {
+            ga('set', 'dimension1', tag);
             ga('send', 'event', category, action, label, value);
         }
     }

frontend/app/setup/components/Setup.react.js

 import React, { Component, PropTypes } from "react";
 
 import LogoIcon from 'metabase/components/LogoIcon.react';
+import MetabaseSettings from "metabase/lib/settings";
+
 import UserStep from './UserStep.react';
 import DatabaseStep from './DatabaseStep.react';
 import PreferencesStep from './PreferencesStep.react';
@@ -20,9 +22,10 @@ export default class Setup extends Component {
     }
 
     renderFooter() {
+        const { tag } = MetabaseSettings.get('version');
         return (
             <div className="SetupHelp bordered border-dashed p2 rounded mb4" >
-                If you feel stuck, <a className="link" href="http://www.metabase.com/docs/latest/getting-started">our getting started guide</a> is just a click away.
+                If you feel stuck, <a className="link" href={"http://www.metabase.com/docs/"+tag+"/getting-started/start.html"} target="_blank">our getting started guide</a> is just a click away.
             </div>
         );
     }

src/metabase/config.clj

@@ -77,8 +77,11 @@
 ;; Metabase version is of the format `GIT-TAG (GIT-SHORT-HASH GIT-BRANCH)`
 
 (defn- version-info-from-shell-script []
-  {:long  (-> (shell/sh "./version")           :out s/trim)
-   :short (-> (shell/sh "./version" "--short") :out s/trim)})
+  (let [[tag hash branch date] (-> (shell/sh "./version") :out s/trim (s/split #" "))]
+    {:tag    tag
+     :hash   hash
+     :branch branch
+     :date   date}))
 
 (defn- version-info-from-properties-file []
   (with-open [reader (io/reader (io/resource "version.properties"))]
@@ -91,8 +94,14 @@
   "Return information about the current version of Metabase.
    This comes from `resources/version.properties` for prod builds and is fetched from `git` via the `./version` script for dev.
 
-     (mb-version) -> {:long \"v0.11.1 (6509c49 master)\", :short \"v0.11.1\"}"
+     (mb-version) -> {:tag: \"v0.11.1\", :hash: \"afdf863\", :branch: \"about_metabase\", :date: \"2015-10-05\"}"
   []
   (if (is-prod?)
     (version-info-from-properties-file)
     (version-info-from-shell-script)))
+
+(defn mb-version-string
+  "Return a formatted version string representing the currently running application."
+  []
+  (let [{:keys [tag hash branch date]} (mb-version-info)]
+    (format "%s (%s %s)" tag hash branch)))

src/metabase/core.clj

@@ -97,7 +97,7 @@
 (defn init
   "General application initialization function which should be run once at application startup."
   []
-  (log/info (format "Starting Metabase version %s..." ((config/mb-version-info) :long)))
+  (log/info (format "Starting Metabase version %s..." (config/mb-version-string)))
   ;; First of all, lets register a shutdown hook that will tidy things up for us on app exit
   (.addShutdownHook (Runtime/getRuntime) (Thread. ^Runnable destroy))
 

version

@@ -5,11 +5,6 @@
 TAG=$(git describe origin/master --tags --abbrev=0)
 HASH=$(git show-ref --head --hash=7 head)            # first 7 letters of hash should be enough; that's what GitHub uses
 BRANCH=$(git symbolic-ref --short HEAD)
+DATE=$(git log -1 --pretty=%ad --date=short)
 
-# ./version           -> v0.11.1 (346cbe2 master)
-# ./version --short   -> v0.11.1
-if [ "$1" == "--short" ]; then
-    echo "$TAG"
-else
-    echo "$TAG ($HASH $BRANCH)"
-fi
+echo "$TAG $HASH $BRANCH $DATE"