source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Resource/Index.cshtml @ 13795

Last change on this file since 13795 was 13795, checked in by jlodewyc, 6 years ago

#2582 Resource Permissions added

File size: 26.3 KB
Line 
1
2<div ng-app="wjm" ng-controller="resourceCtrl" data-ng-init="init()">
3    <div id="userId" style="display:none">@ViewBag.SessionId</div>
4
5    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("Resource"))
6
7
8
9    <div class="col-sm-4">
10        <div class="btn-group btn-group-justified" style="padding:3px;margin-bottom:-10px"
11             role="group">
12            <a class="btn btn-info btn-lg btn-block disabled"
13               style="width:6%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
14                            text-shadow:2px 2px black;">
15                <i class="fa fa-sitemap"></i> Resource groups
16            </a>
17            <div class="btn btn-block btn-success"
18                 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
19                            text-shadow:2px 2px black;"
20                 ng-click="clearTreeSelect()"><i class="fa fa-plus-circle"></i></div>
21        </div>
22
23        <div style=""
24             data-angular-treeview="true"
25             data-tree-id="treeview"
26             data-tree-model="tree"
27             data-node-id="Id"
28             data-node-label="Name"
29             data-node-children="children"
30             ng-class="">
31        </div>
32    </div>
33    <div ng-if="treeview.currentNode && treeview.currentNode.Id !== undefined" class="col-sm-8 panel  panel-primary" style="margin-bottom:200px">
34        <div class="row panel-heading"
35             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
36                            text-shadow:2px 2px black;">
37            <h3>
38                {{treeview.currentNode.Name}}
39                <span ng-if="treeview.currentNode.IsDisposable === undefined"> - Resource group</span>
40                <a ng-if="treeview.currentNode.IsDisposable !== undefined"
41                   class="btn pull-right"
42                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
43                            text-shadow:2px 2px black;font-weight:bold;margin-bottom:5px"
44                   ng-class="{ 'btn-success': treeview.currentNode.IsDisposable, 'btn-warning': !treeview.currentNode.IsDisposable }"
45                   ng-click="toggleDisposable()">
46                    <span ng-if="calendarDispose"><i class="fa fa-save fa-spin"></i> </span> {{ treeview.currentNode.IsDisposable | disp}}
47                </a>
48            </h3>
49            <ul class="nav nav-pills nav-justified">
50                <li role="presentation" ng-class="{ 'active': !permission }" ng-style="{ 'text-decoration': !permission ? 'underline' : ''}">
51                    <a style="text-shadow:2px 2px black; color:white; font-weight:bold; border: 1px solid white;"
52                       href=""
53                       ng-click="permission = false">
54                        Resource info
55                    </a>
56                </li>
57                <li role="presentation" ng-class="{ 'active': permission }" ng-style="{ 'text-decoration': permission ? 'underline' : ''}">
58                    <a style="text-shadow:2px 2px black; color:white; font-weight:bold; border: 1px solid white;"
59                       href=""
60                       ng-click="permission = true">
61                        Permissions
62                    </a>
63                </li>
64            </ul>
65           
66            <form ng-show="permission"
67                  method="post"
68                  asp-action="editPermissions"
69                  asp-controller="Resource"
70                  enctype="multipart/form-data"
71                  class="row panel-heading"
72                  >
73                <div
74                     class="row" style="padding:10px;">
75                    <h4>Groups</h4>
76                    <label class="col-sm-3" ng-repeat="group in permGroups">
77                        <input type="checkbox"
78                               name="permgroups"
79                               value="{{group.Id}}"
80                               ng-model="group.state"> {{group.Name}}
81                    </label>
82                </div>
83                <div class="row" style="padding:10px;">
84                    <h4>Users</h4>
85                    <label class="col-sm-3 col-lg-2" ng-repeat="user in permUsers">
86                        <input type="checkbox"
87                               name="permusers"
88                               value="{{user.Id}}"
89                               ng-model="user.state"> {{user.UserName}}
90                    </label>
91                </div>
92                <div class="btn btn-info pull-right"
93                     style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
94                            text-shadow:2px 2px black;"
95                     ng-click="pushPermissions()">
96                <i ng-if="permissionLoader" class="fa fa-spin fa-save"></i>
97                Save permission changes</div>
98            </form>
99            <form ng-show="!permission"
100                  method="post"
101                  asp-action="deleteClientGroup"
102                  ng-init="checkDel = false"
103                  asp-controller="Resource"
104                  enctype="multipart/form-data"
105                  class="row panel-heading"
106                  style="padding:10px;">
107                <table class="table" style="margin-bottom:0px">
108                    <tbody>
109                        <tr>
110                            <td>Heartbeat</td>
111                            <td>
112                                Every {{treeview.currentNode.HbInterval}} sec
113                                <span ng-if="treeview.currentNode.IsDisposable !== undefined">
114                                    - Last beat {{treeview.currentNode.LastHeartbeat | date:'HH:mm dd/MM/yyyy' }}
115                                </span>
116                            </td>
117                        </tr>
118                        <tr>
119                            <td>Name</td>
120                            <td>{{treeview.currentNode.Name}}</td>
121                        </tr>
122                        <tr>
123                            <td>Id</td>
124                            <td>{{treeview.currentNode.Id}}</td>
125                        </tr>
126                        <tr ng-if="treeview.currentNode.IsDisposable === undefined">
127
128                            <td>
129
130                                <input style="display:none" type="text" id="inpid" name="inpid" value="{{treeview.currentNode.Id}}" />
131                                <input type="checkbox" ng-model="checkDel" /> I want to delete this group
132                            </td>
133                            <td>
134                                <button type="submit"
135                                        id="inpsaver"
136                                        ng-disabled="!checkDel"
137                                        class="btn btn-danger"
138                                        style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
139                            text-shadow:2px 2px black;">
140                                    <i class="fa fa-trash-o"></i>
141                                    Delete group (irriversible action!)
142                                </button>
143
144                            </td>
145
146                        </tr>
147                    </tbody>
148                    <tbody ng-if="treeview.currentNode.IsDisposable !== undefined">
149                        <tr>
150                            <td>Cores (free/total)</td>
151                            <td>{{treeview.currentNode.FreeCores}} / {{treeview.currentNode.Cores}} @@ {{treeview.currentNode.CpuSpeed/1000 | number:1}} GHz</td>
152
153
154                        </tr>
155                        <tr>
156                            <td>Memory (free/total)</td>
157                            <td>{{treeview.currentNode.FreeMemory/1024 | number:1}} GB / {{treeview.currentNode.Memory/1024 | number:1}} GB</td>
158                        </tr>
159
160                    </tbody>
161                </table>
162            </form>
163            <form method="post"
164                  asp-action="changeParent"
165                  asp-controller="Resource"
166                  enctype="multipart/form-data"
167                  class="row"
168                  style="padding:10px;">
169                <input style="display:none" type="text" id="inpid" name="inpid" value="{{treeview.currentNode.Id}}" />
170
171                <span style="padding:0px" class="col-sm-4">Change parent resource: </span>
172
173                <select class="form-control col-sm-5"
174                        style="width:200px"
175                        id="inpidpar"
176                        name="inpidpar"
177                        ng-model="treeview.currentNode.ParentResourceId">
178                    <option value="">None</option>
179                    <option ng-repeat="group in groups | orderBy:'Name'"
180                            value="{{group.Id}}"
181                            ng-if="group.Id !=treeview.currentNode.Id && group.ParentResourceId != treeview.currentNode.Id">
182                        {{group.Name}}
183                    </option>
184
185                </select>
186                <button type="submit"
187                        id="inpsaver"
188                        class="btn btn-warning col-sm-3 pull-right"
189                        style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
190                            text-shadow:2px 2px black;">
191                    <i class="fa fa-save"></i>
192                    Change parent
193                </button>
194            </form>
195        </div>
196        <div class="panel-body row" style="text-align:center">
197
198            <i ng-if="currentcal.length  === 0" class="fa fa-cog fa-5x fa-spin"></i>
199            <div ng-if="currentcal.length != 0"
200                 ui-calendar="uiConfig.calendar"
201                 id="resourcecalendar"
202                 style="font-size:medium"
203                 class="span8 calendar"
204                 ng-model="currentcal.down"></div>
205            <table ng-if="selectedEventId != -1"
206                   animate-on-change="selectedEventId"
207                   class="table">
208                <tr>
209                    <th> Selected event</th>
210                    <th>
211                        <div class="btn btn-default"
212                             ng-click="goToDate()"
213                             ng-style="{'background-color':currentcal.down[0][selectedEventId].color }"
214                             style="color:white;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
215                            text-shadow:2px 2px black;font-weight:bold;">
216                            <i class="fa fa-calendar"></i> Go to date
217                        </div>
218                    </th>
219                </tr>
220                <tr>
221                    <td>Time</td>
222                    <td ng-if="!currentcal.down[0][selectedEventId].allDay">
223                        {{currentcal.down[0][selectedEventId].start | date : 'HH:mm dd/MM/yy' : 'utc'}}
224                        <span ng-if="currentcal.down[0][selectedEventId].end">
225                            to {{currentcal.down[0][selectedEventId].end | date : 'HH:mm dd/MM/yy': 'utc'}}
226                        </span>
227                    </td>
228                    <td ng-if="currentcal.down[0][selectedEventId].allDay">
229                        All day {{currentcal.down[0][selectedEventId].start | date : 'dd/MM/yy' : 'utc'}}
230                        <span ng-if="currentcal.down[0][selectedEventId].end">
231                            to {{currentcal.down[0][selectedEventId].end | date : 'dd/MM/yy': 'utc'}}
232                        </span>
233                    </td>
234                </tr>
235                <tr>
236                    <td>Status</td>
237                    <td>
238                        <select class="content-select" ng-model="currentcal.down[0][selectedEventId].title" ng-change="setChanged(selectedEventId)">
239                            <option value="Unavailable">Unavailable</option>
240                            <option value="Shutdown">Shutdown command</option>
241                        </select>
242                    </td>
243                </tr>
244                <tr>
245                    <td>Recurrence</td>
246                    <td>
247                        <input type="checkbox" class="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.recurrence" ng-change="setChanged(selectedEventId)" />
248                        <p ng-if="currentcal.down[0][selectedEventId].changed && currentcal.down[0][selectedEventId].rec.recurrence" style="color:darkred;font-weight:bold">
249                            The recurrence itself will be made during saving, settings can be changed here.
250                        </p>
251                    </td>
252                </tr>
253                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
254                    <td>
255                        Start
256                    </td>
257                    <td>
258                        <input type="date"
259                               ng-model="currentcal.down[0][selectedEventId].rec.start"
260                               ng-change="checkDateStartEnd()" />
261                    </td>
262                </tr>
263                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
264                    <td>
265                        End
266                    </td>
267                    <td>
268                        <input type="date"
269                               ng-model="currentcal.down[0][selectedEventId].rec.end"
270                               ng-change="checkDateStartEnd()"
271                               min="{{currentcal.down[0][selectedEventId].rec.start | date:'yyyy-MM-dd'}}" />
272                    </td>
273                </tr>
274
275                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
276                    <td colspan="2">
277                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[1]">Monday</label>
278                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[2]">Tuesday</label>
279                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[3]">Wednesday</label>
280                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[4]">Thursday</label>
281                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[5]">Friday</label>
282                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[6]">Saturday</label>
283                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[0]">Sunday</label>
284                    </td>
285
286                </tr>
287                <tr>
288                    <td></td>
289                    <td>
290                        <button class="btn btn-info"
291                                ng-click="pushRecurChanges(currentcal.down[0][selectedEventId].rec.recid)"
292                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
293                            text-shadow:2px 2px black;"
294                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0' &&
295                                currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000' &&
296                                currentcal.down[0][selectedEventId].changed">
297                            Push all changes to other recurrencies
298                        </button>
299                        <button class="btn btn-danger"
300                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
301                            text-shadow:2px 2px black;"
302                                ng-click="remove(selectedEventId)">
303                            <i class="fa fa-trash-o"></i>
304                            Delete
305                        </button>
306                        <button class="btn btn-danger"
307                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
308                            text-shadow:2px 2px black;"
309                                ng-click="deleteAllRecurrences(currentcal.down[0][selectedEventId].rec.recid)"
310                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0'
311                                        && currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000'">
312                            Delete all recurrencies
313                        </button>
314                    </td>
315                </tr>
316            </table>
317            <table ng-if="selectedEventId === -1" class="table">
318                <tr>
319                    <th colspan="2"> Select an event to show information</th>
320
321                </tr>
322                <tr>
323                    <td>Time / Select an event</td>
324                </tr>
325                <tr>
326                    <td>Status / Select an event</td>
327                </tr>
328            </table>
329            <div ng-if="calendarSaver">
330                <i class="fa fa-save fa-4x fa-spin"></i>
331            </div>
332            <div ng-if="calendarDeleter">
333                <i class="fa fa-trash-o fa-4x fa-spin"></i>
334            </div>
335            <div class="row">
336                <h3>Current calendar - actions</h3>
337                <div class="btn-group btn-group-justified"
338                     role="group"
339                     style="padding-bottom:20px;">
340
341                    <div ng-if="treeview.currentNode.changes"
342                         class="btn btn-success"
343                         ng-click="saveCurrentCalendar()"
344                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
345                            text-shadow:2px 2px black;">
346                        Save current changes
347                    </div>
348                    <div ng-if="treeview.currentNode.changes"
349                         class="btn btn-warning"
350                         ng-click="clearCurrentCalendar()"
351                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
352                            text-shadow:2px 2px black;">
353                        Clear current changes
354                    </div>
355                    <div class="btn btn-danger"
356                         ng-click="deleteAllPreviousEvents()"
357                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
358                            text-shadow:2px 2px black;">
359                        Delete past events
360                    </div>
361                    <div class="btn btn-danger"
362                         ng-click="deleteAllEvents()"
363                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
364                            text-shadow:2px 2px black;">
365                        Delete all events
366                    </div>
367                </div>
368            </div>
369            <div class="row">
370                <h3>All loaded calendars - actions</h3>
371                <div class="btn-group btn-group-justified"
372                     role="group"
373                     style="padding-bottom:20px;">
374
375                    <div class="btn btn-success"
376                         ng-click="saveAllCalendars()"
377                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
378                            text-shadow:2px 2px black;">
379                        Save all changes
380                    </div>
381
382                    <div class="btn btn-warning"
383                         ng-click="clearAllCalendars()"
384                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
385                            text-shadow:2px 2px black;">
386                        Clear all changes
387                    </div>
388                </div>
389            </div>
390
391        </div>
392
393        <div class="row panel-footer">
394            <h2>All events </h2><h5>(sorted by changed and start date)</h5>
395            <div class="row" ng-repeat="ev in currentcal.down[0] | orderBy:['!changed','start'] track by $index"
396                 style="margin-bottom:4px">
397                <div class="btn-group-justified btn-block">
398
399                    <div class="btn btn-default" ng-style="{'background-color': ev.color}"
400                         ng-click="eventClickBtn(ev._id)"
401                         style="width:6%;color:white;
402                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-shadow:2px 2px black;">
403                        {{ev.title }}
404                        <span ng-if="!ev.allDay">
405                            from {{ev.start | date : 'HH:mm dd/MM/yy' : 'utc'}}
406                            <span ng-if="ev.end">
407                                to {{ev.end | date : 'HH:mm dd/MM/yy': 'utc'}}
408                            </span>
409                        </span>
410                        <span ng-if="ev.allDay">
411                            all day from {{ev.start | date : 'dd/MM/yy' : 'utc'}}
412                            <span ng-if="ev.end">
413                                to {{ev.end | date : 'dd/MM/yy': 'utc'}}
414                            </span>
415                        </span>
416                        <span ng-if="ev.rec.recurrence">
417                            | recurring event
418                        </span>
419                    </div>
420                    <a id="del"
421                       style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
422                            text-shadow:2px 2px black;"
423                       class='btn btn-group btn-danger'
424                       ng-click="removeList(ev._id)">
425                        <span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
426                    </a>
427                </div>
428
429            </div>
430
431        </div>
432    </div>
433    <div ng-show="treeview.currentNode === undefined"
434         style="margin-bottom:200px">
435        <form method="post"
436              ng-init="newName = ''"
437              asp-action="newClientGroup"
438              asp-controller="Resource"
439              enctype="multipart/form-data"
440              class="col-sm-8 panel panel-primary">
441            <div class="row panel-heading"
442                 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
443                            text-shadow:2px 2px black;">
444                <h3>
445                    Add new resource group
446                </h3>
447                <table class="table">
448                    <tbody>
449                        <tr>
450                            <td>Heartbeat</td>
451                            <td>
452                                <i class="fa fa-clock-o fa-2x pull-left"></i> <input type="number" class="form-control" style="width:70px" name="inpheart" id="inpheart" value="60" placeholder="60" />
453
454
455                            </td>
456                        </tr>
457                        <tr>
458                            <td>Name</td>
459                            <td><input type="text" class="form-control" id="inpname" name="inpname" ng-model="newName" placeholder="Group name" /></td>
460                        </tr>
461                        <tr>
462                            <td>Assign parent group</td>
463                            <td>
464                                <select class="form-control" id="inpparent" name="inpparent">
465                                    <option value="">None</option>
466                                    <option ng-repeat="group in groups | orderBy:'Name'" value="{{group.Id}}">{{group.Name}}</option>
467
468                                </select>
469                            </td>
470                        </tr>
471                    </tbody>
472
473                </table>
474                <button type="submit"
475                        id="inpsaver"
476                        ng-disabled="newName === ''"
477                        class="btn btn-success"
478                        style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
479                            text-shadow:2px 2px black;font-weight:bold;">
480                    <i class="fa fa-save"></i>
481                    Add {{newName}} group
482                </button>
483            </div>
484            <div class="panel-body row">
485                <h3>Choose resources </h3>
486                <h5>(This will overwrite the group set for these resources)</h5>
487                <table>
488                    <tr ng-repeat="client in clients  | orderBy:['Name'] track by $index" class="checkbox col-md-6 col-lg-4">
489                        <td>
490                            <label>
491                                <input type="checkbox"
492                                       name="clientstoadd"
493                                       value="{{client.Id}}">
494                                <i class="fa fa-desktop" aria-hidden="true"></i> {{client.Name | limitTo : 7}} - {{client.Cores}}x {{client.CpuSpeed/1000 |  number:1}} GHz - {{client.Memory / 1024 | number:1}} GB
495                            </label>
496                        </td>
497                    </tr>
498                </table>
499            </div>
500        </form>
501    </div>
502
503    <div ng-if="treeview.currentNode !== undefined && treeview.currentNode.Id === undefined"
504         class="col-sm-8 panel  panel-primary"
505         style="margin-bottom:200px">
506        <div class="row panel-heading"
507             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
508                            text-shadow:2px 2px black;">
509            <h2>
510                Ungrouped
511            </h2>
512            <h4>
513                All unassigned resources arrive here. Assign them to a group to remove them from this group.
514            </h4>
515
516        </div>
517    </div>
518    <script src="~/js/hubs/calendarhubber.js"></script>
519</div>
Note: See TracBrowser for help on using the repository browser.