summaryrefslogtreecommitdiff
path: root/django-openstack/django_openstack/templates/django_openstack/dash/instances/detail.html
blob: 414017f89a89f5539b2095bb45a5e67f7e48a6de (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
{% extends 'django_openstack/dash/base.html' %}
{% load i18n %}

{% block sidebar %}
  {% with current_sidebar="instances" %}
    {{block.super}}
  {% endwith %}
{% endblock %}

{% block page_header %}
  {# to make searchable false, just remove it from the include statement #}
  {% include "django_openstack/common/_page_header.html" with title="Instance Detail: "|add:instance.name %}
{% endblock page_header %}

{% block dash_main %}
<ul id="instance_tabs">
  <li class="active"><a class="overview" href="#">{% trans "Overview" %}</a></li>
  <li><a class="log" href="#">{% trans "Log" %}</a></li>
  <li><a class="vnc" href="#">{% trans "VNC" %}</a></li>
</ul>

  <div class="dash_block">
    <div id="overview" class="tab_wrapper">
      <ul>
        <li>
          <div class="status">
            <h4>{% trans "Status" %}</h4>
            <ul>
              <li><span>{% trans "Status:" %}</span> {{instance.status}}</li>
              <li><span>{% trans "Instance Name:" %}</span> {{instance.name}}</li>
              <li><span>{% trans "Instance ID:" %}</span> {{instance.id}}</li>
            </ul>
          </div>
        </li>

        <li>
          <div class="specs">
            <h4>{% trans "Specs" %}</h4>
            <ul>
              <li><span>{% trans "RAM:" %}</span> {{instance.attrs.memory_mb}}</li>
              <li><span>{% trans "VCPUs:" %}</span> {{instance.attrs.vcpus}} {% trans "VCPU" %}</li>
              <li><span>{% trans "Disk:" %}</span> {{instance.attrs.disk_gb}}{% trans "GB Disk" %}</li>
            </ul>
          </div>
        </li>

        <li>
          <div class="meta">
            <h4>{% trans "Meta" %}</h4>
            <ul>
              <li><span>{% trans "Key name:" %}</span> {{instance.attrs.key_name}}</li>
              <li><span>{% trans "Security Group(s):" %}</span> {% for group in instance.attrs.security_groups %}{{group}}, {% endfor %}</li>
              <li><span>{% trans "Image Name:" %}</span> {{instance.image_name}}</li>
            </ul>
          </div>
        </li>
        <li>
          <div>
            <h4>{% trans "Volumes" %}</h4>
            <ul>
              {% if volumes %}
                {% for volume in volumes %}
                <li>
                  <span>{% trans "Volume:" %}</span>
                  <a href="{% url dash_volumes_detail request.user.tenant_name volume.volumeId %}">
                    {{ volume.volumeId }} ({{ volume.device }})
                  </a>
                </li>
                {% endfor %}
              {% else %}
              <li><span>{% trans "None Attached" %}</span></li>
              {% endif %}
            </ul>
          </div>
        </li>
      </ul>
    </div>

    <div id="log" class="tab_wrapper">
      <a class="view_full" target="_blank" href="{% url dash_instances_console request.user.tenant_id instance.id %}">{% trans "View Full Log" %}</a>
      <pre class="logs"></pre>
    </div>

    <div id="vnc" class="tab_wrapper">
      <iframe src="{{vnc_url}}" width="720" height="420"></iframe>
    </div>

  </div>
{% endblock %}

{% block footer_js %}
  <script type="text/javascript" charset="utf-8">
    $(function(){
      $(".dash_block div.tab_wrapper").hide()
      $(".dash_block div.tab_wrapper:first").show()

      $("#instance_tabs a").click(function(e){
        e.preventDefault()
        e.stopPropagation()
        $(".dash_block div.tab_wrapper").hide('fast')
        $(".dash_block div#"+$(this).attr('class')).show('fast')

        $("#instance_tabs li").removeClass('active')
        $(this).parent().toggleClass('active')
      })

      $('a.log').click(function(){
        getlog()
      })

      setInterval(function(){
        if ($("a.log").parent().hasClass('active')) {
          getlog()
        }
      }, 3000)
    })

    function getlog(){
      $.get("{% url dash_instances_console instance.attrs.tenant_id instance.id %}?length=25", function(data){
        $("#log .logs").html(data)
      })
    }
  </script>
{% endblock footer_js %}