fix up the rendering of retired metrics in the field list and the description...

fix up the rendering of retired metrics in the field list and the description on retired metric tooltips.

frontend/src/query_builder/AggregationPopover.jsx

@@ -94,7 +94,7 @@ export default class AggregationPopover extends Component {
         let { tableMetadata } = this.props;
         return (
             <div className="p1">
-                <Tooltip tooltip={<QueryDefinitionTooltip object={metric} tableMetadata={tableMetadata} />}>
+                <Tooltip tooltip={<QueryDefinitionTooltip type="metric" object={metric} tableMetadata={tableMetadata} />}>
                     <span className="QuestionTooltipTarget" />
                 </Tooltip>
             </div>
@@ -150,6 +150,7 @@ export default class AggregationPopover extends Component {
                     itemIsSelected={this.itemIsSelected.bind(this)}
                     renderSectionIcon={(s) => <Icon name={s.icon} width="18" height="18" />}
                     renderItemExtra={this.renderItemExtra.bind(this)}
+                    getItemClasses={(item) => item.metric && !item.metric.is_active ? "text-grey-3" : null }
                 />
             );
 

frontend/src/query_builder/QueryDefinitionTooltip.jsx

@@ -6,18 +6,22 @@ import FieldSet from "../admin/datamodel/components/FieldSet.jsx";
 
 import Query from "metabase/lib/query";
 
+
 export default class QueryDefinitionTooltip extends Component {
+
     static propTypes = {
+        type: PropTypes.string,
         object: PropTypes.object.isRequired,
         tableMetadata: PropTypes.object.isRequired
     };
 
     render() {
-        const { object, tableMetadata } = this.props;
+        const { type, object, tableMetadata } = this.props;
+
         return (
             <div className="p2" style={{width: 250}}>
                 <div className="mb2">
-                    {object.description}
+                    { type && type === "metric" && !object.is_active ? "This metric has been retired.  It's no longer available for use." : object.description }
                 </div>
                 <FieldSet legend="Definition" border="border-light">
                     <div className="TooltipFilterList">