<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="observatory_element.html">

<polymer-element name="metrics-page" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      ul li:hover:not(.selected) {
        background-color: #FFF3E3;
      }
      .selected {
        background-color: #0489c3;
      }
      .graph {
        min-height: 600px;
      }
    </style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
      <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ makeLink('/metrics', isolate) }}" anchor="metrics" last="{{ true }}"></nav-menu>

      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>
    <div class="flex-row">
      <div class="flex-item-20-percent">
        <ul>
          <template repeat="{{ metric in isolate.dartMetrics.values }}">
            <template if="{{ metric == selectedMetric }}">
              <li class="selected">
                {{ metric.name }}
              </li>
            </template>
            <template if="{{ metric != selectedMetric }}">
              <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
                {{ metric.name }}
              </li>
            </template>
          </template>
          <template repeat="{{ metric in isolate.nativeMetrics.values }}">
            <template if="{{ metric == selectedMetric }}">
              <li class="selected">
                {{ metric.name }}
              </li>
            </template>
            <template if="{{ metric != selectedMetric }}">
              <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
                {{ metric.name }}
              </li>
            </template>
          </template>
        </ul>
      </div>
      <div class="flex-item-80-percent">
        <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
        </metrics-graph>
        <div>
          <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
          </metric-details>
        </div>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="metric-details" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <div class="content-centered">
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">name</div>
          <div class="memberValue">{{ metric.name }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">description</div>
          <div class="memberValue">{{ metric.description }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">current value</div>
          <div class="memberValue">{{ metric.value }}</div>
        </div>
        <template if="{{ (metric != null) && (metric.min != null) }}">
          <div class="memberItem">
            <div class="memberName">minimum</div>
            <div class="memberValue">{{ metric.min }}</div>
          </div>
        </template>
        <template if="{{ (metric != null) && (metric.max != null) }}">
          <div class="memberItem">
            <div class="memberName">maximum</div>
            <div class="memberValue">{{ metric.max }}</div>
          </div>
        </template>
        <div class="memberItem">
          <div class="memberName">refresh rate</div>
          <div class="memberValue">
            <select id="refreshrate" on-change="{{ refreshRateChange }}">
              <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
                   in object.dart -->
              <option value="8000">Every eight seconds</option>
              <option value="4000">Every four seconds</option>
              <option value="2000">Every two seconds</option>
              <option value="1000">Once a second</option>
              <option value="100">Ten times per second</option>
              <option value="0" selected="selected">Never</option>
            </select>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">sample buffer size</div>
          <div class="memberValue">
            <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
              <option value="10">10</option>
              <option value="100" selected="selected">100</option>
              <option value="1000">1000</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="metrics-graph" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
    <style>
.chart-wrapper {
  padding: 40px;
  width: 800px;
}
.chart-host-wrapper {
  height: 300px;
}
    </style>
    <div class="chart-wrapper" id="metric-chart">
        <div class="chart-host-wrapper">
            <div class="chart-host" dir="ltr"></div>
        </div>
    </div>
  </template>
</polymer-element>

<script type="application/dart" src="metrics.dart"></script>