ui: Proper display of used floatin ip addresses

warn and allow detach of floating ip address which is connected to a port
with no device assigned to it.

snf-cyclades-app/synnefo/ui/static/snf/css/main.css

@@ -7219,6 +7219,14 @@ input.has-errors {
   /*height: 59px;*/
 }
 
+.nested-model-list .model-item .inner.main-content .no-device {
+  color: #ef0000;
+  position: absolute;
+  top: -20px;
+  left: -42px;
+  width: 200px;
+}
+
 .nested-model-list .model-item .inner.main-content .subtitle {
   position: absolute;
   top: 27px;

snf-cyclades-app/synnefo/ui/static/snf/js/neutron.js

@@ -406,6 +406,7 @@
           if (!synnefo.config.hotplug_enabled && this.get('vm') && vm_active) {
             return false;
           }
+          if (this.get('device_id'))
           var status_ok = _.contains(['DOWN', 'ACTIVE', 'CONNECTED'], 
                                      this.get('status'));
           var vm_status_ok = this.get('vm') && this.get('vm').can_connect();
@@ -507,7 +508,7 @@
 
       model_actions: {
         'remove': [['status'], function() {
-          var status_ok = _.contains(['DISCONNECTED'], this.get('status'))
+          var status_ok = _.contains(['DISCONNECTED'], this.get('status'));
           return status_ok
         }],
         'connect': [['status'], function() {
@@ -517,6 +518,9 @@
         'disconnect': [['status', 'port_id', 'port'], function() {
           var port = this.get('port');
           if (!port) { return false }
+
+          // not connected to a device
+          if (port && !port.get('device_id')) { return true }
           return port.get('can_disconnect');
         }]
       },

snf-cyclades-app/synnefo/ui/templates/partials/ips.html

@@ -10,8 +10,12 @@
         <img data-rv-show="model.in_progress" 
              src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 
              class="progress-indicator" />
-        <span data-rv-hide="model.in_progress" class="key">MAC:</span>
-        <span data-rv-hide="model.in_progress" class="value" data-rv-text="model.mac_address"></span>
+        <span data-rv-show="model.device_id" class="key">MAC:</span>
+        <span data-rv-show="model.device_id" class="value" data-rv-text="model.mac_address"></span>
+        <span data-rv-hide="model.device_id" class="value no-device">
+          No device assigned. 
+          Detach IP, in order to be able to reattach it to a machine.
+        </span>
       </h5>
     </div>
   </div>