Project

General

Profile

« Previous | Next » 

Revision 57122

Finished the first version of the validation history and validation job details pages

View differences:

modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.ts
43 43
      this.authService.redirectUrl = '/compatibility/browseHistory/' + id;
44 44
      this.authService.loginWithState();
45 45
    }
46
    let body = document.getElementsByTagName('body')[0];
47
    body.classList.remove("top_bar_active");   //remove the class
46 48
  }
47 49

  
48 50
  getJobInfo() {
modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-history.component.ts
39 39

  
40 40
  ngOnInit() {
41 41
    this.loadTable();
42
    let body = document.getElementsByTagName('body')[0];
43
    body.classList.remove("top_bar_active");   //remove the class
42 44
  }
43 45

  
44 46
  loadTable() {
......
153 155
  }
154 156

  
155 157
  getResultImage(status: string) {
158
    // if (status === 'ongoing') {
159
    //   return `../../../assets/imgs/icon_colours-question.jpg`;
160
    // } else if (status === 'successful') {
161
    //     return `../../../assets/imgs/icon_colours-check.jpg`;
162
    // } else {
163
    //   return `../../../assets/imgs/icon_colours-x.jpg`;
164
    // }
165

  
156 166
    if (status === 'ongoing') {
157 167
      return `../../../assets/imgs/icon_colours-question.jpg`;
158 168
    } else if (status === 'successful') {
159
        return `../../../assets/imgs/icon_colours-check.jpg`;
169
      return `check_circle`;
160 170
    } else {
161 171
      return `../../../assets/imgs/icon_colours-x.jpg`;
162 172
    }
modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.html
1
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
2
  <div class="uk-width-1-1@m uk-first-column">
1
<div id="page_content">
2
  <div id="page_content_inner">
3
    <h2 class="heading_b uk-margin-bottom">Validation results for</h2>
3 4

  
4
    <h1 class="uk-h2">Validation results for</h1>
5

  
6 5
    <!-- TOP HELP CONTENT -->
7 6
    <help-content #topHelperContent [position]="'top'"
8 7
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
9 8
    </help-content>
10 9

  
11
    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
12
      <div class="uk-grid">
10
    <div class="uk-grid">
13 11

  
14
        <!-- LEFT HELP CONTENT -->
15
        <aside-help-content #leftHelperContent [position]="'left'"
16
                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
17
        </aside-help-content>
12
      <!-- LEFT HELP CONTENT -->
13
      <aside-help-content #leftHelperContent [position]="'left'"
14
                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
15
      </aside-help-content>
18 16

  
19
        <!-- MIDDLE -->
20
        <div class=" uk-width-expand@m">
17
      <!-- MIDDLE -->
18
      <div class=" uk-width-expand@m">
21 19

  
22
          <div>
23
            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
24
            <div *ngIf="loadingMessage" class="loading-big">
25
              <div class="loader-big"
26
                   style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
27
                {{ loadingMessage }}
28
              </div>
29
              <div class="whiteFilm"></div>
20
        <div>
21
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
22
          <div *ngIf="loadingMessage" class="loading-big">
23
            <div class="loader-big"
24
                 style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
25
              {{ loadingMessage }}
30 26
            </div>
31
            <div *ngIf="jobSummary">
32
              <div>
33
                <div>
34
                  <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"
35
                      uk-scrollspy-class=""><span>{{jobSummary.baseUrl}}</span></h4>
36
                  <div class="uk-margin-small">by {{jobSummary.userEmail}}</div>
37
                </div>
38
              </div>
39
              <div>
40
                <div>
41
                  <hr class="uk-scrollspy-inview uk-animation-slide-bottom-small" uk-scrollspy-class="">
42
                  <div>
43
                    <span>{{ jobSummary.jobType }}</span>
44
                    |
45
                    <span>{{ jobSummary.guidelinesShortName }}</span>
46
                    |
47
                    <span>Validation set: {{ jobSummary.validationSet }}</span>
48
                  </div>
49
                  <div>
50
                    <span>Started: {{ jobSummary.started }}</span>
51
                    ,
52
                    <span>Ended: {{ jobSummary.ended ? jobSummary.ended : '--' }}</span>
53
                    ,
54
                    <span>Duration: {{ jobSummary.duration }}</span>
55
                  </div>
56
                  <div style="font-size: 120%;">
57
                    <span>Records tested: {{ jobSummary.recordsTested }}</span>
58
                  </div>
59
                  <div>
60
                    <span class="uk-label uk-margin-right">Score for content: {{ jobSummary.contentJobScore }}</span>
61
                    <span class="uk-label">Score for usage: {{ jobSummary.usageJobScore }}</span>
62
                  </div>
63
                  <hr class="uk-scrollspy-inview uk-animation-slide-bottom-small" uk-scrollspy-class="">
64
                </div>
65
              </div>
66
              <div>
67
                <ul class="uk-margin el-nav uk-tab" uk-switcher="connect: .uk-switcher">
68
                  <li routerLinkActive="uk-active">
69
                    <a href="#">for Content</a>
70
                  </li>
71
                  <li routerLinkActive="uk-active">
72
                    <a href="#">for Usage</a>
73
                  </li>
74
                </ul>
75
                <ul class="uk-switcher">
76
                  <li class="el-item">
77
                    <div class="uk-grid-margin uk-grid uk-grid-stack">
78
                      <div class="uk-width-1-1@m uk-first-column">
79
                        <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
80
                          <div *ngIf="noContent" class="uk-alert">{{ noContent }}</div>
81
                          <div *ngIf="contentResults && contentResults.length > 0">
82
                            <table class="uk-table uk-table-striped uk-table-middle rules-table">
83
                              <thead>
84
                              <tr>
85
                                <th>Rule Name</th>
86
                                <th class="uk-text-nowrap">Rule Description</th>
87
                                <th class="uk-text-nowrap">Rule Weight</th>
88
                                <th class="uk-text-nowrap"># of records</th>
89
                                <th class="uk-text-nowrap">Status</th>
90
                              </tr>
91
                              </thead>
92
                              <tbody>
93
                              <tr *ngFor="let contentRule of contentResults" class="el-item">
94
                                <td class="uk-table-shrink">
95
                                  <div class="el-title">{{ contentRule.name }}</div>
96
                                </td>
97
                                <td class="uk-table-shrink">
98
                                  <div class="el-title" [innerHtml]="contentRule.description">
99
                                  </div>
100
                                </td>
101
                                <td class="uk-table-shrink">
102
                                  <div class="el-title">{{ contentRule.weight }}</div>
103
                                </td>
104
                                <td class="uk-table-shrink">
105
                                  <div class="el-title">{{ contentRule.successes }}</div>
106
                                </td>
107
                                <td class="uk-table-shrink">
108
                                  <div *ngIf="!contentRule.hasErrors" class="el-title">
109
                                    <span uk-icon="icon: check" style="color: #4b991f" class="uk-icon">
110
                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
111
                                           icon="check" ratio="1">
112
                                        <polyline fill="none" stroke="#000" stroke-width="1.1"
113
                                                  points="4,10 8,15 17,4"></polyline>
114
                                      </svg>-->
115
                                    </span>
116
                                  </div>
117
                                  <div *ngIf="contentRule.hasErrors && contentRule.mandatory">
118
                                    <span uk-icon="icon: close" style="color: #cd242b" class="uk-icon">
119
                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
120
                                           icon="close" ratio="1">
121
                                        <path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
122
                                        <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
123
                                      </svg>-->
124
                                    </span>
125
                                    <a class="errorlink viewErrors uk-display-block"
126
                                       (click)="viewErrors(contentRule)"><span>View Errors</span></a>
127
                                  </div>
128
                                  <div *ngIf="contentRule.hasErrors && !contentRule.mandatory">
129
                                    <span uk-icon="icon: warning" style="color: #e9d60d" class="uk-icon">
130
                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
131
                                           icon="warning" ratio="1">
132
                                        <circle cx="10" cy="14" r="1"></circle>
133
                                        <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
134
                                        <path
135
                                          d="M10.97,7.72 C10.85,9.54 10.56,11.29 10.56,11.29 C10.51,11.87 10.27,12 9.99,12 C9.69,12 9.49,11.87 9.43,11.29 C9.43,11.29 9.16,9.54 9.03,7.72 C8.96,6.54 9.03,6 9.03,6 C9.03,5.45 9.46,5.02 9.99,5 C10.53,5.01 10.97,5.44 10.97,6 C10.97,6 11.04,6.54 10.97,7.72 L10.97,7.72 Z"></path>
136
                                      </svg>-->
137
                                    </span>
138
                                    <a class="warninglink viewErrors uk-display-block"
139
                                       (click)="viewErrors(contentRule)"><span>View Warnings</span></a>
140
                                  </div>
141
                                </td>
142
                              </tr>
143
                              </tbody>
144
                            </table>
27
            <div class="transparentFilm"></div>
28
          </div>
29

  
30

  
31
          <div *ngIf="jobSummary">
32

  
33
            <div class="uk-margin-medium-bottom">
34
              <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"
35
                  uk-scrollspy-class=""><span>{{jobSummary.baseUrl}}</span></h4>
36
              <div class="uk-margin-small">by {{jobSummary.userEmail}}</div>
37
            </div>
38

  
39
            <div class="md-card tabs">
40
              <div class="md-card-content">
41

  
42
                <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
43
                  <div class="uk-width-medium-3-4 uk-row-first">
44
                    <ul class="uk-tab" data-uk-tab="{connect:'#tabs_anim4', animation:'slide-left'}">
45
                      <li class="uk-active" aria-expanded="true"><a href="#">for Content</a></li>
46
                      <li aria-expanded="false" class=""><a href="#">for Usage</a></li>
47
                    </ul>
48
                    <ul id="tabs_anim4" class="uk-switcher uk-margin">
49
                      <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
50
                        <div class="uk-grid-margin uk-grid uk-grid-stack">
51
                          <div class="uk-width-1-1@m uk-first-column">
52
                            <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
53
                              <div *ngIf="noContent" class="uk-alert">{{ noContent }}</div>
54
                              <div *ngIf="contentResults && contentResults.length > 0">
55
                                <table class="uk-table uk-table-striped uk-table-middle rules-table">
56
                                  <thead>
57
                                  <tr>
58
                                    <th class="uk-width-2-10">Rule Name</th>
59
                                    <th class="uk-width-4-10 uk-text-nowrap">Rule Description</th>
60
                                    <th class="uk-width-1-10 uk-text-nowrap">Rule Weight</th>
61
                                    <th class="uk-width-1-10 uk-text-nowrap"># of records</th>
62
                                    <th class="uk-width-2-10 uk-text-nowrap">Status</th>
63
                                  </tr>
64
                                  </thead>
65
                                  <tbody>
66
                                  <tr *ngFor="let contentRule of contentResults" class="el-item">
67
                                    <td class="uk-table-shrink">
68
                                      <div class="el-title">{{ contentRule.name }}</div>
69
                                    </td>
70
                                    <td class="uk-table-shrink">
71
                                      <div class="el-title" [innerHtml]="contentRule.description">
72
                                      </div>
73
                                    </td>
74
                                    <td class="uk-table-shrink">
75
                                      <div class="el-title">{{ contentRule.weight }}</div>
76
                                    </td>
77
                                    <td class="uk-table-shrink">
78
                                      <div class="el-title">{{ contentRule.successes }}</div>
79
                                    </td>
80
                                    <td class="uk-table-shrink">
81
                                      <div *ngIf="!contentRule.hasErrors" class="el-title">
82
                                        <i class="material-icons" style="color: #4b991f">check_circle_outline</i>
83
                                      </div>
84
                                      <div *ngIf="contentRule.hasErrors && contentRule.mandatory">
85
                                        <i class="material-icons" style="color: #cd242b">highlight_off</i>
86
                                        <a class="errorlink viewErrors uk-margin-left"
87
                                           (click)="viewErrors(contentRule)"><span>View Errors</span></a>
88
                                      </div>
89
                                      <div *ngIf="contentRule.hasErrors && !contentRule.mandatory">
90
                                        <i class="material-icons" style="color: #e9d60d">error_outline</i>
91
                                        <a class="warninglink viewErrors uk-margin-left"
92
                                           (click)="viewErrors(contentRule)"><span>View Warnings</span></a>
93
                                      </div>
94
                                    </td>
95
                                  </tr>
96
                                  </tbody>
97
                                </table>
98
                              </div>
99
                            </div>
145 100
                          </div>
146 101
                        </div>
147
                      </div>
148
                    </div>
149
                  </li>
150
                  <li class="el-item">
151
                    <div class="uk-grid-margin uk-grid uk-grid-stack">
152
                      <div class="uk-width-1-1@m uk-first-column">
153
                        <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
154
                          <div *ngIf="noUsage" class="uk-alert">{{ noUsage }}</div>
155
                          <div *ngIf="usageResults && usageResults.length > 0">
156
                            <table class="uk-table uk-table-striped uk-table-middle rules-table">
157
                              <thead>
158
                              <tr>
159
                                <th>Rule Name</th>
160
                                <th class="uk-text-nowrap">Rule Description</th>
161
                                <th class="uk-text-nowrap">Rule Weight</th>
162
                                <th class="uk-text-nowrap"># of records</th>
163
                                <th class="uk-text-nowrap">Status</th>
164
                              </tr>
165
                              </thead>
166
                              <tbody>
167
                              <tr *ngFor="let usageRule of usageResults" class="el-item">
168
                                <td class="uk-table-shrink">
169
                                  <div class="el-title">{{ usageRule.name }}</div>
170
                                </td>
171
                                <td class="uk-table-shrink">
172
                                  <div class="el-title" [innerHtml]="usageRule.description">
173
                                  </div>
174
                                </td>
175
                                <td class="uk-table-shrink">
176
                                  <div class="el-title">{{ usageRule.weight }}</div>
177
                                </td>
178
                                <td class="uk-table-shrink">
179
                                  <div class="el-title">{{ usageRule.successes }}</div>
180
                                </td>
181
                                <td class="uk-table-shrink">
182
                                  <div *ngIf="!usageRule.hasErrors" class="el-title">
183
                                    <span uk-icon="icon: check" style="color: #4b991f" class="uk-icon">
184
                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
185
                                           icon="check" ratio="1">
186
                                        <polyline fill="none" stroke="#000" stroke-width="1.1"
187
                                                  points="4,10 8,15 17,4"></polyline>
188
                                      </svg>-->
189
                                    </span>
190
                                  </div>
191
                                  <div *ngIf="usageRule.hasErrors && usageRule.mandatory">
192
                                <span uk-icon="icon: close" style="color: #cd242b" class="uk-icon">
193
                                  <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
194
                                       icon="close" ratio="1">
195
                                    <path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
196
                                    <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
197
                                  </svg>-->
198
                                </span>
199
                                    <a class="errorlink viewErrors uk-display-block"
200
                                       (click)="viewErrors(usageRule)"><span>View Errors</span></a>
201
                                  </div>
202
                                  <div *ngIf="usageRule.hasErrors && !usageRule.mandatory">
203
                                    <span uk-icon="icon: warning" style="color: #e9d60d" class="uk-icon">
204
                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
205
                                           icon="warning" ratio="1">
206
                                        <circle cx="10" cy="14" r="1"></circle>
207
                                        <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
208
                                        <path
209
                                          d="M10.97,7.72 C10.85,9.54 10.56,11.29 10.56,11.29 C10.51,11.87 10.27,12 9.99,12 C9.69,12 9.49,11.87 9.43,11.29 C9.43,11.29 9.16,9.54 9.03,7.72 C8.96,6.54 9.03,6 9.03,6 C9.03,5.45 9.46,5.02 9.99,5 C10.53,5.01 10.97,5.44 10.97,6 C10.97,6 11.04,6.54 10.97,7.72 L10.97,7.72 Z"></path>
210
                                      </svg>-->
211
                                    </span>
212
                                    <a class="warninglink viewErrors uk-display-block"
213
                                       (click)="viewErrors(usageRule)"><span>View Warnings</span></a>
214
                                  </div>
215
                                </td>
216
                              </tr>
217
                              </tbody>
218
                            </table>
102
                      </li>
103
                      <li aria-hidden="true" style="animation-duration: 200ms;" class="">
104
                        <div class="uk-grid-margin uk-grid uk-grid-stack">
105
                          <div class="uk-width-1-1@m uk-first-column">
106
                            <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
107
                              <div *ngIf="noUsage" class="uk-alert">{{ noUsage }}</div>
108
                              <div *ngIf="usageResults && usageResults.length > 0">
109
                                <table class="uk-table uk-table-striped uk-table-middle rules-table">
110
                                  <thead>
111
                                  <tr>
112
                                    <th class="uk-width-2-10">Rule Name</th>
113
                                    <th class="uk-width-4-10 uk-text-nowrap">Rule Description</th>
114
                                    <th class="uk-width-1-10 uk-text-nowrap">Rule Weight</th>
115
                                    <th class="uk-width-1-10 uk-text-nowrap"># of records</th>
116
                                    <th class="uk-width-2-10 uk-text-nowrap">Status</th>
117
                                  </tr>
118
                                  </thead>
119
                                  <tbody>
120
                                  <tr *ngFor="let usageRule of usageResults" class="el-item">
121
                                    <td class="uk-table-shrink">
122
                                      <div class="el-title">{{ usageRule.name }}</div>
123
                                    </td>
124
                                    <td class="uk-table-shrink">
125
                                      <div class="el-title" [innerHtml]="usageRule.description">
126
                                      </div>
127
                                    </td>
128
                                    <td class="uk-table-shrink">
129
                                      <div class="el-title">{{ usageRule.weight }}</div>
130
                                    </td>
131
                                    <td class="uk-table-shrink">
132
                                      <div class="el-title">{{ usageRule.successes }}</div>
133
                                    </td>
134
                                    <td class="uk-table-shrink">
135
                                      <div *ngIf="!usageRule.hasErrors" class="el-title">
136
                                        <i class="material-icons" style="color: #4b991f">check_circle_outline</i>
137
                                      </div>
138
                                      <div *ngIf="usageRule.hasErrors && usageRule.mandatory">
139
                                        <i class="material-icons" style="color: #cd242b">highlight_off</i>
140
                                        <a class="errorlink viewErrors uk-margin-left"
141
                                           (click)="viewErrors(usageRule)"><span>View Errors</span></a>
142
                                      </div>
143
                                      <div *ngIf="usageRule.hasErrors && !usageRule.mandatory">
144
                                        <i class="material-icons" style="color: #e9d60d">error_outline</i>
145
                                        <a class="warninglink viewErrors uk-margin-left"
146
                                           (click)="viewErrors(usageRule)"><span>View Warnings</span></a>
147
                                      </div>
148
                                    </td>
149
                                  </tr>
150
                                  </tbody>
151
                                </table>
152
                              </div>
153
                            </div>
219 154
                          </div>
220 155
                        </div>
221
                      </div>
156
                      </li>
157
                    </ul>
158
                  </div>
159
                  <div class="uk-width-medium-1-4">
160
                    <div class="uk-margin-medium-bottom">
161
                      <p>
162
                        Score for content:
163
                        <span *ngIf="jobSummary.contentJobScore>=50" class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ jobSummary.contentJobScore }}</span>
