<page-header title="'Dashboard'" breadcrumbs="['Environment summary']"> </page-header>

<div class="row" ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
  <div class="col-sm-12">
    <dashboard-cluster-agent-info></dashboard-cluster-agent-info>
  </div>
</div>
<information-panel-offline ng-if="offlineMode"></information-panel-offline>
<information-panel
  ng-if="
    !applicationState.UI.dismissedInfoPanels['docker-dashboard-info-01'] &&
    !applicationState.endpoint.mode.agentProxy &&
    applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'
  "
  title-text="Information"
  dismiss-action="dismissInformationPanel('docker-dashboard-info-01')"
>
  <span class="small">
    <p class="text-muted" ng-if="applicationState.endpoint.mode.role === 'MANAGER'">
      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
      Portainer is connected to a node that is part of a Swarm cluster. Some resources located on other nodes in the cluster might not be available for management, have a look at
      <a href="http://portainer.readthedocs.io/en/stable/agent.html" target="_blank">our agent setup</a> for more details.
    </p>
    <p class="text-muted" ng-if="applicationState.endpoint.mode.role === 'WORKER'">
      <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
      Portainer is connected to a worker node. Swarm management features will not be available.
    </p>
  </span>
</information-panel>

<div ng-if="info">
  <div class="row" ng-if="(!applicationState.endpoint.mode.agentProxy || applicationState.endpoint.mode.provider !== 'DOCKER_SWARM_MODE') && info && endpoint">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-header icon="svg-tachometer" title-text="Environment info"></rd-widget-header>
        <rd-widget-body classes="!px-5 !py-0">
          <table class="table">
            <tbody>
              <tr>
                <td>Environment</td>
                <td>
                  {{ endpoint.Name }}
                  <span class="small text-muted space-left">
                    <pr-icon icon="'cpu'" feather="true"></pr-icon> {{ endpoint.Snapshots[0].TotalCPU }} <pr-icon icon="'svg-memory'"></pr-icon>
                    {{ endpoint.Snapshots[0].TotalMemory | humansize }}
                  </span>
                  <span class="small text-muted">
                    - {{ info.Swarm && info.Swarm.NodeID !== '' ? 'Swarm' : 'Standalone' }} {{ info.ServerVersion }}
                    <span ng-if="endpoint.Type === 2">+ <i class="fa fa-bolt" aria-hidden="true"></i> Agent</span></span
                  >
                </td>
              </tr>
              <tr ng-if="showEnvUrl">
                <td>URL</td>
                <td>{{ endpoint.URL | stripprotocol }}</td>
              </tr>
              <tr>
                <td>{{ endpoint.Gpus.length <= 1 ? 'GPU' : 'GPUs' }}</td>
                <td>{{ gpuInfoStr }}</td>
              </tr>
              <tr>
                <td>Tags</td>
                <td>{{ endpointTags }}</td>
              </tr>
              <tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
                <td colspan="2">
                  <div class="btn-group" role="group" aria-label="...">
                    <a ui-sref="docker.swarm.visualizer" class="vertical-center"><pr-icon icon="'trello'" feather="true" class-name="'icon'"></pr-icon>Go to cluster visualizer</a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="dashboard-grid mx-4">
    <a class="no-link" ui-sref="docker.stacks" ng-if="showStacks">
      <dashboard-item feather-icon="true" icon="'layers'" type="'Stack'" value="stackCount"></dashboard-item>
    </a>

    <div ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
      <a class="no-link" ui-sref="docker.services">
        <dashboard-item feather-icon="true" icon="'shuffle'" type="'Service'" value="serviceCount"></dashboard-item>
      </a>
    </div>

    <a class="no-link" ng-if="containers" ui-sref="docker.containers">
      <dashboard-item feather-icon="true" icon="'box'" type="'Container'" value="containers.length" children="containerStatusComponent"></dashboard-item>
    </a>

    <a class="no-link" ng-if="images" ui-sref="docker.images">
      <dashboard-item feather-icon="true" icon="'list'" type="'Image'" value="images.length" children="imagesTotalSizeComponent"></dashboard-item>
    </a>

    <a class="no-link" ui-sref="docker.volumes">
      <dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="volumeCount"></dashboard-item>
    </a>

    <a class="no-link" ui-sref="docker.networks">
      <dashboard-item feather-icon="true" icon="'share2'" type="'Network'" value="networkCount"></dashboard-item>
    </a>

    <div>
      <dashboard-item feather-icon="true" icon="'cpu'" type="'GPU'" value="endpoint.Gpus.length"></dashboard-item>
    </div>
  </div>
</div>
