ganeti_web/templates/node/detail.html

   1 {% extends "menu_base.html" %}
   2 {% load webmgr_tags %}
   3 {% load i18n %}
   4 {% block head %}
   5     <!-- "import" the CSS and javascript for this template -->
   6     <link href="{{MEDIA_URL}}/css/jquery-ui.css" rel="stylesheet"
   7             type="text/css"/>
   8     <script type="text/javascript"
   9             src="{{MEDIA_URL}}/js/jquery-ui.min.js"></script>
  10     <script type="text/javascript"
  11             src="{{MEDIA_URL}}/js/jquery.form.js"></script>
  12     <script type="text/javascript"
  13             src="{{MEDIA_URL}}/js/jquery.progressbar.js"></script>
  14
  15     {% include "job_status.html" %}
  16
  17     <script type="text/javascript">
  18         var actions_enabled = true;
  19         var PBAR_CONF = {
  20             steps: 0,
  21             showText: true,
  22             textFormat: 'fraction',
  23             boxImage: '/media/images/progressbar/progressbar.gif',
  24             barImage: {
  25                 0:  '/media/images/progressbar/progressbg_red.gif',
  26                 30: '/media/images/progressbar/progressbg_orange.gif',
  27                 50: '/media/images/progressbar/progressbg_yellow.gif',
  28                 75: '/media/images/progressbar/progressbg_green.gif'
  29             }
  30         };
  31
  32         $(document).ready(function() {
  33             $('#tabs').tabs({
  34                 spinner: false,
  35                 cache: false, // no-cache b/c we want data to update
  36                 //cache: true,
  37                 select: function(event, ui) {
  38                     window.location.hash = ui.tab.hash;
  39                 },
  40                 ajaxOptions: {
  41                     error: function(xhr, status, index, anchor) {
  42                         $(anchor.hash).html("{% trans "Couldn't load this tab. We'll try to fix this as soon as possible" %}.");
  43                     }
  44                 }
  45             });
  46
  47             $(".ram, .disk").progressBar(PBAR_CONF);
  48
  49             $(".modify, .migrate, .evacuate").click(function(event){
  50                 event.preventDefault();
  51                 if (actions_enabled) {
  52                     $('.qtip').qtip('destroy');
  53                     var $this = $(this);
  54                     var title;
  55
  56                     if ($this.hasClass("modify")) {
  57                         title = "{% trans "Modify Role" %}";
  58                     } else if ($this.hasClass("migrate")) {
  59                         title = "{% trans "Migrate Primary Virtual Machines" %}";
  60                      } else {
  61                         title = "{% trans "Evacuate Secondary Virtual Machines" %}";
  62                     }
  63
  64                     $(this).qtip({
  65                         content: {
  66                            url: this.href,
  67                            title: {text:title, button:"close"}
  68                         },
  69                         position: {
  70                             corner:{
  71                                 target:'center', tooltip:'center'
  72                             }
  73                         },
  74                         style: {
  75                             name: 'dark',
  76                             border:{radius:5},
  77                             width:400,
  78                             background:'#eeeeee'
  79                         },
  80                         show: {when:false, ready:true},
  81                         hide: {fixed: true, when:false},
  82                         api:{onShow:function(){
  83                             $(".ajax_form input[type!=hidden], " +
  84                                     ".ajax_form select").first().focus();
  85                         }}
  86                     });
  87                 }
  88             });
  89
  90             $(".node_role_form, .node_migrate_form, .node_evacuate_form")
  91                 .live("submit", function(event){
  92                     event.preventDefault();
  93                     $("#errors").empty();
  94                     $(this).ajaxSubmit({success: node_form_response});
  95             });
  96
  97             {% if node.last_job_id %}
  98                 {# there is a running job, display it and poll for status #}
  99                 get_job_status({{node.last_job.job_id}});
 100                 poll_job_status({{node.last_job.job_id}}, job_complete);
 101             {% else %}
 102                 {% if node.error %}
 103                     display_ganeti_error("{{node.error}}");
 104                 {% endif %}
 105             {% endif %}
 106         });
 107
 108         function node_action_response(result) {
 109             if (result.ops == undefined) {
 110                 display_ganeti_error(result[1]);
 111                 actions_enabled = true;
 112                 $('#actions a').removeClass('disabled');
 113             } else {
 114                 poll_job_status(result['id'], job_complete);
 115                 display_job(result);
 116             }
 117         }
 118
 119         function job_complete() {
 120             window.location.reload();
 121         }
 122
 123         function node_form_response(responseText, statusText, xhr, $form) {
 124             if (responseText["opstatus"] == undefined) {
 125                 // no opstatus, must be an error
 126                 // parse errors
 127                 for (var key in responseText) {
 128                     $("#errors").append("<li>"+ responseText[key] +"</li>");
 129                 }
 130             } else {
 131                 $('.qtip').qtip("hide");
 132                 poll_job_status(responseText['id'], job_complete);
 133                 display_job(responseText);
 134             }
 135         }
 136
 137         function display_ganeti_error(msg) {
 138             $("#messages").empty();
 139             var html = "<li class='error'>{% trans "Error" %}:<p>" + msg + "</p></li>";
 140             $("#messages").append(html);
 141         }
 142     </script>
 143 {% endblock %}
 144
 145 {% block content %}
 146 <h1>
 147     <a class="breadcrumb" href="{% url cluster-detail cluster.slug %}">
 148         {{cluster.hostname}}
 149     </a>
 150     : {{node.hostname}}
 151 </h1>
 152
 153 <ul id="messages"></ul>
 154 <div id="tabs">
 155     <ul>
 156         <li><a href="#detail"><span>{% trans "Detail" %}</span></a></li>
 157         <li>
 158             <a title="primary"
 159                     href="{% url node-primary-vms cluster.slug node.hostname %}">
 160                 <span>{% trans "Primary" %}</span>
 161             </a>
 162         </li>
 163         <li>
 164             <a title="secondary"
 165                     href="{% url node-secondary-vms cluster.slug node.hostname %}">
 166                 <span>{% trans "Secondary" %}</span>
 167             </a>
 168         </li>
 169         <li>
 170             <a title="log"
 171                     href="{% url node-object_log cluster.slug node.hostname %}">
 172                 <span>{% trans "Log" %}</span>
 173             </a>
 174         </li>
 175     </ul>
 176     <div id="detail">
 177         <ul id="actions">
 178             {% if node_count > 1 %}
 179             <li>
 180                 <a class="button modify" title="modifies the role of this node"
 181                         href="{% url node-role cluster.slug node.hostname %}">
 182                     {% trans "Change Role" %}
 183                 </a>
 184             </li>
 185             <li>
 186                 <a class="button migrate"
 187                         title="migrates all primary instances of this node"
 188                         href="{% url node-migrate cluster.slug node.hostname %}">
 189                     {% trans "Migrate" %}
 190                 </a>
 191             </li>
 192             {% comment %}
 193             Disabling this button for now till this is fixed upstream
 194
 195             <li>
 196                 <a class="button evacuate"
 197                         title="migrates all secondary instances off this node"
 198                         href="{% url node-evacuate cluster.slug node.hostname %}">
 199                     {% trans "Evacuate" %}
 200                 </a>
 201             </li>
 202             {% endcomment %}
 203             {% endif %}
 204         </ul>
 205         <table id="nodes" class="overview horizontal">
 206             <tr><th>Status</th><td class="status">
 207                 {% if node.info.offline %}
 208                     <div class="icon_stopped" title="Offline"></div>
 209                 {% else %}
 210                     <div class="icon_running" title="Online"></div>
 211                 {% endif %}
 212                 </td>
 213             </tr>
 214             <tr><th>{% trans "Primary IP" %}</th><td>{{node.info.pip}}</td></tr>
 215             <tr><th>{% trans "Secondary IP" %}</th><td>{{node.info.sip}}</td></tr>
 216             <tr><th>{% trans "Role" %}</th><td>{{node.info.role|node_role}}</td></tr>
 217             <tr>
 218                 <th>{% trans "Master Candidate" %}</th>
 219                 <td>{{node.info.master_candidate|checkmark}}</td>
 220             </tr>
 221             <tr><th>{% trans "Drained" %}</th><td>{{node.info.drained|checkmark}}</td></tr>
 222             <tr><th>{% trans "Ram Free [GiB]" %}</th><td class="ram">{% node_memory node %}</td></tr>
 223             <tr><th>{% trans "Disk Free [GiB]" %}</th><td class="disk">{% node_disk node %}</td>
 224             <tr>
 225                 <th>{% trans "Virtual Machines" %}</th>
 226                 <td>{{ node.info.pinst_cnt }} / {{ node.info.sinst_cnt }}</td>
 227             </tr>
 228         </table>
 229     </div>
 230 </div>
 231 {% endblock %}