dashboard: add connection details

circle/dashboard/static/dashboard/dashboard.css

@@ -334,12 +334,14 @@ a.hover-black {
 }
 }
 
 
 /* vm details connection */
 /* vm details connection */
-.vm-details-pw dd {
-  margin-left: 155px;
+.vm-details-connection dd {
+  padding-top: 8px;
 }
 }
 
 
-.vm-details-pw dt {
-  width: 140px;
+.vm-details-connection dt {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 15px;
 }
 }
 
 
 #vm-details-pw-confirm {
 #vm-details-pw-confirm {
@@ -347,6 +349,10 @@ a.hover-black {
   display: none;
   display: none;
 }
 }
 
 
+#vm-details-pw-confirm dt {
+  text-align: right;
+}
+
 .dashboard-vm-details-network-h3 {
 .dashboard-vm-details-network-h3 {
   margin-top: 20px;
   margin-top: 20px;
 }
 }
@@ -663,3 +669,6 @@ textarea[name="list-new-namelist"] {
   display: none;
   display: none;
 }
 }
 
 
+#vm-details-connection-string-copy {
+  cursor: pointer;
+}

circle/dashboard/static/dashboard/vm-details.js

@@ -289,6 +289,11 @@ $(function() {
     $(this).parent("div").slideUp();
     $(this).parent("div").slideUp();
   });
   });
 
 
+  // select connection string
+  $("#vm-details-connection-string-copy").click(function() {
+    $("#vm-details-connection-string").focus();
+  });
+
 });
 });
 
 
 
 

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

@@ -67,10 +67,15 @@
           <span>{{ instance.get_status_display|upper }}</span>
           <span>{{ instance.get_status_display|upper }}</span>
         </span>
         </span>
       </div>
       </div>
-      <h3>{% trans "Connection" %}</h3>
-      <input type="text" value="{{ instance.get_connect_command }}" class="form-control" readonly />
-      <dl class="dl-horizontal vm-details-pw">
-        <dt>{% trans "Password" %}:</dt>
+      <h3>{% trans "Connection details" %}</h3>
+      <dl class="dl-horizontal vm-details-connection">
+        <dt>{% trans "Protocol" %}</dt>
+        <dd>{{ instance.access_method|upper }}</dd>
+        <dt>{% trans "Host" %}</dt>
+        <dd>{{ instance.get_connect_host }}:<strong>{{ instance.get_connect_port }}</strong></dd>
+        <dt>{% trans "Username" %}</dt>
+        <dd>cloud</dd>
+        <dt>{% trans "Password" %}</dt>
         <dd>
         <dd>
           <div class="input-group">
           <div class="input-group">
             <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags" value="{{ instance.pw }}"/>
             <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags" value="{{ instance.pw }}"/>
@@ -92,6 +97,14 @@
           </dd>
           </dd>
         </div>
         </div>
       </dl>
       </dl>
+
+      <div class="input-group">
+        <span class="input-group-addon input-tags">{% trans "Command" %}</span>
+        <input type="text" value="{{ instance.get_connect_command }}" id="vm-details-connection-string" class="form-control input-tags" />
+        <span class="input-group-addon input-tags" id="vm-details-connection-string-copy">
+          <i class="icon-copy" title="{% trans "Select all" %}"></i>
+        </span>
+      </div>
     </div>
     </div>
     <div class="col-md-8" id="vm-detail-pane">
     <div class="col-md-8" id="vm-detail-pane">
       <div class="panel panel-default" id="vm-detail-panel">
       <div class="panel panel-default" id="vm-detail-panel">