init

backend/SiteStatus/SiteStatus/Business/DnsBusiness.cs

 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
+using System.Runtime.CompilerServices;
 using System.Threading.Tasks;
 using ARSoft.Tools.Net.Dns;
+using Microsoft.Extensions.Options;
 using SiteStatus.Dbo;
 
 namespace SiteStatus.Business
 {
     public class DnsBusiness
     {
+        public SettingsDbo Options { get; }
+
+        public DnsBusiness(IOptions<SettingsDbo> options)
+        {
+            Options = options.Value;
+        }
+
         public async Task<DnsZoneStatusDbo> GetZoneStatusAsync(string zone, IEnumerable<string> servers)
         {
             var dnsStatus = new DnsZoneStatusDbo
                 ServerStatus = new List<DnsZoneServerStatusDbo>()
             };
 
+            var list = new List<KeyValuePair<string, Task<List<SoaRecord>>>>();
+            var tasks = new List<Task<List<SoaRecord>>>();
             foreach (var server in servers)
             {
                 try
                 {
                     var resolver = new DnsStubResolver(new []{IPAddress.Parse(server)});
-                    var records = resolver.Resolve<SoaRecord>(zone, RecordType.Soa);
-                    var record = records.FirstOrDefault();
+                    var recordsTask = resolver.ResolveAsync<SoaRecord>(zone, RecordType.Soa);
+                    list.Add(new KeyValuePair<string, Task<List<SoaRecord>>>(server, recordsTask));
+                    tasks.Add(recordsTask);
+                }
+                catch (Exception e)
+                {
+                    tasks.Add(Task.FromResult<List<SoaRecord>>(null));
+                }
+            }
+
+            await Task.WhenAll(tasks.ToArray());
+
+            foreach (var recordResult in list)
+            {
+                try
+                {
+                    var record = recordResult.Value.Result.FirstOrDefault();
                     dnsStatus.ServerStatus.Add(new DnsZoneServerStatusDbo
                     {
-                        Server = server,
+                        Server = recordResult.Key,
                         Soa = record?.ToString()
                     });
                 }
                 {
                     dnsStatus.ServerStatus.Add(new DnsZoneServerStatusDbo
                     {
-                        Server = server,
+                        Server = recordResult.Key,
                         Soa = null
                     });
                 }
 
             return dnsStatus;
         }
+
+        public DnsStatusDbo GetDnsStatus()
+        {
+            var status = new DnsStatusDbo
+            {
+                Views = Options.Dns.Views.Select(view =>
+                {
+                    var servers = view.Servers.Select(server => server.Ip).ToList();
+                    var tasks = view.Zones.Select(zone => GetZoneStatusAsync(zone.Name, servers)).ToArray();
+
+                    Task.WaitAll(tasks);
+
+                    var results = tasks.Select(task => task.Result).ToList();
+
+                    return new DnsStatusViewDbo
+                    {
+                        Name = view.Name,
+                        Zones = results
+                    };
+                }).ToList()
+            };
+
+            return status;
+        }
     }
 }

backend/SiteStatus/SiteStatus/Business/VpnBusiness.cs

+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Options;
+using SiteStatus.Dbo;
+
+namespace SiteStatus.Business
+{
+    public class VpnBusiness
+    {
+        public HostBusiness HostBusiness { get; }
+        public SettingsDbo Options { get; }
+
+        public VpnBusiness(HostBusiness hostBusiness, IOptions<SettingsDbo> options)
+        {
+            HostBusiness = hostBusiness;
+            Options = options.Value;
+        }
+
+        public VpnStatusDbo GetVpnStatus()
+        {
+            var sites = Options.VpnS2s.Sites.Select(site => new SiteStatusDbo
+            {
+                Name = string.IsNullOrEmpty(site.Name) ? null : site.Name,
+                Hosts = site.Hosts.Select(host => new HostStatusDbo
+                {
+                    Ip = host.Ip
+                }).ToList()
+            }).ToList();
+
+            var hosts = sites.SelectMany(site => site.Hosts).ToList();
+            var tasks = hosts.Select(host => HostBusiness.GetHostStatusAsync(host.Ip, Options.VpnS2s.Ping.Count, Options.VpnS2s.Ping.Timeout)).ToArray();
+
+            Task.WaitAll(tasks);
+
+            foreach (var task in tasks)
+            {
+                foreach (var site in sites)
+                {
+                    var hostStatus = site.Hosts.FirstOrDefault(host => host.Ip == task.Result.Ip.ToString());
+                    if (hostStatus != null)
+                    {
+                        var idx = site.Hosts.IndexOf(hostStatus);
+                        site.Hosts[idx] = task.Result;
+                    }
+                }
+            }
+
+            return new VpnStatusDbo
+            {
+                Sites = sites
+            };
+        }
+    }
+}

backend/SiteStatus/SiteStatus/Controllers/StatusController.cs

-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.Extensions.Options;
+using Microsoft.AspNetCore.Mvc;
 using SiteStatus.Business;
 using SiteStatus.Dbo;
 
     [ApiController]
     public class StatusController : SSController
     {
-        protected HostBusiness HostBusiness { get; }
         public DnsBusiness DnsBusiness { get; }
+        public VpnBusiness VpnBusiness { get; }
 
-        public SettingsDbo Options { get; }
-
-        public StatusController(HostBusiness hostBusiness, DnsBusiness dnsBusiness, IOptions<SettingsDbo> options)
+        public StatusController(DnsBusiness dnsBusiness, VpnBusiness vpnBusiness)
         {
-            HostBusiness = hostBusiness;
             DnsBusiness = dnsBusiness;
-            Options = options.Value;
+            VpnBusiness = vpnBusiness;
         }
 
-        [HttpGet("/api/[controller]/hosts")]
-        public ApiResultDbo<List<SiteDbo>> GetHosts()
+        [HttpGet("/api/[controller]/vpn")]
+        public ApiResultDbo<VpnStatusDbo> GetVpnStatus()
         {
-            var sites = Options.VpnS2s.Sites.Select(site => new SiteDbo
-            {
-                Name = string.IsNullOrEmpty(site.Name) ? null : site.Name,
-                Hosts = site.Hosts.Select(host => new HostDbo
-                {
-                    HostStatus = null,
-                    Ip = host.Ip
-                }).ToList()
-            }).ToList();
-
-            var hosts = sites.SelectMany(site => site.Hosts).ToList();
-            var tasks = hosts.Select(host => HostBusiness.GetHostStatusAsync(host.Ip, Options.VpnS2s.Ping.Count, Options.VpnS2s.Ping.Timeout)).ToArray();
-
-            Task.WaitAll(tasks);
+            var result = VpnBusiness.GetVpnStatus();
 
-            foreach (var task in tasks)
-            {
-                hosts.First(host => host.Ip == task.Result.Ip.ToString()).HostStatus = task.Result;
-            }
-
-            return Handle(sites);
+            return Handle(result);
         }
 
         [HttpGet("/api/[controller]/dns")]
-        public ApiResultDbo<List<DnsZoneStatusDbo>> GetDns()
+        public ApiResultDbo<DnsStatusDbo> GetDns()
         {
-            var servers = Options.Dns.Servers.Select(server => server.Ip).ToList();
-            var tasks = Options.Dns.Zones.Select(zone => DnsBusiness.GetZoneStatusAsync(zone.Name, servers)).ToArray();
-
-            Task.WaitAll(tasks);
-
-            var results = tasks.Select(task => task.Result).ToList();
+            var result = DnsBusiness.GetDnsStatus();
 
-            return Handle(results);
+            return Handle(result);
         }
     }
 }

backend/SiteStatus/SiteStatus/Dbo/DnsStatusDbo.cs

+using System.Collections.Generic;
+
+namespace SiteStatus.Dbo
+{
+    public class DnsStatusDbo
+    {
+        public IList<DnsStatusViewDbo> Views { get; set; }
+    }
+}