164
                        <span *ngIf="jobSummary.contentJobScore<50" class="uk-badge uk-badge-danger uk-text-upper uk-margin-small-left">{{ jobSummary.contentJobScore }}</span>
165
                      </p>
166
                      <p>
167
                        Score for usage:
168
                        <span *ngIf="jobSummary.usageJobScore>=50" class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ jobSummary.usageJobScore }}</span>
169
                        <span *ngIf="jobSummary.usageJobScore<50" class="uk-badge uk-badge-danger uk-text-upper uk-margin-small-left">{{ jobSummary.usageJobScore }}</span>
170
                      </p>
222 171
                    </div>
223
                  </li>
224
                </ul>
172
                    <h2 class="heading_c uk-margin-small-bottom">Details</h2>
173

  
174
                    <ul class="md-list md-list-addon">
175
                      <li>
176
                        <div class="md-list-addon-element">
177
                          <!--<img class="md-user-image md-list-addon-avatar dense-image dense-ready" src="assets/img/avatars/avatar_02_tn@2x.png" alt="" data-dense-cap="2">-->
178
                        </div>
179
                        <div class="md-list-content">
180
                          <span class="md-list-heading">{{ jobSummary.jobType }}</span>
181
                        </div>
182
                      </li>
183
                      <li>
184
                        <div class="md-list-addon-element">
