<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<md-progress-linear md-mode="indeterminate" ng-show="diagnosticsController.isLoading"></md-progress-linear>
<div ng-show="!diagnosticsController.isLoading">
  <md-content class="diagnostics-content">

    <div layout="row" flex class="diagnostics-toolbar">
      <div layout="row" flex layout-align="center center">
        <div layout="row" layout-align="center center" class="diagnostics-toolbar-progress">
          <md-progress-circular ng-if="diagnosticsController.isInProgress()" md-theme="maincontent-theme" class="md-accent md-hue-2" md-mode="indeterminate" md-diameter="150">
          </md-progress-circular>
          <md-progress-circular ng-if="diagnosticsController.isReady()" md-theme="maincontent-theme" class="md-hue-1" md-mode="determinate" md-diameter="75" value="100">
          </md-progress-circular>
          <md-progress-circular ng-if="diagnosticsController.isError()" md-theme="danger" class="md-accent md-hue-3" md-mode="determinate" md-diameter="75" value="100">
          </md-progress-circular>
          <md-progress-circular ng-if="diagnosticsController.isSuccess()" md-theme="chesave" class="md-accent md-hue-1" md-mode="determinate" md-diameter="75" value="100">
          </md-progress-circular>
        </div>
        <div layout="column">
          <div ng-class="{'diagnostics-toolbar-main-title-success': diagnosticsController.isSuccess(), 'diagnostics-toolbar-main-title-error': diagnosticsController.isError(), 'diagnostics-toolbar-main-title-ready': diagnosticsController.isReady(), 'diagnostics-toolbar-main-title-progress': diagnosticsController.isInProgress(), 'diagnostics-toolbar-main-title-failure': diagnosticsController.isFailure()}" class="diagnostics-toolbar-main-title">{{diagnosticsController.globalStatusText}}</div>
          <div class="diagnostics-toolbar-main-subtitle" ng-if="diagnosticsController.isInProgress()">No Errors Found</div>
          <div class="diagnostics-toolbar-main-subtitle" ng-if="diagnosticsController.isSuccess()">All Tests Passed</div>
          <div class="diagnostics-toolbar-main-subtitle" ng-if="diagnosticsController.isError()">Error!</div>
          <che-button-default che-button-title="Start diagnostics"
                              che-button-icon="fa fa-play-circle-o"
                              ng-click="diagnosticsController.start()"
                              ng-if="diagnosticsController.isReady()"></che-button-default>
        </div>
      </div>
      <div layout="column" layout-align="center center">

        <div class="diagnostic-button" layout="row" layout-align="end center">
          <che-button-default che-button-title="Re run diagnostics"
                              che-button-icon="fa fa-play-circle-o"
                              ng-click="diagnosticsController.start()"
                              ng-if="diagnosticsController.isSuccess() || diagnosticsController.isError()"></che-button-default>
          <div ng-if="diagnosticsController.isInProgress()">&nbsp;</div>
        </div>
        <div class="diagnostic-button" layout="row" layout-align="end center">
          <che-button-default che-button-title="{{diagnosticsController.isLogDisplayed === false ? 'Show Logs' : 'Hide Logs'}}"
                              che-button-icon="fa fa-file-text-o"
                              ng-click="diagnosticsController.showLogs()"
                              ng-if="!diagnosticsController.isReady()"></che-button-default>
        </div>
      </div>
    </div>

    <div layout="row" flex class="diagnostics-action" layout-align="start start" flex>
      <div layout="column" flex="50"  ng-if="diagnosticsController.parts && diagnosticsController.parts.length > 0">
        <div flex  ng-repeat="part in diagnosticsController.parts" >
          <div class="diagnostic-part" ng-class="{'diagnostic-part-selected' : diagnosticsController.currentPart == part}" layout-align="center center" flex layout="row"  ng-click="diagnosticsController.setDetailsPart(part)">
            <div flex class="diagnostic-part-content" layout="column">
              <div layout="row" layout-align="start center">
                <div flex layout-align="start end" layout="row">
                  <div class="diagnostic-part-title"><i class="{{part.icon}}"></i> {{part.title}} - </div>
                  <div class="diagnostic-part-subtitle">
                    {{part.subtitle}}</div>
                </div>
                <div class="diagnostic-part-percent">{{(part.getNumberOfEndedCallbacks() / part.getNumberOfCallbacks()) * 100 | number:0}}%</div>
              </div>
              <div>
                <md-progress-linear ng-if="part.isInProgress()" md-theme="maincontent-theme" class="diagnostic-part-progress md-accent md-hue-2" md-mode="determinate" value="{{(part.getNumberOfEndedCallbacks() / part.getNumberOfCallbacks()) * 100 | number:0}}">
                </md-progress-linear>
                <md-progress-linear  ng-if="part.isReady()" md-theme="maincontent-theme" class="diagnostic-part-progress md-hue-1" md-mode="determinate" value="100">
                </md-progress-linear>
                <md-progress-linear ng-if="part.isError()" md-theme="danger" class="diagnostic-part-progress md-accent md-hue-3" md-mode="determinate" value="100">
                </md-progress-linear>
                <md-progress-linear ng-if="part.isSuccess()" md-theme="chesave" class="diagnostic-part-progress md-accent md-hue-1" md-mode="determinate" value="100">
                </md-progress-linear>
              </div>
              <div ng-if="part.getNumberOfEndedCallbacks() == 0" class="diagnostic-test-numbers">
                Initializing...
              </div>
              <div ng-if="part.getNumberOfEndedCallbacks() > 0" class="diagnostic-test-numbers">
                <span ng-if="part.isInProgress()">Testing</span><span ng-if="!part.isInProgress()">Tested</span> {{part.getNumberOfEndedCallbacks()}} of {{part.getNumberOfCallbacks()}}
              </div>
            </div>
            <div class="diagnostic-part-link-details" layout="row" layout-align="center center">
              <i class="fa fa-angle-double-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
      <div layout="column" flex="50"  ng-if="diagnosticsController.parts && diagnosticsController.parts.length > 0">
        <div flex layout="row" layout-align="start start" >
          <md-content flex class="che-diagnostic-parent-list" che-auto-scroll ng-model="diagnosticsController.currentPart.items" md-scroll-y>
            <div flex class="che-list-diagnostic-empty-state" layout="row" layout-align="center start" ng-if="diagnosticsController.currentPart.items.length == 0">Testing {{diagnosticsController.currentPart.title}}. Wait for results.
            </div>
            <che-list flex class="che-list-diagnostic" ng-if="diagnosticsController.currentPart.items.length > 0">
              <che-list-item
                ng-repeat="item in diagnosticsController.currentPart.items"
                ng-mouseover="hover=true"
                class="che-list-item-diagnostic"
                ng-mouseout="hover=false">
                <div flex=
                       layout="column"
                     layout-align="start stretch"
                     class="che-list-item-row">
                  <div flex
                       layout-xs="row" layout-gt-xs="row"
                       layout-align-gt-xs="start start"
                       layout-align-xs="start start"
                       class="che-list-item-details">
                    <div class="che-list-item-name">
                      <i class="fa fa-circle-o check-item-icon check-item-icon-ready" ng-if="item.isReady()"></i>
                      <div class="check-spinner">
                        <div class="spinner" ng-if="item.isInProgress()">
                          <div class="rect1"></div>
                          <div class="rect2"></div>
                          <div class="rect3"></div>
                        </div>
                      </div>
                      <i class="fa fa-check check-item-icon check-item-ok" ng-if="item.isOk()"></i>
                      <i class="fa fa-circle check-item-icon check-item-ok" ng-if="item.isRunning()"></i>
                      <i class="fa fa-info check-item-icon check-item-hint" ng-if="item.isHint()"></i>
                      <i class="fa fa-exclamation-triangle check-item-icon check-item-fail" ng-if="item.isFailure()"></i>
                      <i class="fa fa-times check-item-icon check-item-ko" ng-if="item.isError()"></i>
                      <i class="fa fa-stop check-item-icon check-item-ko" ng-if="item.isAbort()"></i>
                    </div>
                    <div flex-gt-xs="70" layout="column">
                      <div ng-class="{'check-item-ok': item.isSuccess(), 'check-item-running': item.isRunning(), 'check-item-ko': item.isError(), 'check-item-fail': item.isFailure()}" >
                        {{item.title}}
                      </div>
                      <div class="diagnostic-item-message">{{item.message}}</div>
                      <div ng-if="item.hint" class="hint-item"><i class="fa fa-hand-o-right hint-item-icon"></i>Hint: {{item.hint}}</div>
                    </div>
                  </div>
                  <div flex layout-xs="column" layout-gt-xs="column"
                       layout-align-gt-xs="start start"
                       layout-align-xs="start start"
                       class="che-list-item-details">
                  </div>
                </div>
              </che-list-item>
            </che-list>
          </md-content>
        </div>
      </div>
    </div>

    <div ng-if="diagnosticsController.parts && diagnosticsController.parts.length > 0 && diagnosticsController.isLogDisplayed === true">
      <div class="diagnostic-log-title">Logs</div>
      <div flex ng-repeat="part in diagnosticsController.parts" class="diagnostic-log-part" layout="column">
        <div class="diagnostic-log-part-title" layout="row">{{part.title}} {{part.subtitle}} : {{part.stateToText()}}</div>
        <div ng-repeat="callback in part.callbacks" class="diagnostic-log-callback" layout="column">
          <div class="diagnostic-log-callback-title" layout="column">{{callback.name}}</div>
          <div class="diagnostic-log-callback-content" layout="row">{{callback.content}}</div>
          <div ng-repeat="item in callback.items" class="diagnostic-log-callback-item" layout="row">
            <div layout="row">
              <div>{{item.message}}</div>
              <div>&nbsp;---&nbsp;{{item.stateToText()}}</div>
            </div>
            <div class="diagnostic-log-item-hint" layout="row">{{item.hint}}</div>
          </div>
        </div>
      </div>
    </div>


  </md-content>
</div>
