{% extends 'space_base.html' %}
{% load staticfiles %}

{% block main %}

  <div class="row">
    {% if cluster %}
    <div class="col-md-12" style="text-align: right;margin-bottom: 10px;">
    <a class="btn btn-primary btn-sm" href="{% url 'scispace_data_instance_add' cluster.id %}">
      <icon class="fa fa-plus"></icon> Add Instance</a>
    </div>
    <div class="col-md-12" style="overflow-x: scroll;">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>DataSet</th>
            <!-- <th>Cluster</th> -->
            <th style="width:100px;">Engine</th>
            <th>Uri</th>
            <th>Owner</th>
            <!-- <th>Created Time</th> -->
            <th>BuiltTime</th>
            <th>Status</th>
            <th>Remark</th>
            <th>Action</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        {% for dt in data_instances %}
          <tr>
            <th scope="row">{{forloop.counter}}</th>
            <td>{{dt.name}}</td>
            <!-- <td>{{dt.source}}</td> -->
            <!-- <td>{{dt.uri}}</td> -->
            <td>{{dt.dataset.name}}</td>
            <!-- <td>{{dt.cluster.name}}</td> -->
            <td>
              {% if dt.dataset.type == 0%}
              <icon class="fa fa-table" style="font-size:10px;"></icon>              
              {% elif dt.dataset.type == 1%}
              <img src="{% static 'hdfs.svg'%}" style="width:10px;">
              {% elif dt.dataset.type == 2%}
              <icon class="fa fa-file-text-o" style="font-size:10px;"></icon>
              {% elif dt.dataset.type == 3%}
              <img src="{% static 'hive.svg'%}" style="width:10px;">
              {% elif dt.dataset.type == 4%}
              <img src="{% static 'event.svg'%}" style="width:10px;">
              {% elif dt.dataset.type == 5%}
              <img src="{% static 'gstore.svg'%}" style="width:10px;">
              {% elif dt.dataset.type == 6%}
              <img src="{% static 'star.svg'%}" style="width:10px;">
              {% endif %}
              {{dt.engine.name}}
            </td>
            <td>{{dt.uri}}</td>
            <td>{{dt.owner}}</td>  
            <!-- <td>{{dt.created_time|date:'Y-m-d H:i:s'}}</td> -->
            <td>{{dt.built_time|date:'Y-m-d H:i:s'}}</td>
            <td id="status_td_{{dt.id}}">{{dt.status_name}}</td>          
            <td>{{dt.remark|default_if_none:""}}</td>
            <td> 
              <a id="query_btn_{{dt.id}}" {%if dt.status_name == "loading"%}style="display:none;"{%endif%} href="{% url 'scispace_data_instance_query' cluster.id dt.id %}" class="btn btn-primary btn-sm">Query</a> 
            </td>
            <td>
              <a href="{% url 'scispace_data_instance_delete' cluster.id %}?dt_id={{dt.id}}" class="btn btn-danger btn-sm">Delete</a> 
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>

    </div>
            
    {% endif %}
  </div>

<script type="text/javascript">
  var instance_ids = [{%for dt in data_instances%}"{{dt.id}}",{%endfor%}];
  function update_status(){
    for(var i in instance_ids) {
      setInterval("get_status('" + instance_ids[i] + "')", 60000);
      get_status(instance_ids[i]);
    }
  }
  update_status();
  function get_status(instance_id) {
    $.ajax({
      url: "{% url 'scispace_data_instance_get_info_ajax' cluster.id %}",
      type: 'get',
      data: {
        'instance_id': instance_id,
      },
      cache:false,
      success: function(data) {
        if (data.res == true){
          var status_name = data.info.status_name;
          $("#status_td_" + instance_id).text(status_name);
          if(status_name != "loading"){            
            $("#query_btn_" + instance_id).show();
          }
          else{
            $("#query_btn_" + instance_id).hide();
          }

        }
      },
    }, 'json');
  }

</script>
{% endblock %}
