Client/src/app/FE-View/issue/issue.component.html · VICE

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="issueID">
  <p>Issue ID: {{this.issueData.id}}</p>
</div>
<div class="issueDescription">
  <p>Description: <a href={{this.issueData.link}}>{{this.issueData.desc}}</a></p>
</div>
<div class="grid-container">
  <mat-grid-list cols="2">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="VM-card">
        <mat-card-header>
          <mat-card-title>
            VM Data
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content" [style.overflow]="'auto'" [style.height]="'70%'">
          <table class="table table-borded table-secondary">
            <thead>
              <tr>
                <th class="headers" scope="col">VM Name: </th>
                <td>
                  <a class="badge-primary" (click)=gotoVM(this.issueData.vmdata,this.issueData.vmdata.vmlink)>
                    {{this.issueData.vmdata.vm}}
                  </a>
                </td>
              </tr>
              <tr>
                <th class="headers" scope="col">Status: </th>
                <td>{{this.issueData.vmdata.vmstatus}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Owner: </th>
                <td>{{this.issueData.vmdata.owner}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Location: </th>
                <td>{{this.issueData.vmdata.vmlocation}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Version: </th>
                <td>{{this.issueData.vmdata.vmversion}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Capabilities: </th>
                <td>PlaceHolder</td>
              </tr>
            </thead>
          </table>
          <div id="resolveButtons">
            <button *ngIf="confirm === false" id="resolveIssueBtn" class="btn btn-primary" (click)=setConfirm(true)>
              Resolve Issue
            </button>
            <button *ngIf="confirm === true" id="confirmResolveBtn" class="btn btn-success" routerLink='' (click)=resolveIssue(this.issueData.id)>
              Confirm
            </button>
            <button *ngIf="confirm === true" id="cancelResolveBtn" class="btn btn-danger" (click)=setConfirm(false)>
              Cancel
            </button>
          </div>
        </mat-card-content>

      </mat-card>

      <mat-card class="FW-card">
        <mat-card-header>
          <mat-card-title>
            FW Data
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content" [style.overflow]="'auto'" [style.height]="'90%'">
          <table class="table table-borded table-secondary">
            <thead>
              <tr>
                <th class="headers" scope="col">Product Name: </th>
                <td>{{this.issueData.fwdata.product}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Status: </th>
                <td>{{this.issueData.fwdata.status}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Version: </th>
                <td>{{this.issueData.fwdata.fwversion}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Commit ID: </th>
                <td><a href={{this.issueData.fwdata.fwlink}}>{{this.issueData.fwdata.commitid}}</a></td>
              </tr>
              <tr>
                <th class="headers" scope="col">Form-factor: </th>
                <td>{{this.issueData.fwdata.form}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Location: </th>
                <td>{{this.issueData.fwdata.fwlocation}}</td>
              </tr>
              <tr>
                <th class="headers" scope="col">Serial Number: </th>
                <td>{{this.issueData.fwdata.serial}}</td>
              </tr>
            </thead>
          </table>
        </mat-card-content>

      </mat-card>

    </mat-grid-tile>
  </mat-grid-list>
</div>