<div class="clr-row">
  <div class="clr-col-lg-4 clr-col-md-12 clr-col-sm-12 clr-col-xs-12" #cpu
       style="width: 400px;height:300px;margin-top: 2%;margin-left: 10%"></div>
  <div class="clr-col-lg-4 clr-col-md-12 clr-col-sm-12 clr-col-xs-12" #mem
       style="width: 400px;height:300px;margin-top: 2%;margin-left: 10%"></div>
</div>
<clr-datagrid>
  <clr-dg-column [clrDgField]="'app'">{{'MENU.PRODUCT' | translate}}</clr-dg-column>
  <clr-dg-column [clrDgSortBy]="'cpu'">{{'TITLE.CPU_USAGE' | translate}}</clr-dg-column>
  <clr-dg-column [clrDgSortBy]="'memory'">{{'TITLE.MEMORY_USAGE' | translate}}</clr-dg-column>
  <clr-dg-row *clrDgItems="let rs of ResourceList">
    <clr-dg-cell>{{rs.app}}</clr-dg-cell>
    <clr-dg-cell>{{rs.cpu}}</clr-dg-cell>
    <clr-dg-cell>{{rs.memory}}</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>
