{% extends "layout.html" %}
{% block container %}
      {% if not 'bucket_name' in sg_status.keys() %}
        <div class="card" id="data-el-3">
	  <div class="card-body ov-auto">
	    <p>Bucket Configuration Missing: Please set up the <a href='/gcloud/configure'>Transfer Service</a> first.</p>
	  </div>
	</div>
      {% else %}
          <div class="card" id="data-el-3">
            <div class="card-body ov-auto">
              <h5 class="card-title">Bucket Space Utilization</h5>
                <div class="row" style="margin: 10px">
			Bucket URL: <div id="bucket_url"> {{ bucket_path|safe }} </div>
		</div>
                <div class="row" style="margin: 10px">
			Bucket Usage: <div id="bucket_usage"> NaN </div>
                </div>
                <div class="input-group" style="margin-top: 10px">
                  <input type="text" class="form-control" readonly>
                  <div class="input-group-append">
		    <button id='calculate_bksize' class="btn btn-dark text-white">Calculate</button>
                  </div>
                </div>
            </div>
          </div>
          <div class="card" id="data-el-3">
            <div class="card-body ov-auto">
              <h5 class="card-title">Check Bucket Health</h5>
          {% if bucket_health != False %}
                <div class="row" style="margin: 10px">
			Measurement time: <div id="measurement_time"> {{ bucket_health['sysinfo']['gmt_timestamp'] }}</div>
                </div>
                <div class="row" style="margin: 10px">
			Bucket URI: <div id="bucket_uri"> {{ bucket_health['bucket_uri'] }} </div>
		</div>
                <div class="row" style="margin: 10px">
			gsutil Version: <div id="gsutil_version"> {{ bucket_health['gsutil_version'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			boto Version: <div id="boto_version"> {{ bucket_health['boto_version'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Running on GCE: <div id="running_on_gce"> {{ bucket_health['sysinfo']['on_gce'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Bucket location: <div id="bucket_location"> {{ bucket_health['sysinfo']['bucket_location'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Bucket storage class: <div id="bucket_storage_class"> {{ bucket_health['sysinfo']['bucket_storageClass'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			CPU Count: <div id="cpu_count"> {{ bucket_health['sysinfo']['cpu_count'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			CPU Load Average: <div id="bucket_location"> {{ bucket_health['sysinfo']['load_avg'][0] }}, {{ bucket_health['sysinfo']['load_avg'][1] }}, {{ bucket_health['sysinfo']['load_avg'][2] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Total Memory: <div id="total_memory"> {{ bucket_health['sysinfo']['meminfo']['mem_total'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Free Memory: <div id="free_memory"> {{ bucket_health['sysinfo']['meminfo']['mem_free'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Boto HTTPS Enabled: <div id="boto_https_enabled"> {{ bucket_health['sysinfo']['boto_https_enabled'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Requested routed through proxy: <div id="using_proxy"> {{ bucket_health['sysinfo']['using_proxy'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Latency of the DNS lookup for Google Storage server (ms): <div id="dns_latency"> {{ bucket_health['sysinfo']['google_host_dns_latency'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Latencies connecting to Google Storage server IPs (ms): <div id="connect_latency"> {{ bucket_health['sysinfo']['google_host_connect_latencies'] }} </div>
                </div>
                <div class="row" style="margin: 10px">
			Write throughput: <div id="write_throughput"> {{ bucket_health['write_throughput']['bytes_per_second'] }}/s </div>
                </div>
                <div class="row" style="margin: 10px">
			Read throughput: <div id="patallelism_strategy"> {{ bucket_health['read_throughput']['bytes_per_second'] }}/s </div>
                </div>
          {% endif %}
                <div class="input-group" style="margin-top: 10px">
                  <input id='check_results' type="text" class="form-control" readonly>
                  <div class="input-group-append">
		    <button id='reload_bucket_health' class="btn btn-dark text-white">Reload</button>
		    <button id='check_bucket_health' class="btn btn-dark text-white">Check</button>
                  </div>
                </div>
            </div>
          </div>
	  <script>
		$(function() {
			$('#reload_bucket_health').hide();

			$('#calculate_bksize').click(function(){
				$('#bucket_usage').html('Calculating...');
				$.getJSON('/bucket/usage', function(data) {
					$('#bucket_usage').html(data['usage'] + ' ' + data['unit']);
					// $('#bucket_url').html(data['url']);
				});
			});
			$('#check_bucket_health').click(function(){
				$.getJSON('/bucket/health?method=check', function(data) {
					$('#check_results').val(data['message']);
					$('#check_bucket_health').hide();
					$('#reload_bucket_health').show();
				});
			});
			$('#reload_bucket_health').click(function(){
				$('#check_results').val('Reloading...');
				$.getJSON('/bucket/health?method=reload', function(data) {
					$('#check_results').val(data['message']);
					if (data['result'] == 'Reload') {
						setTimeout(function(){
							location.reload();
						}, "3000");
					}
				});
			});
		});
          </script>
	{% endif %}
{% endblock %}