Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml @ 17578

Last change on this file since 17578 was 13862, checked in by jlodewyc, 9 years ago

#2582 Start angular OKB manager, data loaded

File size: 8.8 KB
Line 
1@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels
2
3@model JobViewModel
4
5<!-- Displays the job manager overview -->
6
7<div id="userId" style="display:none">@ViewBag.SessionId</div>
8<div class="animated fadeIn">
9    <!-- Main nav menu-->
10    @Html.Partial("Navbar", new NavbarViewModel("Job", Model.User))
11
12    <!-- Job menu-->
13    <ul class="nav nav-pills nav-justified">
14        <li role="presentation"
15            class="active">
16            <a asp-controller="Job"
17               asp-action="Index">
18                <i class="fa fa-tasks"></i> Jobs
19            </a>
20        </li>
21        <li role="presentation"
22            class="">
23            <a asp-controller="Job"
24               asp-action="Uploads">
25                <i class="fa fa-cloud"></i>  Uploads
26            </a>
27        </li>
28    </ul>
29
30    @Html.Partial("_ErrorMessage", Model.message)
31
32    <div class="row"
33         style="padding:10px; margin-right:0!important">
34        @if (Model.userJobs.Count == 0)
35            {
36            <div>
37                <p style="text-align:center">
38                    No jobs found
39                </p>
40            </div>
41
42        }
43        else
44        {<!-- Display side menu containing jobs. -->
45            <div class="col-sm-4">
46                <div class="btn-group-vertical btn-block">
47                    <a class="btn btn-info btn-lg btn-block disabled"
48                       style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
49                            text-shadow:2px 2px black;">
50                        <i class="fa fa-cog"></i> Hive jobs
51                    </a>
52                    @foreach (var job in Model.userJobs.OrderBy(x => x.Job.DateCreated))
53                {
54                        <a class="btn btn-default
55                           @(Model.selectedJob != null && job.Id == Model.selectedJob.Id ? "active" : "" )
56                           "
57                           asp-controller="Job"
58                           asp-action="Selected"
59                           asp-route-id="@job.Id"
60                           style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
61                                text-align:left;"
62                           onclick="showLoader()">
63                            @job.Job.Name - @job.Job.DateCreated
64                            <span style="text-shadow:2px 2px black; font-size:13px"
65                                  class="label label-as-badge
66                                   @(job.Job.FinishedCount == @job.Job.JobCount ? "label-success" : "label-default")
67                                    pull-right">
68                                <strong>@job.Job.FinishedCount / @job.Job.JobCount</strong>
69                            </span>
70                        </a>
71                    }
72
73                </div>
74            </div>
75            <p style="display:none" id="loader" class="text-center">
76                <br /><br /><br /><br /><br /><br /><br />
77                <i class="fa fa-cog fa-spin fa-5x" id="spinner">
78                </i>
79            </p>
80
81            <div class="col-sm-8"
82                 id="content"
83                 style="padding:5px; padding-left:10px;">
84                @if (Model.selectedJob != null)
85                { <!-- A job has been selected by the user, load info into view -->
86                    <div class="panel panel-default"
87                         style="border-width:2px!important;padding:17px;
88                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
89                        <div class="row">
90                            <h2 style="padding-left:20px">
91                                <!-- Header of the job (title and delete button) -->
92                                @Model.selectedJob.Job.Name
93                                <a onclick="popUpDelete()"
94                                   style="margin-bottom:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
95                                    text-shadow:2px 2px black;"
96                                   class='btn btn-danger'>
97                                    <span class="glyphicon glyphicon-trash"
98                                          aria-hidden="true"></span>
99                                    Delete job
100                                </a>
101                                <!-- HIDDEN BUTTON FOR ASP ACTION -->
102                                <a style="display:none; "
103                                   asp-action="Delete"
104                                   asp-route-id="@Model.selectedJob.Id"
105                                   asp-controller="Job" id="del"
106                                   onclick="showDeleter()"></a>
107
108                                <script type="text/javascript">
109                                    function popUpDelete() {//Quick inline popup with hidden asp button
110                                        if (confirm("Are you sure you want to delete this job?") == true) {
111                                            document.getElementById("del").click();
112                                        }
113
114                                    }
115                                </script>
116
117                            </h2>
118                            <div class="col-sm-6" style="padding-left:30px">
119                                <!-- Information of the job -->
120                                <p>Description: @Model.selectedJob.Job.Description</p>
121                                <p>Resources: @Model.selectedJob.Job.ResourceNames</p>
122                                <p>Created: @Model.selectedJob.Job.DateCreated</p>
123                                <p>Owned by: @Model.selectedJob.Job.OwnerUsername</p>
124
125                            </div>
126                            <div class="col-sm-6" style="padding-left:30px">
127                                <p id="jobcalculating">
128                                    Calculating: @Model.selectedJob.Job.CalculatingCount
129                                </p>
130                                <p id="jobfinished">
131                                    Finished: @Model.selectedJob.Job.FinishedCount
132                                </p>
133                                <p>
134                                    Automatic refresh:
135                                    <input type="checkbox"
136                                           checked
137                                           data-toggle="toggle"
138                                           data-onstyle="success"
139                                           id="refreshtogg"
140                                           onchange="autoRefresh()" />
141                                </p>
142                            </div>
143
144                        </div>
145                        <script src="~/js/hubs/graphhubber.js"></script>
146                        <div class="row" style="text-align:center">
147                            @Html.Partial("_Graphlegend")
148                            <!-- Main graph giving overview of all the jobs-->
149                            <div id="graphMain" style="width:100%;height:0">
150
151                            </div>
152                            <div class="btn btn-lg btn-info"
153                                 onclick="redrawMain()"
154                                 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
155                            text-shadow:2px 2px black;">Refresh main graph</div>
156                        </div>
157                        <div class="row">
158                            <h3 style="padding-left:20px; ">
159                                @Model.selectedJob.Job.JobCount Tasks
160                            </h3>
161                            @foreach (var task in Model.selectedJob.HiveTasks)
162                            {<!--Display all child jobs recursively -->
163                                @Html.Partial("SelectedJobPartials/_TaskPartial",
164                           new HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer(task))
165
166                            }
167                        </div>
168                    </div>
169                }
170            </div>
171
172
173        }
174        <script type="text/javascript">
175            function showLoader() {//Shows load spinner
176                document.getElementById("content").style.display = "none";
177                document.getElementById("loader").style.display = "";
178
179            }
180            function showDeleter() {//Shows delete spinner
181                document.getElementById("content").style.display = "none";
182                document.getElementById("loader").style.display = "";
183
184                document.getElementById("spinner").className = "fa fa-trash-o fa-spin fa-5x";
185            }
186        </script>
187    </div>
188</div>
Note: See TracBrowser for help on using the repository browser.