185
                          <i class="md-list-addon-icon material-icons">gavel</i>
186
                        </div>
187
                        <div class="md-list-content">
188
                          <span class="md-list-heading">{{ jobSummary.guidelinesShortName }}</span>
189
                          <span class="uk-text-small uk-text-muted">Guidelines</span>
190
                        </div>
191
                      </li>
192
                      <li>
193
                        <div class="md-list-addon-element">
194
                          <i class="md-list-addon-icon material-icons">collections_bookmark</i>
195
                        </div>
196
                        <div class="md-list-content">
197
                          <span class="md-list-heading">{{ jobSummary.validationSet }}</span>
198
                          <span class="uk-text-small uk-text-muted">Validation set</span>
199
                        </div>
200
                      </li>
201
                      <li>
202
                        <div class="md-list-addon-element">
203
                          <i class="md-list-addon-icon material-icons"></i>
204
                        </div>
205
                        <div class="md-list-content uk-margin-small-bottom">
206
                          <span class="md-list-heading">{{ jobSummary.started }}</span>
207
                          <span class="uk-text-small uk-text-muted">Started</span>
208
                        </div>
209
                        <div class="md-list-content">
210
                          <span class="md-list-heading">{{ jobSummary.ended ? jobSummary.ended : '--' }}</span>
