linux-web-console/ui/src/app/home/monitoring/monitoring.component.html

<div
  style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; background: white; z-index: 10;">
  <div style="display: flex; justify-content: space-around; flex-wrap: wrap; padding: 20px;">
    <div>
      <div style="text-align: center; padding: 10px; font-size: 20px;">
        <span>CPU USAGE {{toPercent(cpu)}}%</span>
      </div>
      <div class="chart-container" style="height:200px; position: relative; width: 200px;">
        <canvas baseChart [data]="cpuUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
          [options]="options">
        </canvas>
      </div>
    </div>
    <div>
      <div style="text-align: center; padding: 10px; font-size: 20px;">
        <span>MEMORY USAGE {{toPercent(memory)}}%</span>
      </div>
      <div class="chart-container" style="height:200px; position: relative; width: 200px;">
        <canvas baseChart [data]="memoryUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
          [options]="options">
        </canvas>
      </div>
    </div>
    <div>
      <div style="text-align: center; padding: 10px; font-size: 20px;">
        <span>DISKSPACE USAGE {{toPercent(disk)}}%</span>
      </div>
      <div class="chart-container" style="height:200px; position: relative; width: 200px;">
        <canvas baseChart [data]="diskUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
          [options]="options">
        </canvas>
      </div>
    </div>
    <div>
      <div style="text-align: center; padding: 10px; font-size: 20px;">
        <span>SWAP USAGE {{toPercent(swap)}}%</span>
      </div>
      <div class="chart-container" style="height:200px; position: relative; width: 200px;">
        <canvas baseChart [data]="swapUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
          [options]="options">
        </canvas>
      </div>
    </div>
  </div>
  <div style="padding:20px; padding-bottom: 10px; display: flex; justify-content: space-between;">
    <div>
      <span style="line-height: 30px;">Processes</span>
    </div>
    <div style="display: flex;">
      <div style="display: flex; padding-right: 10px;" class="search-box" tabindex="0">
        <input type="text" class="search-text" placeholder="Search process" #text>
        <span (click)="searchText=text.value;filterProcesses()">
          <i class="fa fa-search" aria-hidden="true"></i>
        </span>
      </div>
      <div>
        <button class="btn btn-primary btn-sm mr-2" (click)="killSelectedProcesses()">Kill process</button>
        <button class="btn btn-primary btn-sm" (click)="getProcStats()">Refresh</button>
      </div>
    </div>
  </div>
  <div style="width: 100%; flex: 1; overflow: auto; border: 1px solid rgb(230,230,230);">
    <table class="table table-striped table-sm table-borderless" style="position: relative;">
      <thead>
        <tr>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(0)">
            <span>NAME</span>
            <span *ngIf="sortingField==0&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==0&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(1)">
            <span>PID</span>
            <span *ngIf="sortingField==1&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==1&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(2)">
            <span>PRIORITY</span>
            <span *ngIf="sortingField==2&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==2&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(3)">
            <span>CPU USAGE</span>
            <span *ngIf="sortingField==3&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==3&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(4)">
            <span>MEMORY</span>
            <span *ngIf="sortingField==4&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==4&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(5)">
            <span>VIRTUAL MEMORY</span>
            <span *ngIf="sortingField==5&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==5&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(6)">
            <span>USER</span>
            <span *ngIf="sortingField==6&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==6&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(7)">
            <span>START TIME</span>
            <span *ngIf="sortingField==7&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==7&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(8)">
            <span>STATE</span>
            <span *ngIf="sortingField==8&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==8&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(9)">
            <span>COMMAND</span>
            <span *ngIf="sortingField==9&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
            <span *ngIf="sortingField==9&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let proc of filteredProcessList">
          <td><input type="checkbox" [checked]="proc.selected"
            (change)="proc.selected = !proc.selected" ><span style="padding-left: 10px;">{{proc.name}}</span></td>
          <td>{{proc.pid}}</td>
          <td>{{proc.priority}}</td>
          <td>{{toPercent(proc.cpuUsage)}}</td>
          <td>{{formatSize(proc.memoryUsage)}}</td>
          <td>{{formatSize(proc.vmUsage)}}</td>
          <td>{{proc.user}}</td>
          <td>{{toDate(proc.startTime)|date:'medium'}}</td>
          <td>{{proc.state}}</td>
          <td style="overflow-wrap: break-word; max-width: 200px;">
              {{proc.command}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>