Incompatible plugins indication

Change-Id: Ibc0acbb5bb91f4eb16bb4bcd6e2e6a69dc969c11
Closes-Bug: #1569891

static/styles/main.less

@@ -1578,6 +1578,12 @@ input[type=range] {
     &:nth-child(odd) {
       background: @light-blue;
     }
+    &.unsupported {
+      .glyphicon {
+        height: 18px;
+        margin-right: 4px;
+      }
+    }
   }
   .plugin-page-links {
     margin-top: 30px;

static/translations/core.json

@@ -311,7 +311,8 @@
                 "more_info": "For more information, visit",
                 "plugins_catalog": "Plugins Catalog",
                 "plugins_documentation": "Plugins Documentation",
-                "no_plugins": "There are no plugins installed."
+                "no_plugins": "There are no plugins installed.",
+                "unsupported_plugin": "Plugin is incompatible with all supported releases"
             },
             "clusters_page": {
                 "title": "My OpenStack Environments",

static/views/plugins_page.js

@@ -20,6 +20,7 @@ import i18n from 'i18n';
 import React from 'react';
 import utils from 'utils';
 import models from 'models';
+import {Tooltip} from 'views/controls';
 
 var PluginsPage = React.createClass({
   statics: {
@@ -27,17 +28,29 @@ var PluginsPage = React.createClass({
     navbarActiveElement: 'plugins',
     breadcrumbsPath: [['home', '#'], 'plugins'],
     fetchData() {
+      var releases = app.releases;
       var plugins = new models.Plugins();
-      return plugins.fetch()
-        .then(() => {
-          return $.when(...plugins.map((plugin) => {
-            var links = new models.PluginLinks();
-            links.url = _.result(plugin, 'url') + '/links';
-            plugin.set({links: links});
-            return links.fetch();
-          }));
-        })
-        .then(() => ({plugins}));
+      var availableVersions = {};
+      return $.when(
+        plugins.fetch()
+          .then(() => {
+            return $.when(...plugins.map((plugin) => {
+              var links = new models.PluginLinks();
+              links.url = _.result(plugin, 'url') + '/links';
+              plugin.set({links: links});
+              return links.fetch();
+            }));
+          }),
+        releases.fetch({cache: true})
+          .then(() => {
+            releases.each((release) => {
+              availableVersions[
+                release.get('operating_system').toLowerCase() + '-' + release.get('version')
+              ] = true;
+            });
+          })
+      )
+      .then(() => ({plugins, availableVersions}));
     }
   },
   getDefaultProps() {
@@ -78,11 +91,24 @@ var PluginsPage = React.createClass({
     return data;
   },
   renderPlugin(plugin, index) {
+    var unsupported = !_.any(
+      plugin.get('releases'),
+      (release) => this.props.availableVersions[release.os + '-' + release.version]
+    );
+    var classes = {
+      plugin: true,
+      unsupported
+    };
     return (
-      <div key={index} className='plugin'>
+      <div key={index} className={utils.classNames(classes)}>
         <div className='row'>
           <div className='col-xs-2' />
           <h3 className='col-xs-10'>
+            {unsupported &&
+              <Tooltip text={i18n('plugins_page.unsupported_plugin')}>
+                <span className='glyphicon glyphicon-warning-sign' aria-hidden='true' />
+              </Tooltip>
+            }
             {plugin.get('title')}
           </h3>
         </div>