dashboard: add you can connect now text to vm details

circle/dashboard/static/dashboard/activity.js

@@ -168,6 +168,7 @@ $(function() {
         } else {
         } else {
           in_progress = false;
           in_progress = false;
           if(reload_vm_detail) location.reload();
           if(reload_vm_detail) location.reload();
+          if(runs > 1) addConnectText();
         }
         }
         $('a[href="#activity"] i').removeClass('fa-spin');
         $('a[href="#activity"] i').removeClass('fa-spin');
       },
       },
@@ -179,6 +180,17 @@ $(function() {
 });
 });
 
 
 
 
+function addConnectText() {
+  var activities = $(".timeline .activity");
+  if(activities.length > 1) {
+    if(activities.eq(0).data("activity-code") == "vm.Instance.wake_up" ||
+       activities.eq(0).data("activity-code") == "vm.Instance.agent") {
+      $("#vm-detail-successfull-boot").slideDown(500);
+    }
+  }
+}
+
+
 String.prototype.hashCode = function() {
 String.prototype.hashCode = function() {
   var hash = 0, i, chr, len;
   var hash = 0, i, chr, len;
   if (this.length === 0) return hash;
   if (this.length === 0) return hash;

circle/dashboard/static/dashboard/dashboard.less

@@ -1255,3 +1255,8 @@ textarea[name="new_members"] {
   z-index: 99999;
   z-index: 99999;
   color: #101010;
   color: #101010;
 }
 }
+
+#vm-detail-successfull-boot {
+  margin-bottom: 20px;
+  display: none;
+}

circle/dashboard/templates/dashboard/vm-detail.html

@@ -94,6 +94,7 @@
           <span>{{ instance.get_status_display|upper }}</span>
           <span>{{ instance.get_status_display|upper }}</span>
         </span>
         </span>
       </div>
       </div>
+
       <h3>{% trans "Connection details" %}</h3>
       <h3>{% trans "Connection details" %}</h3>
       <dl class="dl-horizontal vm-details-connection">
       <dl class="dl-horizontal vm-details-connection">
         <dt>{% trans "Protocol" %}</dt>
         <dt>{% trans "Protocol" %}</dt>
@@ -180,6 +181,12 @@
       {% endif %}
       {% endif %}
     </div>
     </div>
     <div class="col-md-8" id="vm-detail-pane">
     <div class="col-md-8" id="vm-detail-pane">
+      <div class="big" id="vm-detail-successfull-boot">
+        <span class="label label-info" data-status="{{ instance.status }}">
+          <i class="fa fa-check"></i>
+          {% trans "The virtual machine successfully started, you can connect now." %}
+        </span>
+      </div>
       <div class="panel panel-default" id="vm-detail-panel">
       <div class="panel panel-default" id="vm-detail-panel">
         <ul class="nav nav-pills panel-heading">
         <ul class="nav nav-pills panel-heading">
           <li class="active">
           <li class="active">