211
                          <span class="uk-text-small uk-text-muted">Ended</span>
212
                        </div>
213
                      </li>
214
                      <li>
215
                        <div class="md-list-addon-element">
216
                          <i class="md-list-addon-icon material-icons"></i>
217
                        </div>
218
                        <div class="md-list-content">
219
                          <span class="md-list-heading">{{ jobSummary.duration }}</span>
220
                          <span class="uk-text-small uk-text-muted">Duration</span>
221
                        </div>
222
                      </li>
223
                    </ul>
224
                  </div>
225

  
226
                </div>
227

  
225 228
              </div>
226 229
            </div>
230

  
227 231
          </div>
228 232

  
233

  
229 234
        </div>
230 235

  
231
        <!-- RIGHT HELP CONTENT -->
232
        <aside-help-content #rightHelperContent [position]="'right'"
233
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
234
        </aside-help-content>
236
      </div>
235 237

  
236
      </div>
238
      <!-- RIGHT HELP CONTENT -->
239
      <aside-help-content #rightHelperContent [position]="'right'"
240
                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
241
      </aside-help-content>
242

  
237 243
    </div>
238 244

  
239

  
240 245
    <!-- BOTTOM HELP CONTENT -->
241 246
    <help-content #bottomHelperContent [position]="'bottom'"
