<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css" type="text/css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" type="text/css">
  <link rel="stylesheet" href="style.css" type="text/css">
  <link rel="shortcut icon" href="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo.png">
  <meta name="viewport" content="initial-scale=1">

  <title>Kubernetes Submit Queue</title>
</head>

<body ng-app="SubmitQueueModule" ng-controller="SQCntl as cntl">
  <!-- Indent the whole thing -->
  <md-content class="md-padding" layout="column">
    <!-- Display the white border around the indented portion -->
    <md-content class="md-whiteframe-z2">
      <md-toolbar layout="row" layout-align="space-around center">
        <h1 class="md-display-2">Submit Queue Status</h1>
        <a ng-href="https://k8s.io"><img src="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo.png" class="titleLogo"></a>
      </md-toolbar>
      <md-toolbar class="md-warn" ng-show="cntl.failedBuild">
        <h2 class="md-toolbar-tools">E2E Tests Failing. Entire Submit Queue Blocked.</h2>
      </md-toolbar>
      <md-content class="md-padding">
        <md-tabs md-dynamic-height md-border-bottom>

          <md-tab label="PR's">
            <md-content class="md-padding">
              <md-content class="md-whiteframe-z2">
                <md-toolbar>
                  <h2 class="md-toolbar-tools">Pull Requests</h2>
                </md-toolbar>
                <form ng-submit="$event.preventDefault()">
                  <md-autocomplete md-selected-item="cntl.selectedItem" md-search-text="cntl.prDisplayValue" md-search-text-change="cntl.updatePRVisibility()" md-selected-item-change="cntl.updatePRVisibility()" md-items="item in cntl.querySearch(cntl.prDisplayValue)" md-item-text="item.display"
                  md-min-length="0" placeholder="Enter username or PR number">
                    <md-item-template>
                      <span md-highlight-text="cntl.prDisplayValue" md-highlight-flags="^i">{{item.display}}</span>
                    </md-item-template>
                    <md-not-found>
                      No matches found for "{{cntl.prDisplayValue}}".
                    </md-not-found>
                  </md-autocomplete>
                </form>
              </md-content>
              <md-list>
                <md-list-item class="md-2-line" ng-repeat="pr in cntl.prs" ng-show="pr.show">
                  <a class="md-avatar" ng-href="https://github.com/kubernetes/kubernetes/pulls/{{pr.Login}}">
                    <img ng-src="{{pr.AvatarURL}}" alt="{{pr.Login}}">
                  </a>
                  <md-content class="md-list-item-text" layout="column">
                    <h3 class="md-body-1">
                      <a ng-href="{{pr.URL}}">#{{pr.Num}}: {{pr.Title}}</a>
                    </h3>
                    <h4 class="md-body-2">{{pr.Reason}}</h4>
                  </md-content>
                  <md-divider md-inset ng-if="!$last"></md-divider>
                </md-list-item>
              </md-list>
            </md-content>
          </md-tab>

          <md-tab label="Github E2E">
            <md-content class="md-padding">
              <md-toolbar class="md-whiteframe-z2">
                <h2 class="md-toolbar-tools">Github End-To-End</h2>
              </md-toolbar>
              <section>
                <md-subheader class="md-primary">CURRENTLY RUNNING</md-subheader>
                <md-list layout-padding>
                  <md-list-item ng-repeat="pr in cntl.e2erunning">
                    <a class="md-avatar" ng-href="https://github.com/kubernetes/kubernetes/pulls/{{pr.Login}}">
                      <img ng-src="{{pr.AvatarURL}}" alt="{{pr.Login}}">
                    </a>
                    <md-content class="md-list-item-text" layout="column">
                      <h3 class="md-body-1">
                        <a ng-href="{{pr.URL}}">#{{pr.Number}}: {{pr.Title}}</a>
                      </h3>
                    </md-content>
                  </md-list-item>
                </md-list>
              </section>
              <section>
                <md-subheader class="md-primary">QUEUE</md-subheader>
                <md-list layout-padding>
                  <md-list-item class="md-2-line" ng-repeat="pr in cntl.e2equeue">
                    <a class="md-avatar" ng-href="https://github.com/kubernetes/kubernetes/pulls/{{pr.Login}}">
                      <img ng-src="{{pr.AvatarURL}}" alt="{{pr.Login}}">
                    </a>
                    <md-content class="md-list-item-text" layout="column">
                      <h3 class="md-body-1">
                        <a ng-href="{{pr.URL}}">#{{pr.Number}}: {{pr.Title}}</a>
                      </h3>
                    </md-content>
                    <md-divider md-inset ng-if="!$last"></md-divider>
                  </md-list-item>
                </md-list>
              </section>
            </md-content>
          </md-tab>

          <md-tab>
            <md-tab-label>
              <span ng-class="{'redTab':cntl.failedBuild}">Google Internal E2E</span>
            </md-tab-label>
            <md-tab-body>
              <md-content class="md-padding">
                <md-toolbar class="md-whiteframe-z2">
                  <h2 class="md-toolbar-tools">Google End-to-End Results</h2>
                </md-toolbar>
                <md-chips ng-model="cntl.builds" readonly="true">
                  <md-chip-template title="{{$chip.msg}}">
                    <span style="color: {{$chip.color}}">{{$chip.state}}</span> {{$chip.name}}
                    <span style="color: {{$chip.color}}">{{$chip.msg}}</span>
                  </md-chip-template>
                </md-chips>
              </md-content>
            </md-tab-body>
          </md-tab>

          <md-tab label="Users">
            <md-content class="md-padding">
              <md-toolbar class="md-whiteframe-z2">
                <h2 class="md-toolbar-tools">Users</h2>
              </md-toolbar>
              <md-list>
                <md-list-item class="md-2-line" ng-repeat="user in cntl.users" ng-click="goToPerson(user.Login)">
                  <img ng-src="{{user.AvatarURL}}" class="md-avatar" alt="{{user.Login}}">
                  <md-content class="md-list-item-text" layout="column">
                    <h3 class="md-body-1">{{user.Login}}</h3>
                    <h4 class="md-body-2">On list because: {{user.Access}}</h4>
                  </md-content>
                </md-list-item>
              </md-list>
            </md-content>
          </md-tab>
        </md-tabs>
      </md-content>
    </md-content>
  </md-content>
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js" type="text/javascript"></script>
  <script src="script.js" type="text/javascript"></script>
</body>

</html>
