abstruse/src/app/components/app-dashboard/app-dashboard.component.html

Abstruse CI

<app-header></app-header>

<nav class="nav sub-nav">
  <div class="container">
    <div class="nav-left is-hidden-mobile">
      <span class="nav-item">
        <h1>Dashboard</h1>
      </span>
    </div>
    <div class="nav-center is-hidden-mobile">

    </div>
    <div class="nav-right"></div>
  </div>
</nav>

<div class="container">
  <div class="columns">
    <div class="column is-12">
      <div class="content">
        <div class="container" *ngIf="loading">
          <img src="/assets/images/icons/flickr.svg" class="main-loader">
        </div>

        <div class="columns is-multiline" *ngIf="!loading">

          <div class="column is-8">
            <div class="content-box">
              <app-line-chart></app-line-chart>
            </div>

            <div class="content-box">
              <div class="content-box-header">
                <h3>Container resource consumption</h3>
              </div>
              <div class="columns" *ngIf="!containers?.length">
                <div class="column is-12">
                  <div class="message green">
                    <p class="p-content has-text-centered">No available data or no jobs running.</p>
                  </div>
                </div>
              </div>
              <div class="columns is-multiline" *ngIf="containers?.length">
                <div class="column is-6" *ngFor="let c of containers; let i = index;">
                  <div class="container-item">
                    <div class="container-header">{{ c.name }}</div>
                    <div class="container-data border-bottom">
                      <div class="data-info">
                        <span>Memory Total</span>
                        <span>{{ c.memory.total }}</span>
                      </div>
                      <div class="data-info">
                        <span>Memory Usage</span>
                        <span>{{ c.memory.usage }}</span>
                      </div>
                      <div class="data-info">
                        <span>CPU Cores</span>
                        <span>{{ c.cpu.cores }}</span>
                      </div>
                      <div class="data-info">
                        <span>CPU Usage</span>
                        <span>{{ c.cpu.usage }}</span>
                      </div>
                      <div class="data-info">
                        <span>RX Packets</span>
                        <span>{{ c.network.in }}</span>
                      </div>
                      <div class="data-info">
                        <span>TX Packets</span>
                        <span>{{ c.network.out }}</span>
                      </div>
                    </div>
                    <div class="container-data">
                      <div class="info-data-container">
                        <span class="label-txt">CPU</span>
                        <div class="data-progress-container green">
                          <span class="data-progress-bar" [style.width]="c.cpu.usage"></span>
                        </div>
                        <span class="data-txt">
                          {{ c.cpu.usage }}
                        </span>
                      </div>
                      <div class="info-data-container">
                        <span class="label-txt">Mem</span>
                        <div class="data-progress-container purple">
                          <span class="data-progress-bar" [style.width]="c.memory.percent"></span>
                        </div>
                        <span class="data-txt">
                          {{ c.memory.percent }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="column is-4">
            <div class="content-box">
              <div class="content-box-header">
                <h2>Memory</h2>
                <h3>Overall Memory Consumption</h3>
              </div>
              <div class="info-data-container">
                <span class="label-txt">Total</span>
                <span class="data-txt">{{ memoryHuman?.total }}</span>
              </div>
              <div class="info-data-container">
                <span class="label-txt">Used</span>
                <span class="data-txt">{{ memoryHuman?.used }}</span>
              </div>
              <div class="info-data-container">
                <span class="label-txt">Free</span>
                <span class="data-txt">{{ memoryHuman?.free }}</span>
              </div>
              <hr/>
              <div class="info-data-container">
                <span class="label-txt">Usage</span>
                <div class="data-progress-container green">
                  <span name="memory-usage" class="data-progress-bar" [style.width]="memoryPercentage + '%'"></span>
                </div>
                <span class="data-txt">
                  {{ memoryPercentage }}%
                </span>
              </div>
            </div>
            <div class="content-box">
              <div class="content-box-header">
                <h2>CPU</h2>
                <h3>Total CPU Usage</h3>
              </div>
              <div *ngIf="!cpuCores?.length">
                <img src="/assets/images/icons/flickr.svg" class="main-loader">
              </div>
              <div *ngIf="cpuCores?.length">
                <app-progress-chart [percent]="cpuPercent"></app-progress-chart>
              </div>
            </div>
            <div class="content-box">
              <div class="content-box-header">
                <h2>CPU Cores</h2>
                <h3>CPU Cores Utilization</h3>
              </div>
              <div *ngIf="!cpuCores?.length">
                <img src="/assets/images/icons/flickr.svg" class="main-loader">
              </div>
              <div *ngIf="cpuCores?.length">
                <div class="info-data-container" *ngFor="let core of cpuCores; let i = index">
                  <span class="label-txt">Core {{ i }}</span>
                  <div class="data-progress-container green">
                    <span class="data-progress-bar" [style.width]="core + '%'"></span>
                  </div>
                  <span class="data-txt">
                    {{ core }}%
                  </span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>