242 247
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
243 248
    </help-content>
244 249

  
245

  
246 250
  </div>
247 251
</div>
248 252

  
modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-history.component.html
1
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
2
  <div class="uk-width-1-1@m uk-first-column">
1
<div id="page_content">
2
  <div id="page_content_inner">
3
    <h2 class="heading_b uk-margin-bottom">Previous validations</h2>
3 4

  
4
    <h1 class="uk-h2">Previous validations</h1>
5

  
6 5
    <!-- TOP HELP CONTENT -->
7 6
    <help-content #topHelperContent [position]="'top'"
8 7
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
9 8
    </help-content>
10 9

  
11
    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
12
      <div class="uk-grid">
10
    <div class="uk-grid">
13 11

  
14
        <!-- LEFT HELP CONTENT -->
15
        <aside-help-content #leftHelperContent [position]="'left'"
16
                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
17
        </aside-help-content>
12
      <!-- LEFT HELP CONTENT -->
13
      <aside-help-content #leftHelperContent [position]="'left'"
14
                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
15
      </aside-help-content>
18 16

  
19
        <!-- MIDDLE -->
20
        <div class=" uk-width-expand@m">
17
      <!-- MIDDLE -->
18
      <div class=" uk-width-expand@m">
21 19

  
22
          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
23
          <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
24
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
25
          <div *ngIf="loadingMessage" class="loading-big">
26
            <div class="loader-big"
27
                 style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
28
              {{ loadingMessage }}
29
            </div>
30
            <div class="whiteFilm"></div>
20
        <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
21
        <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
22
        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
23
        <div *ngIf="loadingMessage" class="loading-big">
24
          <div class="loader-big"
25
               style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
26
            {{ loadingMessage }}
31 27
          </div>
32
          <div *ngIf="jobsOfUser">
33
            <div class="uk-grid page-controls">
34
              <div class="uk-margin-bottom uk-width-1-1 filters">
35
                <div class="links">
36
                  <div class="filterLabel">Filter by job type:</div>
37
                  <div class="inlineBlock">
38
                    <select class="form-control" #selectType (change)="getJobType(selectType.value)">
39
                      <option value="">--none selected--</option>
40
                      <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
41
                    </select>
28
          <div class="transparentFilm"></div>
29
        </div>
30
        <div *ngIf="jobsOfUser">
31

  
32

  
33
          <div class="page-controls">
34

  
35
            <div class="md-card uk-margin-medium-bottom">
36
              <div class="md-card-content">
37
                <div class="uk-grid" data-uk-grid-margin="">
38

  
39
                  <div class="uk-width-medium-3-10 uk-row-first">
40
                    <div class="uk-margin-small-top">
41
                      <div class="md-input-wrapper md-input-filled">
42
                        <label class="">Filter by job type</label>
43
                        <select class="md-input" #selectType (change)="getJobType(selectType.value)">
44
                          <option value="">--none selected--</option>
45
                          <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
46
                        </select>
47
                        <span class="md-input-bar"></span>
48
                      </div>
49

  
50
                      <!--<select id="product_search_status1" data-md-selectize="" multiple="multiple" data-md-selectize-bottom="" tabindex="-1" style="display: none;" class="selectized"></select>-->
51
                      <!--<div class="selectize-control multi plugin-tooltip">-->
52
                        <!--<div class="selectize-input items not-full has-options">-->
53
                          <!--<input type="select-multiple" autocomplete="off" tabindex="" id="product_search_status-selectized1" placeholder="Status" style="width: 47px;">-->
54
                        <!--</div>-->
55
                      <!--</div>-->
56
                      <!--<div class="selectize_fix"></div>-->
57
                    </div>
42 58
                  </div>
43
                </div>
44
              </div>
45
              <div class="uk-margin-bottom uk-width-1-1 filters">
46
                <div class="links uk-inline">
47
                  <div class="filterLabel" style="display: inline;">Filter validation jobs:</div>
48
                  <a class="uk-active"
49
                     [class.active]="currentFilter==='all'"