backend/SiteStatus/SiteStatus/Dbo/DnsStatusViewDbo.cs

+using System.Collections.Generic;
+
+namespace SiteStatus.Dbo
+{
+    public class DnsStatusViewDbo
+    {
+        public string Name { get; set; }
+
+        public IList<DnsZoneStatusDbo> Zones { get; set; }
+    }
+}

backend/SiteStatus/SiteStatus/Dbo/SettingsDbo.cs

-using System.Collections.Generic;
-
-namespace SiteStatus.Dbo
+namespace SiteStatus.Dbo
 {
     public class SettingsDbo
     {

backend/SiteStatus/SiteStatus/Dbo/SettingsDnsDbo.cs

 {
     public class SettingsDnsDbo
     {
-        public IList<SettingsHostDbo> Servers { get; set; }
-
-        public IList<SettingsDnsZoneDbo> Zones { get; set; }
+        public IList<SettingsDnsViewDbo> Views { get; set; }
     }
 }

backend/SiteStatus/SiteStatus/Dbo/SettingsDnsViewDbo.cs

+using System.Collections.Generic;
+
+namespace SiteStatus.Dbo
+{
+    public class SettingsDnsViewDbo
+    {
+        public string Name { get; set; }
+
+        public IList<SettingsHostDbo> Servers { get; set; }
+
+        public IList<SettingsDnsZoneDbo> Zones { get; set; }
+    }
+}

backend/SiteStatus/SiteStatus/Dbo/SiteDbo.cs → backend/SiteStatus/SiteStatus/Dbo/SiteStatusDbo.cs

 
 namespace SiteStatus.Dbo
 {
-    public class SiteDbo
+    public class SiteStatusDbo
     {
         public string Name { get; set; }
 
-        public IList<HostDbo> Hosts { get; set; }
+        public IList<HostStatusDbo> Hosts { get; set; }
     }
 }

backend/SiteStatus/SiteStatus/Dbo/VpnStatusDbo.cs

+using System.Collections.Generic;
+
+namespace SiteStatus.Dbo
+{
+    public class VpnStatusDbo
+    {
+        public IList<SiteStatusDbo> Sites { get; set; }
+    }
+}

backend/SiteStatus/SiteStatus/Startup.cs

 
             services.AddSingleton<HostBusiness>();
             services.AddSingleton<DnsBusiness>();
+            services.AddSingleton<VpnBusiness>();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

backend/SiteStatus/SiteStatus/appsettings.Development.json

           "Name": "aws-eu-central1",
           "Hosts": [
             { "Ip": "10.15.120.10" },
-            { "Ip": "10.15.120.11" },
-            { "Ip": "10.15.120.15" }
+            { "Ip": "10.15.120.11" }
           ]
         },
         {
           "Name": "ovh-rbx5",
           "Hosts": [
-            { "Ip": "10.15.128.10" },
-            { "Ip": "10.15.128.15" }
+            { "Ip": "10.15.128.10" }
           ]
         },
         {
     },
     "Dns":
     {
-      "Servers":
-              [
-                { "Ip": "10.15.0.3" }, { "Ip": "10.15.0.20" },
-                { "Ip": "10.15.8.3" }, { "Ip": "10.15.8.20" },
-                { "Ip": "10.15.16.3" },
-                { "Ip": "10.15.120.10" },
-                { "Ip": "10.15.128.10" }
-              ],
-      "Zones":
-              [
-                { "Name": "2drt.fr" },
-                { "Name": "bc3r.fr" },
-                { "Name": "betaclean.fr" },
-                { "Name": "rthoni.com" },
-                { "Name": "internal.rthoni.com" },
-                { "Name": "internal.rthoni.com" },
-                { "Name": "ad.sso.rthoni.com" },
-                { "Name": "_msdcs.ad.sso.rthoni.com" },
-                { "Name": "ars.rthoni.com" },
-                { "Name": "ars.rthoni.com" },
-                { "Name": "dhcp.ars.rthoni.com" },
-                { "Name": "0.15.10.in-addr.arpa" },
-                { "Name": "lesse.rthoni.com" },
-                { "Name": "lesse.rthoni.com" },
-                { "Name": "dhcp.lesse.rthoni.com" },
-                { "Name": "8.15.10.in-addr.arpa" },
-                { "Name": "aws-eu-central1.rthoni.com" },
-                { "Name": "aws-eu-central1.rthoni.com" },
-                { "Name": "120.15.10.in-addr.arpa" },
-                { "Name": "ovh-rbx5.rthoni.com" },
-                { "Name": "ovh-rbx5.rthoni.com" },
-                { "Name": "128.15.10.in-addr.arpa" }
-              ]
+      "Views": [
+        {
+          "Name": "internal",
+          "Servers": [
+            { "Ip": "10.15.0.3" }, { "Ip": "10.15.0.20" },
+            { "Ip": "10.15.8.3" }, { "Ip": "10.15.8.20" },
+            { "Ip": "10.15.16.3" },
+            { "Ip": "10.15.120.10" },
+            { "Ip": "10.15.128.10" }
+          ],
+          "Zones": [
+            { "Name": "2drt.fr" },
+            { "Name": "bc3r.fr" },
+            { "Name": "betaclean.fr" },
+            { "Name": "rthoni.com" },
+
+            { "Name": "internal.rthoni.com" },
+
+            { "Name": "ad.sso.rthoni.com" },
+            { "Name": "_msdcs.ad.sso.rthoni.com" },
+
+            { "Name": "ars.rthoni.com" },
+            { "Name": "dhcp.ars.rthoni.com" },
+            { "Name": "0.15.10.in-addr.arpa" },
+
+            { "Name": "lesse.rthoni.com" },
+            { "Name": "dhcp.lesse.rthoni.com" },
+            { "Name": "8.15.10.in-addr.arpa" },
+
+            { "Name": "cambridge.rthoni.com" },
+            { "Name": "dhcp.cambridge.rthoni.com" },
+            { "Name": "16.15.10.in-addr.arpa" },
+
+            { "Name": "aws-eu-central1.rthoni.com" },
+            { "Name": "120.15.10.in-addr.arpa" },
+
+            { "Name": "ovh-rbx5.rthoni.com" },
+            { "Name": "128.15.10.in-addr.arpa" }
+          ]
+        },
+        {
+          "Name": "external",
+          "Servers": [
+            { "Ip": "5.39.80.77" }, { "Ip": "52.58.80.7" },
+            { "Ip": "8.8.8.8" },
+            { "Ip": "208.67.222.222" }
+          ],
+          "Zones": [
+            { "Name": "2drt.fr" },
+            { "Name": "bc3r.fr" },
+            { "Name": "betaclean.fr" },
+            { "Name": "rthoni.com" }
+          ]
+        }
+      ]
     }
   }
 }

frontend/Dockerfile

-FROM debian:jessie AS builder
+FROM robinthoni/debian-multiarch:jessie AS builder
 
 # FROM https://github.com/ZHAJOR/Docker-Apache-2.4-Php-5.6-for-Laravel
 MAINTAINER Robin Thoni <robin@rthoni.com>
         git \
         curl && \
         apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/ && \
-        curl https://deb.nodesource.com/setup_7.x | bash && \
+        curl https://deb.nodesource.com/setup_10.x | bash && \
         ln -s /usr/bin/nodejs /usr/bin/node
 
 RUN apt-get update && apt-get -y install \
         nodejs && \
         apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/
 
-RUN npm install -g bower && \
-        npm install -g grunt
+RUN npm install -g @angular/cli
 
 COPY ./SiteStatus/ /tmp/frontend
 
 RUN cd /tmp/frontend && \
+    rm -rf node_modules dist && \
     npm install && \
-    bower --allow-root install && \
-    for gruntfile in Gruntfile_*; do grunt --gruntfile "${gruntfile}"; done && \
+    ng build && \
     mkdir -p /var/www/ && \
