Free cookie consent management tool by TermsFeed Policy Generator

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

Last change on this file since 15354 was 13862, checked in by jlodewyc, 8 years ago

#2582 Start angular OKB manager, data loaded

File size: 8.8 KB
RevLine 
[13733]1@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels
[13860]2
[13733]3@model JobViewModel
[13827]4
5<!-- Displays the job manager overview -->
6
[13739]7<div id="userId" style="display:none">@ViewBag.SessionId</div>
[13860]8<div class="animated fadeIn">
[13827]9    <!-- Main nav menu-->
[13862]10    @Html.Partial("Navbar", new NavbarViewModel("Job", Model.User))
[13656]11
[13827]12    <!-- Job menu-->
[13733]13    <ul class="nav nav-pills nav-justified">
14        <li role="presentation"
15            class="active">
16            <a asp-controller="Job"
17               asp-action="Index">
[13742]18                <i class="fa fa-tasks"></i> Jobs
[13733]19            </a>
20        </li>
21        <li role="presentation"
22            class="">
23            <a asp-controller="Job"
24               asp-action="Uploads">
[13742]25                <i class="fa fa-cloud"></i>  Uploads
[13733]26            </a>
27        </li>
[13656]28    </ul>
[13733]29
[13847]30    @Html.Partial("_ErrorMessage", Model.message)
[13733]31
32    <div class="row"
[13860]33         style="padding:10px; margin-right:0!important">
[13656]34        @if (Model.userJobs.Count == 0)
[13733]35            {
[13656]36            <div>
[13733]37                <p style="text-align:center">
38                    No jobs found
39                </p>
[13656]40            </div>
41
42        }
[13827]43        else
44        {<!-- Display side menu containing jobs. -->
[13656]45            <div class="col-sm-4">
46                <div class="btn-group-vertical btn-block">
[13733]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>
[13847]52                    @foreach (var job in Model.userJobs.OrderBy(x => x.Job.DateCreated))
[13656]53                {
[13733]54                        <a class="btn btn-default
55                           @(Model.selectedJob != null && job.Id == Model.selectedJob.Id ? "active" : "" )
56                           "
[13656]57                           asp-controller="Job"
58                           asp-action="Selected"
[13712]59                           asp-route-id="@job.Id"
[13733]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;"
[13712]62                           onclick="showLoader()">
63                            @job.Job.Name - @job.Job.DateCreated
[13847]64                            <span style="text-shadow:2px 2px black; font-size:13px"
[13860]65                                  class="label label-as-badge
[13733]66                                   @(job.Job.FinishedCount == @job.Job.JobCount ? "label-success" : "label-default")
[13860]67                                    pull-right">
[13733]68                                <strong>@job.Job.FinishedCount / @job.Job.JobCount</strong>
69                            </span>
[13656]70                        </a>
71                    }
72
73                </div>
74            </div>
[13712]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>
[13689]80
[13740]81            <div class="col-sm-8"
82                 id="content"
83                 style="padding:5px; padding-left:10px;">
84                @if (Model.selectedJob != null)
[13827]85                { <!-- A job has been selected by the user, load info into view -->
[13740]86                    <div class="panel panel-default"
87                         style="border-width:2px!important;padding:17px;
[13733]88                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
[13740]89                        <div class="row">
90                            <h2 style="padding-left:20px">
[13827]91                                <!-- Header of the job (title and delete button) -->
[13740]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);
[13733]95                                    text-shadow:2px 2px black;"
[13740]96                                   class='btn btn-danger'>
97                                    <span class="glyphicon glyphicon-trash"
98                                          aria-hidden="true"></span>
99                                    Delete job
100                                </a>
[13827]101                                <!-- HIDDEN BUTTON FOR ASP ACTION -->
[13860]102                                <a style="display:none; "
[13740]103                                   asp-action="Delete"
104                                   asp-route-id="@Model.selectedJob.Id"
105                                   asp-controller="Job" id="del"
106                                   onclick="showDeleter()"></a>
[13689]107
[13740]108                                <script type="text/javascript">
[13827]109                                    function popUpDelete() {//Quick inline popup with hidden asp button
[13740]110                                        if (confirm("Are you sure you want to delete this job?") == true) {
111                                            document.getElementById("del").click();
[13733]112                                        }
[13656]113
[13740]114                                    }
115                                </script>
[13656]116
[13740]117                            </h2>
118                            <div class="col-sm-6" style="padding-left:30px">
[13827]119                                <!-- Information of the job -->
[13740]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>
[13714]124
[13733]125                            </div>
[13740]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>
[13714]143
[13740]144                        </div>
[13754]145                        <script src="~/js/hubs/graphhubber.js"></script>
[13740]146                        <div class="row" style="text-align:center">
147                            @Html.Partial("_Graphlegend")
[13827]148                            <!-- Main graph giving overview of all the jobs-->
[13860]149                            <div id="graphMain" style="width:100%;height:0">
[13733]150
[13740]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);
[13733]155                            text-shadow:2px 2px black;">Refresh main graph</div>
[13740]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)
[13827]162                            {<!--Display all child jobs recursively -->
[13740]163                                @Html.Partial("SelectedJobPartials/_TaskPartial",
[13712]164                           new HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer(task))
[13689]165
[13740]166                            }
[13733]167                        </div>
[13740]168                    </div>
169                }
170            </div>
[13733]171
[13740]172
[13656]173        }
[13712]174        <script type="text/javascript">
[13827]175            function showLoader() {//Shows load spinner
[13733]176                document.getElementById("content").style.display = "none";
[13712]177                document.getElementById("loader").style.display = "";
[13733]178
[13712]179            }
[13827]180            function showDeleter() {//Shows delete spinner
[13733]181                document.getElementById("content").style.display = "none";
[13712]182                document.getElementById("loader").style.display = "";
[13733]183
[13712]184                document.getElementById("spinner").className = "fa fa-trash-o fa-spin fa-5x";
185            }
186        </script>
[13656]187    </div>
[13689]188</div>
Note: See TracBrowser for help on using the repository browser.