50
                     (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
51
                  <a class="uk-active"
52
                     [class.active]="currentFilter==='successful'"
53
                     (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
54
                  <a class="uk-active"
55
                     [class.active]="currentFilter==='failed'"
56
                     (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
57
                  <a class="uk-active"
58
                     [class.active]="currentFilter==='ongoing'"
59
                     (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
60
                </div>
61
                <div class="show-options uk-inline" style="float: right;">
62
                  <div class="filterLabel" style="display: inline;">Jobs per page:</div>
63
                  <div class="inlineBlock">
64
                    <select #itemsPerPage class="form-control" (change)="getItemsPerPage(+itemsPerPage.value)">
65
                      <option value="10" selected>10</option>
66
                      <option value="25">25</option>
67
                      <option value="50">50</option>
68
                      <option value="100">100</option>
69
                    </select>
59

  
60
                  <div class="uk-width-medium-5-10 uk-row-first">
70 61
                  </div>
62

  
63
                  <div class="uk-width-medium-2-10">
64
                    <div class="uk-margin-small-top">
65

  
66
                      <div class="md-input-wrapper md-input-filled">
67
                        <label class="">Jobs per page</label>
68
                        <select #itemsPerPage class="md-input" (change)="getItemsPerPage(+itemsPerPage.value)">
69
                          <option value="10" selected>10</option>
70
                          <option value="25">25</option>
71
                          <option value="50">50</option>
72
                          <option value="100">100</option>
73
                        </select>
74
                        <span class="md-input-bar"></span>
75
                      </div>
76

  
77
                    </div>
78
                  </div>
79

  
71 80
                </div>
72 81
              </div>
73 82
            </div>
74
            <div class="contentAndPagerPanel">
75
              <div>
76
                <ul class="uk-pagination">
77
                  <li>
78
                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
79
                      <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
80
                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
81
                             icon="pagination-previous" ratio="1"></svg>
82
                      </span>
83
                      Previous
84
                    </a>
85
                  </li>
86
                  <li class="uk-margin-auto-left">
87
                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
88
                      Next
89
                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
90
                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
91
                             icon="pagination-next" ratio="1"></svg>
92
                      </span>
93
                    </a>
94
                  </li>
95
                </ul>
96
                <div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>
97
              </div>
98
              <div>
99
                <div>
100
                  <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">
101
                    <table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">
102
                      <thead>
103
                      <tr>
104
                        <th>Repository</th>
105
                        <th>Validation Type</th>
106
                        <th>Status</th>
107
                        <th>Score</th>
108
                        <th>Started</th>
109
                        <th>Guidelines</th>
110
                        <th>Actions</th>
111
                        <th></th>
112
                      </tr>
113
                      </thead>
114
                      <tr *ngIf="infoMessage">
115
                        <td colspan="7">{{ infoMessage }}</td>
116
                      </tr>
117
                      <tbody *ngIf="jobsOfUser && jobsOfUser.jobs">
118
                      <tr class="el-item" *ngFor="let job of jobsOfUser.jobs">
119
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
120
                          <div class="el-title">{{ job.baseUrl }}</div>
83

  
84
            <div class="uk-margin-bottom uk-width-1-1 filters">
85

  
86
              <!--<h3 class="heading_a uk-margin-bottom">Filter validation jobs:</h3>-->
87
              <ul id="filter" class="uk-subnav uk-subnav-pill">
88
                <li class="uk-active" [class.uk-active]="currentFilter==='all'" data-uk-filter="">
89
                  <a (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
90
                </li>
91
                <li class="" [class.uk-active]="currentFilter==='successful'" data-uk-filter="filter-a">
92
                  <a (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
93
                </li>
94
                <li class="" [class.uk-active]="currentFilter==='failed'" data-uk-filter="filter-b">
95
                  <a (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
96
                </li>
97
                <li class="" [class.uk-active]="currentFilter==='ongoing'" data-uk-filter="filter-c">
98
                  <a (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
99
                </li>
100
              </ul>
101

  
102
            </div>
103
          </div>
104

  
105

  
106
          <div class="md-card uk-margin-medium-bottom">
107
            <div class="md-card-content">
108
              <div class="uk-overflow-container">
109
                <table class="uk-table uk-table-nowrap table_check">
110
                  <thead>
111
                    <tr>
112
                      <th class="uk-width-2-10">Repository</th>
113
                      <th class="uk-width-1-10">Validation Type</th>
114
                      <th class="uk-width-1-10">Status</th>
115
                      <th class="uk-width-1-10">Score</th>
116
                      <th class="uk-width-1-10">Started</th>
117
                      <th class="uk-width-2-10">Guidelines</th>
118
                      <th class="uk-width-1-10">Actions</th>
119
                      <th class="uk-width-1-10"></th>
120
                    </tr>
121
                  </thead>
122
                  <tbody>
123
                    <tr *ngIf="infoMessage">
124
                      <td colspan="7">{{ infoMessage }}</td>
125
                    </tr>
126
                    <ng-container *ngIf="jobsOfUser && jobsOfUser.jobs">
127
                      <tr *ngFor="let job of jobsOfUser.jobs">
128
                        <td style="vertical-align: top !important;">
129
                          <div class="">{{ job.baseUrl }}</div>
121 130
                        </td>
122
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
123
                          <div *ngIf="job.validationType.includes('C')" class="el-title">OAI Content</div>
124
                          <div *ngIf="job.validationType.includes('U')" class="el-title">OAI Usage</div>
131
                        <td style="vertical-align: top !important;">
132
                          <div *ngIf="job.validationType.includes('C')" class="">OAI Content</div>
133
                          <div *ngIf="job.validationType.includes('U')" class="">OAI Usage</div>
125 134
                        </td>
126
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
127
                          <div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobStatus }}</div>
128
                          <div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobStatus }}</div>
135
                        <td style="vertical-align: top !important;">
136
                          <div *ngIf="job.validationType.includes('C')" class="">{{ job.contentJobStatus }}</div>
137
                          <div *ngIf="job.validationType.includes('U')" class="">{{ job.usageJobStatus }}</div>
129 138
                        </td>
130
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
131
                          <div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobScore }}</div>
132
                          <div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobScore }}</div>
