job.component.html 2.46 KB
Newer Older
Chris Hines's avatar
Chris Hines committed
1
2
3
4
<mat-list-item style="height: auto; width: auto">
  <div fxLayout="column" style="width: 100%">
    <div style="text-align: left"> {{ jobdata.name }} </div>
    <div *ngIf="jobdata.connectionState == 0" fxLayout="row" fxLayoutAlign="space-between">
5
      <div fxFlex="10%"> {{ jobdata.state }}</div>
Chris Hines's avatar
Chris Hines committed
6
      <div fxFlex="10%"> {{ jobdata.jobid }}</div>
7
      <div *ngIf="jobdata.batch_host != 'localhost'" fxFlex="10%"> {{ jobdata.batch_host }}</div>
Chris Hines's avatar
Chris Hines committed
8
9
10
      <div fxFlex="20%" fxLayout="column">
        <div> {{ resources }} </div>
        <div> {{ timeremaining }} </div>
Chris Hines's avatar
Chris Hines committed
11
      </div>
Chris Hines's avatar
Chris Hines committed
12
      <div fxFlex></div>
13
      <div fxFlex="15%" fxLayout="row">
Chris Hines's avatar
Chris Hines committed
14
        <div fxFlex *ngIf="!nocancel"> <button mat-button (click)="onCancel()" > Cancel </button> </div>
15
16
17
18
19
        <div *ngFor="let action of jobdata.app.actions">
            <div fxFlex *ngIf="action.states === undefined || action.states === null || action.states.indexOf(jobdata.state) != -1">
                <button mat-button (click)="onConnect(action)">{{ action.name }}</button>
            </div>
        </div>
Chris Hines's avatar
Chris Hines committed
20
21
      </div>
    </div>
Chris Hines's avatar
Chris Hines committed
22

Chris Hines's avatar
Chris Hines committed
23
24
25
    <div fxLayout="row" *ngIf="jobdata.connectionState == 1">
      <div fxFlex="20%"> Getting app parameters </div>
      <div fxFlex="80%"> <mat-progress-bar mode="determinate" value=30></mat-progress-bar> </div>
Chris Hines's avatar
Chris Hines committed
26
    </div>
Chris Hines's avatar
Chris Hines committed
27
28
29
30
31
32
33
34
35
     
    <div fxLayout="row" *ngIf="jobdata.connectionState == 2">
        <div fxFlex="20%"> Creating secure tunnels </div>
        <div fxFlex="80%"> <mat-progress-bar mode="determinate" value=60></mat-progress-bar> </div>
    </div>
     
    <div fxLayout="row" *ngIf="jobdata.connectionState == 3">
      <div fxFlex="20%"> Determining correct URL </div>
      <div fxFlex="80%"> <mat-progress-bar mode="determinate" value=90></mat-progress-bar> </div>
Chris Hines's avatar
Chris Hines committed
36
37
38
    </div>
  </div>
</mat-list-item>
Chris Hines's avatar
Chris Hines committed
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!--<mat-list-item>
    <div fxLayout="column" fxLayoutAlign="space-around none" style="width: 100%; background-color: red">
        <div fxLayout="row" style="background-color: green">
            <div>
                {{ jobdata.name }}
            </div>
            <div fxFlex>
            </div>
        </div>
        <div *ngIf="jobdata.connectionState == 0" fxLayout="row" style="background-color: blue">
            <div>
               {{ jobdata.state }}
            </div>
            <div></div>
            <div fxLayout="column">
              <div> {{ resources }} </div>
              <div> {{ timeremaining }} </div>
            </div>
        </div>
    </div>
</mat-list-item>-->