├── .babelrc
├── .gitignore
├── Controllers
    ├── AllocationController.cs
    ├── ClientController.cs
    ├── DashboardController.cs
    ├── ErrorController.cs
    ├── EvaluationController.cs
    ├── JobController.cs
    ├── ServerController.cs
    └── ToolsController.cs
├── Extensions
    └── DateTimeExtension.cs
├── LICENSE
├── Models
    ├── Allocation.cs
    ├── Client.cs
    ├── Dashboard.cs
    ├── Evaluation.cs
    ├── Job.cs
    └── Server.cs
├── Nomad.csproj
├── Nomad.csproj.user
├── Program.cs
├── Properties
    └── launchSettings.json
├── README.md
├── Startup.cs
├── Views
    ├── Components
    │   ├── Allocation.jsx
    │   ├── Allocations.jsx
    │   ├── App.jsx
    │   ├── Client.jsx
    │   ├── Clients.jsx
    │   ├── Dashboard.jsx
    │   ├── Evaluation.jsx
    │   ├── Evaluations.jsx
    │   ├── Job.jsx
    │   ├── Jobs.jsx
    │   ├── Server.jsx
    │   └── Servers.jsx
    ├── Error.cshtml
    ├── Index.cshtml
    ├── Shared
    │   └── Header.cshtml
    └── index.js
├── appsettings.Development.json
├── appsettings.json
├── bundleconfig.json
├── package.json
├── webpack.config.js
└── wwwroot
    ├── css
        ├── bootstrap.css
        ├── bootstrap.min.css
        ├── site.css
        └── site.min.css
    ├── images
        ├── collage.png
        ├── loading.gif
        └── nomad.png
    └── js
        ├── site.js
        └── site.min.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "react"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vs
2 | .vscode
3 | bin
4 | node_modules
5 | obj
6 | yarn.lock
7 | 


--------------------------------------------------------------------------------
/Controllers/AllocationController.cs:
--------------------------------------------------------------------------------
  1 | using System;
  2 | using System.Collections.Generic;
  3 | using System.Linq;
  4 | using System.Net.Http;
  5 | using System.Threading.Tasks;
  6 | using Microsoft.AspNetCore.Mvc;
  7 | using Newtonsoft.Json;
  8 | using Nomad.Models;
  9 | 
 10 | namespace Nomad.Controllers
 11 | {
 12 |     public class AllocationController : Controller
 13 |     {
 14 |         private static readonly string NomadUrl = Environment.GetEnvironmentVariable("NOMAD_URL");
 15 | 
 16 |         [HttpGet("/allocations")]
 17 |         public IActionResult Index()
 18 |         {
 19 |             return View("~/Views/Index.cshtml");
 20 |         }
 21 | 
 22 |         [HttpGet("/api/allocations")]
 23 |         public async Task<IActionResult> GetAllocationsAsJsonResult(string search)
 24 |         {
 25 |             var allocations = await GetAllocationsAsync();
 26 | 
 27 |             if (!String.IsNullOrEmpty(search))
 28 |             {
 29 |                 allocations = allocations.Where(a => a.Name.ToLower().Contains(search.ToLower())).ToList();
 30 |             }
 31 | 
 32 |             return Json(allocations);
 33 |         }
 34 | 
 35 |         [HttpGet("/allocation")]
 36 |         public IActionResult Allocation()
 37 |         {
 38 |             return View("~/Views/Index.cshtml");
 39 |         }
 40 | 
 41 |         [HttpGet("/api/allocation")]
 42 |         public async Task<IActionResult> GetAllocationAsJsonResult(string id)
 43 |         {
 44 |             var allocation = await GetAllocationAsync(id);
 45 |             allocation.Stats = await GetAllocationStatsAsync(allocation.Resources.Networks.FirstOrDefault().IP, id);
 46 |             allocation.Logs = await GetAllocationLogsAsync(allocation.Resources.Networks.FirstOrDefault().IP, id);
 47 | 
 48 |             return Json(allocation);
 49 |         }
 50 | 
 51 |         [HttpGet("/allocation/log")]
 52 |         public async Task<IActionResult> Log(string client, string id, string log)
 53 |         {
 54 |             var content = await GetAllocationLogAsync(client, id, log);
 55 | 
 56 |             return Content(content);
 57 |         }
 58 | 
 59 |         public async Task<List<Allocation>> GetAllocationsAsync()
 60 |         {
 61 |             List<Allocation> allocations;
 62 | 
 63 |             using (HttpClient client = new HttpClient())
 64 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/allocations"))
 65 |             using (HttpContent content = response.Content)
 66 |             {
 67 |                 var result = await content.ReadAsStringAsync();
 68 | 
 69 |                 allocations = JsonConvert.DeserializeObject<List<Allocation>>(result);
 70 | 
 71 |                 foreach (var allocation in allocations)
 72 |                 {
 73 |                     if (allocation.TaskStates == null)
 74 |                         continue;
 75 |                     
 76 |                     foreach (var key in allocation.TaskStates.Keys)
 77 |                     {
 78 |                         if (allocation.DesiredStatus == "run" && allocation.TaskStates[key].State == "running") { allocation.Running++; }
 79 |                         if (allocation.DesiredStatus == "run" && allocation.TaskStates[key].State == "pending") { allocation.Pending++; }
 80 |                         if (allocation.DesiredStatus == "run" && allocation.TaskStates[key].State == "dead") { allocation.Dead++; }
 81 |                     }
 82 |                 }
 83 |             }
 84 | 
 85 |             return allocations.OrderBy(a => a.Name).ToList();
 86 |         }
 87 | 
 88 |         public async Task<Allocation> GetAllocationAsync(string id)
 89 |         {
 90 |             using (HttpClient client = new HttpClient())
 91 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/allocation/" + id))
 92 |             using (HttpContent content = response.Content)
 93 |             {
 94 |                 var result = await content.ReadAsStringAsync();
 95 | 
 96 |                 return JsonConvert.DeserializeObject<Allocation>(result);
 97 |             }
 98 |         }
 99 | 
100 |         public List<Event> GetAllocationEvents(List<Allocation> allocations, int count)
101 |         {
102 |             var events = new List<Event>();
103 | 
104 |             foreach (var allocation in allocations)
105 |             {
106 |                 if (allocation.TaskStates == null)
107 |                     continue;
108 | 
109 |                 foreach (var key in allocation.TaskStates.Keys)
110 |                 {
111 |                     foreach (var @event in allocation.TaskStates[key].Events)
112 |                     {
113 |                         @event.AllocationID = allocation.ID;
114 |                         @event.AllocationName = allocation.Name;
115 |                         events.Add(@event);
116 |                     }
117 |                 }
118 |             }
119 | 
120 |             if (count > 0)
121 |                 return events.OrderByDescending(e => e.DateTime).Take(15).ToList();
122 | 
123 |             return events.OrderByDescending(e => e.DateTime).ToList();
124 |         }
125 | 
126 |         public async Task<Stats> GetAllocationStatsAsync(string client, string id)
127 |         {
128 |             using (HttpClient httpClient = new HttpClient())
129 |             using (HttpResponseMessage response = await httpClient.GetAsync("http://" + client + ":4646/v1/client/allocation/" + id + "/stats"))
130 |             using (HttpContent content = response.Content)
131 |             {
132 |                 var result = await content.ReadAsStringAsync();
133 | 
134 |                 return JsonConvert.DeserializeObject<Stats>(result);
135 |             }
136 |         }
137 | 
138 |         public async Task<List<Log>> GetAllocationLogsAsync(string client, string id)
139 |         {
140 |             using (HttpClient httpClient = new HttpClient())
141 |             using (HttpResponseMessage response = await httpClient.GetAsync("http://" + client + ":4646/v1/client/fs/ls/" + id + "?path=/alloc/logs"))
142 |             using (HttpContent content = response.Content)
143 |             {
144 |                 var result = await content.ReadAsStringAsync();
145 | 
146 |                 return JsonConvert.DeserializeObject<List<Log>>(result);
147 |             }
148 |         }
149 | 
150 |         public async Task<String> GetAllocationLogAsync(string client, string id, string log)
151 |         {
152 |             using (HttpClient httpClient = new HttpClient())
153 |             using (HttpResponseMessage response = await httpClient.GetAsync("http://" + client + ":4646/v1/client/fs/cat/" + id + "?path=/alloc/logs/" + log))
154 |             using (HttpContent content = response.Content)
155 |             {
156 |                 return await content.ReadAsStringAsync();
157 |             }
158 |         }
159 |     }
160 | }
161 | 


--------------------------------------------------------------------------------
/Controllers/ClientController.cs:
--------------------------------------------------------------------------------
  1 | using System;
  2 | using System.Collections.Generic;
  3 | using System.Linq;
  4 | using System.Net.Http;
  5 | using System.Threading.Tasks;
  6 | using Microsoft.AspNetCore.Mvc;
  7 | using Newtonsoft.Json;
  8 | using Nomad.Models;
  9 | 
 10 | namespace Nomad.Controllers
 11 | {
 12 |     public class ClientController : Controller
 13 |     {
 14 |         private static readonly string NomadUrl = Environment.GetEnvironmentVariable("NOMAD_URL");
 15 | 
 16 |         [HttpGet("/clients")]
 17 |         public IActionResult Index()
 18 |         {
 19 |             return View("~/Views/Index.cshtml");
 20 |         }
 21 | 
 22 |         [HttpGet("/api/clients")]
 23 |         public async Task<JsonResult> GetClientsAsJsonResult(string search)
 24 |         {
 25 |             var clients = await GetClientsAsync();
 26 | 
 27 |             if (!String.IsNullOrEmpty(search))
 28 |             {
 29 |                 clients = clients.Where(c => c.Name.ToLower().Contains(search.ToLower())).ToList();
 30 |             }
 31 | 
 32 |             return Json(clients);
 33 |         }
 34 | 
 35 |         [HttpGet("/client")]
 36 |         public IActionResult Client()
 37 |         {
 38 |             return View("~/Views/Index.cshtml");
 39 |         }
 40 | 
 41 |         [HttpGet("/api/client")]
 42 |         public async Task<JsonResult> GetClientAsJsonResult(string id)
 43 |         {
 44 |             var client = await GetClientAsync(id);
 45 |             client.Stats = await GetClientStatsAsync(client.Resources.Networks.FirstOrDefault().IP);
 46 |             client.Allocations = await GetClientAllocationsAsync(id);
 47 | 
 48 |             return Json(client);
 49 |         }
 50 | 
 51 |         public async Task<List<Client>> GetClientsAsync()
 52 |         {
 53 |             List<Client> clients;
 54 | 
 55 |             using (HttpClient httpClient = new HttpClient())
 56 |             using (HttpResponseMessage response = await httpClient.GetAsync(NomadUrl + "/v1/nodes"))
 57 |             using (HttpContent content = response.Content)
 58 |             {
 59 |                 var result = await content.ReadAsStringAsync();
 60 | 
 61 |                 clients = JsonConvert.DeserializeObject<List<Client>>(result);
 62 | 
 63 |                 foreach (var client in clients)
 64 |                 {
 65 |                     if (client.Status == "ready") { client.Up++; }
 66 |                     if (client.Status == "down" && !client.Drain) { client.Down++; }
 67 |                     if (client.Status == "down" && client.Drain) { client.Draining++; }
 68 |                 }
 69 |             }
 70 | 
 71 |             return clients.OrderBy(c => c.Name).ToList();
 72 |         }
 73 | 
 74 |         public async Task<Client> GetClientAsync(string id)
 75 |         {
 76 |             using (HttpClient client = new HttpClient())
 77 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/node/" + id))
 78 |             using (HttpContent content = response.Content)
 79 |             {
 80 |                 var result = await content.ReadAsStringAsync();
 81 | 
 82 |                 return JsonConvert.DeserializeObject<Client>(result);
 83 |             }
 84 |         }
 85 | 
 86 |         public async Task<Stats> GetClientStatsAsync(string client)
 87 |         {
 88 |             using (HttpClient httpClient = new HttpClient())
 89 |             using (HttpResponseMessage response = await httpClient.GetAsync("http://" + client + ":4646/v1/client/stats"))
 90 |             using (HttpContent content = response.Content)
 91 |             {
 92 |                 var result = await content.ReadAsStringAsync();
 93 | 
 94 |                 return JsonConvert.DeserializeObject<Stats>(result);
 95 |             }
 96 |         }
 97 | 
 98 |         public async Task<List<Allocation>> GetClientAllocationsAsync(string id)
 99 |         {
100 |             using (HttpClient client = new HttpClient())
101 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/node/" + id + "/allocations"))
102 |             using (HttpContent content = response.Content)
103 |             {
104 |                 var result = await content.ReadAsStringAsync();
105 | 
106 |                 return JsonConvert.DeserializeObject<List<Allocation>>(result);
107 |             }
108 |         }
109 |     }
110 | }
111 | 