139
                        <td style="vertical-align: top !important;">
140
                          <div *ngIf="job.validationType.includes('C')" class="">{{ job.contentJobScore }}</div>
141
                          <div *ngIf="job.validationType.includes('U')" class="">{{ job.usageJobScore }}</div>
133 142
                        </td>
134
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
135
                          <div class="el-title">{{ job.started }}</div>
143
                        <td style="vertical-align: top !important;">
144
                          <div class="">{{ job.started }}</div>
136 145
                        </td>
137
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
138
                          <div class="el-title">{{ job.guidelinesShortName }}</div>
146
                        <td style="vertical-align: top !important;">
147
                          <div class="">{{ job.guidelinesShortName }}</div>
139 148
                        </td>
140
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
141
                          <div class="el-link">
142
                            <div class="viewDetailsLinkWrapper">
143
                              <a class="viewDetails" [routerLink]="[job.id]">
144
                                View Results<i class="fa fa-angle-right"></i>
145
                              </a>
146
                            </div>
147
                            <div>
148
                              <a class="resubmitJob" (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat"></i></a>
149
                            </div>
149
                        <td style="vertical-align: top !important;">
150
                          <div>
151
                            <a [routerLink]="[job.id]">
152
                              View Results<i class="fa fa-angle-right uk-margin-small-left"></i>
153
                            </a>
150 154
                          </div>
155
                          <div>
156
                            <a (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat uk-margin-small-left"></i></a>
157
                          </div>
151 158
                        </td>
152
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
153
                          <img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">
159
                        <td class="uk-text-center">
160
                          <i *ngIf="job.validationStatus === 'ongoing'" title="{{job.validationStatus}}" class="material-icons" style="color: yellow; font-size: 25px;">help</i>
161
                          <i *ngIf="job.validationStatus === 'successful'" title="{{job.validationStatus}}" class="material-icons" style="color: green; font-size: 25px;">check_circle</i>
162
                          <i *ngIf="job.validationStatus === 'failed'" title="{{job.validationStatus}}" class="material-icons" style="color: red; font-size: 25px;">cancel</i>
163
                          <!--<img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">-->
154 164
                        </td>
155 165
                      </tr>
156
                      </tbody>
157
                    </table>
158
                  </div>
159
                </div>
166
                    </ng-container>
167
                  </tbody>
168
                </table>
160 169
              </div>
161
              <div>
162
                <ul class="uk-pagination">
163
                  <li>
164
                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
165
                    <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
166
                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
167
                           icon="pagination-previous" ratio="1"></svg>
168
                    </span>
169
                      Previous
170
                    </a>
171
                  </li>
172
                  <li class="uk-margin-auto-left">
173
                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
174
                      Next
175
                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
176
                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
177
                             icon="pagination-next" ratio="1"></svg>
178
                      </span>
179
                    </a>
180
                  </li>
181
                </ul>
182
                <div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>
183
              </div>
170
              <ul class="uk-pagination uk-margin-medium-top">
171
                <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>
172
                <li class=""><span>page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</span></li>
173
                <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>
174
              </ul>
184 175
            </div>
185
            <div class="row"></div>
186 176
          </div>
187 177

  
178
          <!--<div class="contentAndPagerPanel">-->
179
            <!--<div>-->
180
              <!--<ul class="uk-pagination">-->
181
                <!--<li>-->
182
                  <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
183
                      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
184
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
185
                             <!--icon="pagination-previous" ratio="1"></svg>-->
186
                      <!--</span>-->
187
                    <!--Previous-->
188
                  <!--</a>-->
189
                <!--</li>-->
190
                <!--<li class="uk-margin-auto-left">-->
191
                  <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
192
                    <!--Next-->
193
                    <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
194
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
195
                             <!--icon="pagination-next" ratio="1"></svg>-->
196
                      <!--</span>-->
197
                  <!--</a>-->
198
                <!--</li>-->
199
              <!--</ul>-->
200
              <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>-->
201
            <!--</div>-->
202
            <!--<div>-->
203
              <!--<div>-->
204
                <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->
205
                  <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
206
                    <!--<thead>-->
207
                    <!--<tr>-->
208
                      <!--<th>Repository</th>-->
209
                      <!--<th>Validation Type</th>-->
210
                      <!--<th>Status</th>-->
211
                      <!--<th>Score</th>-->
212
                      <!--<th>Started</th>-->
213
                      <!--<th>Guidelines</th>-->
214
                      <!--<th>Actions</th>-->
215
                      <!--<th></th>-->
216
                    <!--</tr>-->
217
                    <!--</thead>-->
218
                    <!--<tr *ngIf="infoMessage">-->
219
                      <!--<td colspan="7">{{ infoMessage }}</td>-->
220
                    <!--</tr>-->
221
                    <!--<tbody *ngIf="jobsOfUser && jobsOfUser.jobs">-->
222
                    <!--<tr class="el-item" *ngFor="let job of jobsOfUser.jobs">-->
223
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
224
                        <!--<div class="el-title">{{ job.baseUrl }}</div>-->
225
                      <!--</td>-->
226
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
227
                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">OAI Content</div>-->
228
                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">OAI Usage</div>-->
229
                      <!--</td>-->
230
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
231
                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobStatus }}</div>-->
232
                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobStatus }}</div>-->
233
                      <!--</td>-->
234
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
235
                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobScore }}</div>-->
236
                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobScore }}</div>-->
237
                      <!--</td>-->
238
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
239
                        <!--<div class="el-title">{{ job.started }}</div>-->
240
                      <!--</td>-->
241
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
242
                        <!--<div class="el-title">{{ job.guidelinesShortName }}</div>-->