-    cp -r /tmp/frontend/build/release/ /var/www/html && \
+    cp -r /tmp/frontend/dist/SiteStatus/ /var/www/html && \
     rm -rf /tmp/frontend
 
-FROM debian:jessie
+FROM robinthoni/debian-multiarch:jessie
 
 RUN apt-get update && apt-get -y install \
         apache2=2.4.* && \

frontend/SiteStatus/package-lock.json

         "tslib": "^1.9.0"
       }
     },
+    "@ngrx/core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/core/-/core-1.2.0.tgz",
+      "integrity": "sha1-iCtGq6+i4ObYh8txobLC+j5tDcY="
+    },
     "@ngrx/store": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-6.1.0.tgz",
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

frontend/SiteStatus/package.json

     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "@ngrx/core": "^1.2.0",
     "@ngrx/store": "^6.1.0",
     "@ngx-translate/core": "^10.0.2",
     "@ngx-translate/http-loader": "^3.0.1",

frontend/SiteStatus/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {StatusComponent} from './views/status-component/status.component';
+import {VpnStatusComponent} from './views/vpn-status-component/vpn-status.component';
+import {DnsStatusComponent} from './views/dns-status-component/dns-status.component';
 
 const routes: Routes = [
-    { path: '', redirectTo: '/status', pathMatch: 'full' },
-    { path: 'status', component: StatusComponent },
+    { path: '', redirectTo: '/status/vpn', pathMatch: 'full' },
+    { path: 'status/vpn', component: VpnStatusComponent },
+    { path: 'status/dns', component: DnsStatusComponent },
 ];
 
 @NgModule({

frontend/SiteStatus/src/app/app.component.html

 <mat-sidenav-container class="all-wrap" fullscreen>
-    <mat-sidenav [mode]="uiStatus.sideMenu.mode" [opened]="uiStatus.sideMenu.opened" #sidenav>
+    <mat-sidenav [mode]="(uiState$ | async)?.sidenav.mode" [opened]="(uiState$ | async)?.sidenav.opened" #sidenav>
         <header>
             <mat-toolbar color="primary">
                 {{ 'common.appName' | translate }}
         <!--<h4>Test</h4>-->
         <mat-list class="sidenav-menu">
             <mat-list-item class="sidenav-menu-title">{{ 'common.appName' | translate }}</mat-list-item>
-            <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-item">HOME</a></mat-list-item>
+            <mat-list-item><a [routerLink]="['/status/vpn']" mat-button class="sidenav-menu-btn-item">VPN</a></mat-list-item>
+            <mat-list-item><a [routerLink]="['/status/dns']" mat-button class="sidenav-menu-btn-item">DNS</a></mat-list-item>
             <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-item">SOME STUFF  <mat-icon>keyboard_arrow_down</mat-icon></a></mat-list-item>
             <div style="height: auto; overflow: hidden">
                 <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 1</a></mat-list-item>
     <div class="page-wrap">
         <header role="banner">
             <mat-toolbar color="primary">
-                <button *ngIf="uiStatus.toolbar.displayMenuButton"
+                <button *ngIf="(uiState$ | async)?.sidenav.displayMenuButton"
                         type="button"
                         mat-icon-button
                         (click)="sidenav.open()"
                         title="Open sidenav">
                     <mat-icon>menu</mat-icon>
                 </button>
-                {{ 'common.appName' | translate }}
+                {{ (uiState$ | async)?.toolbar.title }}
             </mat-toolbar>
         </header>
         <main class="content">

frontend/SiteStatus/src/app/app.component.ts

 import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
 import {MediaChange, ObservableMedia} from '@angular/flex-layout';
 import {CgBusyDefaults} from 'angular-busy2';
+import {AppStateService} from './services/app-state.service';
+import {UiStateViewModel} from './view-models/ui/ui-state.view-model';
+import {Observable} from 'rxjs';
+import {Title} from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
 })
 export class AppComponent implements OnInit {
     title = 'Site Status';
-    uiStatus = {
-      sideMenu: {
-        opened: false,
-        mode: 'over'
-      },
-      toolbar: {
-          displayMenuButton: true
-      }
-    };
-    mediaWatcher = null;
 
     @ViewChild('cgBusyTemplate')
     private cgBusyTemplate: TemplateRef<any>;
 
-    constructor(media: ObservableMedia, private busyDefaults: CgBusyDefaults) {
-        this.mediaWatcher = media.subscribe((change: MediaChange) => {
+    public uiState$: Observable<UiStateViewModel>;
+
+    constructor(private busyDefaults: CgBusyDefaults, private titleService: Title,
+                media: ObservableMedia, appStateService: AppStateService) {
+        media.subscribe((change: MediaChange) => {
             if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
-                this.uiStatus.sideMenu.opened = false;
-                this.uiStatus.sideMenu.mode = 'over';
-                this.uiStatus.toolbar.displayMenuButton = true;
+                appStateService.setUiStateMobile();
             } else {
-                this.uiStatus.sideMenu.opened = true;
-                this.uiStatus.sideMenu.mode = 'side';
-                this.uiStatus.toolbar.displayMenuButton = false;
+                appStateService.setUiStateDesktop();
             }
         });
+
+        this.uiState$ = appStateService.onUiStateUpdated();
+        this.uiState$.subscribe(this.onUiStateChange.bind(this));
+    }
+
+    onUiStateChange(state: UiStateViewModel) {
+        this.titleService.setTitle(state.page.title);
     }
 
     ngOnInit() {

frontend/SiteStatus/src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule, Title} from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import {AppRoutingModule} from './app-routing.module';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
-import {StatusComponent} from './views/status-component/status.component';
+import {VpnStatusComponent} from './views/vpn-status-component/vpn-status.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
     MatButtonModule,
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatTableModule} from '@angular/material/table';
+import {MatSelectModule} from '@angular/material/select';
 import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {CgBusyModule} from 'angular-busy2';
 import {StatusLedDirective} from './directives/status-led.directive';
+import {VpnStatusUpdated, UiStateUpdated, DnsStatusUpdated} from './services/app-state.service';
+import {StoreModule} from '@ngrx/store';
+import {DnsStatusComponent} from './views/dns-status-component/dns-status.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/languages/');
 @NgModule({
   declarations: [
     AppComponent,
-    StatusComponent,
+    VpnStatusComponent,
+    DnsStatusComponent,
     StatusLedDirective
   ],
   imports: [
     MatProgressBarModule,
     MatExpansionModule,
     MatTableModule,
+    MatSelectModule,
     TranslateModule.forRoot({
         loader: {
             provide: TranslateLoader,
         }
     }),
     FlexLayoutModule,
-    CgBusyModule
+    CgBusyModule,
+    StoreModule.forRoot({
+        uiState: UiStateUpdated.uiStateVMReducer,
+        vpnStatus: VpnStatusUpdated.vpnStatusReducer,
+        vpnStatusVM: VpnStatusUpdated.vpnStatusVMReducer,
+        dnsStatus: DnsStatusUpdated.dnsStatusReducer,
+        dnsStatusVM: DnsStatusUpdated.dnsStatusVMReducer,
+        dnsStatusPerServerVM: DnsStatusUpdated.dnsStatusPerServerVMReducer
+    })
   ],
-  providers: [],
+  providers: [Title],
   bootstrap: [AppComponent]
 })
 export class AppModule {

frontend/SiteStatus/src/app/models/dns/dns-status.model.ts

+import {DnsViewStatusModel} from './dns-view-status.model';
+
+export class DnsStatusModel {
+    views: DnsViewStatusModel[];
+}

frontend/SiteStatus/src/app/models/dns/dns-view-status.model.ts

+import {DnsZoneStatusModel} from './dns-zone-status.model';
+
+export class DnsViewStatusModel {
+    name: string;
+    zones: DnsZoneStatusModel[];
+}

frontend/SiteStatus/src/app/models/dns/dns-zone-server-status.model.ts

+export class DnsZoneServerStatusModel {
+    server: string;
+    soa: string;
+}

frontend/SiteStatus/src/app/models/dns/dns-zone-status.model.ts

+import {DnsZoneServerStatusModel} from './dns-zone-server-status.model';
+
+export class DnsZoneStatusModel {
+    zone: string;
+    serverStatus: DnsZoneServerStatusModel[];
+}

frontend/SiteStatus/src/app/models/host.model.ts

-import {HostStatusModel} from './host-status.model';
-
-export class HostModel {
-    ip: string;
-    hostStatus: HostStatusModel;
-}

frontend/SiteStatus/src/app/models/site.model.ts

-import {HostModel} from './host.model';
-
-export class SiteModel {
-    name: string;
-    hosts: HostModel[];
-}

frontend/SiteStatus/src/app/models/vpn/site-status.model.ts

+import {HostStatusModel} from './host-status.model';
+
+export class SiteStatusModel {
+    name: string;
+    hosts: HostStatusModel[];
+}

frontend/SiteStatus/src/app/models/vpn/vpn-status.model.ts

+import {SiteStatusModel} from './site-status.model';
+
+export class VpnStatusModel {
+    sites: SiteStatusModel[];
+}

frontend/SiteStatus/src/app/services/app-state.service.ts

+import {Action, select, Store} from '@ngrx/store';
+import {Observable} from 'rxjs';
+import {Injectable} from '@angular/core';
+import {HostStatusViewModel} from '../view-models/vpn/host-status.view-model';
+import {StatusEnumViewModel} from '../view-models/status-enum.view-model';
+import {UiStateViewModel} from '../view-models/ui/ui-state.view-model';
+import {VpnStatusModel} from '../models/vpn/vpn-status.model';
+import {SiteStatusViewModel} from '../view-models/vpn/site-status.view-model';
+import {VpnStatusViewModel} from '../view-models/vpn/vpn-status.view-model';
+import {DnsStatusModel} from '../models/dns/dns-status.model';
+import {DnsStatusViewModel} from '../view-models/dns/by-zone/dns-status.view-model';
+import {DnsZoneStatusViewModel} from '../view-models/dns/by-zone/dns-zone-status.view-model';
+import {DnsZoneServerStatusViewModel} from '../view-models/dns/by-zone/dns-zone-server-status.view-model';
+import {DnsViewStatusViewModel} from '../view-models/dns/by-zone/dns-view-status.view-model';
+import {DnsStatusPerServerViewModel} from '../view-models/dns/by-server/dns-status-per-server.view-model';
+import {DnsViewStatusPerServerViewModel} from '../view-models/dns/by-server/dns-view-status-per-server.view-model';
+import {DnsServerPerServerViewModel} from '../view-models/dns/by-server/dns-server-per-server.view-model';
+
+export class VpnStatusUpdated implements Action {
+    static TYPE = 'VpnStatusUpdated';
+
+    readonly type = VpnStatusUpdated.TYPE;
+
+    constructor(public payload: VpnStatusModel) { }
+
+    static vpnStatusReducer(state: VpnStatusModel, action: Action): VpnStatusModel {
+        switch (action.type) {
+            case VpnStatusUpdated.TYPE:
+                return (action as VpnStatusUpdated).payload;
+        }
+        return state;
+    }
+
+    static vpnStatusVMReducer(state: VpnStatusViewModel, action: Action): VpnStatusViewModel {
+        switch (action.type) {
+            case VpnStatusUpdated.TYPE:
+                const hostStatusVM = (action as VpnStatusUpdated).payload.sites.map(site => {
+                    const siteVm = new SiteStatusViewModel();
+                    siteVm.name = site.name;
+                    siteVm.hosts = site.hosts.map(host => {
+                        const hostVM = new HostStatusViewModel();
+                        hostVM.ip = host.ip;
+                        hostVM.hostname = host.hostname;
+                        hostVM.times = host.times;
+
+                        let allNull = true;
+                        let oneNull = false;
+                        hostVM.timesMin = Number.MAX_SAFE_INTEGER;
+                        hostVM.timesAvg = 0;
+                        hostVM.timesMax = 0;
+                        hostVM.timesLost = 0;
+                        hostVM.times.forEach(p => {
+                            if (p == null) {
+                                ++hostVM.timesLost;
+                                oneNull = true;
+                            } else {
+                                allNull = false;
+                                if (p < hostVM.timesMin) {
+                                    hostVM.timesMin = p;
+                                }
+                                if (p > hostVM.timesMax) {
+                                    hostVM.timesMax = p;
+                                }
+                                hostVM.timesAvg += p;
+                            }
+                        });
+                        if (hostVM.times.length - hostVM.timesLost !== 0) {
+                            hostVM.timesAvg = hostVM.timesAvg / (hostVM.times.length - hostVM.timesLost);
+                        } else {
+                            hostVM.timesMin = null;
+                            hostVM.timesAvg = null;
+                            hostVM.timesMax = null;
+                        }
+
+                        if (allNull) {
+                            hostVM.status = StatusEnumViewModel.Error;
+                        } else if (oneNull) {
+                            hostVM.status = StatusEnumViewModel.Warning;
+                        } else {
+                            hostVM.status = StatusEnumViewModel.Ok;
+                        }
+
+                        return hostVM;
+                    });
+
+                    const status: { [id: number]: number } = {};
+                    status[StatusEnumViewModel.Ok] = 0;
+                    status[StatusEnumViewModel.Warning] = 0;
+                    status[StatusEnumViewModel.Error] = 0;
+
+                    siteVm.hosts.forEach(host => {
+                        ++status[host.status];
+                    });
+                    if (status[StatusEnumViewModel.Error] === siteVm.hosts.length) {
+                        siteVm.status = StatusEnumViewModel.Error;
+                    } else if (status[StatusEnumViewModel.Error] !== 0 || status[StatusEnumViewModel.Warning] !== 0) {
+                        siteVm.status = StatusEnumViewModel.Warning;
+                    } else {
+                        siteVm.status = StatusEnumViewModel.Ok;
+                    }
+
+                    return siteVm;
+                });
+                return {
+                    sites: hostStatusVM
+                };
+        }
+        return state;
+    }
+}
+
+export class DnsStatusUpdated implements Action {
+    static TYPE = 'DnsStatusUpdated';
+
+    readonly type = DnsStatusUpdated.TYPE;
+
+    constructor(public payload: DnsStatusModel) { }
+
+    static convertDnsStatusModel(model: DnsStatusModel): DnsStatusViewModel {
+        const viewsVM: DnsViewStatusViewModel[] = model.views.map(view => {
+            const zonesVM = view.zones.map(zone => {
+                const zoneVM = new DnsZoneStatusViewModel();
+                zoneVM.zone = zone.zone;
+
+                let mostRecentSoaSerial = 0;
+                zone.serverStatus.forEach(server => {
+                    if (server.soa != null) {
+                        const serial = Number(server.soa.split(' ')[6]);
+                        if (serial > mostRecentSoaSerial) {
+                            mostRecentSoaSerial = serial;
+                        }
+                    }
+                });
+
+                zoneVM.serverStatus = zone.serverStatus.map(server => {
+                    const serverVM = new DnsZoneServerStatusViewModel();
+                    serverVM.server = server.server;
+                    serverVM.soa = server.soa;
+                    if (serverVM.soa == null) {
+                        serverVM.status = StatusEnumViewModel.Error;
+                    } else if (serverVM.soa.split(' ')[6] !== String(mostRecentSoaSerial)) {
+                        serverVM.status = StatusEnumViewModel.Warning;
+                    } else {
+                        serverVM.status = StatusEnumViewModel.Ok;
+                    }
+                    return serverVM;
+                });
+
+                const status: { [id: number]: number } = {};
+                status[StatusEnumViewModel.Ok] = 0;
+                status[StatusEnumViewModel.Warning] = 0;
+                status[StatusEnumViewModel.Error] = 0;
+
+                zoneVM.serverStatus.forEach(server => {
+                    ++status[server.status];
+                });
+                if (status[StatusEnumViewModel.Error] === zoneVM.serverStatus.length) {
+                    zoneVM.status = StatusEnumViewModel.Error;
+                } else if (status[StatusEnumViewModel.Error] !== 0 || status[StatusEnumViewModel.Warning] !== 0) {
+                    zoneVM.status = StatusEnumViewModel.Warning;
+                } else {
+                    zoneVM.status = StatusEnumViewModel.Ok;
+                }
+
+                return zoneVM;
+            });
+            return {
+                zones: zonesVM,
+                name: view.name
+            };
+        });
+
+        return {
+            views: viewsVM
+        };
+    }
+
+    static dnsStatusReducer(state: DnsStatusModel, action: Action): DnsStatusModel {
+        switch (action.type) {
+            case DnsStatusUpdated.TYPE:
+                return (action as DnsStatusUpdated).payload;
+        }
+        return state;
+    }
+
+    static dnsStatusVMReducer(state: DnsStatusViewModel, action: Action): DnsStatusViewModel {
+        switch (action.type) {
+            case DnsStatusUpdated.TYPE:
+                return DnsStatusUpdated.convertDnsStatusModel((action as DnsStatusUpdated).payload);
+        }
+        return state;
+    }
+
+    static dnsStatusPerServerVMReducer(state: DnsStatusPerServerViewModel, action: Action): DnsStatusPerServerViewModel {
+        switch (action.type) {
+            case DnsStatusUpdated.TYPE:
+                const dnsStatusVm = DnsStatusUpdated.convertDnsStatusModel((action as DnsStatusUpdated).payload);
+
+                const viewsPSVM: DnsViewStatusPerServerViewModel[] = dnsStatusVm.views.map(view => {
+                    const serversPSVM: DnsServerPerServerViewModel[] = view.zones[0].serverStatus.map(server => {
+                        const zonesPSVM = view.zones.map(zone => {
+                            let soa: string = null;
+                            zone.serverStatus.forEach(serverStatus => {
+                                if (serverStatus.server === server.server) {
+                                    soa = serverStatus.soa;
+                                }
+                            });
+
+                            let zoneVM: DnsZoneStatusViewModel = null;
+                            view.zones.forEach(z => {
+                                if (z.zone === zone.zone) {
+                                    zoneVM = z;
+                                }
+                            });
+
+                            return {
+                                zone: zone.zone,
+                                soa: soa,
+                                status: zoneVM.status
+                            };
+                        });
+
+                        const status: { [id: number]: number } = {};
+                        status[StatusEnumViewModel.Ok] = 0;
+                        status[StatusEnumViewModel.Warning] = 0;
+                        status[StatusEnumViewModel.Error] = 0;
+
+                        let statusPSVM: StatusEnumViewModel = null;
+                        zonesPSVM.forEach(zone => {
+                            ++status[zone.status];
+                        });
+                        if (status[StatusEnumViewModel.Error] === zonesPSVM.length) {
+                            statusPSVM = StatusEnumViewModel.Error;
+                        } else if (status[StatusEnumViewModel.Error] !== 0 || status[StatusEnumViewModel.Warning] !== 0) {
+                            statusPSVM = StatusEnumViewModel.Warning;
+                        } else {
+                            statusPSVM = StatusEnumViewModel.Ok;
+                        }
+
+                        return {
+                            ip: server.server,
+                            zones: zonesPSVM,
+                            status: statusPSVM
+                        };
+                    });
+
+                    return {
+                        name: view.name,
+                        servers: serversPSVM
+                    };
+                });
+
+                return {
+                    views: viewsPSVM
+                };
+        }
+        return state;
+    }
+}
+
+export class UiStateUpdatedMobile implements Action {
+    static TYPE = 'UiStateUpdatedMobile';
+
+    readonly type = UiStateUpdatedMobile.TYPE;
+}
+
+export class UiStateUpdatedDesktop implements Action {
+    static TYPE = 'UiStateUpdatedDesktop';
+
+    readonly type = UiStateUpdatedDesktop.TYPE;
+}
+
+export class UiStateUpdatedTitle implements Action {
+    static TYPE = 'UiStateUpdatedTitle';
+
+    readonly type = UiStateUpdatedTitle.TYPE;
+
+    constructor(public payload: string) {}
+}
+
+export class UiStateUpdatedToolbarTitle implements Action {
+    static TYPE = 'UiStateUpdatedToolbarTitle';
+
+    readonly type = UiStateUpdatedToolbarTitle.TYPE;
+
+    constructor(public payload: string) {}
+}
+
+export class UiStateUpdated implements Action {
+    static INITIAL_STATE: UiStateViewModel = {
+        sidenav: {
+            displayMenuButton: true,
+            mode: 'over',
+            opened: false
+        },
+        page: {
+            title: 'Loading...'
+        },
+        toolbar: {
+            title: 'Loading...'
+        }
+    };
+
+    static TYPE = 'UiStateUpdated';
+
+    readonly type = UiStateUpdated.TYPE;
+
+    constructor(public payload: UiStateViewModel) { }
+
+    static uiStateVMReducer(state: UiStateViewModel = UiStateUpdated.INITIAL_STATE, action: Action): UiStateViewModel {
+        switch (action.type) {
+            case UiStateUpdated.TYPE:
+                return (action as UiStateUpdated).payload;
+            case UiStateUpdatedMobile.TYPE:
+                return {...state, ...{
+                        sidenav: {
+                            opened: false,
+                            mode: 'over',
+                            displayMenuButton: true
+                        }
+                    }};
+            case UiStateUpdatedDesktop.TYPE:
+                return {...state, ...{
+                    sidenav: {
+                        opened: true,
+                        mode: 'side',
+                        displayMenuButton: false
+                    }
+                }};
+            case UiStateUpdatedTitle.TYPE:
+                return {...state, ...{
+                    page: {
+                        title: (action as UiStateUpdatedTitle).payload
+                    }
+                }};
+            case UiStateUpdatedToolbarTitle.TYPE:
+                return {...state, ...{
+                    toolbar: {
+                        title: (action as UiStateUpdatedToolbarTitle).payload
+                    }
+                }};
+        }
+        return state;
+    }
+}
+
+export interface AppStateData {
+    uiState: UiStateViewModel;
+    vpnStatus: VpnStatusModel;
+    vpnStatusVM: VpnStatusViewModel;
+    dnsStatus: DnsStatusModel;
+    dnsStatusVM: DnsStatusViewModel;
+    dnsStatusPerServerVM: DnsStatusPerServerViewModel;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AppStateService {
+    constructor(public store: Store<AppStateData>) { }
+
+    public updateDnsStatus(dnsStatus: DnsStatusModel): void {
+        this.store.dispatch(new DnsStatusUpdated(dnsStatus));
+    }
+
+    public onDnsStatusUpdated(): Observable<DnsStatusViewModel> {
+        return this.store.pipe(select('dnsStatusVM'));
+    }
+
+    public onDnsStatusPerServerUpdated(): Observable<DnsStatusPerServerViewModel> {
+        return this.store.pipe(select('dnsStatusPerServerVM'));
+    }
+
+    public updateVpnStatus(vpnStatus: VpnStatusModel): void {
+        this.store.dispatch(new VpnStatusUpdated(vpnStatus));
+    }
+
+    public onVpnStatusUpdated(): Observable<VpnStatusViewModel> {
+        return this.store.pipe(select('vpnStatusVM'));
+    }
+
+    public updateUiState(uiState: UiStateViewModel): void {
+        this.store.dispatch(new UiStateUpdated(uiState));
+    }
+
+    public setUiStateMobile(): void {
+        this.store.dispatch(new UiStateUpdatedMobile());
+    }
+
+    public setUiStateDesktop(): void {
+        this.store.dispatch(new UiStateUpdatedDesktop());
+    }
+
+    public setUiStateTitle(title: string): void {
+        this.store.dispatch(new UiStateUpdatedTitle(title));
+    }
+
+    public setUiStateToolbarTitle(title: string): void {
+        this.store.dispatch(new UiStateUpdatedToolbarTitle(title));
+    }
+
+    public onUiStateUpdated(): Observable<UiStateViewModel> {
+        return this.store.pipe(select('uiState'));
+    }
+}

frontend/SiteStatus/src/app/services/status.service.ts

 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
-import {SiteModel} from '../models/site.model';
 import {ApiResultModel} from '../models/api-result.model';
+import {AppStateService} from './app-state.service';
+import {VpnStatusModel} from '../models/vpn/vpn-status.model';
+import {DnsStatusModel} from '../models/dns/dns-status.model';
 
 const httpPostOptions = {
     headers: new HttpHeaders({ 'Content-Type': 'application/json' })
 export class StatusService {
     private urlBase = 'api/status';
 
-    constructor(
-        private http: HttpClient) { }
+    constructor(private http: HttpClient, private appStateService: AppStateService) { }
 
-        getHosts(): Observable<ApiResultModel<SiteModel[]>> {
-            return this.http.get<ApiResultModel<SiteModel[]>>(`${this.urlBase}/hosts`);
+        getVpnStatus(): Observable<ApiResultModel<VpnStatusModel>> {
+            const obs = this.http.get<ApiResultModel<VpnStatusModel>>(`${this.urlBase}/vpn`);
+            obs.subscribe(vpnStatus => {
+                this.appStateService.updateVpnStatus(vpnStatus.data);
+            });
+            return obs;
+        }
+
+        getDnsStatus(): Observable<ApiResultModel<DnsStatusModel>> {
+            const obs = this.http.get<ApiResultModel<DnsStatusModel>>(`${this.urlBase}/dns`);
+            obs.subscribe(dnsStatus => {
+                this.appStateService.updateDnsStatus(dnsStatus.data);
+            });
+            return obs;
         }
 }

frontend/SiteStatus/src/app/view-models/dns/by-server/dns-server-per-server.view-model.ts

+import {DnsServerZonePerServerViewModel} from './dns-server-zone-per-server.view-model';
+import {StatusEnumViewModel} from '../../status-enum.view-model';
+
+export class DnsServerPerServerViewModel {
+    ip: string;
+    zones: DnsServerZonePerServerViewModel[];
+    status: StatusEnumViewModel;
+}

frontend/SiteStatus/src/app/view-models/dns/by-server/dns-server-zone-per-server.view-model.ts

+import {StatusEnumViewModel} from '../../status-enum.view-model';
+
+export class DnsServerZonePerServerViewModel {
+    zone: string;
+    soa: string;
+    status: StatusEnumViewModel;
+}

frontend/SiteStatus/src/app/view-models/dns/by-server/dns-status-per-server.view-model.ts

+import {DnsViewStatusPerServerViewModel} from './dns-view-status-per-server.view-model';
+
+export class DnsStatusPerServerViewModel {
+    views: DnsViewStatusPerServerViewModel[];
+}

frontend/SiteStatus/src/app/view-models/dns/by-server/dns-view-status-per-server.view-model.ts

+import {DnsServerPerServerViewModel} from './dns-server-per-server.view-model';
+
+export class DnsViewStatusPerServerViewModel {
+    name: string;
+    servers: DnsServerPerServerViewModel[];
+}

frontend/SiteStatus/src/app/view-models/dns/by-zone/dns-status.view-model.ts

+import {DnsViewStatusViewModel} from './dns-view-status.view-model';
+
+export class DnsStatusViewModel {
+    views: DnsViewStatusViewModel[];
+}

frontend/SiteStatus/src/app/view-models/dns/by-zone/dns-view-status.view-model.ts

+import {DnsZoneStatusViewModel} from './dns-zone-status.view-model';
+
+export class DnsViewStatusViewModel {
+    name: string;
+    zones: DnsZoneStatusViewModel[];
+}

frontend/SiteStatus/src/app/view-models/dns/by-zone/dns-zone-server-status.view-model.ts

+import {StatusEnumViewModel} from '../../status-enum.view-model';
+
+export class DnsZoneServerStatusViewModel {
+    server: string;
+    soa: string;
+    status: StatusEnumViewModel;
+}

frontend/SiteStatus/src/app/view-models/dns/by-zone/dns-zone-status.view-model.ts

+import {DnsZoneServerStatusViewModel} from './dns-zone-server-status.view-model';
+import {StatusEnumViewModel} from '../../status-enum.view-model';
+
+export class DnsZoneStatusViewModel {
+    zone: string;
+    serverStatus: DnsZoneServerStatusViewModel[];
+    status: StatusEnumViewModel;
+}

frontend/SiteStatus/src/app/view-models/ui/ui-dns-view-type-enum.view-model.ts

+export enum UiDnsViewTypeEnumViewModel {
+    ByZone,
+    ByServer
+}

frontend/SiteStatus/src/app/view-models/ui/ui-dns-view-type.view-model.ts

+import {UiDnsViewTypeEnumViewModel} from './ui-dns-view-type-enum.view-model';
+
+export class UiDnsViewTypeViewModel {
+    name: string;
+    value: UiDnsViewTypeEnumViewModel;
+}

frontend/SiteStatus/src/app/view-models/ui/ui-state.view-model.ts

+export class UiStateSideNavViewModel {
+    mode: string;
+    opened: boolean;
+    displayMenuButton: boolean;
+}
+
+export class UiStateToolbarViewModel {
+    title: string;
+}
+
+export class UiStatePageViewModel {
+    title: string;
+}
+
+export class UiStateViewModel {
+    sidenav: UiStateSideNavViewModel;
+    page: UiStatePageViewModel;
+    toolbar: UiStateToolbarViewModel;
+}

frontend/SiteStatus/src/app/view-models/host-status.view-model.ts → frontend/SiteStatus/src/app/view-models/vpn/host-status.view-model.ts

-import {StatusEnumViewModel} from './status-enum.view-model';
+import {StatusEnumViewModel} from '../status-enum.view-model';
 
 export class HostStatusViewModel {
     ip: string;

frontend/SiteStatus/src/app/view-models/site.view-model.ts → frontend/SiteStatus/src/app/view-models/vpn/site-status.view-model.ts

 import {HostStatusViewModel} from './host-status.view-model';
-import {StatusEnumViewModel} from './status-enum.view-model';
+import {StatusEnumViewModel} from '../status-enum.view-model';
 
-export class SiteViewModel {
+export class SiteStatusViewModel {
     name: string;
     hosts: HostStatusViewModel[];
     status: StatusEnumViewModel;

frontend/SiteStatus/src/app/view-models/vpn/vpn-status.view-model.ts

+import {SiteStatusViewModel} from './site-status.view-model';
+
+export class VpnStatusViewModel {
+    sites: SiteStatusViewModel[];
+}

frontend/SiteStatus/src/app/views/dns-status-component/dns-status.component.html

+<div [cgBusy]="promise">
+
+    <mat-form-field>
+        <mat-select placeholder="View by" [(value)]="viewType">
+            <mat-option *ngFor="let viewType of viewTypes" [value]="viewType.value">
+                {{ viewType.name }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <div *ngIf="viewType === viewTypes[0].value">
+        <div *ngFor="let view of (dnsStatus$ | async)?.views;trackBy: trackViewByName">
+
+            <h3>{{ view.name }}</h3>
+
+            <mat-expansion-panel *ngFor="let zoneStatus of view.zones;trackBy: trackZoneByZone">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <span [appStatusLed]="zoneStatus.status"></span>&nbsp;<strong>{{ zoneStatus.zone }}</strong>
+                    </mat-panel-title>
+                    <mat-panel-description>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <table mat-table [dataSource]="zoneStatus.serverStatus" class="mat-elevation-z0" [trackBy]="trackZoneServerByServer">
+                    <ng-container matColumnDef="status">
+                        <th mat-header-cell *matHeaderCellDef> Status </th>
+                        <td mat-cell *matCellDef="let element">  <span [appStatusLed]="element.status"></span> </td>
+                    </ng-container>
+                    <ng-container matColumnDef="server">
+                        <th mat-header-cell *matHeaderCellDef> Server </th>
+                        <td mat-cell *matCellDef="let element"> {{element.server}} </td>
+                    </ng-container>
+                    <ng-container matColumnDef="soa">
+                        <th mat-header-cell *matHeaderCellDef> SOA </th>
+                        <td mat-cell *matCellDef="let element"> {{element.soa}} </td>
+                    </ng-container>
+
+                    <tr mat-header-row *matHeaderRowDef="['status', 'server', 'soa']"></tr>
+                    <tr mat-row *matRowDef="let row; columns: ['status', 'server', 'soa'];"></tr>
+                </table>
+
+            </mat-expansion-panel>
+        </div>
+    </div>
+
+    <div *ngIf="viewType === viewTypes[1].value">
+        <div *ngFor="let view of (dnsStatusPerServer$ | async)?.views;trackBy: trackViewPerServerByName">
+
+            <h3>{{ view.name }}</h3>
+
+            <mat-expansion-panel *ngFor="let server of view.servers;trackBy: trackServerByIp">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <span [appStatusLed]="server.status"></span>&nbsp;<strong>{{ server.ip }}</strong>
+                    </mat-panel-title>
+                    <mat-panel-description>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <table mat-table [dataSource]="server.zones" class="mat-elevation-z0" [trackBy]="trackZonePerServerByZone">
+                    <ng-container matColumnDef="status">
+                        <th mat-header-cell *matHeaderCellDef> Status </th>
+                        <td mat-cell *matCellDef="let element">  <span [appStatusLed]="element.status"></span> </td>
+                    </ng-container>
+                    <ng-container matColumnDef="zone">
+                        <th mat-header-cell *matHeaderCellDef> Zone </th>
+                        <td mat-cell *matCellDef="let element"> {{element.zone}} </td>
+                    </ng-container>
+                    <ng-container matColumnDef="soa">
+                        <th mat-header-cell *matHeaderCellDef> SOA </th>
+                        <td mat-cell *matCellDef="let element"> {{element.soa}} </td>
+                    </ng-container>
+
+                    <tr mat-header-row *matHeaderRowDef="['status', 'zone', 'soa']"></tr>
+                    <tr mat-row *matRowDef="let row; columns: ['status', 'zone', 'soa'];"></tr>
+                </table>
+
+            </mat-expansion-panel>
+        </div>
+    </div>
+
+    <button (click)="onclick()" mat-button mat-raised-button>Reload</button>
+</div>

frontend/SiteStatus/src/app/views/dns-status-component/dns-status.component.ts

+import { Component, OnInit } from '@angular/core';
+import {StatusService} from '../../services/status.service';
+import {AppStateService} from '../../services/app-state.service';
+import {Observable} from 'rxjs';
+import {DnsStatusViewModel} from '../../view-models/dns/by-zone/dns-status.view-model';
+import {DnsZoneStatusViewModel} from '../../view-models/dns/by-zone/dns-zone-status.view-model';
+import {DnsZoneServerStatusViewModel} from '../../view-models/dns/by-zone/dns-zone-server-status.view-model';
+import {DnsViewStatusViewModel} from '../../view-models/dns/by-zone/dns-view-status.view-model';
+import {UiDnsViewTypeViewModel} from '../../view-models/ui/ui-dns-view-type.view-model';
+import {UiDnsViewTypeEnumViewModel} from '../../view-models/ui/ui-dns-view-type-enum.view-model';
+import {DnsStatusPerServerViewModel} from '../../view-models/dns/by-server/dns-status-per-server.view-model';
+import {DnsViewStatusPerServerViewModel} from '../../view-models/dns/by-server/dns-view-status-per-server.view-model';
+import {DnsServerPerServerViewModel} from '../../view-models/dns/by-server/dns-server-per-server.view-model';
+import {DnsServerZonePerServerViewModel} from '../../view-models/dns/by-server/dns-server-zone-per-server.view-model';
+
+@Component({
+    selector: 'app-dns-status',
+    templateUrl: './dns-status.component.html',
+    styleUrls: [ './dns-status.component.css' ]
+})
+export class DnsStatusComponent implements OnInit {
+    promise = null;
+    dnsStatus$: Observable<DnsStatusViewModel> = null;
+    dnsStatusPerServer$: Observable<DnsStatusPerServerViewModel> = null;
+
+    viewTypes: UiDnsViewTypeViewModel[] = [
+        {
+            name: 'Zone',
+            value: UiDnsViewTypeEnumViewModel.ByZone
+        },
+        {
+            name: 'Server',
+            value: UiDnsViewTypeEnumViewModel.ByServer
+        }
+    ];
+    viewType: UiDnsViewTypeEnumViewModel = this.viewTypes[0].value;
+
+    constructor(private appStateService: AppStateService, private statusService: StatusService) {
+        this.dnsStatus$ = appStateService.onDnsStatusUpdated();
+        this.dnsStatusPerServer$ = appStateService.onDnsStatusPerServerUpdated();
+        this.appStateService.setUiStateTitle('DNS Status');
+        this.appStateService.setUiStateToolbarTitle('DNS Status');
+    }
+
+    ngOnInit() {
+        this.getStatus();
+    }
+
+    getStatus(): void {
+        this.promise = this.statusService.getDnsStatus();
+    }
+
+    onclick(): void {
+        this.getStatus();
+    }
+
+    trackViewByName(index: number, view: DnsViewStatusViewModel): string {
+        return view.name;
+    }
+
+    trackZoneByZone(index: number, zone: DnsZoneStatusViewModel): string {
+        return zone.zone;
+    }
+
+    trackZoneServerByServer(index: number, server: DnsZoneServerStatusViewModel): string {
+        return server.server;
+    }
+
+    trackViewPerServerByName(index: number, view: DnsViewStatusPerServerViewModel): string {
+        return view.name;
+    }
+
+    trackServerByIp(index: number, server: DnsServerPerServerViewModel): string {
+        return server.ip;
+    }
+
+    trackZonePerServerByZone(index: number, zone: DnsServerZonePerServerViewModel): string {
+        return zone.zone;
+    }
+}

frontend/SiteStatus/src/app/views/status-component/status.component.ts

-import { Component, OnInit } from '@angular/core';
-import {StatusService} from '../../services/status.service';
-import {SiteViewModel} from '../../view-models/site.view-model';
-import {HostStatusViewModel} from '../../view-models/host-status.view-model';
-import {StatusEnumViewModel} from '../../view-models/status-enum.view-model';
-
-@Component({
-    selector: 'app-status',
-    templateUrl: './status.component.html',
-    styleUrls: [ './status.component.css' ]
-})
-export class StatusComponent implements OnInit {
-    hostsStatus: SiteViewModel[] = [];
-    promise = null;
-
-    constructor(private statusService: StatusService) { }
-
-    ngOnInit() {
-        this.getStatus();
-    }
-
-    getStatus(): void {
-        this.promise = this.statusService.getHosts()
-            .subscribe(hostsStatus => {
-                const hostsStatusData = hostsStatus.data;
-                this.hostsStatus = hostsStatusData.map(site => {
-                    const siteVm = new SiteViewModel();
-                    siteVm.name = site.name;
-                    siteVm.hosts = site.hosts.map(host => {
-                        const hostVM = new HostStatusViewModel();
-                        hostVM.ip = host.hostStatus.ip;
-                        hostVM.hostname = host.hostStatus.hostname;
-                        hostVM.times = host.hostStatus.times;
-
-                        let allNull = true;
-                        let oneNull = false;
-                        hostVM.timesMin = Number.MAX_SAFE_INTEGER;
-                        hostVM.timesAvg = 0;
-                        hostVM.timesMax = 0;
-                        hostVM.timesLost = 0;
-                        hostVM.times.forEach(p => {
-                            if (p == null) {
-                                ++hostVM.timesLost;
-                                oneNull = true;
-                            } else {
-                                allNull = false;
-                                if (p < hostVM.timesMin) {
-                                    hostVM.timesMin = p;
-                                }
-                                if (p > hostVM.timesMax) {
-                                    hostVM.timesMax = p;
-                                }
-                                hostVM.timesAvg += p;
-                            }
-                        });
-                        if (hostVM.times.length - hostVM.timesLost !== 0) {
-                            hostVM.timesAvg = hostVM.timesAvg / (hostVM.times.length - hostVM.timesLost);
-                        } else {
-                            hostVM.timesMin = null;
-                            hostVM.timesAvg = null;
-                            hostVM.timesMax = null;
-                        }
-
-                        if (allNull) {
-                            hostVM.status = StatusEnumViewModel.Error;
-                        } else if (oneNull) {
-                            hostVM.status = StatusEnumViewModel.Warning;
-                        } else {
-                            hostVM.status = StatusEnumViewModel.Ok;
-                        }
-
-                        return hostVM;
-                    });
-
-                    const status: {[id: number]: number} = {};
-                    status[StatusEnumViewModel.Ok] = 0;
-                    status[StatusEnumViewModel.Warning] = 0;
-                    status[StatusEnumViewModel.Error] = 0;
-
-                    siteVm.hosts.forEach(host => {
-                        ++status[host.status];
-                    });
-                    if (status[StatusEnumViewModel.Error] === siteVm.hosts.length) {
-                        siteVm.status = StatusEnumViewModel.Error;
-                    } else if (status[StatusEnumViewModel.Error] !== 0 || status[StatusEnumViewModel.Warning] !== 0) {
-                        siteVm.status = StatusEnumViewModel.Warning;
-                    } else {
-                        siteVm.status = StatusEnumViewModel.Ok;
-                    }
-
-                    return siteVm;
-                });
-            });
-    }
-
-    onclick(): void {
-        this.getStatus();
-    }
-}

frontend/SiteStatus/src/app/views/status-component/status.component.html → frontend/SiteStatus/src/app/views/vpn-status-component/vpn-status.component.html

 <div [cgBusy]="promise">
 
-    <mat-expansion-panel *ngFor="let hostStatus of hostsStatus">
+    <mat-expansion-panel *ngFor="let hostStatus of (vpnStatus$ | async)?.sites;trackBy: trackSiteByName">
         <mat-expansion-panel-header>
             <mat-panel-title>
                 <span [appStatusLed]="hostStatus.status"></span>&nbsp;<strong>{{ hostStatus.name == null ? "Internet" : hostStatus.name }}</strong>
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <table mat-table [dataSource]="hostStatus.hosts" class="mat-elevation-z0">
+        <table mat-table [dataSource]="hostStatus.hosts" class="mat-elevation-z0" [trackBy]="trackHostStatusByIp">
             <ng-container matColumnDef="status">
                 <th mat-header-cell *matHeaderCellDef> Status </th>
                 <td mat-cell *matCellDef="let element">  <span [appStatusLed]="element.status"></span> </td>

frontend/SiteStatus/src/app/views/vpn-status-component/vpn-status.component.ts

+import { Component, OnInit } from '@angular/core';
+import {StatusService} from '../../services/status.service';
+import {AppStateService} from '../../services/app-state.service';
+import {Observable} from 'rxjs';
+import {VpnStatusViewModel} from '../../view-models/vpn/vpn-status.view-model';
+import {SiteStatusViewModel} from '../../view-models/vpn/site-status.view-model';
+import {HostStatusViewModel} from '../../view-models/vpn/host-status.view-model';
+
+@Component({
+    selector: 'app-vpn-status',
+    templateUrl: './vpn-status.component.html',
+    styleUrls: [ './vpn-status.component.css' ]
+})
+export class VpnStatusComponent implements OnInit {
+    promise = null;
+    vpnStatus$: Observable<VpnStatusViewModel> = null;
+
+    constructor(private appStateService: AppStateService, private statusService: StatusService) {
+        this.vpnStatus$ = appStateService.onVpnStatusUpdated();
+        this.appStateService.setUiStateTitle('VPN Status');
+        this.appStateService.setUiStateToolbarTitle('VPN Status');
+    }
+
+    ngOnInit() {
+        this.getStatus();
+    }
+
+    getStatus(): void {
+        this.promise = this.statusService.getVpnStatus();
+    }
+
+    onclick(): void {
+        this.getStatus();
+    }
+
+    trackSiteByName(index: number, site: SiteStatusViewModel): string {
+        return site.name;
+    }
+
+    trackHostStatusByIp(index: number, hostStatus: HostStatusViewModel): string {
+        return hostStatus.ip;
+    }
+}

frontend/SiteStatus/src/index.html

 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-
-  <!--<link rel="stylesheet" href="@angular/material/prebuilt-themes/indigo-pink.css"/>-->
 </head>
-<body class="app-theme">
+<body class="dark-app-theme">
   <app-root></app-root>
 </body>
 </html>

frontend/SiteStatus/src/styles.scss

 
 @import 'theme.scss';
 
-.app-theme {
-    @include angular-material-theme($app-theme);
+.dark-app-theme {
+    @include angular-material-theme($dark-app-theme);
+    .sidenav-menu-title {
+        color: rgb(140, 158, 255) !important;
+    }
+
+    .sidenav-menu-btn-item {
+        color: white !important;
+    }
+
+    .sidenav-menu-btn-sub-item {
+        color: white !important;
+    }
+}
+
+.light-app-theme {
+    @include angular-material-theme($light-app-theme);
 }
 
 /*
 
 .sidenav-menu-title {
     padding-left: 16px !important;
-    color: rgb(140, 158, 255) !important;
+    //color: rgb(140, 158, 255) !important;
 }
 
 .sidenav-menu-btn-item {
     width: 100%;
     text-align: start !important;
-    color: white !important;
+    //color: white !important;
 }
 
 .sidenav-menu-btn-sub-item {
     width: 100%;
     padding-left: 32px !important;
     text-align: start !important;
-    color: white !important;
+    //color: white !important;
 }
 
 .sidenav-menu .mat-list-item-content {

frontend/SiteStatus/src/theme.scss

-$primaryPalette: mat-palette($mat-grey, 700, 300, 900);
-$accentPalette: mat-palette($mat-blue-grey, 400);
-$warnPalette: mat-palette($mat-red, 500);
+$darkPrimaryPalette: mat-palette($mat-grey, 700, 300, 900);
+$darkAccentPalette: mat-palette($mat-blue-grey, 400);
+$darkWarnPalette: mat-palette($mat-red, 500);
 
-$app-theme: mat-dark-theme(
-                $primaryPalette,
-                $accentPalette,
-                $warnPalette
+$dark-app-theme: mat-dark-theme(
+                $darkPrimaryPalette,
+                $darkAccentPalette,
+                $darkWarnPalette
+);
+
+$lightPrimaryPalette: mat-palette($mat-indigo, 800, 300, 900);
+$lightAccentPalette: mat-palette($mat-light-blue);
+$lightWarnPalette: mat-palette($mat-pink, 600);
+
+$light-app-theme: mat-light-theme(
+                $lightPrimaryPalette,
+                $lightAccentPalette,
+                $lightWarnPalette
 );

frontend/apache2.conf

 </Directory>
 
 <Location "/api/">
-  ProxyPass http://BACKEND_HOST:BACKEND_PORT/ retry=0
-  ProxyPassReverse http://BACKEND_HOST:BACKEND_PORT/
+  ProxyPass http://BACKEND_HOST:BACKEND_PORT/api/ retry=0
+  ProxyPassReverse http://BACKEND_HOST:BACKEND_PORT/api/
 </Location>
 <Location "/signalr/">
   ProxyPass http://BACKEND_HOST:BACKEND_PORT/signalr/ retry=0