--------------------------------------------------------------------------------
/Controllers/DashboardController.cs:
--------------------------------------------------------------------------------
 1 | using System.Threading.Tasks;
 2 | using Microsoft.AspNetCore.Mvc;
 3 | using Nomad.Models;
 4 | using System;
 5 | 
 6 | namespace Nomad.Controllers
 7 | {
 8 |     public class DashboardController : Controller
 9 |     {
10 |         public IActionResult Index()
11 |         {
12 |             return View("~/Views/Index.cshtml");
13 |         }
14 | 
15 |         [HttpGet("/api/dashboard")]
16 |         public async Task<JsonResult> GetDashboardAsJsonResult()
17 |         {
18 |             var jobs = new JobController().GetJobsAsync();
19 |             var allocations = new AllocationController().GetAllocationsAsync();
20 |             var clients = new ClientController().GetClientsAsync();
21 |             var servers = new ServerController().GetServersAsync();
22 |             await System.Threading.Tasks.Task.WhenAll(jobs, allocations, clients, servers);
23 | 
24 |             var dashboard = new Dashboard
25 |             {
26 |                 Jobs = await jobs,
27 |                 Allocations = await allocations,
28 |                 Clients = await clients,
29 |                 Servers = await servers,
30 |                 Events = new AllocationController().GetAllocationEvents(await allocations, 15)
31 |             };
32 | 
33 |             return Json(dashboard);
34 |         }
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/Controllers/ErrorController.cs:
--------------------------------------------------------------------------------
 1 | using Microsoft.AspNetCore.Diagnostics;
 2 | using Microsoft.AspNetCore.Mvc;
 3 | 
 4 | namespace Nomad.Controllers
 5 | {
 6 |     public class ErrorController : Controller
 7 |     {
 8 |         [HttpGet("/error")]
 9 |         public IActionResult ExceptionHandler()
10 |         {
11 |             var exception = HttpContext.Features.Get<IExceptionHandlerFeature>();
12 | 
13 |             ViewData["StatusCode"] = HttpContext.Response.StatusCode;
14 |             ViewData["Message"] = exception.Error.Message;
15 |             ViewData["StackTrace"] = exception.Error.StackTrace;
16 | 
17 |             return View("~/Views/Error.cshtml");
18 |         }
19 | 
20 |         [HttpGet("/error/{0}")]
21 |         public IActionResult StatusCodeHandler()
22 |         {
23 |             ViewData["StatusCode"] = HttpContext.Response.StatusCode;
24 | 
25 |             return View("~/Views/Error.cshtml");
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/Controllers/EvaluationController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Net.Http;
 5 | using System.Threading.Tasks;
 6 | using Microsoft.AspNetCore.Mvc;
 7 | using Newtonsoft.Json;
 8 | using Nomad.Models;
 9 | 
10 | namespace Nomad.Controllers
11 | {
12 |     public class EvaluationController : Controller
13 |     {
14 |         private static readonly string NomadUrl = Environment.GetEnvironmentVariable("NOMAD_URL");
15 | 
16 |         [HttpGet("/evaluations")]
17 |         public IActionResult Index()
18 |         {
19 |             return View("~/Views/Index.cshtml");
20 |         }
21 | 
22 |         [HttpGet("/api/evaluations")]
23 |         public async Task<JsonResult> GetEvaluationsAsJsonResult(string search)
24 |         {
25 |             var evaluations = await GetEvaluationsAsync();
26 | 
27 |             if (!String.IsNullOrEmpty(search))
28 |             {
29 |                 evaluations = evaluations.Where(e => e.JobID.ToLower().Contains(search.ToLower())).ToList();
30 |             }
31 | 
32 |             return Json(evaluations);
33 |         }
34 | 
35 |         [HttpGet("/evaluation")]
36 |         public IActionResult Evaluation(string id)
37 |         {
38 |             return View("~/Views/Index.cshtml");
39 |         }
40 | 
41 |         [HttpGet("/api/evaluation")]
42 |         public async Task<IActionResult> GetEvaluationAsJsonResult(string id)
43 |         {
44 |             var evaluation = await GetEvaluationAsync(id);
45 |             evaluation.Allocations = await GetEvaluationAllocationsAsync(id);
46 | 
47 |             return Json(evaluation);
48 |         }
49 | 
50 |         public async Task<List<Evaluation>> GetEvaluationsAsync()
51 |         {
52 |             List<Evaluation> evaluations;
53 | 
54 |             using (HttpClient client = new HttpClient())
55 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/evaluations"))
56 |             using (HttpContent content = response.Content)
57 |             {
58 |                 var result = await content.ReadAsStringAsync();
59 | 
60 |                 evaluations = JsonConvert.DeserializeObject<List<Evaluation>>(result);
61 |             }
62 | 
63 |             return evaluations.OrderBy(e => e.JobID).ToList();
64 |         }
65 | 
66 |         public async Task<Evaluation> GetEvaluationAsync(string id)
67 |         {
68 |             using (HttpClient client = new HttpClient())
69 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/evaluation/" + id))
70 |             using (HttpContent content = response.Content)
71 |             {
72 |                 var result = await content.ReadAsStringAsync();
73 | 
74 |                 return JsonConvert.DeserializeObject<Evaluation>(result);
75 |             }
76 |         }
77 | 
78 |         public async Task<List<Allocation>> GetEvaluationAllocationsAsync(string id)
79 |         {
80 |             using (HttpClient client = new HttpClient())
81 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/evaluation/" + id + "/allocations"))
82 |             using (HttpContent content = response.Content)
83 |             {
84 |                 var result = await content.ReadAsStringAsync();
85 | 
86 |                 return JsonConvert.DeserializeObject<List<Allocation>>(result);
87 |             }
88 |         }
89 |     }
90 | }
91 | 


--------------------------------------------------------------------------------
/Controllers/JobController.cs:
--------------------------------------------------------------------------------
  1 | using System;
  2 | using System.Collections.Generic;
  3 | using System.Linq;
  4 | using System.Net.Http;
  5 | using System.Threading.Tasks;
  6 | using Microsoft.AspNetCore.Mvc;
  7 | using Newtonsoft.Json;
  8 | using Nomad.Models;
  9 | 
 10 | namespace Nomad.Controllers
 11 | {
 12 |     public class JobController : Controller
 13 |     {
 14 |         private static readonly string NomadUrl = Environment.GetEnvironmentVariable("NOMAD_URL");
 15 | 
 16 |         [HttpGet("/jobs")]
 17 |         public IActionResult Index()
 18 |         {
 19 |             return View("~/Views/Index.cshtml");
 20 |         }
 21 | 
 22 |         [HttpGet("/api/jobs")]
 23 |         public async Task<JsonResult> GetJobsAsJsonResult(string search)
 24 |         {
 25 |             var jobs = await GetJobsAsync();
 26 | 
 27 |             if (!String.IsNullOrEmpty(search))
 28 |             {
 29 |                 jobs = jobs.Where(j => j.ID.ToLower().Contains(search.ToLower())).ToList();
 30 |             }
 31 | 
 32 |             return Json(jobs);
 33 |         }
 34 | 
 35 |         [HttpGet("/job")]
 36 |         public IActionResult Job()
 37 |         {
 38 |             return View("~/Views/Index.cshtml");
 39 |         }
 40 | 
 41 |         [HttpGet("/api/job")]
 42 |         public async Task<JsonResult> GetJobAsJsonResult(string id)
 43 |         {
 44 |             var job = await GetJobAsync(id);
 45 |             job.Evaluations = await GetJobEvaluationsAsync(id);
 46 |             job.Allocations = await GetJobAllocationsAsync(id);
 47 | 
 48 |             return Json(job);
 49 |         }
 50 | 
 51 |         public async Task<List<Job>> GetJobsAsync()
 52 |         {
 53 |             List<Job> jobs;
 54 | 
 55 |             using (HttpClient client = new HttpClient())
 56 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/jobs"))
 57 |             using (HttpContent content = response.Content)
 58 |             {
 59 |                 var result = await content.ReadAsStringAsync();
 60 | 
 61 |                 jobs = JsonConvert.DeserializeObject<List<Job>>(result);
 62 | 
 63 |                 foreach (var job in jobs)
 64 |                 {
 65 |                     if (job.Status == "running") { job.Running++; }
 66 |                     if (job.Status == "pending") { job.Pending++; }
 67 |                     if (job.Status == "dead") { job.Dead++; }
 68 | 
 69 |                     job.NumOfTaskGroups = job.JobSummary.Summary.Keys.Count();
 70 | 
 71 |                     foreach (var value in job.JobSummary.Summary.Values)
 72 |                     {
 73 |                         job.QueuedTaskGroups = job.QueuedTaskGroups + value.Queued;
 74 |                         job.CompleteTaskGroups = job.CompleteTaskGroups + value.Complete;
 75 |                         job.FailedTaskGroups = job.FailedTaskGroups + value.Failed;
 76 |                         job.RunningTaskGroups = job.RunningTaskGroups + value.Running;
 77 |                         job.StartingTaskGroups = job.StartingTaskGroups + value.Starting;
 78 |                         job.LostTaskGroups = job.LostTaskGroups + value.Lost;
 79 |                     }
 80 |                 }
 81 |             }
 82 | 
 83 |             return jobs.OrderBy(j => j.Name).ToList();
 84 |         }
 85 | 
 86 |         public async Task<Job> GetJobAsync(string id)
 87 |         {
 88 |             using (HttpClient client = new HttpClient())
 89 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/job/" + id))
 90 |             using (HttpContent content = response.Content)
 91 |             {
 92 |                 var result = await content.ReadAsStringAsync();
 93 | 
 94 |                 return JsonConvert.DeserializeObject<Job>(result);
 95 |             }
 96 |         }
 97 | 
 98 |         public async Task<List<Evaluation>> GetJobEvaluationsAsync(string id)
 99 |         {
100 |             using (HttpClient client = new HttpClient())
101 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/job/" + id + "/evaluations"))
102 |             using (HttpContent content = response.Content)
103 |             {
104 |                 var result = await content.ReadAsStringAsync();
105 | 
106 |                 return JsonConvert.DeserializeObject<List<Evaluation>>(result);
107 |             }
108 |         }
109 | 
110 |         public async Task<List<Allocation>> GetJobAllocationsAsync(string id)
111 |         {
112 |             using (HttpClient client = new HttpClient())
113 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/job/" + id + "/allocations"))
114 |             using (HttpContent content = response.Content)
115 |             {
116 |                 var result = await content.ReadAsStringAsync();
117 | 
118 |                 return JsonConvert.DeserializeObject<List<Allocation>>(result);
119 |             }
120 |         }
121 |     }
122 | }
123 | 


--------------------------------------------------------------------------------
/Controllers/ServerController.cs:
--------------------------------------------------------------------------------
  1 | using System;
  2 | using System.Collections.Generic;
  3 | using System.Linq;
  4 | using System.Net.Http;
  5 | using System.Threading.Tasks;
  6 | using Microsoft.AspNetCore.Mvc;
  7 | using Newtonsoft.Json;
  8 | using Nomad.Models;
  9 | 
 10 | namespace Nomad.Controllers
 11 | {
 12 |     public class ServerController : Controller
 13 |     {
 14 |         private static readonly string NomadUrl = Environment.GetEnvironmentVariable("NOMAD_URL");
 15 | 
 16 |         [HttpGet("/servers")]
 17 |         public IActionResult Index()
 18 |         {
 19 |             return View("~/Views/Index.cshtml");
 20 |         }
 21 | 
 22 |         [HttpGet("/api/servers")]
 23 |         public async Task<JsonResult> GetServersAsJsonResult(string search)
 24 |         {
 25 |             var agents = await GetServersAsync();
 26 | 
 27 |             if (!String.IsNullOrEmpty(search))
 28 |             {
 29 |                 agents = agents.Where(a => a.Name.ToLower().Contains(search.ToLower())).ToList();
 30 |             }
 31 | 
 32 |             return Json(agents);
 33 |         }
 34 | 
 35 |         [HttpGet("/server")]
 36 |         public IActionResult Server()
 37 |         {
 38 |             return View("~/Views/Index.cshtml");
 39 |         }
 40 | 
 41 |         [HttpGet("/api/server")]
 42 |         public async Task<JsonResult> Server(string ip)
 43 |         {
 44 |             var agent = await GetServerAsync(ip);
 45 |             agent.Member.Operator = await GetOperatorsAsync();
 46 | 
 47 |             return Json(agent);
 48 |         }
 49 | 
 50 |         public async Task<List<Member>> GetServersAsync()
 51 |         {
 52 |             Agent agent;
 53 |             Operator @operator = await GetOperatorsAsync();
 54 |             List<Member> members = new List<Member>();
 55 | 
 56 |             using (HttpClient client = new HttpClient())
 57 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/agent/members"))
 58 |             using (HttpContent content = response.Content)
 59 |             {
 60 |                 var result = await content.ReadAsStringAsync();
 61 | 
 62 |                 agent = JsonConvert.DeserializeObject<Agent>(result);
 63 | 
 64 |                 foreach (var member in agent.Members)
 65 |                 {
 66 |                     if (member.Status == "alive") { member.Up++; }
 67 |                     if (member.Status == "dead") { member.Down++; }
 68 |                     
 69 |                     foreach (var server in @operator.Servers)
 70 |                     {
 71 |                         if (member.Name == server.Node)
 72 |                         {
 73 |                             member.Voter = server.Voter;
 74 |                             member.Leader = server.Leader;
 75 |                         }
 76 |                     }
 77 | 
 78 |                     members.Add(member);
 79 |                 }
 80 |             }
 81 | 
 82 |             return members.OrderBy(m => m.Name).ToList();
 83 |         }
 84 | 
 85 |         public async Task<Agent> GetServerAsync(string ip)
 86 |         {
 87 |             using (HttpClient client = new HttpClient())
 88 |             using (HttpResponseMessage response = await client.GetAsync("http://" + ip + ":4646/v1/agent/self"))
 89 |             using (HttpContent content = response.Content)
 90 |             {
 91 |                 var result = await content.ReadAsStringAsync();
 92 | 
 93 |                 return JsonConvert.DeserializeObject<Agent>(result);
 94 |             }
 95 |         }
 96 | 
 97 |         public async Task<Operator> GetOperatorsAsync()
 98 |         {
 99 |             using (HttpClient client = new HttpClient())
100 |             using (HttpResponseMessage response = await client.GetAsync(NomadUrl + "/v1/operator/raft/configuration"))
101 |             using (HttpContent content = response.Content)
102 |             {
103 |                 var result = await content.ReadAsStringAsync();
104 | 
105 |                 return JsonConvert.DeserializeObject<Operator>(result);
106 |             }
107 |         }
108 |     }
109 | }
110 | 


--------------------------------------------------------------------------------
/Controllers/ToolsController.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Net.Http;
 3 | using System.Text;
 4 | using System.Threading.Tasks;
 5 | using Microsoft.AspNetCore.Mvc;
 6 | 
 7 | namespace Nomad.Controllers
 8 | {
 9 |     public class ToolsController : Controller
10 |     {
11 |         private static readonly string NomadUrl = Environment.GetEnvironmentVariable("NOMAD_URL");
12 | 
13 |         [HttpGet("/tools/gc")]
14 |         public async Task<HttpResponseMessage> GarbageCollection()
15 |         {
16 |             var httpContent = new StringContent("", Encoding.UTF8, "application/json");
17 | 
18 |             using (HttpClient client = new HttpClient())
19 |             using (HttpResponseMessage response = await client.PutAsync(NomadUrl + "/v1/system/gc", httpContent))
20 |             {
21 |                 return response;
22 |             }
23 |         }
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/Extensions/DateTimeExtension.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | 
 3 | namespace Nomad.Extensions
 4 | {
 5 |     public static class DateTimeExtension
 6 |     {
 7 |         private static readonly DateTime Epoch = new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc);
 8 |         public static DateTime FromUnixTime(this long unixTime)
 9 |             => Epoch.AddTicks(unixTime / 100).ToLocalTime();
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Christopher van Dal
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Models/Allocation.cs:
--------------------------------------------------------------------------------
  1 | using System;
  2 | using System.Collections.Generic;
  3 | using Nomad.Extensions;
  4 | 
  5 | namespace Nomad.Models
  6 | {
  7 |     public class Allocation
  8 |     {
  9 |         public string ID { get; set; }
 10 |         public string EvalID { get; set; }
 11 |         public string Name { get; set; }
 12 |         public string NodeID { get; set; }
 13 |         public string JobID { get; set; }
 14 |         public string TaskGroup { get; set; }
 15 |         public string DesiredStatus { get; set; }
 16 |         public string DesiredDescription { get; set; }
 17 |         public string ClientStatus { get; set; }
 18 |         public string ClientDescription { get; set; }
 19 |         public Dictionary<string, TaskName> TaskStates { get; set; }
 20 |         public long CreateIndex { get; set; }
 21 |         public long ModifyIndex { get; set; }
 22 |         public long CreateTime { get; set; }
 23 |         public Job Job { get; set; }
 24 |         public Resources Resources { get; set; }
 25 |         public SharedResources SharedResources { get; set; }
 26 |         public Dictionary<string, TaskName> TaskResources { get; set; }
 27 |         public Metrics Metrics { get; set; }
 28 |         public string PreviousAllocation { get; set; }
 29 |         public int AllocModifyIndex { get; set; }
 30 | 
 31 |         // Custom Properties
 32 |         public int Running { get; set; }
 33 |         public int Pending { get; set; }
 34 |         public int Dead { get; set; }
 35 |         public DateTime CreateDateTime => CreateTime.FromUnixTime();
 36 |         public Stats Stats { get; set; }
 37 |         public List<Log> Logs { get; set; }
 38 |     }
 39 | 
 40 |     public class TaskName
 41 |     {
 42 |         public string State { get; set; }
 43 |         public bool Failed { get; set; }
 44 |         public List<Event> Events { get; set; }
 45 |         public object Pids { get; set; }
 46 |         public ResourceUsage ResourceUsage { get; set; }
 47 |     }
 48 | 
 49 |     public class Event
 50 |     {
 51 |         public string Type { get; set; }
 52 |         public long Time { get; set; }
 53 |         public bool FailsTask { get; set; }
 54 |         public string RestartReason { get; set; }
 55 |         public string SetupError { get; set; }
 56 |         public string DriverError { get; set; }
 57 |         public int ExitCode { get; set; }
 58 |         public long Signal { get; set; }
 59 |         public string Message { get; set; }
 60 |         public long KillTimeout { get; set; }
 61 |         public string KillError { get; set; }
 62 |         public string KillReason { get; set; }
 63 |         public long StartDelay { get; set; }
 64 |         public string DownloadError { get; set; }
 65 |         public string ValidationError { get; set; }
 66 |         public int DiskLimit { get; set; }
 67 |         public string FailedSibling { get; set; }
 68 |         public string VaultError { get; set; }
 69 |         public string TaskSignalReason { get; set; }
 70 |         public string TaskSignal { get; set; }
 71 |         public string DriverMessage { get; set; }
 72 | 
 73 |         // Custom Properties
 74 |         public string AllocationID { get; set; }
 75 |         public string AllocationName { get; set; }
 76 |         public DateTime DateTime => Time.FromUnixTime();
 77 |     }
 78 | 
 79 |     public class SharedResources
 80 |     {
 81 |         public int CPU { get; set; }
 82 |         public int MemoryMB { get; set; }
 83 |         public int DiskMB { get; set; }
 84 |         public int IOPS { get; set; }
 85 |         public object Networks { get; set; }
 86 |     }
 87 | 
 88 |     public class Metrics
 89 |     {
 90 |         public int NodesEvaluated { get; set; }
 91 |         public int NodesFiltered { get; set; }
 92 |         public object ClassFiltered { get; set; }
 93 |         public int NodesExhausted { get; set; }
 94 |         public object ClassExhausted { get; set; }
 95 |         public object DimensionExhausted { get; set; }
 96 |         public int AllocationTime { get; set; }
 97 |         public int CoalescedFailures { get; set; }
 98 |     }
 99 | 
100 |     public class Log
101 |     {
102 |         public string FileMode { get; set; }
103 |         public bool IsDir { get; set; }
104 |         public string ModTime { get; set; }
105 |         public string Name { get; set; }
106 |         public long Size { get; set; }
107 |     }
108 | }
109 | 


--------------------------------------------------------------------------------
/Models/Client.cs:
--------------------------------------------------------------------------------
  1 | using System.Collections.Generic;
  2 | 
  3 | namespace Nomad.Models
  4 | {
  5 |     public class Client
  6 |     {
  7 |         public string ID { get; set; }
  8 |         public string Datacenter { get; set; }
  9 |         public string Name { get; set; }
 10 |         public string NodeClass { get; set; }
 11 |         public bool Drain { get; set; }
 12 |         public string Status { get; set; }
 13 |         public string StatusDescription { get; set; }
 14 |         public long CreateIndex { get; set; }
 15 |         public long ModifyIndex { get; set; }
 16 |         public string SecretID { get; set; }
 17 |         public string HTTPAddr { get; set; }
 18 |         public bool TLSEnabled { get; set; }
 19 |         public Dictionary<string, dynamic> Attributes { get; set; }
 20 |         public Resources Resources { get; set; }
 21 |         public Reserved Reserved { get; set; }
 22 |         public Dictionary<string, dynamic> Links { get; set; }
 23 |         public Dictionary<string, dynamic> Meta { get; set; }
 24 |         public string ComputedClass { get; set; }
 25 |         public int StatusUpdatedAt { get; set; }
 26 | 
 27 |         // Custom Properties
 28 |         public int Up { get; set; }
 29 |         public int Down { get; set; }
 30 |         public int Draining { get; set; }
 31 |         public Stats Stats { get; set; }
 32 |         public List<Allocation> Allocations { get; set; }
 33 |     }
 34 | 
 35 |     public class Stats
 36 |     {
 37 |         public ResourceUsage ResourceUsage { get; set; }
 38 |         public Dictionary<string, TaskName> Tasks { get; set; }
 39 |         public long Timestamp { get; set; }
 40 |         public AllocDirStats AllocDirStats { get; set; }
 41 |         public List<ClientCPU> CPU { get; set; }
 42 |         public double CPUTicksConsumed { get; set; }
 43 |         public List<DiskStat> DiskStats { get; set; }
 44 |         public Memory Memory { get; set; }
 45 |         public int Uptime { get; set; }
 46 |     }
 47 | 
 48 |     public class ResourceUsage
 49 |     {
 50 |         public CpuStats CpuStats { get; set; }
 51 |         public MemoryStats MemoryStats { get; set; }
 52 |     }
 53 | 
 54 |     public class CpuStats
 55 |     {
 56 |         public List<string> Measured { get; set; }
 57 |         public double Percent { get; set; }
 58 |         public double SystemMode { get; set; }
 59 |         public int ThrottledPeriods { get; set; }
 60 |         public int ThrottledTime { get; set; }
 61 |         public double TotalTicks { get; set; }
 62 |         public double UserMode { get; set; }
 63 |     }
 64 | 
 65 |     public class MemoryStats
 66 |     {
 67 |         public int Cache { get; set; }
 68 |         public int KernelMaxUsage { get; set; }
 69 |         public int KernelUsage { get; set; }
 70 |         public int MaxUsage { get; set; }
 71 |         public List<string> Measured { get; set; }
 72 |         public int RSS { get; set; }
 73 |         public int Swap { get; set; }
 74 |     }
 75 | 
 76 |     public class Reserved
 77 |     {
 78 |         public int CPU { get; set; }
 79 |         public int MemoryMB { get; set; }
 80 |         public int DiskMB { get; set; }
 81 |         public int IOPS { get; set; }
 82 |         public List<Network> Networks { get; set; }
 83 |     }
 84 | 
 85 |     public class AllocDirStats
 86 |     {
 87 |         public long Available { get; set; }
 88 |         public string Device { get; set; }
 89 |         public double InodesUsedPercent { get; set; }
 90 |         public string Mountpoint { get; set; }
 91 |         public long Size { get; set; }
 92 |         public long Used { get; set; }
 93 |         public double UsedPercent { get; set; }
 94 |     }
 95 | 
 96 |     public class ClientCPU
 97 |     {
 98 |         public string CPU { get; set; }
 99 |         public double Idle { get; set; }
100 |         public double System { get; set; }
101 |         public double Total { get; set; }
102 |         public double User { get; set; }
103 |     }
104 | 
105 |     public class DiskStat
106 |     {
107 |         public long Available { get; set; }
108 |         public string Device { get; set; }
109 |         public double InodesUsedPercent { get; set; }
110 |         public string Mountpoint { get; set; }
111 |         public long Size { get; set; }
112 |         public long Used { get; set; }
113 |         public double UsedPercent { get; set; }
114 |     }
115 | 
116 |     public class Memory
117 |     {
118 |         public long Available { get; set; }
119 |         public long Free { get; set; }
120 |         public long Total { get; set; }
121 |         public long Used { get; set; }
122 |     }
123 | }
124 | 


--------------------------------------------------------------------------------
/Models/Dashboard.cs:
--------------------------------------------------------------------------------
 1 | using System.Collections.Generic;
 2 | using System.Linq;
 3 | 
 4 | namespace Nomad.Models
 5 | {
 6 |     public class Dashboard
 7 |     {
 8 |         public List<Job> Jobs { get; set; }
 9 |         public int RunningJobs => Jobs.Sum(j => j.Running);
10 |         public int PendingJobs => Jobs.Sum(j => j.Pending);
11 |         public int DeadJobs => Jobs.Sum(j => j.Dead);
12 | 
13 |         public List<Allocation> Allocations { get; set; }
14 |         public int RunningAllocations => Allocations.Sum(a => a.Running);
15 |         public int PendingAllocations => Allocations.Sum(a => a.Pending);
16 |         public int DeadAllocations => Allocations.Sum(a => a.Dead);
17 | 
18 |         public List<Client> Clients { get; set; }
19 |         public int UpClients => Clients.Sum(c => c.Up);
20 |         public int DownClients => Clients.Sum(c => c.Down);
21 |         public int DrainingClients => Clients.Sum(c => c.Draining);
22 | 
23 |         public List<Member> Servers { get; set; }
24 |         public int UpServers => Servers.Sum(s => s.Up);
25 |         public int DownServers => Servers.Sum(s => s.Down);
26 | 
27 |         public List<Event> Events { get; set; }
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/Models/Evaluation.cs:
--------------------------------------------------------------------------------
 1 | using System.Collections.Generic;
 2 | 
 3 | namespace Nomad.Models
 4 | {
 5 |     public class Evaluation
 6 |     {
 7 |         public string ID { get; set; }
 8 |         public int Priority { get; set; }
 9 |         public string Type { get; set; }
10 |         public string TriggeredBy { get; set; }
11 |         public string JobID { get; set; }
12 |         public long JobModifyIndex { get; set; }
13 |         public string NodeID { get; set; }
14 |         public long NodeModifyIndex { get; set; }
15 |         public string Status { get; set; }
16 |         public string StatusDescription { get; set; }
17 |         public long Wait { get; set; }
18 |         public string NextEval { get; set; }
19 |         public string PreviousEval { get; set; }
20 |         public string BlockedEval { get; set; }
21 |         public object FailedTGAllocs { get; set; }
22 |         //public ClassEligibility ClassEligibility { get; set; }
23 |         public bool EscapedComputedClass { get; set; }
24 |         public bool AnnotatePlan { get; set; }
25 |         public Dictionary<string, dynamic> QueuedAllocations { get; set; }
26 |         public long SnapshotIndex { get; set; }
27 |         public long CreateIndex { get; set; }
28 |         public long ModifyIndex { get; set; }
29 | 
30 |         // Custom Properties
31 |         public List<Allocation> Allocations { get; set; }
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/Models/Job.cs:
--------------------------------------------------------------------------------
  1 | using System.Collections.Generic;
  2 | 
  3 | namespace Nomad.Models
  4 | {
  5 |     public class Job
  6 |     {
  7 |         public string ID { get; set; }
  8 |         public string ParentID { get; set; }
  9 |         public string Name { get; set; }
 10 |         public string Type { get; set; }
 11 |         public int Priority { get; set; }
 12 |         public string Status { get; set; }
 13 |         public string StatusDescription { get; set; }
 14 |         public JobSummary JobSummary { get; set; }
 15 |         public long CreateIndex { get; set; }
 16 |         public long ModifyIndex { get; set; }
 17 |         public long JobModifyIndex { get; set; }
 18 |         public string Region { get; set; }
 19 |         public bool AllAtOnce { get; set; }
 20 |         public List<string> Datacenters { get; set; }
 21 |         public List<Constraint> Constraints { get; set; }
 22 |         public List<TaskGroup> TaskGroups { get; set; }
 23 |         public Update Update { get; set; }
 24 |         public object Periodic { get; set; }
 25 |         public object ParameterizedJob { get; set; }
 26 |         public object Payload { get; set; }
 27 |         public Dictionary<string, dynamic> Meta { get; set; }
 28 |         public string VaultToken { get; set; }
 29 | 
 30 |         // Custom Properties
 31 |         public int Running { get; set; }
 32 |         public int Pending { get; set; }
 33 |         public int Dead { get; set; }
 34 |         public int NumOfTaskGroups { get; set; }
 35 |         public int QueuedTaskGroups { get; set; }
 36 |         public int CompleteTaskGroups { get; set; }
 37 |         public int FailedTaskGroups { get; set; }
 38 |         public int RunningTaskGroups { get; set; }
 39 |         public int StartingTaskGroups { get; set; }
 40 |         public int LostTaskGroups { get; set; }
 41 |         public List<Evaluation> Evaluations { get; set; }
 42 |         public List<Allocation> Allocations { get; set; }
 43 |     }
 44 | 
 45 |     public class JobSummary
 46 |     {
 47 |         public string JobID { get; set; }
 48 |         public Dictionary<string, TaskGroupStatus> Summary { get; set; }
 49 |         public Children Children { get; set; }
 50 |         public long CreateIndex { get; set; }
 51 |         public long ModifyIndex { get; set; }
 52 |     }
 53 | 
 54 |     public class TaskGroupStatus
 55 |     {
 56 |         public int Queued { get; set; }
 57 |         public int Complete { get; set; }
 58 |         public int Failed { get; set; }
 59 |         public int Running { get; set; }
 60 |         public int Starting { get; set; }
 61 |         public int Lost { get; set; }
 62 |     }
 63 | 
 64 |     public class Children
 65 |     {
 66 |         public int Pending { get; set; }
 67 |         public int Running { get; set; }
 68 |         public int Dead { get; set; }
 69 |     }
 70 | 
 71 |     public class Constraint
 72 |     {
 73 |         public string LTarget { get; set; }
 74 |         public string RTarget { get; set; }
 75 |         public string Operand { get; set; }
 76 |     }
 77 | 
 78 |     public class TaskGroup
 79 |     {
 80 |         public string Name { get; set; }
 81 |         public int Count { get; set; }
 82 |         public List<Constraint> Constraints { get; set; }
 83 |         public RestartPolicy RestartPolicy { get; set; }
 84 |         public List<Task> Tasks { get; set; }
 85 |         public EphemeralDisk EphemeralDisk { get; set; }
 86 |         public Dictionary<string, dynamic> Meta { get; set; }
 87 |     }
 88 | 
 89 |     public class RestartPolicy
 90 |     {
 91 |         public int Attempts { get; set; }
 92 |         public object Interval { get; set; }
 93 |         public object Delay { get; set; }
 94 |         public string Mode { get; set; }
 95 |     }
 96 | 
 97 |     public class Task
 98 |     {
 99 |         public string Name { get; set; }
100 |         public string Driver { get; set; }
101 |         public string User { get; set; }
102 |         public Config Config { get; set; }
103 |         public Dictionary<string, dynamic> Env { get; set; }
104 |         public List<Service> Services { get; set; }
105 |         public object Vault { get; set; }
106 |         public List<object> Templates { get; set; }
107 |         public List<Constraint> Constraints { get; set; }
108 |         public Resources Resources { get; set; }
109 |         public object DispatchPayload { get; set; }
110 |         public Dictionary<string, dynamic> Meta { get; set; }
111 |         public object KillTimeout { get; set; }
112 |         public LogConfig LogConfig { get; set; }
113 |         public List<object> Artifacts { get; set; }
114 |         public bool Leader { get; set; }
115 |     }
116 | 
117 |     public class Config
118 |     {
119 |         public string Image { get; set; }
120 |         public string Network_Mode { get; set; }
121 |         public List<string> Args { get; set; }
122 |         public string Command { get; set; }
123 |     }
124 | 
125 |     public class Service
126 |     {
127 |         public string Name { get; set; }
128 |         public string PortLabel { get; set; }
129 |         public List<string> Tags { get; set; }
130 |         public List<Check> Checks { get; set; }
131 |     }
132 | 
133 |     public class Check
134 |     {
135 |         public string Name { get; set; }
136 |         public string Type { get; set; }
137 |         public string Command { get; set; }
138 |         public List<string> Args { get; set; }
139 |         public string Path { get; set; }
140 |         public string Protocol { get; set; }
141 |         public string PortLabel { get; set; }
142 |         public object Interval { get; set; }
143 |         public int Timeout { get; set; }
144 |         public string InitialStatus { get; set; }
145 |     }
146 | 
147 |     public class Resources
148 |     {
149 |         public int CPU { get; set; }
150 |         public int MemoryMB { get; set; }
151 |         public int DiskMB { get; set; }
152 |         public int IOPS { get; set; }
153 |         public List<Network> Networks { get; set; }
154 |     }
155 | 
156 |     public class Network
157 |     {
158 |         public string Device { get; set; }
159 |         public string CIDR { get; set; }
160 |         public string IP { get; set; }
161 |         public int MBits { get; set; }
162 |         public object ReservedPorts { get; set; }
163 |         public List<DynamicPort> DynamicPorts { get; set; }
164 |     }
165 | 
166 |     public class DynamicPort
167 |     {
168 |         public string Label { get; set; }
169 |         public int Value { get; set; }
170 |     }
171 | 
172 |     public class LogConfig
173 |     {
174 |         public int MaxFiles { get; set; }
175 |         public int MaxFileSizeMB { get; set; }
176 |     }
177 | 
178 |     public class EphemeralDisk
179 |     {
180 |         public bool Sticky { get; set; }
181 |         public int SizeMB { get; set; }
182 |         public bool Migrate { get; set; }
183 |     }
184 | 
185 |     public class Update
186 |     {
187 |         public long Stagger { get; set; }
188 |         public int MaxParallel { get; set; }
189 |     }
190 | }
191 | 


--------------------------------------------------------------------------------
/Models/Server.cs:
--------------------------------------------------------------------------------
  1 | using System.Collections.Generic;
  2 | 
  3 | namespace Nomad.Models
  4 | {
  5 |     public class Agent
  6 |     {
  7 |         public string ServerName { get; set; }
  8 |         public string ServerRegion { get; set; }
  9 |         public string ServerDC { get; set; }
 10 |         public List<Member> Members { get; set; }
 11 |         public Member Member { get; set; }
 12 |         public ServerConfig Config { get; set; }
 13 |         public ServerStats Stats { get; set; }
 14 |     }
 15 | 
 16 |     public class Member
 17 |     {
 18 |         public string Name { get; set; }
 19 |         public string Addr { get; set; }
 20 |         public int Port { get; set; }
 21 |         public Tags Tags { get; set; }
 22 |         public string Status { get; set; }
 23 |         public int ProtocolMin { get; set; }
 24 |         public int ProtocolMax { get; set; }
 25 |         public int ProtocolCur { get; set; }
 26 |         public int DelegateMin { get; set; }
 27 |         public int DelegateMax { get; set; }
 28 |         public int DelegateCur { get; set; }
 29 | 
 30 | 
 31 |         // Custom Properties
 32 |         public int Up { get; set; }
 33 |         public int Down { get; set; }
 34 |         public bool Leader { get; set; }
 35 |         public bool Voter { get; set; }
 36 |         public Operator Operator { get; set; }
 37 |     }
 38 | 
 39 |     public class Tags
 40 |     {
 41 |         public string Build { get; set; }
 42 |         public string Port { get; set; }
 43 |         public string Expect { get; set; }
 44 |         public string Role { get; set; }
 45 |         public string Region { get; set; }
 46 |         public string DC { get; set; }
 47 |         public string VSN { get; set; }
 48 |         public string MNV { get; set; }
 49 |     }
 50 | 
 51 |     public class Operator
 52 |     {
 53 |         public long Index { get; set; }
 54 |         public List<Server> Servers { get; set; }
 55 |     }
 56 | 
 57 |     public class Server
 58 |     {
 59 |         public string Address { get; set; }
 60 |         public string ID { get; set; }
 61 |         public bool Leader { get; set; }
 62 |         public string Node { get; set; }
 63 |         public bool Voter { get; set; }
 64 |     }
 65 | 
 66 |     public class ServerConfig
 67 |     {
 68 |         public Addresses Addresses { get; set; }
 69 |         public AdvertiseAddrs AdvertiseAddrs { get; set; }
 70 |         public Atlas Atlas { get; set; }
 71 |         public string BindAddr { get; set; }
 72 |         public Client Client { get; set; }
 73 |         public Consul Consul { get; set; }
 74 |         public string DataDir { get; set; }
 75 |         public string Datacenter { get; set; }
 76 |         public bool DevMode { get; set; }
 77 |         public bool DisableAnonymousSignature { get; set; }
 78 |         public bool DisableUpdateCheck { get; set; }
 79 |         public bool EnableDebug { get; set; }
 80 |         public bool EnableSyslog { get; set; }
 81 |         public List<string> Files { get; set; }
 82 |         //public HTTPAPIResponseHeaders HTTPAPIResponseHeaders { get; set; }
 83 |         public bool LeaveOnInt { get; set; }
 84 |         public bool LeaveOnTerm { get; set; }
 85 |         public string LogLevel { get; set; }
 86 |         public string NodeName { get; set; }
 87 |         public Ports Ports { get; set; }
 88 |         public string Region { get; set; }
 89 |         public string Revision { get; set; }
 90 |         public Server Server { get; set; }
 91 |         public string SyslogFacility { get; set; }
 92 |         public TLSConfig TLSConfig { get; set; }
 93 |         public Telemetry Telemetry { get; set; }
 94 |         public Vault Vault { get; set; }
 95 |         public string Version { get; set; }
 96 |         public string VersionPrerelease { get; set; }
 97 |     }
 98 | 
 99 |     public class Addresses
100 |     {
101 |         public string HTTP { get; set; }
102 |         public string RPC { get; set; }
103 |         public string Serf { get; set; }
104 |     }
105 | 
106 |     public class AdvertiseAddrs
107 |     {
108 |         public string HTTP { get; set; }
109 |         public string RPC { get; set; }
110 |         public string Serf { get; set; }
111 |     }
112 | 
113 |     public class Atlas
114 |     {
115 |         public string Endpoint { get; set; }
116 |         public string Infrastructure { get; set; }
117 |         public bool Join { get; set; }
118 |     }
119 | 
120 |     public class Consul
121 |     {
122 |         public string Addr { get; set; }
123 |         public string Auth { get; set; }
124 |         public bool AutoAdvertise { get; set; }
125 |         public string CAFile { get; set; }
126 |         public string CertFile { get; set; }
127 |         public bool ChecksUseAdvertise { get; set; }
128 |         public bool ClientAutoJoin { get; set; }
129 |         public string ClientServiceName { get; set; }
130 |         public bool EnableSSL { get; set; }
131 |         public string KeyFile { get; set; }
132 |         public bool ServerAutoJoin { get; set; }
133 |         public string ServerServiceName { get; set; }
134 |         public long Timeout { get; set; }
135 |         public string Token { get; set; }
136 |         public bool VerifySSL { get; set; }
137 |     }
138 | 
139 |     public class Ports
140 |     {
141 |         public int HTTP { get; set; }
142 |         public int RPC { get; set; }
143 |         public int Serf { get; set; }
144 |     }
145 | 
146 |     public class TLSConfig
147 |     {
148 |         public string CAFile { get; set; }
149 |         public string CertFile { get; set; }
150 |         public bool EnableHTTP { get; set; }
151 |         public bool EnableRPC { get; set; }
152 |         public string KeyFile { get; set; }
153 |         public bool VerifyServerHostname { get; set; }
154 |     }
155 | 
156 |     public class Telemetry
157 |     {
158 |         public string CirconusAPIApp { get; set; }
159 |         public string CirconusAPIToken { get; set; }
160 |         public string CirconusAPIURL { get; set; }
161 |         public string CirconusBrokerID { get; set; }
162 |         public string CirconusBrokerSelectTag { get; set; }
163 |         public string CirconusCheckDisplayName { get; set; }
164 |         public string CirconusCheckForceMetricActivation { get; set; }
165 |         public string CirconusCheckID { get; set; }
166 |         public string CirconusCheckInstanceID { get; set; }
167 |         public string CirconusCheckSearchTag { get; set; }
168 |         public string CirconusCheckSubmissionURL { get; set; }
169 |         public string CirconusCheckTags { get; set; }
170 |         public string CirconusSubmissionInterval { get; set; }
171 |         public string CollectionInterval { get; set; }
172 |         public string DataDogAddr { get; set; }
173 |         public bool DisableHostname { get; set; }
174 |         public bool PublishAllocationMetrics { get; set; }
175 |         public bool PublishNodeMetrics { get; set; }
176 |         public string StatsdAddr { get; set; }
177 |         public string StatsiteAddr { get; set; }
178 |         public bool UseNodeName { get; set; }
179 |     }
180 | 
181 |     public class Vault
182 |     {
183 |         public string Addr { get; set; }
184 |         public bool AllowUnauthenticated { get; set; }
185 |         public long ConnectionRetryIntv { get; set; }
186 |         public object Enabled { get; set; }
187 |         public string Role { get; set; }
188 |         public string TLSCaFile { get; set; }
189 |         public string TLSCaPath { get; set; }
190 |         public string TLSCertFile { get; set; }
191 |         public string TLSKeyFile { get; set; }
192 |         public string TLSServerName { get; set; }
193 |         public object TLSSkipVerify { get; set; }
194 |         public string TaskTokenTTL { get; set; }
195 |         public string Token { get; set; }
196 |     }
197 | 
198 |     public class ServerStats
199 |     {
200 |         public Raft Raft { get; set; }
201 |         public Serf Serf { get; set; }
202 |         public Runtime Runtime { get; set; }
203 |         public Nomad Nomad { get; set; }
204 |     }
205 | 
206 |     public class Raft
207 |     {
208 |         public string Applied_Index { get; set; }
209 |         public string Last_Snapshot_Index { get; set; }
210 |         public string Protocol_Version_Min { get; set; }
211 |         public string State { get; set; }
212 |         public string Last_Log_Index { get; set; }
213 |         public string Latest_Configuration_Index { get; set; }
214 |         public string Latest_Configuration { get; set; }
215 |         public string Num_Peers { get; set; }
216 |         public string Term { get; set; }
217 |         public string Snapshot_Version_Max { get; set; }
218 |         public string Protocol_Version { get; set; }
219 |         public string Snapshot_Version_Min { get; set; }
220 |         public string Last_Contact { get; set; }
221 |         public string Last_Log_Term { get; set; }
222 |         public string Commit_Index { get; set; }
223 |         public string Protocol_Version_Max { get; set; }
224 |         public string Fsm_Pending { get; set; }
225 |         public string Last_Snapshot_Term { get; set; }
226 |     }
227 | 
228 |     public class Serf
229 |     {
230 |         public string Members { get; set; }
231 |         public string Failed { get; set; }
232 |         public string Left { get; set; }
233 |         public string Event_Time { get; set; }
234 |         public string Query_Time { get; set; }
235 |         public string Intent_Queue { get; set; }
236 |         public string Health_Score { get; set; }
237 |         public string Member_Time { get; set; }
238 |         public string Event_Queue { get; set; }
239 |         public string Query_Queue { get; set; }
240 |         public string Encrypted { get; set; }
241 |     }
242 | 
243 |     public class Runtime
244 |     {
245 |         public string Cpu_Count { get; set; }
246 |         public string Arch { get; set; }
247 |         public string Version { get; set; }
248 |         public string Max_Procs { get; set; }
249 |         public string GoRoutines { get; set; }
250 |     }
251 | 
252 |     public class Nomad
253 |     {
254 |         public string Leader_Addr { get; set; }
255 |         public string Bootstrap { get; set; }
256 |         public string Known_Regions { get; set; }
257 |         public string Server { get; set; }
258 |         public string Leader { get; set; }
259 |     }
260 | }
261 | 


--------------------------------------------------------------------------------
/Nomad.csproj:
--------------------------------------------------------------------------------
 1 | <Project Sdk="Microsoft.NET.Sdk.Web">
 2 | 
 3 |   <PropertyGroup>
 4 |     <TargetFramework>netcoreapp1.1</TargetFramework>
 5 |   </PropertyGroup>
 6 | 
 7 |   <ItemGroup>
 8 |     <PackageReference Include="BuildBundlerMinifier" Version="2.4.337" />
 9 |     <PackageReference Include="Microsoft.AspNetCore" Version="1.1.2" />
10 |     <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" />
11 |     <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" />
12 |     <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.2" />
13 |     <PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="1.1.2" />
14 |   </ItemGroup>
15 | 
16 | </Project>
17 | 


--------------------------------------------------------------------------------
/Nomad.csproj.user:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3 |   <PropertyGroup>
4 |     <ActiveDebugProfile>IIS Express</ActiveDebugProfile>
5 |     <ShowAllFiles>false</ShowAllFiles>
6 |   </PropertyGroup>
7 | </Project>


--------------------------------------------------------------------------------
/Program.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.IO;
 4 | using System.Linq;
 5 | using System.Threading.Tasks;
 6 | using Microsoft.AspNetCore.Hosting;
 7 | 
 8 | namespace Nomad
 9 | {
10 |     public class Program
11 |     {
12 |         public static void Main(string[] args)
13 |         {
14 |             var host = new WebHostBuilder()
15 |                 .UseKestrel()
16 |                 .UseContentRoot(Directory.GetCurrentDirectory())
17 |                 .UseIISIntegration()
18 |                 .UseStartup<Startup>()
19 |                 .Build();
20 | 
21 |             host.Run();
22 |         }
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/Properties/launchSettings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "iisSettings": {
 3 |     "windowsAuthentication": false,
 4 |     "anonymousAuthentication": true,
 5 |     "iisExpress": {
 6 |       "applicationUrl": "http://localhost:63449/",
 7 |       "sslPort": 0
 8 |     }
 9 |   },
10 |   "profiles": {
11 |     "IIS Express": {
12 |       "commandName": "IISExpress",
13 |       "launchBrowser": false,
14 |       "environmentVariables": {
15 |         "ASPNETCORE_ENVIRONMENT": "Development"
16 |       }
17 |     },
18 |     "Nomad": {
19 |       "commandName": "Project"
20 |     }
21 |   }
22 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # With the upcoming release of Nomad 0.7 and its awesome built in UI, this project is no longer under development.
 2 | 
 3 | # Nomad UI
 4 | 
 5 | A cross platform UI for Nomad by HashiCorp written in .NET Core and React.
 6 | 
 7 | ## Usage
 8 | 1. Run `docker run -itd -e "NOMAD_URL=http://<base_url>:<port>" -e "ASPNETCORE_URLS=http://*:5000" -p 5000:5000 cvandal/nomad-ui:1.0.0`
 9 | 
10 | ## Development
11 | ### Prerequisites
12 | 1. Download and install the latest version of .NET Core from https://www.microsoft.com/net/download/core
13 | 2. Download and install the latest version of Node.js from https://nodejs.org/en/download/
14 | 3. Download and install the latest version of Yarn from https://yarnpkg.com/en/docs/install
15 | 4. Clone the repository from GitHub by running `git clone https://github.com/cvandal/nomad-ui.git` 
16 | 
17 | ### Build
18 | 1. Run `yarn`, followed by `.\node_modules\.bin\webpack`
19 | 2. Run `dotnet restore`, followed by `dotnet build`, followed by `dotnet publish`
20 | 3. Run `cd .\bin\Debug\netcoreapp1.1\publish\` and create a file named `Dockerfile` with the following content:
21 | ```
22 | FROM microsoft/dotnet
23 | 
24 | COPY . /app
25 | 
26 | WORKDIR /app
27 | 
28 | ENV ASPNETCORE_URLS=http://*:5000
29 | 
30 | ENTRYPOINT ["dotnet", "Nomad.dll"]
31 | ```
32 | 4. Run `docker build -t <image_name>:<image_tag> .`
33 | ### Run
34 | 1. Run `docker run -itd -e "NOMAD_URL=http://<base_url>:<port>" -p 5000:5000 <image_name>:<image_tag>`
35 | 
36 | ## Discuss
37 | Join the HashiCorp Community Slack team! https://join.slack.com/t/hashicorpcommunity/shared_invite/MjE5NzE3ODI3NzE2LTE1MDE0NDM4OTYtZDI1MTNlMTJmNw 
38 | 
39 | ## Screenshots
40 | ![alt text](https://github.com/cvandal/nomad-ui/raw/master/wwwroot/images/collage.png "Nomad UI")
41 | 
42 | ## Known Issues
43 | `¯\_(ツ)_/¯`
44 | 


--------------------------------------------------------------------------------
/Startup.cs:
--------------------------------------------------------------------------------
 1 | using Microsoft.AspNetCore.Builder;
 2 | using Microsoft.AspNetCore.Hosting;
 3 | using Microsoft.Extensions.Configuration;
 4 | using Microsoft.Extensions.DependencyInjection;
 5 | using Microsoft.Extensions.Logging;
 6 | 
 7 | namespace Nomad
 8 | {
 9 |     public class Startup
10 |     {
11 |         public Startup(IHostingEnvironment env)
12 |         {
13 |             var builder = new ConfigurationBuilder()
14 |                 .SetBasePath(env.ContentRootPath)
15 |                 .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
16 |                 .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
17 |                 .AddEnvironmentVariables();
18 |             Configuration = builder.Build();
19 |         }
20 | 
21 |         public IConfigurationRoot Configuration { get; }
22 |         
23 |         public void ConfigureServices(IServiceCollection services)
24 |         {
25 |             services.AddMvc();
26 |         }
27 | 
28 |         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
29 |         {
30 |             loggerFactory.AddConsole(Configuration.GetSection("Logging"));
31 |             loggerFactory.AddDebug();
32 | 
33 |             app.UseExceptionHandler("/error");
34 |             app.UseStatusCodePagesWithReExecute("/error/{0}");
35 | 
36 |             app.UseStaticFiles();
37 | 
38 |             app.UseMvc(routes =>
39 |             {
40 |                 routes.MapRoute(
41 |                     name: "default",
42 |                     template: "{controller=Dashboard}/{action=Index}/{id?}");
43 |             });
44 |         }
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/Views/Components/Allocation.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import {
  4 |     defaults,
  5 |     Doughnut
  6 | } from 'react-chartjs-2';
  7 | import moment from 'moment';
  8 | 
  9 | global.jQuery = require('jquery');
 10 | var bootstrap = require('bootstrap');
 11 | 
 12 | export default class Allocation extends React.Component {
 13 |     constructor(props) {
 14 |         super(props);
 15 | 
 16 |         this.state = {
 17 |             allocation: null,
 18 |             error: null,
 19 |             currentLog: {
 20 |                 loading: false,
 21 |                 contents: ''
 22 |             }
 23 |         }
 24 |     }
 25 | 
 26 |     componentDidMount() {
 27 |         const makeRequest = () =>
 28 |             axios.get("/api/allocation" + this.props.location.search)
 29 |                 .then(({ data }) => this.setState({ allocation: data }))
 30 |                 .catch((error) => this.setState({ error: error }))
 31 | 
 32 |         this.serverRequest = makeRequest();
 33 | 
 34 |         this.poll = setInterval(() => {
 35 |             this.serverRequest = makeRequest();
 36 |         }, 3000);
 37 |     }
 38 | 
 39 |     componentWillUnmount() {
 40 |         this.serverRequest.abort();
 41 |         clearInterval(this.poll);
 42 |     }
 43 | 
 44 |     handleLogClick(logName) {
 45 |         const { allocation: { id, resources: { networks } } } = this.state;
 46 |         const { ip } = networks[0]
 47 | 
 48 |         return e => {
 49 |             e.preventDefault()
 50 | 
 51 |             this.setState({
 52 |                 currentLog: {
 53 |                     loading: true,
 54 |                     contents: ''
 55 |                 }
 56 |             })
 57 | 
 58 |             fetch(`/allocation/log?client=${ip}&id=${id}&log=${logName}`)
 59 |                 .then(res => res.text())
 60 |                 .then(contents => this.setState({
 61 |                     currentLog: {
 62 |                         loading: false,
 63 |                         contents,
 64 |                     }
 65 |                 }))
 66 |         }
 67 |     }
 68 | 
 69 |     render() {
 70 |         const { allocation, error } = this.state;
 71 | 
 72 |         if (error) {
 73 |             return (
 74 |                 <div className="container-fluid">
 75 |                     <div className="text-center">
 76 |                         <h1>Oops!</h1>
 77 |                         <p>Something went wrong and the <strong>allocation</strong> you've selected could not be loaded.</p>
 78 |                     </div>
 79 |                 </div>
 80 |             )
 81 |         }
 82 | 
 83 |         if (allocation === null) {
 84 |             return null
 85 |         }
 86 | 
 87 |         var idleCpu = (100 - allocation.stats.resourceUsage.cpuStats.percent);
 88 |         var activeCpu = allocation.stats.resourceUsage.cpuStats.percent;
 89 |         var availableMem = (allocation.resources.memoryMB - (allocation.stats.resourceUsage.memoryStats.maxUsage / 1024) / 1024);
 90 |         var consumedMem = ((allocation.stats.resourceUsage.memoryStats.maxUsage / 1024) / 1024);
 91 | 
 92 |         return (
 93 |             <div>
 94 |                 <div className="row">
 95 |                     <div className="col-sm-6">
 96 |                         <div className="row row-condensed">
 97 |                             <div className="col-sm-6">
 98 |                                 <div className="panel panel-default">
 99 |                                     <div className="panel-heading">
100 |                                         <h3 className="panel-title text-center">Allocation Properties</h3>
101 |                                     </div>
102 |                                     <div className="panel-body">
103 |                                         <ul className="list-group">
104 |                                             <li className="list-group-item"><strong>ID:</strong> {allocation.id}</li>
105 |                                             <li className="list-group-item"><strong>Name:</strong> {allocation.name}</li>
106 |                                             <li className="list-group-item"><strong>Task Group:</strong> {allocation.taskGroup}</li>
107 |                                             <li className="list-group-item"><strong>Desired Status:</strong> {allocation.desiredStatus}</li>
108 |                                             <li className="list-group-item"><strong>Job:</strong> <a href={"/job?id=" + allocation.jobID}>{allocation.jobID}</a></li>
109 |                                             <li className="list-group-item"><strong>Evaluation:</strong> <a href={"/evaluation?id=" + allocation.evalID}>{allocation.evalID}</a></li>
110 |                                             <li className="list-group-item"><strong>Client:</strong> <a href={"/client?id=" + allocation.nodeID}>{allocation.nodeID}</a></li>
111 |                                             <li className="list-group-item"><strong>Client Description:</strong> {allocation.clientDescription}</li>
112 |                                             <li className="list-group-item"><strong>Client Status:</strong> {allocation.clientStatus}</li>
113 |                                             <li className="list-group-item"><strong>Create Time:</strong> {moment(allocation.createDateTime).format('DD/MM/YYYY hh:mm:ss A')}</li>
114 |                                         </ul>
115 |                                     </div>
116 |                                 </div>
117 |                             </div>
118 | 
119 |                             <div className="col-sm-6">
120 |                                 <div className="panel panel-default">
121 |                                     <div className="panel-heading">
122 |                                         <h3 className="panel-title text-center">Allocation Resources</h3>
123 |                                     </div>
124 |                                     <div className="panel-body">
125 |                                         <ul className="list-group">
126 |                                             <li className="list-group-item"><strong>CPU (MHz):</strong> {allocation.resources.cpu}</li>
127 |                                             <li className="list-group-item"><strong>Memory (MB):</strong> {allocation.resources.memoryMB}</li>
128 |                                             <li className="list-group-item"><strong>Disk (MB):</strong> {allocation.resources.diskMB}</li>
129 |                                             <li className="list-group-item">
130 |                                                 <strong>Network (Mpbs):</strong>
131 |                                                 <ul className="list-group list-group-condensed">
132 |                                                     {allocation.resources.networks.map((network) => {
133 |                                                         return (
134 |                                                             <li className="list-group-item list-group-item-condensed">{network.mBits}</li>
135 |                                                         )
136 |                                                     })}
137 |                                                 </ul>
138 |                                             </li>
139 |                                             <li className="list-group-item">
140 |                                                 <strong>Address:</strong>
141 |                                                 {allocation.resources.networks.map((network) => {
142 |                                                     return ([
143 |                                                         <ul className="list-group list-group-condensed">
144 |                                                             {network.dynamicPorts.map((port) => {
145 |                                                                 return (
146 |                                                                     <li className="list-group-item list-group-item-condensed"><a href={"http://" + network.ip + ":" + port.value} target="_blank">http://{network.ip}:{port.value}</a></li>
147 |                                                                 )
148 |                                                             })}
149 |                                                         </ul>
150 |                                                     ])
151 |                                                 })}
152 |                                             </li>
153 |                                         </ul>
154 |                                     </div>
155 |                                 </div>
156 |                             </div>
157 |                         </div>
158 | 
159 |                         <div className="row">
160 |                             <div className="col-sm-6">
161 |                                 <div className="panel panel-default">
162 |                                     <div className="panel-heading">
163 |                                         <h3 className="panel-title text-center">CPU Utilisation</h3>
164 |                                     </div>
165 |                                     <div className="panel-body">
166 |                                         <Doughnut
167 |                                             data={{
168 |                                                 labels: ['Idle %', 'Active %'],
169 |                                                 datasets: [{
170 |                                                     data: [idleCpu, activeCpu],
171 |                                                     backgroundColor: ['#1fb58f', '#eab126'],
172 |                                                     hoverBackgroundColor: ['#1fb58f', '#eab126'],
173 |                                                     borderColor: ['#1e1e1e', '#1e1e1e']
174 |                                                 }]
175 |                                             }}
176 |                                             options={{
177 |                                                 cutoutPercentage: 75,
178 |                                                 legend: {
179 |                                                     position: 'left',
180 |                                                     labels: {
181 |                                                         fontColor: "#fff"
182 |                                                     }
183 |                                                 },
184 |                                                 animation: {
185 |                                                     animateScale: false,
186 |                                                     animateRotate: false
187 |                                                 }
188 |                                             }}
189 |                                             height={200}
190 |                                         />
191 |                                     </div>
192 |                                 </div>
193 |                             </div>
194 | 
195 |                             <div className="col-sm-6">
196 |                                 <div className="panel panel-default">
197 |                                     <div className="panel-heading">
198 |                                         <h3 className="panel-title text-center">Memory Utilisation</h3>
199 |                                     </div>
200 |                                     <div className="panel-body">
201 |                                         <Doughnut
202 |                                             data={{
203 |                                                 labels: ['Available MB', 'Consumed MB'],
204 |                                                 datasets: [{
205 |                                                     data: [availableMem, consumedMem],
206 |                                                     backgroundColor: ['#1fb58f', '#eab126'],
207 |                                                     hoverBackgroundColor: ['#1fb58f', '#eab126'],
208 |                                                     borderColor: ['#1e1e1e', '#1e1e1e']
209 |                                                 }]
210 |                                             }}
211 |                                             options={{
212 |                                                 cutoutPercentage: 75,
213 |                                                 legend: {
214 |                                                     position: 'left',
215 |                                                     labels: {
216 |                                                         fontColor: "#fff"
217 |                                                     }
218 |                                                 },
219 |                                                 animation: {
220 |                                                     animateScale: false,
221 |                                                     animateRotate: false
222 |                                                 }
223 |                                             }}
224 |                                             height={200}
225 |                                         />
226 |                                     </div>
227 |                                 </div>
228 |                             </div>
229 |                         </div>
230 |                     </div>
231 | 
232 |                     <div className="col-sm-6">
233 |                         <div className="panel panel-default">
234 |                             <div className="panel-heading">
235 |                                 <h3 className="panel-title text-center">Allocation Logs</h3>
236 |                             </div>
237 |                             <div className="panel-body">
238 |                                 <div className="col-sm-4">
239 |                                     <ul className="list-group">
240 |                                         {allocation.logs.map((log) => {
241 |                                             return (
242 |                                                 <li className="list-group-item"><a className="log" href="#" onClick={this.handleLogClick(log.name)}>{log.name}</a>, {log.size} (Bytes)</li>
243 |                                             )
244 |                                         })}
245 |                                     </ul>
246 |                                 </div>
247 | 
248 |                                 <div className="col-sm-8">
249 |                                     {this.state.currentLog.loading && <pre className="log-content">Loading...</pre>}
250 | 
251 |                                     <pre className="log-content">
252 |                                         {!this.state.currentLog.loading && this.state.currentLog.contents}
253 |                                     </pre>
254 |                                 </div>
255 |                             </div>
256 |                         </div>
257 |                     </div>
258 |                 </div>
259 | 
260 |                 <div className="row">
261 |                     <div className="col-sm-12">
262 |                         <div className="panel panel-default">
263 |                             <div className="panel-heading">
264 |                                 <h3 className="panel-title text-center">Allocation Events</h3>
265 |                             </div>
266 |                             <div className="panel-body">
267 |                                 <div className="table-responsive">
268 |                                     <table className="table table-hover">
269 |                                         <thead>
270 |                                             <tr>
271 |                                                 <th className="col-sm-3">Name</th>
272 |                                                 <th className="col-sm-1">Type</th>
273 |                                                 <th className="col-sm-6">Message</th>
274 |                                                 <th className="col-sm-2">Time</th>
275 |                                             </tr>
276 |                                         </thead>
277 |                                         <tbody>
278 |                                             {Object.entries(allocation.taskStates).map(([key]) => allocation.taskStates[key].events.sort((a, b) => a.dateTime < b.dateTime).map((event) => (
279 |                                                 <tr>
280 |                                                     <td>{allocation.name}</td>
281 |                                                     <td>{event.type}</td>
282 |                                                     <td>
283 |                                                         {event.restartReason}
284 |                                                         {event.setupError}
285 |                                                         {event.driverError}
286 |                                                         {event.message}
287 |                                                         {event.killError}
288 |                                                         {event.killReason}
289 |                                                         {event.downloadError}
290 |                                                         {event.validationError}
291 |                                                         {event.failedSibling}
292 |                                                         {event.vaultError}
293 |                                                         {event.taskSignalReason}
294 |                                                         {event.taskSignal}
295 |                                                         {event.driverMessage}
296 |                                                     </td>
297 |                                                     <td>{moment(event.dateTime).format('DD/MM/YYYY hh:mm:ss A')}</td>
298 |                                                 </tr>
299 |                                             ))).reduce((flattened, rows) => [...flattened, ...rows], [])}
300 |                                         </tbody>
301 |                                     </table>
302 |                                 </div>
303 |                             </div>
304 |                         </div>
305 |                     </div>
306 |                 </div>
307 |             </div>
308 |         );
309 |     }
310 | }
311 | 


--------------------------------------------------------------------------------
/Views/Components/Allocations.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import Pager from 'react-pager';
  4 | import moment from 'moment';
  5 | 
  6 | global.jQuery = require('jquery');
  7 | var bootstrap = require('bootstrap');
  8 | 
  9 | export default class Allocations extends React.Component {
 10 |     constructor(props) {
 11 |         super(props);
 12 | 
 13 |         this.state = {
 14 |             allocations: null,
 15 |             error: null,
 16 |             current: 0
 17 |         }
 18 | 
 19 |         this.handlePageChanged = this.handlePageChanged.bind(this);
 20 |     }
 21 | 
 22 |     componentDidMount() {
 23 |         var self = this;
 24 | 
 25 |         const makeRequest = () => {
 26 |             this.props.location.search ?
 27 |                 axios.get("/api/allocations" + this.props.location.search)
 28 |                     .then(({ data }) => this.setState({ allocations: data }))
 29 |                     .catch((error) => this.setState({ error: error })) :
 30 |                 axios.get("/api/allocations")
 31 |                     .then(({ data }) => this.setState({ allocations: data }))
 32 |                     .catch((error) => this.setState({ error: error }))
 33 |         }
 34 | 
 35 |         this.serverRequest = makeRequest();
 36 | 
 37 |         this.poll = setInterval(() => {
 38 |             this.serverRequest = makeRequest();
 39 |         }, 3000);
 40 |     }
 41 | 
 42 |     componentWillUnmount() {
 43 |         this.serverRequest.abort();
 44 |         clearInterval(this.poll);
 45 |     }
 46 | 
 47 |     handlePageChanged(newPage) {
 48 |         this.setState({ current: newPage });
 49 |     }
 50 | 
 51 |     render() {
 52 |         const { allocations, error, current } = this.state;
 53 |         const itemsPerPage = 15;
 54 | 
 55 |         if (error) {
 56 |             return (
 57 |                 <div className="container-fluid">
 58 |                     <div className="text-center">
 59 |                         <h1>Oops!</h1>
 60 |                         <p>Something went wrong and the list of <strong>allocations</strong> could not be loaded.</p>
 61 |                     </div>
 62 |                 </div>
 63 |             )
 64 |         }
 65 | 
 66 |         if (allocations === null) {
 67 |             return null
 68 |         }
 69 | 
 70 |         var visibleItems = allocations.slice(itemsPerPage * current, (itemsPerPage * current) + itemsPerPage);
 71 | 
 72 |         return (
 73 |             <div>
 74 |                 <div className="row">
 75 |                     <div className="col-md-12">
 76 |                         <div className="panel panel-default">
 77 |                             <div className="panel-heading">
 78 |                                 <h3 className="panel-title text-center">Allocations</h3>
 79 |                             </div>
 80 |                             <div className="panel-body">
 81 |                                 <div className="table-responsive">
 82 |                                     <table className="table table-hover">
 83 |                                         <thead>
 84 |                                             <tr>
 85 |                                                 <th className="col-sm-2">ID</th>
 86 |                                                 <th className="col-sm-2">Name</th>
 87 |                                                 <th className="col-sm-2">Task Group</th>
 88 |                                                 <th className="col-sm-2">Desired Status</th>
 89 |                                                 <th className="col-sm-2">Client Status</th>
 90 |                                                 <th className="col-sm-2">Create Time</th>
 91 |                                             </tr>
 92 |                                         </thead>
 93 |                                         <tbody>
 94 |                                             {visibleItems.map((allocation) => {
 95 |                                                 return (
 96 |                                                     <tr>
 97 |                                                         {allocation.desiredStatus === "run" ?
 98 |                                                             <td><a href={"/allocation?id=" + allocation.id}>{allocation.id}</a></td> :
 99 |                                                             <td>{allocation.id}</td>
100 |                                                         }
101 |                                                         <td>{allocation.name}</td>
102 |                                                         <td>{allocation.taskGroup}</td>
103 |                                                         <td>{allocation.desiredStatus}</td>
104 |                                                         <td>{allocation.clientStatus}</td>
105 |                                                         <td>{moment(allocation.createDateTime).format('DD/MM/YYYY hh:mm:ss A')}</td>
106 |                                                     </tr>
107 |                                                 )
108 |                                             })}
109 |                                         </tbody>
110 |                                     </table>
111 |                                 </div>
112 | 
113 |                                 {allocations.length > 15 ?
114 |                                     <div className="text-center">
115 |                                         <Pager
116 |                                             total={Math.ceil(allocations.length / itemsPerPage)}
117 |                                             current={this.state.current}
118 |                                             visiblePages={10}
119 |                                             onPageChanged={this.handlePageChanged}
120 |                                         />
121 |                                     </div> :
122 |                                     <div></div>
123 |                                 }
124 |                             </div>
125 |                         </div>
126 |                     </div>
127 |                 </div>
128 |             </div>
129 |         );
130 |     }
131 | }
132 | 


--------------------------------------------------------------------------------
/Views/Components/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |     BrowserRouter as Router,
 4 |     Route,
 5 |     Link
 6 | } from 'react-router-dom';
 7 | import Dashboard from './Dashboard.jsx';
 8 | import Jobs from './Jobs.jsx';
 9 | import Job from './Job.jsx';
10 | import Evaluations from './Evaluations.jsx';
11 | import Evaluation from './Evaluation.jsx';
12 | import Allocations from './Allocations.jsx';
13 | import Allocation from './Allocation.jsx';
14 | import Clients from './Clients.jsx';
15 | import Client from './Client.jsx';
16 | import Servers from './Servers.jsx';
17 | import Server from './Server.jsx';
18 | 
19 | export default class App extends React.Component {
20 |     render() {
21 |         return (
22 |             <Router>
23 |                 <div>
24 |                     <Route exact path="/" component={Dashboard} />
25 |                     <Route exact path="/jobs" component={Jobs} />
26 |                     <Route path="/job" component={Job} />
27 |                     <Route exact path="/evaluations" component={Evaluations} />
28 |                     <Route path="/evaluation" component={Evaluation} />
29 |                     <Route exact path="/allocations" component={Allocations} />
30 |                     <Route path="/allocation" component={Allocation} />
31 |                     <Route exact path="/clients" component={Clients} />
32 |                     <Route path="/client" component={Client} />
33 |                     <Route exact path="/servers" component={Servers} />
34 |                     <Route path="/server" component={Server} />
35 |                 </div>
36 |             </Router>
37 |         );
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/Views/Components/Client.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import {
  4 |     defaults,
  5 |     Doughnut
  6 | } from 'react-chartjs-2';
  7 | import moment from 'moment';
  8 | 
  9 | global.jQuery = require('jquery');
 10 | var bootstrap = require('bootstrap');
 11 | 
 12 | export default class Client extends React.Component {
 13 |     constructor(props) {
 14 |         super(props);
 15 | 
 16 |         this.state = {
 17 |             client: null,
 18 |             error: null
 19 |         }
 20 |     }
 21 | 
 22 |     componentDidMount() {
 23 |         var self = this;
 24 | 
 25 |         const makeRequest = () =>
 26 |             axios.get("/api/client" + this.props.location.search)
 27 |                 .then(({ data }) => this.setState({ client: data }))
 28 |                 .catch((error) => this.setState({ error: error }))
 29 | 
 30 |         this.serverRequest = makeRequest();
 31 | 
 32 |         this.poll = setInterval(() => {
 33 |             this.serverRequest = makeRequest();
 34 |         }, 3000);
 35 |     }
 36 | 
 37 |     componentWillUnmount() {
 38 |         this.serverRequest.abort();
 39 |         clearInterval(this.poll);
 40 |     }
 41 | 
 42 |     render() {
 43 |         const { client, error } = this.state;
 44 | 
 45 |         if (error) {
 46 |             return (
 47 |                 <div className="container-fluid">
 48 |                     <div className="text-center">
 49 |                         <h1>Oops!</h1>
 50 |                         <p>Something went wrong and the <strong>client</strong> you've selected could not be loaded.</p>
 51 |                     </div>
 52 |                 </div>
 53 |             )
 54 |         }
 55 | 
 56 |         if (client === null) {
 57 |             return null
 58 |         }
 59 | 
 60 |         return (
 61 |             <div>
 62 |                 <div className="row">
 63 |                     <div className="col-sm-4">
 64 |                         <div className="panel panel-default">
 65 |                             <div className="panel-heading">
 66 |                                 <h3 className="panel-title text-center">Client Properties</h3>
 67 |                             </div>
 68 |                             <div className="panel-body">
 69 |                                 <ul className="list-group">
 70 |                                     <li className="list-group-item"><strong>ID:</strong> {client.id}</li>
 71 |                                     <li className="list-group-item"><strong>Name:</strong> {client.name}</li>
 72 |                                     <li className="list-group-item"><strong>Datacenter:</strong> {client.datacenter}</li>
 73 |                                     <li className="list-group-item"><strong>Address:</strong> {client.httpAddr}</li>
 74 |                                     <li className="list-group-item"><strong>TLS:</strong> {client.tlsEnabled.toString()}</li>
 75 |                                     <li className="list-group-item"><strong>Drain:</strong> {client.drain.toString()}</li>
 76 |                                     <li className="list-group-item"><strong>Status Description:</strong> {client.statusDescription}</li>
 77 |                                     <li className="list-group-item"><strong>Status:</strong> {client.status}</li>
 78 |                                     <li className="list-group-item">
 79 |                                         <strong>Meta:</strong>
 80 |                                         {client.meta ?
 81 |                                             <ul className="list-group list-group-condensed">
 82 |                                                 {Object.entries(client.meta).map(([key, value]) => {
 83 |                                                     return (
 84 |                                                         <li className="list-group-item list-group-item-condensed">{key} = {value}</li>
 85 |                                                     )
 86 |                                                 })}
 87 |                                             </ul> :
 88 |                                             <p></p>
 89 |                                         }
 90 |                                     </li>
 91 |                                 </ul>
 92 |                             </div>
 93 |                         </div>
 94 |                     </div>
 95 | 
 96 |                     <div className="col-sm-4">
 97 |                         <div className="panel panel-default">
 98 |                             <div className="panel-heading">
 99 |                                 <h3 className="panel-title text-center">Client Resources</h3>
100 |                             </div>
101 |                             <div className="panel-body">
102 |                                 <ul className="list-group">
103 |                                     <li className="list-group-item"><strong>CPU (MHz):</strong> {client.resources.cpu}</li>
104 |                                     <li className="list-group-item"><strong>Memory (MB):</strong> {client.resources.memoryMB}</li>
105 |                                     <li className="list-group-item"><strong>Disk (MB):</strong> {client.resources.diskMB}</li>
106 |                                     <li className="list-group-item">
107 |                                         {client.resources.networks.map((network) => {
108 |                                             return (
109 |                                                 <div><strong>Network (Mpbs):</strong> {network.mBits}</div>
110 |                                             )
111 |                                         })}
112 |                                     </li>
113 |                                     <li className="list-group-item">
114 |                                         {client.resources.networks.map((network) => {
115 |                                             return (
116 |                                                 <div><strong>IP Address:</strong> {network.ip}</div>
117 |                                             )
118 |                                         })}
119 |                                     </li>
120 |                                 </ul>
121 |                             </div>
122 |                         </div>
123 |                     </div>
124 | 
125 |                     <div className="col-sm-4">
126 |                         <div className="panel panel-default">
127 |                             <div className="panel-heading">
128 |                                 <h3 className="panel-title text-center">Client Attributes</h3>
129 |                             </div>
130 |                             <div className="panel-body">
131 |                                 <ul className="list-group">
132 |                                     <li className="list-group-item"><strong>Operating System:</strong> {client.attributes['os.name']} {client.attributes['os.version']}</li>
133 |                                     <li className="list-group-item"><strong>Docker Version:</strong> {client.attributes['driver.docker.version']}</li>
134 |                                     <li className="list-group-item"><strong>Nomad Version:</strong> {client.attributes['nomad.version']}</li>
135 |                                     <li className="list-group-item"><strong>Consul Version:</strong> {client.attributes['consul.version']}</li>
136 |                                 </ul>
137 |                             </div>
138 |                         </div>
139 |                     </div>
140 |                 </div>
141 | 
142 |                 <div className="row">
143 |                     {client.stats.cpu.map((cpu) => {
144 |                         return (
145 |                             <div className="col-sm-3">
146 |                                 <div className="panel panel-default">
147 |                                     <div className="panel-heading">
148 |                                         <h3 className="panel-title text-center">{cpu.cpu === "" ? <span>CPU0</span> : <span>{cpu.cpu.toUpperCase()}</span>} Utilisation</h3>
149 |                                     </div>
150 |                                     <div className="panel-body">
151 |                                         <Doughnut
152 |                                             data={{
153 |                                                 labels: ['Idle %', 'Active %'],
154 |                                                 datasets: [{
155 |                                                     data: [cpu.idle, cpu.total],
156 |                                                     backgroundColor: ['#1fb58f', '#eab126'],
157 |                                                     hoverBackgroundColor: ['#1fb58f', '#eab126'],
158 |                                                     borderColor: ['#1e1e1e', '#1e1e1e']
159 |                                                 }]
160 |                                             }}
161 |                                             options={{
162 |                                                 cutoutPercentage: 75,
163 |                                                 legend: {
164 |                                                     position: 'left',
165 |                                                     labels: {
166 |                                                         fontColor: "#fff"
167 |                                                     }
168 |                                                 },
169 |                                                 animation: {
170 |                                                     animateScale: false,
171 |                                                     animateRotate: false
172 |                                                 }
173 |                                             }}
174 |                                             height={200}
175 |                                         />
176 |                                     </div>
177 |                                 </div>
178 |                             </div>
179 |                         )
180 |                     })}
181 | 
182 |                     <div className="col-sm-3">
183 |                         <div className="panel panel-default">
184 |                             <div className="panel-heading">
185 |                                 <h3 className="panel-title text-center">Memory Utilisation</h3>
186 |                             </div>
187 |                             <div className="panel-body">
188 |                                 <Doughnut
189 |                                     data={{
190 |                                         labels: ['Available MB', 'Consumed MB'],
191 |                                         datasets: [{
192 |                                             data: [client.stats.memory.available, client.stats.memory.used],
193 |                                             backgroundColor: ['#1fb58f', '#eab126'],
194 |                                             hoverBackgroundColor: ['#1fb58f', '#eab126'],
195 |                                             borderColor: ['#1e1e1e', '#1e1e1e']
196 |                                         }]
197 |                                     }}
198 |                                     options={{
199 |                                         cutoutPercentage: 75,
200 |                                         legend: {
201 |                                             position: 'left',
202 |                                             labels: {
203 |                                                 fontColor: "#fff"
204 |                                             }
205 |                                         },
206 |                                         animation: {
207 |                                             animateScale: false,
208 |                                             animateRotate: false
209 |                                         }
210 |                                     }}
211 |                                     height={200}
212 |                                 />
213 |                             </div>
214 |                         </div>
215 |                     </div>
216 |                 </div>
217 | 
218 |                 <div className="row">
219 |                     <div className="col-sm-12">
220 |                         <div className="panel panel-default">
221 |                             <div className="panel-heading">
222 |                                 <h3 className="panel-title text-center">Allocations</h3>
223 |                             </div>
224 |                             <div className="panel-body">
225 |                                 <div className="table-responsive">
226 |                                     <table className="table table-hover">
227 |                                         <thead>
228 |                                             <tr>
229 |                                                 <th className="col-sm-2">ID</th>
230 |                                                 <th className="col-sm-2">Name</th>
231 |                                                 <th className="col-sm-1">Task Group</th>
232 |                                                 <th className="col-sm-1">Desired Status</th>
233 |                                                 <th className="col-sm-2">Client</th>
234 |                                                 <th className="col-sm-1">Client Status</th>
235 |                                                 <th className="col-sm-1">Create Time</th>
236 |                                             </tr>
237 |                                         </thead>
238 |                                         <tbody>
239 |                                             {client.allocations.sort((a, b) => a.createDateTime < b.createDateTime).map((allocation) => {
240 |                                                 return (
241 |                                                     <tr>
242 |                                                         <td><a href={"/allocation?id=" + allocation.id}>{allocation.id}</a></td>
243 |                                                         <td>{allocation.name}</td>
244 |                                                         <td>{allocation.taskGroup}</td>
245 |                                                         <td>{allocation.desiredStatus}</td>
246 |                                                         <td><a href={"/client?id=" + allocation.nodeID}>{allocation.nodeID}</a></td>
247 |                                                         <td>{allocation.clientStatus}</td>
248 |                                                         <td>{moment(allocation.createDateTime).format('DD/MM/YYYY hh:mm:ss A')}</td>
249 |                                                     </tr>
250 |                                                 )
251 |                                             })}
252 |                                         </tbody>
253 |                                     </table>
254 |                                 </div>
255 |                             </div>
256 |                         </div>
257 |                     </div>
258 |                 </div>
259 |             </div>
260 |         );
261 |     }
262 | }
263 | 


--------------------------------------------------------------------------------
/Views/Components/Clients.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import Pager from 'react-pager';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Clients extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             clients: null,
 14 |             error: null,
 15 |             current: 0
 16 |         }
 17 | 
 18 |         this.handlePageChanged = this.handlePageChanged.bind(this);
 19 |     }
 20 | 
 21 |     componentDidMount() {
 22 |         var self = this;
 23 | 
 24 |         const makeRequest = () => {
 25 |             this.props.location.search ?
 26 |                 axios.get("/api/clients" + this.props.location.search)
 27 |                     .then(({ data }) => this.setState({ clients: data }))
 28 |                     .catch((error) => this.setState({ error: error })) :
 29 |                 axios.get("/api/clients")
 30 |                     .then(({ data }) => this.setState({ clients: data }))
 31 |                     .catch((error) => this.setState({ error: error }))
 32 |         }
 33 | 
 34 |         this.serverRequest = makeRequest();
 35 | 
 36 |         this.poll = setInterval(() => {
 37 |             this.serverRequest = makeRequest();
 38 |         }, 3000);
 39 |     }
 40 | 
 41 |     componentWillUnmount() {
 42 |         this.serverRequest.abort();
 43 |         clearInterval(this.poll);
 44 |     }
 45 | 
 46 |     handlePageChanged(newPage) {
 47 |         this.setState({ current: newPage });
 48 |     }
 49 | 
 50 |     render() {
 51 |         const { clients, error, current } = this.state;
 52 |         const itemsPerPage = 15;
 53 | 
 54 |         if (error) {
 55 |             return (
 56 |                 <div className="container-fluid">
 57 |                     <div className="text-center">
 58 |                         <h1>Oops!</h1>
 59 |                         <p>Something went wrong and the list of <strong>clients</strong> could not be loaded.</p>
 60 |                     </div>
 61 |                 </div>
 62 |             )
 63 |         }
 64 | 
 65 |         if (clients === null) {
 66 |             return null
 67 |         }
 68 | 
 69 |         var visibleItems = clients.slice(itemsPerPage * current, (itemsPerPage * current) + itemsPerPage);
 70 | 
 71 |         return (
 72 |             <div>
 73 |                 <div className="row">
 74 |                     <div className="col-md-12">
 75 |                         <div className="panel panel-default">
 76 |                             <div className="panel-heading">
 77 |                                 <h3 className="panel-title text-center">Clients</h3>
 78 |                             </div>
 79 |                             <div className="panel-body">
 80 |                                 <div className="table-responsive">
 81 |                                     <table className="table table-hover">
 82 |                                         <thead>
 83 |                                             <tr>
 84 |                                                 <th className="col-sm-3">ID</th>
 85 |                                                 <th className="col-sm-3">Name</th>
 86 |                                                 <th className="col-sm-2">Datacenter</th>
 87 |                                                 <th className="col-sm-2">Drain</th>
 88 |                                                 <th className="col-sm-2">Status</th>
 89 |                                             </tr>
 90 |                                         </thead>
 91 |                                         <tbody>
 92 |                                             {visibleItems.map((client) => {
 93 |                                                 return (
 94 |                                                     <tr>
 95 |                                                         {client.status === "ready" ?
 96 |                                                             <td><a href={"/client?id=" + client.id}>{client.id}</a></td> :
 97 |                                                             <td>{client.id}</td>
 98 |                                                         }
 99 |                                                         <td>{client.name}</td>
100 |                                                         <td>{client.datacenter}</td>
101 |                                                         <td>{client.drain.toString()}</td>
102 |                                                         <td>{client.status}</td>
103 |                                                     </tr>
104 |                                                 )
105 |                                             })}
106 |                                         </tbody>
107 |                                     </table>
108 |                                 </div>
109 | 
110 |                                 {clients.length > 15 ?
111 |                                     <div className="text-center">
112 |                                         <Pager
113 |                                             total={Math.ceil(clients.length / itemsPerPage)}
114 |                                             current={this.state.current}
115 |                                             visiblePages={10}
116 |                                             onPageChanged={this.handlePageChanged}
117 |                                         />
118 |                                     </div> :
119 |                                     <div></div>
120 |                                 }
121 |                             </div>
122 |                         </div>
123 |                     </div>
124 |                 </div>
125 |             </div>
126 |         );
127 |     }
128 | }
129 | 


--------------------------------------------------------------------------------
/Views/Components/Dashboard.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import {
  4 |     defaults,
  5 |     Doughnut
  6 | } from 'react-chartjs-2';
  7 | import moment from 'moment';
  8 | 
  9 | global.jQuery = require('jquery');
 10 | var bootstrap = require('bootstrap');
 11 | 
 12 | export default class Dashboard extends React.Component {
 13 |     constructor(props) {
 14 |         super(props);
 15 | 
 16 |         this.state = {
 17 |             dashboard: null,
 18 |             error: null
 19 |         }
 20 |     }
 21 | 
 22 |     componentDidMount() {
 23 |         var self = this;
 24 | 
 25 |         const makeRequest = () =>
 26 |             axios.get("/api/dashboard")
 27 |                 .then(({ data }) => this.setState({ dashboard: data }))
 28 |                 .catch((error) => this.setState({ error: error }))
 29 | 
 30 |         this.serverRequest = makeRequest();
 31 | 
 32 |         this.poll = setInterval(() => {
 33 |             this.serverRequest = makeRequest();
 34 |         }, 3000);
 35 |     }
 36 | 
 37 |     componentWillUnmount() {
 38 |         this.serverRequest.abort();
 39 |         clearInterval(this.poll);
 40 |     }
 41 | 
 42 |     render() {
 43 |         const { dashboard, error } = this.state;
 44 | 
 45 |         if (error) {
 46 |             return (
 47 |                 <div className="container-fluid">
 48 |                     <div className="text-center">
 49 |                         <h1>Oops!</h1>
 50 |                         <p>Something went wrong and the <strong>dashboard</strong> could not be loaded.</p>
 51 |                     </div>
 52 |                 </div>
 53 |             )
 54 |         }
 55 | 
 56 |         if (dashboard === null) {
 57 |             return null
 58 |         }
 59 | 
 60 |         return (
 61 |             <div>
 62 |                 <div className="row">
 63 |                     <div className="col-sm-3">
 64 |                         <div className="panel panel-default">
 65 |                             <div className="panel-heading">
 66 |                                 <h3 className="panel-title text-center">Job States</h3>
 67 |                             </div>
 68 |                             <div className="panel-body">
 69 |                                 <Doughnut
 70 |                                     data={{
 71 |                                         labels: ['Running', 'Pending', 'Dead'],
 72 |                                         datasets: [{
 73 |                                             data: [dashboard.runningJobs, dashboard.pendingJobs, dashboard.deadJobs],
 74 |                                             backgroundColor: ['#1fb58f', '#eab126', '#f24c4e'],
 75 |                                             hoverBackgroundColor: ['#1fb58f', '#eab126', '#f24c4e'],
 76 |                                             borderColor: ['#1e1e1e', '#1e1e1e', '#1e1e1e']
 77 |                                         }]
 78 |                                     }}
 79 |                                     options={{
 80 |                                         cutoutPercentage: 75,
 81 |                                         legend: {
 82 |                                             position: 'left',
 83 |                                             labels: {
 84 |                                                 fontColor: "#fff"
 85 |                                             }
 86 |                                         },
 87 |                                         animation: {
 88 |                                             animateScale: false,
 89 |                                             animateRotate: false
 90 |                                         }
 91 |                                     }}
 92 |                                     height={ 200 }
 93 |                                 />
 94 |                             </div>
 95 |                         </div>
 96 |                     </div>
 97 | 
 98 |                     <div className="col-sm-3">
 99 |                         <div className="panel panel-default">
100 |                             <div className="panel-heading">
101 |                                 <h3 className="panel-title text-center">Allocation States</h3>
102 |                             </div>
103 |                             <div className="panel-body">
104 |                                 <Doughnut
105 |                                     data={{
106 |                                         labels: ['Running', 'Pending', 'Dead'],
107 |                                         datasets: [{
108 |                                             data: [dashboard.runningAllocations, dashboard.pendingAllocations, dashboard.deadAllocations],
109 |                                             backgroundColor: ['#1fb58f', '#eab126', '#f24c4e'],
110 |                                             hoverBackgroundColor: ['#1fb58f', '#eab126', '#f24c4e'],
111 |                                             borderColor: ['#1e1e1e', '#1e1e1e', '#1e1e1e']
112 |                                         }]
113 |                                     }}
114 |                                     options={{
115 |                                         cutoutPercentage: 75,
116 |                                         legend: {
117 |                                             position: 'left',
118 |                                             labels: {
119 |                                                 fontColor: "#fff"
120 |                                             }
121 |                                         },
122 |                                         animation: {
123 |                                             animateScale: false,
124 |                                             animateRotate: false
125 |                                         }
126 |                                     }}
127 |                                     height={ 200 }
128 |                                 />
129 |                             </div>
130 |                         </div>
131 |                     </div>
132 | 
133 |                     <div className="col-sm-3">
134 |                         <div className="panel panel-default">
135 |                             <div className="panel-heading">
136 |                                 <h3 className="panel-title text-center">Client States</h3>
137 |                             </div>
138 |                             <div className="panel-body">
139 |                                 <Doughnut
140 |                                     data={{
141 |                                         labels: ['Up', 'Draining', 'Down'],
142 |                                         datasets: [{
143 |                                             data: [dashboard.upClients, dashboard.drainingClients, dashboard.downClients],
144 |                                             backgroundColor: ['#1fb58f', '#eab126', '#f24c4e'],
145 |                                             hoverBackgroundColor: ['#1fb58f', '#eab126', '#f24c4e'],
146 |                                             borderColor: ['#1e1e1e', '#1e1e1e', '#1e1e1e']
147 |                                         }]
148 |                                     }}
149 |                                     options={{
150 |                                         cutoutPercentage: 75,
151 |                                         legend: {
152 |                                             position: 'left',
153 |                                             labels: {
154 |                                                 fontColor: "#fff"
155 |                                             }
156 |                                         },
157 |                                         animation: {
158 |                                             animateScale: false,
159 |                                             animateRotate: false
160 |                                         }
161 |                                     }}
162 |                                     height={ 200 }
163 |                                 />
164 |                             </div>
165 |                         </div>
166 |                     </div>
167 | 
168 |                     <div className="col-sm-3">
169 |                         <div className="panel panel-default">
170 |                             <div className="panel-heading">
171 |                                 <h3 className="panel-title text-center">Server States</h3>
172 |                             </div>
173 |                             <div className="panel-body">
174 |                                 <Doughnut
175 |                                     data={{
176 |                                         labels: ['Up', 'Down'],
177 |                                         datasets: [{
178 |                                             data: [dashboard.upServers, dashboard.downServers],
179 |                                             backgroundColor: ['#1fb58f', '#f24c4e'],
180 |                                             hoverBackgroundColor: ['#1fb58f', '#f24c4e'],
181 |                                             borderColor: ['#1e1e1e', '#1e1e1e']
182 |                                         }]
183 |                                     }}
184 |                                     options={{
185 |                                         cutoutPercentage: 75,
186 |                                         legend: {
187 |                                             position: 'left',
188 |                                             labels: {
189 |                                                 fontColor: "#fff"
190 |                                             }
191 |                                         },
192 |                                         animation: {
193 |                                             animateScale: false,
194 |                                             animateRotate: false
195 |                                         }
196 |                                     }}
197 |                                     height={ 200 }
198 |                                 />
199 |                             </div>
200 |                         </div>
201 |                     </div>
202 |                 </div>
203 | 
204 |                 <div className="row">
205 |                     <div className="col-sm-12">
206 |                         <div className="panel panel-default">
207 |                             <div className="panel-heading">
208 |                                 <h3 className="panel-title text-center">Allocation Events</h3>
209 |                             </div>
210 |                             <div className="panel-body">
211 |                                 <div className="table-responsive">
212 |                                     <table className="table table-hover">
213 |                                         <thead>
214 |                                             <tr>
215 |                                                 <th className="col-sm-3">Name</th>
216 |                                                 <th className="col-sm-1">Type</th>
217 |                                                 <th className="col-sm-6">Message</th>
218 |                                                 <th className="col-sm-2">Time</th>
219 |                                             </tr>
220 |                                         </thead>
221 |                                         <tbody>
222 |                                             {dashboard.events.map((event) => {
223 |                                                 return (
224 |                                                     <tr>
225 |                                                         <td><a href={"/allocation?id=" + event.allocationID}>{event.allocationName}</a></td>
226 |                                                         <td>{event.type}</td>
227 |                                                         <td>
228 |                                                             {event.restartReason}
229 |                                                             {event.setupError}
230 |                                                             {event.driverError}
231 |                                                             {event.message}
232 |                                                             {event.killError}
233 |                                                             {event.killReason}
234 |                                                             {event.downloadError}
235 |                                                             {event.validationError}
236 |                                                             {event.failedSibling}
237 |                                                             {event.vaultError}
238 |                                                             {event.taskSignalReason}
239 |                                                             {event.taskSignal}
240 |                                                             {event.driverMessage}
241 |                                                         </td>
242 |                                                         <td>{moment(event.dateTime).format('DD/MM/YYYY hh:mm:ss A')}</td>
243 |                                                     </tr>
244 |                                                 )
245 |                                             })}
246 |                                         </tbody>
247 |                                     </table>
248 |                                 </div>
249 |                             </div>
250 |                         </div>
251 |                     </div>
252 |                 </div>
253 |             </div>
254 |         );
255 |     }
256 | }
257 | 


--------------------------------------------------------------------------------
/Views/Components/Evaluation.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import moment from 'moment';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Evaluation extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             evaluation: null,
 14 |             error: null
 15 |         }
 16 |     }
 17 | 
 18 |     componentDidMount() {
 19 |         var self = this;
 20 | 
 21 |         const makeRequest = () =>
 22 |             axios.get("/api/evaluation" + this.props.location.search)
 23 |                 .then(({ data }) => this.setState({ evaluation: data }))
 24 |                 .catch((error) => this.setState({ error: error }))
 25 | 
 26 |         this.serverRequest = makeRequest();
 27 | 
 28 |         this.poll = setInterval(() => {
 29 |             this.serverRequest = makeRequest();
 30 |         }, 3000);
 31 |     }
 32 | 
 33 |     componentWillUnmount() {
 34 |         this.serverRequest.abort();
 35 |         clearInterval(this.poll);
 36 |     }
 37 | 
 38 |     render() {
 39 |         const { evaluation, error } = this.state;
 40 | 
 41 |         if (error) {
 42 |             return (
 43 |                 <div className="container-fluid">
 44 |                     <div className="text-center">
 45 |                         <h1>Oops!</h1>
 46 |                         <p>Something went wrong and the <strong>evaluation</strong> you've selected could not be loaded.</p>
 47 |                     </div>
 48 |                 </div>
 49 |             )
 50 |         }
 51 | 
 52 |         if (evaluation === null) {
 53 |             return null
 54 |         }
 55 | 
 56 |         return (
 57 |             <div>
 58 |                 <div className="row">
 59 |                     <div className="col-sm-4">
 60 |                         <div className="panel panel-default">
 61 |                             <div className="panel-heading">
 62 |                                 <h3 className="panel-title text-center">Evaluation Properties</h3>
 63 |                             </div>
 64 |                             <div className="panel-body">
 65 |                                 <ul className="list-group">
 66 |                                     <li className="list-group-item"><strong>ID:</strong> {evaluation.id}</li>
 67 |                                     <li className="list-group-item"><strong>Job:</strong> {evaluation.jobID}</li>
 68 |                                     <li className="list-group-item"><strong>Type:</strong> {evaluation.type}</li>
 69 |                                     <li className="list-group-item"><strong>Priority:</strong> {evaluation.priority}</li>
 70 |                                     <li className="list-group-item"><strong>Parent:</strong> {evaluation.previousEval}</li>
 71 |                                     <li className="list-group-item"><strong>Triggered By:</strong> {evaluation.triggeredBy}</li>
 72 |                                     <li className="list-group-item"><strong>Status Description:</strong> {evaluation.statusDescription}</li>
 73 |                                     <li className="list-group-item"><strong>Status:</strong> {evaluation.status}</li>
 74 |                                 </ul>
 75 |                             </div>
 76 |                         </div>
 77 |                     </div>
 78 |                 </div>
 79 | 
 80 |                 <div className="row">
 81 |                     <div className="col-sm-12">
 82 |                         <div className="panel panel-default">
 83 |                             <div className="panel-heading">
 84 |                                 <h3 className="panel-title text-center">Allocations</h3>
 85 |                             </div>
 86 |                             <div className="panel-body">
 87 |                                 <div className="table-responsive">
 88 |                                     <table className="table table-striped">
 89 |                                         <thead>
 90 |                                             <tr>
 91 |                                                 <th className="col-sm-2">ID</th>
 92 |                                                 <th className="col-sm-2">Name</th>
 93 |                                                 <th className="col-sm-1">Task Group</th>
 94 |                                                 <th className="col-sm-1">Desired Status</th>
 95 |                                                 <th className="col-sm-2">Client</th>
 96 |                                                 <th className="col-sm-1">Client Status</th>
 97 |                                                 <th className="col-sm-1">Create Time</th>
 98 |                                             </tr>
 99 |                                         </thead>
100 |                                         <tbody>
101 |                                             {evaluation.allocations.sort((a, b) => a.createDateTime < b.createDateTime).map((allocation) => {
102 |                                                 return (
103 |                                                     <tr>
104 |                                                         <td><a href={"/allocation?id=" + allocation.id}>{allocation.id}</a></td>
105 |                                                         <td>{allocation.name}</td>
106 |                                                         <td>{allocation.taskGroup}</td>
107 |                                                         <td>{allocation.desiredStatus}</td>
108 |                                                         <td><a href={"/client?id=" + allocation.nodeID}>{allocation.nodeID}</a></td>
109 |                                                         <td>{allocation.clientStatus}</td>
110 |                                                         <td>{moment(allocation.createDateTime).format('DD/MM/YYYY hh:mm:ss A')}</td>
111 |                                                     </tr>
112 |                                                 )
113 |                                             })}
114 |                                         </tbody>
115 |                                     </table>
116 |                                 </div>
117 |                             </div>
118 |                         </div>
119 |                     </div>
120 |                 </div>
121 |             </div>
122 |         );
123 |     }
124 | }
125 | 


--------------------------------------------------------------------------------
/Views/Components/Evaluations.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import Pager from 'react-pager';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Evaluations extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             evaluations: null,
 14 |             error: null,
 15 |             current: 0
 16 |         }
 17 | 
 18 |         this.handlePageChanged = this.handlePageChanged.bind(this);
 19 |     }
 20 | 
 21 |     componentDidMount() {
 22 |         var self = this;
 23 | 
 24 |         const makeRequest = () => {
 25 |             this.props.location.search ?
 26 |                 axios.get("/api/evaluations" + this.props.location.search)
 27 |                     .then(({ data }) => this.setState({ evaluations: data }))
 28 |                     .catch((error) => this.setState({ error: error })) :
 29 |                 axios.get("/api/evaluations")
 30 |                     .then(({ data }) => this.setState({ evaluations: data }))
 31 |                     .catch((error) => this.setState({ error: error }))
 32 |         }
 33 | 
 34 |         this.serverRequest = makeRequest();
 35 | 
 36 |         this.poll = setInterval(() => {
 37 |             this.serverRequest = makeRequest();
 38 |         }, 3000);
 39 |     }
 40 | 
 41 |     componentWillUnmount() {
 42 |         this.serverRequest.abort();
 43 |         clearInterval(this.poll);
 44 |     }
 45 | 
 46 |     handlePageChanged(newPage) {
 47 |         this.setState({ current: newPage });
 48 |     }
 49 | 
 50 |     render() {
 51 |         const { evaluations, error, current } = this.state;
 52 |         const itemsPerPage = 15;
 53 | 
 54 |         if (error) {
 55 |             return (
 56 |                 <div className="container-fluid">
 57 |                     <div className="text-center">
 58 |                         <h1>Oops!</h1>
 59 |                         <p>Something went wrong and the list of <strong>evaluations</strong> could not be loaded.</p>
 60 |                     </div>
 61 |                 </div>
 62 |             )
 63 |         }
 64 | 
 65 |         if (evaluations === null) {
 66 |             return null
 67 |         }
 68 | 
 69 |         var visibleItems = evaluations.slice(itemsPerPage * current, (itemsPerPage * current) + itemsPerPage);
 70 | 
 71 |         return (
 72 |             <div>
 73 |                 <div className="row">
 74 |                     <div className="col-md-12">
 75 |                         <div className="panel panel-default">
 76 |                             <div className="panel-heading">
 77 |                                 <h3 className="panel-title text-center">Evaluations</h3>
 78 |                             </div>
 79 |                             <div className="panel-body">
 80 |                                 <div className="table-responsive">
 81 |                                     <table className="table table-hover">
 82 |                                         <thead>
 83 |                                             <tr>
 84 |                                                 <th className="col-sm-2">Evaluation ID</th>
 85 |                                                 <th className="col-sm-2">Job ID</th>
 86 |                                                 <th className="col-sm-2">Type</th>
 87 |                                                 <th className="col-sm-2">Priority</th>
 88 |                                                 <th className="col-sm-2">Triggered By</th>
 89 |                                                 <th className="col-sm-2">Status</th>
 90 |                                             </tr>
 91 |                                         </thead>
 92 |                                         <tbody>
 93 |                                             {visibleItems.map((evaluation) => {
 94 |                                                 return (
 95 |                                                     <tr>
 96 |                                                         <td><a href={"/evaluation?id=" + evaluation.id}>{evaluation.id}</a></td>
 97 |                                                         <td><a href={"/job?id=" + evaluation.jobID}>{evaluation.jobID}</a></td>
 98 |                                                         <td>{evaluation.type}</td>
 99 |                                                         <td>{evaluation.priority}</td>
100 |                                                         <td>{evaluation.triggeredBy}</td>
101 |                                                         <td>{evaluation.status}</td>
102 |                                                     </tr>
103 |                                                 )
104 |                                             })}
105 |                                         </tbody>
106 |                                     </table>
107 |                                 </div>
108 | 
109 |                                 {evaluations.length > 15 ?
110 |                                     <div className="text-center">
111 |                                         <Pager
112 |                                             total={Math.ceil(evaluations.length / itemsPerPage)}
113 |                                             current={this.state.current}
114 |                                             visiblePages={10}
115 |                                             onPageChanged={this.handlePageChanged}
116 |                                         />
117 |                                     </div> :
118 |                                     <div></div>
119 |                                 }
120 |                             </div>
121 |                         </div>
122 |                     </div>
123 |                 </div>
124 |             </div>
125 |         );
126 |     }
127 | }
128 | 


--------------------------------------------------------------------------------
/Views/Components/Job.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import moment from 'moment';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Job extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             job: null,
 14 |             error: null
 15 |         }
 16 |     }
 17 | 
 18 |     componentDidMount() {
 19 |         var self = this;
 20 | 
 21 |         const makeRequest = () =>
 22 |             axios.get("/api/job" + this.props.location.search)
 23 |                 .then(({ data }) => this.setState({ job: data }))
 24 |                 .catch((error) => this.setState({ error: error }))
 25 | 
 26 |         this.serverRequest = makeRequest();
 27 | 
 28 |         this.poll = setInterval(() => {
 29 |             this.serverRequest = makeRequest();
 30 |         }, 3000);
 31 |     }
 32 | 
 33 |     componentWillUnmount() {
 34 |         this.serverRequest.abort();
 35 |         clearInterval(this.poll);
 36 |     }
 37 | 
 38 |     render() {
 39 |         const { job, error } = this.state;
 40 | 
 41 |         if (error) {
 42 |             return (
 43 |                 <div className="container-fluid">
 44 |                     <div className="text-center">
 45 |                         <h1>Oops!</h1>
 46 |                         <p>Something went wrong and the <strong>job</strong> you've selected could not be loaded.</p>
 47 |                     </div>
 48 |                 </div>
 49 |             )
 50 |         }
 51 | 
 52 |         if (job === null) {
 53 |             return null
 54 |         }
 55 | 
 56 |         return (
 57 |             <div>
 58 |                 <div className="row">
 59 |                     <div className="col-sm-4">
 60 |                         <div className="panel panel-default">
 61 |                             <div className="panel-heading">
 62 |                                 <h3 className="panel-title text-center">Job Properties</h3>
 63 |                             </div>
 64 |                             <div className="panel-body">
 65 |                                 <ul className="list-group">
 66 |                                     <li className="list-group-item"><strong>ID:</strong> {job.id}</li>
 67 |                                     <li className="list-group-item"><strong>Name:</strong> {job.name}</li>
 68 |                                     <li className="list-group-item"><strong>Region:</strong> {job.region}</li>
 69 |                                     <li className="list-group-item">
 70 |                                         <strong>Datacenters:</strong>
 71 |                                         {job.datacenters.map((datacenter) => {
 72 |                                             return (
 73 |                                                 <ul className="list-group list-group-condensed">
 74 |                                                     <li className="list-group-item list-group-item-condensed">{datacenter}</li>
 75 |                                                 </ul>
 76 |                                             )
 77 |                                         })}
 78 |                                     </li>
 79 |                                     <li className="list-group-item"><strong>Type:</strong> {job.type}</li>
 80 |                                     <li className="list-group-item"><strong>Priority:</strong> {job.priority}</li>
 81 |                                     <li className="list-group-item"><strong>Status:</strong> {job.status}</li>
 82 |                                 </ul>
 83 |                             </div>
 84 |                         </div>
 85 |                     </div>
 86 | 
 87 |                     <div className="col-md-4">
 88 |                         <div className="panel panel-default">
 89 |                             <div className="panel-heading">
 90 |                                 <h3 className="panel-title text-center">Job Constraints</h3>
 91 |                             </div>
 92 |                             <div className="panel-body">
 93 |                                 {job.constraints ?
 94 |                                     <ul className="list-group">
 95 |                                         {job.constraints.map((constraint) => {
 96 |                                             return (
 97 |                                                 <li className="list-group-item">{constraint.lTarget} {constraint.operand} {constraint.rTarget}</li>
 98 |                                             )
 99 |                                         })}
100 |                                     </ul> :
101 |                                     <p></p>
102 |                                 }
103 |                             </div>
104 |                         </div>
105 |                     </div>
106 | 
107 |                     <div className="col-md-4">
108 |                         <div className="panel panel-default">
109 |                             <div className="panel-heading">
110 |                                 <h3 className="panel-title text-center">Job Meta</h3>
111 |                             </div>
112 |                             <div className="panel-body">
113 |                                 {job.meta ?
114 |                                     <ul className="list-group">
115 |                                         {Object.entries(job.meta).sort().map(([key, value]) => {
116 |                                             return (
117 |                                                 <li className="list-group-item">{key} = {value}</li>
118 |                                             )
119 |                                         })}
120 |                                     </ul> :
121 |                                     <p></p>
122 |                                 }
123 |                             </div>
124 |                         </div>
125 |                     </div>
126 |                 </div>
127 | 
128 |                 <div className="row">
129 |                     <div className="col-sm-12">
130 |                         <div className="panel panel-default">
131 |                             <div className="panel-heading">
132 |                                 <h3 className="panel-title text-center">Task Groups</h3>
133 |                             </div>
134 |                             <div className="panel-body">
135 |                                 <div className="table-responsive">
136 |                                     <table className="table table-striped">
137 |                                         <thead>
138 |                                             <tr>
139 |                                                 <th className="col-sm-1">Name</th>
140 |                                                 <th className="col-sm-1">Count</th>
141 |                                                 <th className="col-sm-1">Tasks</th>
142 |                                                 <th className="col-sm-1">Restart Policy</th>
143 |                                                 <th className="col-sm-1">Restart Attempts</th>
144 |                                                 <th className="col-sm-1">Restart Delay</th>
145 |                                                 <th className="col-sm-2">Constraints</th>
146 |                                                 <th className="col-sm-2">Meta</th>
147 |                                             </tr>
148 |                                         </thead>
149 |                                         <tbody>
150 |                                             {job.taskGroups.map((taskGroup) => {
151 |                                                 return (
152 |                                                     <tr>
153 |                                                         <td>{taskGroup.name}</td>
154 |                                                         <td>{taskGroup.count}</td>
155 |                                                         <td>{taskGroup.tasks.length}</td>
156 |                                                         <td>{taskGroup.restartPolicy.mode}</td>
157 |                                                         <td>{taskGroup.restartPolicy.attempts}</td>
158 |                                                         <td>{taskGroup.restartPolicy.delay}</td>
159 |                                                         <td>
160 |                                                             {taskGroup.constraints ?
161 |                                                                 <ul className="list-group-condensed">
162 |                                                                     {taskGroup.constraints.map((constraint) => {
163 |                                                                         return (
164 |                                                                             <li>{constraint.lTarget} {constraint.operand} {constraint.rTarget}</li>
165 |                                                                         )
166 |                                                                     })}
167 |                                                                 </ul> :
168 |                                                                 <p></p>
169 |                                                             }
170 |                                                         </td>
171 |                                                         <td>
172 |                                                             {taskGroup.meta ?
173 |                                                                 <ul className="list-group-condensed">
174 |                                                                     {Object.entries(taskGroup.meta).sort().map(([key, value]) => {
175 |                                                                         return (
176 |                                                                             <li>{key} = {value}</li>
177 |                                                                         )
178 |                                                                     })}
179 |                                                                 </ul> :
180 |                                                                 <p></p>
181 |                                                             }
182 |                                                         </td>
183 |                                                     </tr>
184 |                                                 )
185 |                                             })}
186 |                                         </tbody>
187 |                                     </table>
188 |                                 </div>
189 |                             </div>
190 |                         </div>
191 |                     </div>
192 |                 </div>
193 | 
194 |                 <div className="row">
195 |                     <div className="col-sm-12">
196 |                         <div className="panel panel-default">
197 |                             <div className="panel-heading">
198 |                                 <h3 className="panel-title text-center">Tasks</h3>
199 |                             </div>
200 |                             <div className="panel-body">
201 |                                 <div className="table-responsive">
202 |                                     <table className="table table-striped">
203 |                                         <thead>
204 |                                             <tr>
205 |                                                 <th className="col-sm-1">Name</th>
206 |                                                 <th className="col-sm-1">Task Group</th>
207 |                                                 <th className="col-sm-1">Driver</th>
208 |                                                 <th className="col-sm-1">CPU (MHz)</th>
209 |                                                 <th className="col-sm-1">Memory (MB)</th>
210 |                                                 <th className="col-sm-1">Network (Mbps)</th>
211 |                                                 <th className="col-sm-2">Constraints</th>
212 |                                                 <th className="col-sm-2">Meta</th>
213 |                                             </tr>
214 |                                         </thead>
215 |                                         <tbody>
216 |                                             {job.taskGroups.map((taskGroup) => taskGroup.tasks.map((task) => (
217 |                                                 <tr>
218 |                                                     <td>{task.name}</td>
219 |                                                     <td>{taskGroup.name}</td>
220 |                                                     <td>{task.driver}</td>
221 |                                                     <td>{task.resources.cpu}</td>
222 |                                                     <td>{task.resources.memoryMB}</td>
223 |                                                     <td>
224 |                                                         {task.resources.networks.map((network) => {
225 |                                                             return (
226 |                                                                 <span>{network.mBits}</span>
227 |                                                             )
228 |                                                         })}
229 |                                                     </td>
230 |                                                     <td>
231 |                                                         {task.constraints ?
232 |                                                             <ul className="list-group-condensed">
233 |                                                                 {task.constraints.map((constraint) => {
234 |                                                                     return (
235 |                                                                         <li>{constraint.lTarget} {constraint.operand} {constraint.rTarget}</li>
236 |                                                                     )
237 |                                                                 })}
238 |                                                             </ul> :
239 |                                                             <p></p>
240 |                                                         }
241 |                                                     </td>
242 |                                                     <td>
243 |                                                         {task.meta ?
244 |                                                             <ul className="list-group-condensed">
245 |                                                                 {Object.entries(task.meta).sort().map(([key, value]) => {
246 |                                                                     return (
247 |                                                                         <li>{key} = {value}</li>
248 |                                                                     )
249 |                                                                 })}
250 |                                                             </ul> :
251 |                                                             <p></p>
252 |                                                         }
253 |                                                     </td>
254 |                                                 </tr>
255 |                                             ))).reduce((flattened, rows) => [...flattened, ...rows], [])}
256 |                                        </tbody>
257 |                                     </table>
258 |                                 </div>
259 |                             </div>
260 |                         </div>
261 |                     </div>
262 |                 </div>
263 | 
264 |                 <div className="row">
265 |                     <div className="col-sm-12">
266 |                         <div className="panel panel-default">
267 |                             <div className="panel-heading">
268 |                                 <h3 className="panel-title text-center">Docker Properties</h3>
269 |                             </div>
270 |                             <div className="panel-body">
271 |                                 <div className="table-responsive">
272 |                                     <table className="table table-striped">
273 |                                         <thead>
274 |                                             <tr>
275 |                                                 <th className="col-sm-1">Task</th>
276 |                                                 <th className="col-sm-3">Image</th>
277 |                                                 <th className="col-sm-1">Network</th>
278 |                                                 <th className="col-sm-1">Command</th>
279 |                                                 <th className="col-sm-4">Arguments</th>
280 |                                                 <th className="col-sm-3">Environment Variables</th>
281 |                                             </tr>
282 |                                         </thead>
283 |                                         <tbody>
284 |                                             {job.taskGroups.map((taskGroup) => taskGroup.tasks.map((task) => (
285 |                                                 <tr>
286 |                                                     <td>{task.name}</td>
287 |                                                     <td>{task.config.image}</td>
288 |                                                     <td>{task.config.network_Mode}</td>
289 |                                                     <td>{task.config.command}</td>
290 |                                                     <td>
291 |                                                         {task.config.args ?
292 |                                                             <ul className="list-group-condensed">
293 |                                                                 {task.config.args.map((arg) => {
294 |                                                                     return (
295 |                                                                         <li>{arg}</li>
296 |                                                                     )
297 |                                                                 })}
298 |                                                             </ul> :
299 |                                                             <p></p>
300 |                                                         }
301 |                                                     </td>
302 |                                                     <td>
303 |                                                         {task.env ?
304 |                                                             <ul className="list-group-condensed">
305 |                                                                 {Object.entries(task.env).sort().map(([key, value]) => {
306 |                                                                     return (
307 |                                                                         <li>{key} = {value}</li>
308 |                                                                     )
309 |                                                                 })}
310 |                                                             </ul> :
311 |                                                             <p></p>
312 |                                                         }
313 |                                                     </td>
314 |                                                 </tr>
315 |                                             ))).reduce((flattened, rows) => [...flattened, ...rows], [])}
316 |                                         </tbody>
317 |                                     </table>
318 |                                 </div>
319 |                             </div>
320 |                         </div>
321 |                     </div>
322 |                 </div>
323 | 
324 |                 <div className="row">
325 |                     <div className="col-sm-12">
326 |                         <div className="panel panel-default">
327 |                             <div className="panel-heading">
328 |                                 <h3 className="panel-title text-center">Evaluations</h3>
329 |                             </div>
330 |                             <div className="panel-body">
331 |                                 <div className="table-responsive">
332 |                                     <table className="table table-striped">
333 |                                         <thead>
334 |                                             <tr>
335 |                                                 <th className="col-sm-2">ID</th>
336 |                                                 <th className="col-sm-2">Parent ID</th>
337 |                                                 <th className="col-sm-2">Job</th>
338 |                                                 <th className="col-sm-1">Type</th>
339 |                                                 <th className="col-sm-1">Priority</th>
340 |                                                 <th className="col-sm-1">Triggered By</th>
341 |                                                 <th className="col-sm-1">Status</th>
342 |                                             </tr>
343 |                                         </thead>
344 |                                         <tbody>
345 |                                             {job.evaluations.map((evaluation) => {
346 |                                                 return (
347 |                                                     <tr>
348 |                                                         <td><a href={"/evaluation?id=" + evaluation.id}>{evaluation.id}</a></td>
349 |                                                         <td>{evaluation.previousEval}</td>
350 |                                                         <td>{evaluation.jobID}</td>
351 |                                                         <td>{evaluation.type}</td>
352 |                                                         <td>{evaluation.priority}</td>
353 |                                                         <td>{evaluation.triggeredBy}</td>
354 |                                                         <td>{evaluation.status}</td>
355 |                                                     </tr>
356 |                                                 )
357 |                                             })}
358 |                                         </tbody>
359 |                                     </table>
360 |                                 </div>
361 |                             </div>
362 |                         </div>
363 |                     </div>
364 |                 </div>
365 | 
366 |                 <div className="row">
367 |                     <div className="col-sm-12">
368 |                         <div className="panel panel-default">
369 |                             <div className="panel-heading">
370 |                                 <h3 className="panel-title text-center">Allocations</h3>
371 |                             </div>
372 |                             <div className="panel-body">
373 |                                 <div className="table-responsive">
374 |                                     <table className="table table-striped">
375 |                                         <thead>
376 |                                             <tr>
377 |                                                 <th className="col-sm-2">ID</th>
378 |                                                 <th className="col-sm-2">Name</th>
379 |                                                 <th className="col-sm-1">Task Group</th>
380 |                                                 <th className="col-sm-1">Desired Status</th>
381 |                                                 <th className="col-sm-2">Client</th>
382 |                                                 <th className="col-sm-1">Client Status</th>
383 |                                                 <th className="col-sm-1">Create Time</th>
384 |                                             </tr>
385 |                                         </thead>
386 |                                         <tbody>
387 |                                             {job.allocations.sort((a, b) => a.createDateTime < b.createDateTime).map((allocation) => {
388 |                                                 return (
389 |                                                     <tr>
390 |                                                         <td><a href={"/allocation?id=" + allocation.id}>{allocation.id}</a></td>
391 |                                                         <td>{allocation.name}</td>
392 |                                                         <td>{allocation.taskGroup}</td>
393 |                                                         <td>{allocation.desiredStatus}</td>
394 |                                                         <td><a href={"/client?id=" + allocation.nodeID}>{allocation.nodeID}</a></td>
395 |                                                         <td>{allocation.clientStatus}</td>
396 |                                                         <td>{moment(allocation.createDateTime).format('DD/MM/YYYY hh:mm:ss A')}</td>
397 |                                                     </tr>
398 |                                                 )
399 |                                             })}
400 |                                         </tbody>
401 |                                     </table>
402 |                                 </div>
403 |                             </div>
404 |                         </div>
405 |                     </div>
406 |                 </div>
407 |             </div>
408 |         );
409 |     }
410 | }
411 | 


--------------------------------------------------------------------------------
/Views/Components/Jobs.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import Pager from 'react-pager';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Jobs extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             jobs: null,
 14 |             error: null,
 15 |             current: 0
 16 |         }
 17 | 
 18 |         this.handlePageChanged = this.handlePageChanged.bind(this);
 19 |     }
 20 | 
 21 |     componentDidMount() {
 22 |         var self = this;
 23 | 
 24 |         const makeRequest = () => {
 25 |             this.props.location.search ?
 26 |                 axios.get("/api/jobs" + this.props.location.search)
 27 |                     .then(({ data }) => this.setState({ jobs: data }))
 28 |                     .catch((error) => this.setState({ error: error })) :
 29 |                 axios.get("/api/jobs")
 30 |                     .then(({ data }) => this.setState({ jobs: data }))
 31 |                     .catch((error) => this.setState({ error: error }))
 32 |         }
 33 | 
 34 |         this.serverRequest = makeRequest();
 35 | 
 36 |         this.poll = setInterval(() => {
 37 |             this.serverRequest = makeRequest();
 38 |         }, 3000);
 39 |     }
 40 | 
 41 |     componentWillUnmount() {
 42 |         this.serverRequest.abort();
 43 |         clearInterval(this.poll);
 44 |     }
 45 | 
 46 |     handlePageChanged(newPage) {
 47 |         this.setState({ current: newPage });
 48 |     }
 49 | 
 50 |     render() {
 51 |         const { jobs, error, current } = this.state;
 52 |         const itemsPerPage = 15;
 53 | 
 54 |         if (error) {
 55 |             return (
 56 |                 <div className="container-fluid">
 57 |                     <div className="text-center">
 58 |                         <h1>Oops!</h1>
 59 |                         <p>Something went wrong and the list of <strong>jobs</strong> could not be loaded.</p>
 60 |                     </div>
 61 |                 </div>
 62 |             )
 63 |         }
 64 | 
 65 |         if (jobs === null) {
 66 |             return null
 67 |         }
 68 | 
 69 |         var visibleItems = jobs.slice(itemsPerPage * current, (itemsPerPage * current) + itemsPerPage);
 70 | 
 71 |         return (
 72 |             <div>
 73 |                 <div className="row">
 74 |                     <div className="col-md-12">
 75 |                         <div className="panel panel-default">
 76 |                             <div className="panel-heading">
 77 |                                 <h3 className="panel-title text-center">Jobs</h3>
 78 |                             </div>
 79 |                             <div className="panel-body">
 80 |                                 <div className="table-responsive">
 81 |                                     <table className="table table-hover">
 82 |                                         <thead>
 83 |                                             <tr>
 84 |                                                 <th className="col-sm-2">ID</th>
 85 |                                                 <th className="col-sm-1">Type</th>
 86 |                                                 <th className="col-sm-1">Priority</th>
 87 |                                                 <th className="col-sm-1">Task Groups</th>
 88 |                                                 <th className="col-sm-1">Queued</th>
 89 |                                                 <th className="col-sm-1">Starting</th>
 90 |                                                 <th className="col-sm-1">Running</th>
 91 |                                                 <th className="col-sm-1">Failed</th>
 92 |                                                 <th className="col-sm-1">Lost</th>
 93 |                                                 <th className="col-sm-1">Complete</th>
 94 |                                                 <th className="col-sm-1">Status</th>
 95 |                                             </tr>
 96 |                                         </thead>
 97 |                                         <tbody>
 98 |                                             {visibleItems.map((job) => {
 99 |                                                 return (
100 |                                                     <tr>
101 |                                                         <td><a href={"/job?id=" + job.id}>{job.id}</a></td>
102 |                                                         <td>{job.type}</td>
103 |                                                         <td>{job.priority}</td>
104 |                                                         <td>{job.numOfTaskGroups}</td>
105 |                                                         <td>{job.queuedTaskGroups}</td>
106 |                                                         <td>{job.startingTaskGroups}</td>
107 |                                                         <td>{job.runningTaskGroups}</td>
108 |                                                         <td>{job.failedTaskGroups}</td>
109 |                                                         <td>{job.lostTaskGroups}</td>
110 |                                                         <td>{job.completeTaskGroups}</td>
111 |                                                         <td>{job.status}</td>
112 |                                                     </tr>
113 |                                                 )
114 |                                             })}
115 |                                         </tbody>
116 |                                     </table>
117 |                                 </div>
118 | 
119 |                                 {jobs.length > 15 ?
120 |                                     <div className="text-center">
121 |                                         <Pager
122 |                                             total={Math.ceil(jobs.length / itemsPerPage)}
123 |                                             current={this.state.current}
124 |                                             visiblePages={10}
125 |                                             onPageChanged={this.handlePageChanged}
126 |                                         />
127 |                                     </div> :
128 |                                     <div></div>
129 |                                 }
130 |                             </div>
131 |                         </div>
132 |                     </div>
133 |                 </div>
134 |             </div>
135 |         );
136 |     }
137 | }
138 | 


--------------------------------------------------------------------------------
/Views/Components/Server.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import moment from 'moment';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Server extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             server: null,
 14 |             error: null
 15 |         }
 16 |     }
 17 | 
 18 |     componentDidMount() {
 19 |         var self = this;
 20 | 
 21 |         const makeRequest = () =>
 22 |             axios.get("/api/server" + this.props.location.search)
 23 |                 .then(({ data }) => this.setState({ server: data }))
 24 |                 .catch((error) => this.setState({ error: error }))
 25 | 
 26 |         this.serverRequest = makeRequest();
 27 | 
 28 |         this.poll = setInterval(() => {
 29 |             this.serverRequest = makeRequest();
 30 |         }, 3000);
 31 |     }
 32 | 
 33 |     componentWillUnmount() {
 34 |         this.serverRequest.abort();
 35 |         clearInterval(this.poll);
 36 |     }
 37 | 
 38 |     render() {
 39 |         const { server, error } = this.state;
 40 | 
 41 |         if (error) {
 42 |             return (
 43 |                 <div className="container-fluid">
 44 |                     <div className="text-center">
 45 |                         <h1>Oops!</h1>
 46 |                         <p>Something went wrong and the <strong>server</strong> you've selected could not be loaded.</p>
 47 |                     </div>
 48 |                 </div>
 49 |             )
 50 |         }
 51 | 
 52 |         if (server === null) {
 53 |             return null
 54 |         }
 55 | 
 56 |         return (
 57 |             <div>
 58 |                 <div className="row">
 59 |                     <div className="col-sm-4">
 60 |                         <div className="panel panel-default">
 61 |                             <div className="panel-heading">
 62 |                                 <h3 className="panel-title text-center">Server Properties</h3>
 63 |                             </div>
 64 |                             <div className="panel-body">
 65 |                                 <ul className="list-group">
 66 |                                     <li className="list-group-item"><strong>Name:</strong> {server.member.name}</li>
 67 |                                     <li className="list-group-item"><strong>Address:</strong> {server.member.addr}</li>
 68 |                                     <li className="list-group-item"><strong>Port:</strong> {server.member.port}</li>
 69 |                                     <li className="list-group-item">
 70 |                                         {server.member.operator.servers.map((s) => {
 71 |                                             return (
 72 |                                                 <div>
 73 |                                                     {server.member.name === s.node ? <span><strong>Voter:</strong> {s.voter.toString()}</span> : <span></span>}
 74 |                                                 </div>
 75 |                                             )
 76 |                                         })}
 77 |                                     </li>
 78 |                                     <li className="list-group-item">
 79 |                                         {server.member.operator.servers.map((s) => {
 80 |                                             return (
 81 |                                                 <div>
 82 |                                                     {server.member.name === s.node ? <span><strong>Leader:</strong> {s.leader.toString()}</span> : <span></span>}
 83 |                                                 </div>
 84 |                                             )
 85 |                                         })}
 86 |                                     </li>
 87 |                                     <li className="list-group-item"><strong>Status:</strong> {server.member.status}</li>
 88 |                                 </ul>
 89 |                             </div>
 90 |                         </div>
 91 |                     </div>
 92 | 
 93 |                     <div className="col-sm-4">
 94 |                         <div className="panel panel-default">
 95 |                             <div className="panel-heading">
 96 |                                 <h3 className="panel-title text-center">Server Configuration</h3>
 97 |                             </div>
 98 |                             <div className="panel-body">
 99 |                                 <ul className="list-group">
100 |                                     <li className="list-group-item"><strong>Region:</strong> {server.config.region}</li>
101 |                                     <li className="list-group-item"><strong>Datacenter:</strong> {server.config.datacenter}</li>
102 |                                     <li className="list-group-item"><strong>Data Directory:</strong> {server.config.dataDir}</li>
103 |                                     <li className="list-group-item">
104 |                                         <strong>Files:</strong>
105 |                                         {server.config.files.map((file) => {
106 |                                             return (
107 |                                                 <ul className="list-group list-group-condensed">
108 |                                                     <li className="list-group-item list-group-item-condensed">{file}</li>
109 |                                                 </ul>
110 |                                             )
111 |                                         })}
112 |                                     </li>
113 |                                     <li className="list-group-item"><strong>Log Level:</strong> {server.config.logLevel}</li>
114 |                                     <li className="list-group-item"><strong>Bind Address:</strong> {server.config.bindAddr}</li>
115 |                                     <li className="list-group-item">
116 |                                         <strong>Advertise Addresses:</strong>
117 |                                         <ul className="list-group list-group-condensed">
118 |                                             <li className="list-group-item list-group-item-condensed">{server.config.advertiseAddrs.http}</li>
119 |                                             <li className="list-group-item list-group-item-condensed">{server.config.advertiseAddrs.rpc}</li>
120 |                                             <li className="list-group-item list-group-item-condensed">{server.config.advertiseAddrs.serf}</li>
121 |                                         </ul>
122 |                                     </li>
123 |                                     <li className="list-group-item"><strong>Nomad Version:</strong> {server.config.version}</li>
124 |                                 </ul>
125 |                             </div>
126 |                         </div>
127 |                     </div>
128 |                 </div>
129 |             </div>
130 |         );
131 |     }
132 | }
133 | 


--------------------------------------------------------------------------------
/Views/Components/Servers.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import axios from 'axios';
  3 | import Pager from 'react-pager';
  4 | 
  5 | global.jQuery = require('jquery');
  6 | var bootstrap = require('bootstrap');
  7 | 
  8 | export default class Servers extends React.Component {
  9 |     constructor(props) {
 10 |         super(props);
 11 | 
 12 |         this.state = {
 13 |             servers: null,
 14 |             error: null,
 15 |             current: 0
 16 |         }
 17 | 
 18 |         this.handlePageChanged = this.handlePageChanged.bind(this);
 19 |     }
 20 | 
 21 |     componentDidMount() {
 22 |         var self = this;
 23 | 
 24 |         const makeRequest = () => {
 25 |             this.props.location.search ?
 26 |                 axios.get("/api/servers" + this.props.location.search)
 27 |                     .then(({ data }) => this.setState({ servers: data }))
 28 |                     .catch((error) => this.setState({ error: error })) :
 29 |                 axios.get("/api/servers")
 30 |                     .then(({ data }) => this.setState({ servers: data }))
 31 |                     .catch((error) => this.setState({ error: error }))
 32 |         }
 33 | 
 34 |         this.serverRequest = makeRequest();
 35 | 
 36 |         this.poll = setInterval(() => {
 37 |             this.serverRequest = makeRequest();
 38 |         }, 3000);
 39 |     }
 40 | 
 41 |     componentWillUnmount() {
 42 |         this.serverRequest.abort();
 43 |         clearInterval(this.poll);
 44 |     }
 45 | 
 46 |     handlePageChanged(newPage) {
 47 |         this.setState({ current: newPage });
 48 |     }
 49 | 
 50 |     render() {
 51 |         const { servers, error, current } = this.state;
 52 |         const itemsPerPage = 15;
 53 | 
 54 |         if (error) {
 55 |             return (
 56 |                 <div className="container-fluid">
 57 |                     <div className="text-center">
 58 |                         <h1>Oops!</h1>
 59 |                         <p>Something went wrong and the list of <strong>servers</strong> could not be loaded.</p>
 60 |                     </div>
 61 |                 </div>
 62 |             )
 63 |         }
 64 | 
 65 |         if (servers === null) {
 66 |             return null
 67 |         }
 68 | 
 69 |         var visibleItems = servers.slice(itemsPerPage * current, (itemsPerPage * current) + itemsPerPage);
 70 | 
 71 |         return (
 72 |             <div>
 73 |                 <div className="row">
 74 |                     <div className="col-md-12">
 75 |                         <div className="panel panel-default">
 76 |                             <div className="panel-heading">
 77 |                                 <h3 className="panel-title text-center">Servers</h3>
 78 |                             </div>
 79 |                             <div className="panel-body">
 80 |                                 <div className="table-responsive">
 81 |                                     <table className="table table-hover">
 82 |                                         <thead>
 83 |                                             <tr>
 84 |                                                 <th className="col-sm-2">Name</th>
 85 |                                                 <th className="col-sm-2">Address</th>
 86 |                                                 <th className="col-sm-2">Port</th>
 87 |                                                 <th className="col-sm-2">Voter</th>
 88 |                                                 <th className="col-sm-2">Leader</th>
 89 |                                                 <th className="col-sm-2">Status</th>
 90 |                                             </tr>
 91 |                                         </thead>
 92 |                                         <tbody>
 93 |                                             {visibleItems.map((server) => {
 94 |                                                 return (
 95 |                                                     <tr>
 96 |                                                         {server.status === "alive" ?
 97 |                                                             <td><a href={"/server?ip=" + server.addr}>{server.name}</a></td> :
 98 |                                                             <td>{server.name}</td>
 99 |                                                         }
100 |                                                         <td>{server.addr}</td>
101 |                                                         <td>{server.port}</td>
102 |                                                         <td>{server.voter.toString()}</td>
103 |                                                         <td>{server.leader.toString()}</td>
104 |                                                         <td>{server.status}</td>
105 |                                                     </tr>
106 |                                                 )
107 |                                             })}
108 |                                         </tbody>
109 |                                     </table>
110 |                                 </div>
111 | 
112 |                                 {servers.length > 15 ?
113 |                                     <div className="text-center">
114 |                                         <Pager
115 |                                             total={Math.ceil(servers.length / itemsPerPage)}
116 |                                             current={this.state.current}
117 |                                             visiblePages={10}
118 |                                             onPageChanged={this.handlePageChanged}
119 |                                         />
120 |                                     </div> :
121 |                                     <div></div>
122 |                                 }
123 |                             </div>
124 |                         </div>
125 |                     </div>
126 |                 </div>
127 |             </div>
128 |         );
129 |     }
130 | }
131 | 


--------------------------------------------------------------------------------
/Views/Error.cshtml:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <meta charset="utf-8" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |         <title>Nomad</title>
 9 | 
10 |         <link rel="stylesheet" href="~/css/bootstrap.css" />
11 |         <link rel="stylesheet" href="~/css/site.css" />
12 |     </head>
13 | 
14 |     <body>
15 |         @Html.Partial("Header")
16 | 
17 |         <div class="container-fluid">
18 |             <div class="text-center">
19 |                 <h1>¯\_(ツ)_/¯</h1>
20 | 
21 |                 <h1>@ViewData["StatusCode"]</h1>
22 |                 
23 |                 <p>@ViewData["Message"]</p>
24 | 
25 |                 <pre class="stacktrace">@ViewData["StackTrace"]</pre>
26 |             </div>
27 |         </div>
28 |     </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Views/Index.cshtml:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |     <head>
 5 |         <meta charset="utf-8" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |         <title>Nomad</title>
 9 | 
10 |         <link rel="stylesheet" href="~/css/bootstrap.css" />
11 |         <link rel="stylesheet" href="~/css/site.css" />
12 |     </head>
13 | 
14 |     <body>
15 |         @Html.Partial("Header")
16 | 
17 |         <div id="root" class="container-fluid"></div>
18 | 
19 |         <script src="~/js/site.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Views/Shared/Header.cshtml:
--------------------------------------------------------------------------------
 1 | @{
 2 |     var searchPaths = new List<String>();
 3 |     searchPaths.Add("/jobs");
 4 |     searchPaths.Add("/evaluations");
 5 |     searchPaths.Add("/allocations");
 6 |     searchPaths.Add("/clients");
 7 |     searchPaths.Add("/servers");
 8 | }
 9 | 
10 | <nav class="navbar navbar-default">
11 |     <div class="container-fluid">
12 |         <div class="navbar-header">
13 |             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
14 |                 <span class="sr-only">Toggle navigation</span>
15 |                 <span class="icon-bar"></span>
16 |                 <span class="icon-bar"></span>
17 |                 <span class="icon-bar"></span>
18 |             </button>
19 | 
20 |             <a class="navbar-brand" href="/"><img src="~/images/nomad.png" alt="Nomad" height="20"></a>
21 |         </div>
22 | 
23 |         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
24 |             <ul class="nav navbar-nav">
25 |                 <li class="@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == "dashboard" ? "active" : "")"><a href="/">Dashboard</a></li>
26 |                 <li class="@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == "job" ? "active" : "")"><a href="/jobs">Jobs</a></li>
27 |                 <li class="@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == "evaluation" ? "active" : "")"><a href="/evaluations">Evaluations</a></li>
28 |                 <li class="@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == "allocation" ? "active" : "")"><a href="/allocations">Allocations</a></li>
29 |                 <li class="@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == "client" ? "active" : "")"><a href="/clients">Clients</a></li>
30 |                 <li class="@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == "server" ? "active" : "")"><a href="/servers">Servers</a></li>
31 |             </ul>
32 | 
33 |             @if (searchPaths.Contains(Context.Request.Path))
34 |             {
35 |                 <form class="navbar-form navbar-right search" method="get">
36 |                     <div class="form-group">
37 |                         <input type="text" class="form-control" name="search" placeholder="Search">
38 |                     </div>
39 | 
40 |                     <button type="submit" class="btn btn-default">&#8981;</button>
41 |                 </form>
42 |             }
43 |         </div>
44 |     </div>
45 | </nav>
46 | 


--------------------------------------------------------------------------------
/Views/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './Components/App.jsx';
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'));
6 | 


--------------------------------------------------------------------------------
/appsettings.Development.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Logging": {
 3 |     "IncludeScopes": false,
 4 |     "LogLevel": {
 5 |       "Default": "Debug",
 6 |       "System": "Information",
 7 |       "Microsoft": "Information"
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/appsettings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "Logging": {
3 |     "IncludeScopes": false,
4 |     "LogLevel": {
5 |       "Default": "Warning"
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/bundleconfig.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "outputFileName": "wwwroot/css/site.min.css",
 4 |     "inputFiles": [
 5 |       "wwwroot/css/site.css"
 6 |     ]
 7 |   },
 8 |   {
 9 |     "outputFileName": "wwwroot/js/site.min.js",
10 |     "inputFiles": [
11 |       "wwwroot/js/site.js"
12 |     ],
13 |     "minify": {
14 |       "enabled": true,
15 |       "renameLocals": true
16 |     },
17 |     "sourceMap": false
18 |   }
19 | ]
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nomad",
 3 |   "version": "1.0.0",
 4 |   "main": "./Views/index.js",
 5 |   "license": "MIT",
 6 |   "dependencies": {
 7 |     "axios": "0.16.2",
 8 |     "babel-core": "6.25.0",
 9 |     "babel-loader": "7.1.1",
10 |     "babel-preset-es2015": "6.24.1",
11 |     "babel-preset-react": "6.24.1",
12 |     "bootstrap": "3.3.7",
13 |     "chart.js": "2.6.0",
14 |     "jquery": "3.2.1",
15 |     "moment": "2.18.1",
16 |     "react": "15.6.1",
17 |     "react-chartjs-2": "2.1.0",
18 |     "react-dom": "15.6.1",
19 |     "react-pager": "1.3.2",
20 |     "react-router-dom": "4.1.2",
21 |     "webpack": "3.3.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     entry: './Views/index.js',
 3 |     output: {
 4 |         filename: './wwwroot/js/site.js'
 5 |     },
 6 |     module: {
 7 |         loaders: [
 8 |             { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
 9 |             { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
10 |         ]
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/wwwroot/css/site.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |     https://www.w3schools.com/colors/colors_picker.asp
  3 |     black = #1e1e1e
  4 |     dark grey = #262626
  5 |     grey = #333
  6 |     light grey = #666
  7 |     white = #fff
  8 |     green = #1fb58f
  9 |     orange = #eab126
 10 |     red = #f24c4e
 11 | */
 12 | 
 13 | * {
 14 |     border-radius: 0 !important;
 15 | }
 16 | 
 17 | body {
 18 |     color: #fff;
 19 |     background-color: #1e1e1e;
 20 | }
 21 | 
 22 | a,
 23 | a:hover,
 24 | a:focus {
 25 |     color: #1fb58f;
 26 | }
 27 | 
 28 | a:hover {
 29 |     text-decoration: none;
 30 | }
 31 | 
 32 | button {
 33 |     color: #1e1e1e;
 34 |     background-color: #1fb58f;
 35 | }
 36 | 
 37 | button:active,
 38 | button:focus {
 39 |     outline: none !important;
 40 | }
 41 | 
 42 | .row {
 43 |     margin-top: 10px;
 44 | }
 45 | 
 46 | .row-condensed {
 47 |     margin-top: 0;
 48 |     padding-top: 0;
 49 | }
 50 | 
 51 | .navbar-default {
 52 |     background-color: #1fb58f;
 53 |     border: none;
 54 | }
 55 | 
 56 | .navbar-default .navbar-nav > li > a,
 57 | .navbar-default .navbar-nav .dropdown .dropdown-menu > li > a {
 58 |     color: #1e1e1e;
 59 | }
 60 | 
 61 | .navbar-default .navbar-nav > li > a:hover,
 62 | .navbar-default .navbar-nav > li > a:focus,
 63 | .navbar-default .navbar-nav .active > a,
 64 | .navbar-default .navbar-nav .active > a:hover,
 65 | .navbar-default .navbar-nav .active > a:focus {
 66 |     color: #fff;
 67 |     background-color: #1e1e1e;
 68 | }
 69 | 
 70 | .dropdown-toggle:active, .open .dropdown-toggle {
 71 |     color: #fff !important;
 72 |     background-color: #1e1e1e !important;
 73 | }
 74 | 
 75 | .navbar-default .navbar-nav .dropdown .dropdown-menu {
 76 |     background-color: #1fb58f;
 77 |     border: solid 1px #1fb58f;
 78 | }
 79 | 
 80 | .navbar-default .navbar-nav .dropdown .dropdown-menu > li > a:hover,
 81 | .navbar-default .navbar-nav .dropdown .dropdown-menu > li > a:focus {
 82 |     color: #1e1e1e;
 83 |     background-color: #1fb58f;
 84 | }
 85 | 
 86 | .navbar-default .navbar-toggle {
 87 |     margin-top: 9px;
 88 |     background-color: #1e1e1e;
 89 |     border: none;
 90 | }
 91 | 
 92 | .navbar-default .navbar-toggle:hover,
 93 | .navbar-default .navbar-toggle:focus {
 94 |     background-color: #1e1e1e;
 95 | }
 96 | 
 97 | .navbar-default .navbar-toggle .icon-bar {
 98 |     background-color: #fff;
 99 | }
100 | 
101 | .navbar-collapse,
102 | .navbar-form {
103 |     border: none;
104 |     box-shadow: none;
105 | }
106 | 
107 | .search .form-group > input {
108 |     color: #1e1e1e;
109 |     background-color: #1fb58f;
110 |     border: solid 1px #1e1e1e;
111 |     box-shadow: none;
112 | }
113 | 
114 | .search > button,
115 | .search > button:hover,
116 | .search > button:focus {
117 |     color: #fff;
118 |     background-color: #1e1e1e;
119 |     border: solid 1px #1e1e1e;
120 | }
121 | 
122 | .search .form-group > input::-webkit-input-placeholder { color: #1e1e1e; }
123 | .search .form-group > input:-webkit-input-placeholder { color: #1e1e1e; }
124 | .search .form-group > input:-moz-placeholder { color: #1e1e1e; }
125 | .search .form-group > input::-moz-placeholder { color: #1e1e1e; }
126 | .search .form-group > input::-ms-input-placeholder { color: #1e1e1e; }
127 | .search .form-group > input:-ms-input-placeholder { color: #1e1e1e; }
128 | 
129 | .panel {
130 |     box-shadow: 0 1px 30px rgba(0, 0, 0, 0.4)
131 | }
132 | 
133 | .panel,
134 | .panel .panel-heading {
135 |     color: #fff;
136 |     background-color: #1e1e1e;
137 |     border: none;
138 | }
139 | 
140 | .table-responsive {
141 |     border: none;
142 | }
143 | 
144 | .table > thead > tr > th,
145 | .table > tbody > tr > td {
146 |     border: none;
147 | }
148 | 
149 | .table > tbody > tr:nth-child(2n+1) {
150 |     background-color: #262626;
151 | }
152 | 
153 | .table > tbody > tr:hover {
154 |     background-color: #333;
155 | }
156 | 
157 | .pagination > li > a {
158 |     outline: none;
159 | }
160 | 
161 | .pagination > li > a,
162 | .pagination > li > a:hover,
163 | .pagination > li > a:focus,
164 | .pagination .disabled > a,
165 | .pagination .disabled > a:hover,
166 | .pagination .disabled > a:focus {
167 |     color: #1e1e1e;
168 |     background-color: #1fb58f;
169 |     border-color: #1fb58f;
170 | }
171 | 
172 | .pagination .active > a,
173 | .pagination .active > a:hover,
174 | .pagination .active > a:focus {
175 |     color: #fff;
176 |     background-color: #1e1e1e;
177 |     border: solid 1px #1e1e1e;
178 | }
179 | 
180 | .pagination > li > a,
181 | .pagination > li > a:hover,
182 | .pagination > li > a:focus {
183 |     cursor: pointer;
184 | }
185 | 
186 | .list-group-condensed {
187 |     margin: 0;
188 |     padding: 0;
189 |     list-style: none;
190 | }
191 | 
192 | .list-group-item {
193 |     background-color: #1e1e1e;
194 |     border: none;
195 | }
196 | 
197 | .list-group-item-condensed {
198 |     margin-bottom: 0;
199 |     padding-bottom: 0;
200 | }
201 | 
202 | .log-content,
203 | .stacktrace {
204 |     white-space: pre-wrap;
205 |     color: #fff;
206 |     background-color: #1e1e1e;
207 |     max-height: 800px;
208 |     border: none;
209 | }
210 | 
211 | .loading {
212 |     position: absolute;
213 |     top: 8px;
214 |     left: 20px;
215 |     width: 50px;
216 | }
217 | 
218 | #attributeModal > .modal-dialog > .modal-content {
219 |     background-color: #1e1e1e;
220 |     border: solid 1px #1fb58f;
221 | }
222 | 
223 | #attributeModal > .modal-dialog > .modal-content > .modal-body {
224 |     margin: 0;
225 |     padding: 1px;
226 | }
227 | 
228 | #attributeModal > .modal-dialog > .modal-content > .modal-body > ul {
229 |     margin: 0;
230 | }
231 | 
232 | #attributeModal > .modal-dialog > .modal-content > .modal-body > ul > li {
233 |     word-wrap: break-word;
234 | }
235 | 
236 | .border {
237 |     border: solid 1px red;
238 | }
239 | 


--------------------------------------------------------------------------------
/wwwroot/css/site.min.css:
--------------------------------------------------------------------------------
1 | *{border-radius:0 !important}body{color:#fff;background-color:#1e1e1e}a,a:hover,a:focus{color:#1fb58f}a:hover{text-decoration:none}button{color:#1e1e1e;background-color:#1fb58f}button:active,button:focus{outline:none !important}.row{margin-top:10px}.row-condensed{margin-top:0;padding-top:0}.navbar-default{background-color:#1fb58f;border:none}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav .dropdown .dropdown-menu>li>a{color:#1e1e1e}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav .active>a,.navbar-default .navbar-nav .active>a:hover,.navbar-default .navbar-nav .active>a:focus{color:#fff;background-color:#1e1e1e}.dropdown-toggle:active,.open .dropdown-toggle{color:#fff !important;background-color:#1e1e1e !important}.navbar-default .navbar-nav .dropdown .dropdown-menu{background-color:#1fb58f;border:solid 1px #1fb58f}.navbar-default .navbar-nav .dropdown .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .dropdown .dropdown-menu>li>a:focus{color:#1e1e1e;background-color:#1fb58f}.navbar-default .navbar-toggle{margin-top:9px;background-color:#1e1e1e;border:none}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#1e1e1e}.navbar-default .navbar-toggle .icon-bar{background-color:#fff}.navbar-collapse,.navbar-form{border:none;box-shadow:none}.search .form-group>input{color:#1e1e1e;background-color:#1fb58f;border:solid 1px #1e1e1e;box-shadow:none}.search>button,.search>button:hover,.search>button:focus{color:#fff;background-color:#1e1e1e;border:solid 1px #1e1e1e}.search .form-group>input::-webkit-input-placeholder{color:#1e1e1e}.search .form-group>input:-webkit-input-placeholder{color:#1e1e1e}.search .form-group>input:-moz-placeholder{color:#1e1e1e}.search .form-group>input::-moz-placeholder{color:#1e1e1e}.search .form-group>input::-ms-input-placeholder{color:#1e1e1e}.search .form-group>input:-ms-input-placeholder{color:#1e1e1e}.panel{box-shadow:0 1px 30px rgba(0,0,0,.4)}.panel,.panel .panel-heading{color:#fff;background-color:#1e1e1e;border:none}.table-responsive{border:none}.table>thead>tr>th,.table>tbody>tr>td{border:none}.table>tbody>tr:nth-child(2n+1){background-color:#262626}.table>tbody>tr:hover{background-color:#333}.pagination>li>a{outline:none}.pagination>li>a,.pagination>li>a:hover,.pagination>li>a:focus,.pagination .disabled>a,.pagination .disabled>a:hover,.pagination .disabled>a:focus{color:#1e1e1e;background-color:#1fb58f;border-color:#1fb58f}.pagination .active>a,.pagination .active>a:hover,.pagination .active>a:focus{color:#fff;background-color:#1e1e1e;border:solid 1px #1e1e1e}.pagination>li>a,.pagination>li>a:hover,.pagination>li>a:focus{cursor:pointer}.list-group-condensed{margin:0;padding:0;list-style:none}.list-group-item{background-color:#1e1e1e;border:none}.list-group-item-condensed{margin-bottom:0;padding-bottom:0}.log-content,.stacktrace{white-space:pre-wrap;color:#fff;background-color:#1e1e1e;max-height:800px;border:none}.loading{position:absolute;top:8px;left:20px;width:50px}#attributeModal>.modal-dialog>.modal-content{background-color:#1e1e1e;border:solid 1px #1fb58f}#attributeModal>.modal-dialog>.modal-content>.modal-body{margin:0;padding:1px}#attributeModal>.modal-dialog>.modal-content>.modal-body>ul{margin:0}#attributeModal>.modal-dialog>.modal-content>.modal-body>ul>li{word-wrap:break-word}.border{border:solid 1px #f00}


--------------------------------------------------------------------------------
/wwwroot/images/collage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cvandal/nomad-ui/db098f1ae8e8570451e0714347e23a846bb7f74e/wwwroot/images/collage.png


--------------------------------------------------------------------------------
/wwwroot/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cvandal/nomad-ui/db098f1ae8e8570451e0714347e23a846bb7f74e/wwwroot/images/loading.gif


--------------------------------------------------------------------------------
/wwwroot/images/nomad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cvandal/nomad-ui/db098f1ae8e8570451e0714347e23a846bb7f74e/wwwroot/images/nomad.png


--------------------------------------------------------------------------------