243
                      <!--</td>-->
244
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
245
                        <!--<div class="el-link">-->
246
                          <!--<div class="viewDetailsLinkWrapper">-->
247
                            <!--<a class="viewDetails" [routerLink]="[job.id]">-->
248
                              <!--View Results<i class="fa fa-angle-right"></i>-->
249
                            <!--</a>-->
250
                          <!--</div>-->
251
                          <!--<div>-->
252
                            <!--<a class="resubmitJob" (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat"></i></a>-->
253
                          <!--</div>-->
254
                        <!--</div>-->
255
                      <!--</td>-->
256
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
257
                        <!--<img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">-->
258
                      <!--</td>-->
259
                    <!--</tr>-->
260
                    <!--</tbody>-->
261
                  <!--</table>-->
262
                <!--</div>-->
263
              <!--</div>-->
264
            <!--</div>-->
265
            <!--<div>-->
266
              <!--<ul class="uk-pagination">-->
267
                <!--<li>-->
268
                  <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
269
                    <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
270
                      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
271
                           <!--icon="pagination-previous" ratio="1"></svg>-->
272
                    <!--</span>-->
273
                    <!--Previous-->
274
                  <!--</a>-->
275
                <!--</li>-->
276
                <!--<li class="uk-margin-auto-left">-->
277
                  <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
278
                    <!--Next-->
279
                    <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
280
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
281
                             <!--icon="pagination-next" ratio="1"></svg>-->
282
                      <!--</span>-->
283
                  <!--</a>-->
284
                <!--</li>-->
285
              <!--</ul>-->
286
              <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>-->
287
            <!--</div>-->
288
          <!--</div>-->
289
          <!--<div class="row"></div>-->
188 290
        </div>
189 291

  
190
        <!-- RIGHT HELP CONTENT -->
191
        <aside-help-content #rightHelperContent [position]="'right'"
192
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
193
        </aside-help-content>
292
      </div>
194 293

  
195
      </div>
294
      <!-- RIGHT HELP CONTENT -->
295
      <aside-help-content #rightHelperContent [position]="'right'"
296
                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
297
      </aside-help-content>
298

  
196 299
    </div>
197 300

  
198

  
199 301
    <!-- BOTTOM HELP CONTENT -->
200 302
    <help-content #bottomHelperContent [position]="'bottom'"
201 303
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
202 304
    </help-content>
203 305

  
204

  
205 306
  </div>
206 307
</div>
207 308

  
modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/shared/reusablecomponents/403-forbidden-page.component.html
1
<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
2
  <!-- MARGIN-TOP  -->
3
  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
1
<div id="page_content">
2
  <div id="page_content_inner">
3
    <h2 class="heading_b uk-margin-bottom uk-margin-large-top uk-text-center">Error: 403 Forbidden</h2>
4 4

  
5
  <div class="uk-container uk-container-large">
6
    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
7
      <div class="uk-width-1-1@m uk-first-column">
5
    <!-- TOP HELP CONTENT -->
6
    <help-content #topHelperContent [position]="'top'"
7
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
8
    </help-content>
8 9

  
9
        <h1 class="uk-h2 uk-text-center">Error: 403 Forbidden</h1>
10
    <div class="uk-grid">
10 11

  
11
        <!-- TOP HELP CONTENT -->
12
        <help-content #topHelperContent [position]="'top'"
13
                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
14
        </help-content>
12
      <!-- LEFT HELP CONTENT -->
13
      <aside-help-content #leftHelperContent [position]="'left'"
14
                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
15
      </aside-help-content>
15 16

  
16
        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
17
          <div class="uk-grid">
17
      <!-- MIDDLE -->
18
      <div class=" uk-width-expand@m">
18 19

  
19
            <!-- LEFT HELP CONTENT -->
20
            <aside-help-content #leftHelperContent [position]="'left'"
21
                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
22
            </aside-help-content>
20
        <div style="font-size: 180px; color: #28beFF; line-height: 1.2;" class="uk-text-center">
21
          <strong>403</strong>
22
        </div>
23 23

  
24
            <!-- MIDDLE -->
25
            <div class=" uk-width-expand@m">
24
        <div class="uk-text-center">
25
          Sorry, access to this resource on the server is forbidden.<br>
26
          Either check the URL or <a href="/landing">go home</a>
27
        </div>
26 28

  
27
              <div style="font-size: 180px; color: #28beFF; line-height: 1.2;" class="uk-text-center">
28
                <strong>403</strong>
29
              </div>
29
      </div>
30 30

  
31
              <div class="uk-text-center">
32
                Sorry, access to this resource on the server is forbidden.<br>
33
                Either check the URL or <a href="/landing">go home</a>
34
              </div>
31
      <!-- RIGHT HELP CONTENT -->
32
      <aside-help-content #rightHelperContent [position]="'right'"
33
                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
34
      </aside-help-content>
35 35

  
36
            </div>
36
    </div>
37 37

  
38
            <!-- RIGHT HELP CONTENT -->
39
            <aside-help-content #rightHelperContent [position]="'right'"
40
                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
41
            </aside-help-content>
38
    <!-- BOTTOM HELP CONTENT -->
39
    <help-content #bottomHelperContent [position]="'bottom'"
40
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
41
    </help-content>
42 42

  
43
          </div>
44
        </div>
45

  
46

  
47
        <!-- BOTTOM HELP CONTENT -->
48
        <help-content #bottomHelperContent [position]="'bottom'"
49
                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
50
        </help-content>
51

  
52

  
53
      </div>
54
    </div>
55 43
  </div>
56 44
</div>

Also available in: Unified diff