Follow Us on Twitter

WebLogic Server Dashboard met Angular Material

Juli 2017 - Als softwareontwikkelaar in een Devops omgeving komt het regelmatig voor dat je even wil zien of de server waarop jouw software draait ook nog steeds goed functioneert. Vaak gaat het niet om één server in een ontwikkelstraat maar om meerdere servers. In zo’n situatie is het handig om de gegevens van een server direct zichtbaar te hebben zodat, indien nodig, actie kan worden ondernomen om iets te sleutelen aan de instellingen van de betreffende server. Een server dashboard is in deze situatie geen overbodige luxe en geeft direct inzicht in de status van de servers die zijn opgenomen in een dashboard.

In dit Whitebook toon ik aan dat je eenvoudig zelf een single page dashboard kunt maken voor één of meer WebLogic servers via de RESTful management interface. Daarbij maak ik gebruik van Angular in combinatie met Angular Material en CanvasJS om data om te zetten naar een grafiek.

Ter ondersteuning heb ik een downloadbare demo Angular applicatie gemaakt die het één en ander verder verduidelijkt.

WebLogic RESTful management interface

Voor de demo applicatie maak ik gebruik van JDeveloper 12.2.1. De RESTful management interface kan qua aanroep en output licht verschillen in vorige versies.

Om dit mogelijk te maken moeten we eerst zorgen dat de RESTful management interface kan worden gebruikt. Default staat het gebruik van de RESTful management interface uit in de configuratie van de WebLogic Server (WLS). In vier eenvoudige stappen is de management interface aan te zetten. Start de WLS:

  1. Klik op DefaultDomain, of andere domeinnaam in jouw server
  2. Ga naar tab Configuration|General en klik op Advanced link
  3. Klik op Enable RESTful Management Services
  4. Herstart de server

De WLS kan nu reageren op RESTful HTTP calls. Om meer in detail te lezen hoe het aanzetten in zijn werk gaat verwijs ik naar Oracle WebLogic RESTful Management Services: From Command Line to JavaFX.

Angular Material

Het doel van Angular Material is om een set van hoge kwaliteit UI-componenten te bouwen met Angular en TypeScript die de specificaties volgt van Material Design. Deze componenten dienen als voorbeeld hoe je Angular code schrijft volgens de beste methode/manier.

Angular Material ondersteunt de twee meest recente versies van alle belangrijke browsers: Chrome (inclusief Android), Firefox, Safari (inclusief iOS), en IE11 / Edge.

De beschikbare componenten zijn snel, bruikbaar in alle belangrijke browsers en zijn Multi-platform, dus geschikt voor web, mobiel en desktop. Er zijn ook een aantal voorgedefinieerde kleurenschema’s aanwezig (Themes) die naar eigen wens aan te passen zijn. Ook vertalingen van teksten (internationalisatie) is mogelijk.

Er is een groot aantal componenten beschikbaar die je op de website van Angular Material Components live kan bekijken. De demo Angular applicatie heeft een herbruikbaar component waarin de server-info wordt getoond met behulp van enkele Material componenten aangevuld met wat basis HTML (src/app/components/server-info/server-info.component.html).

Let op wanneer je Angular Material wilt gebruiken in een bestaande Angular applicatie. Upgraden naar Angular 4 is dan noodzakelijk!

CanvasJS Charting Library

CanvasJS is een op HTML5 gebaseerde Javascript Charting library met een eenvoudige API en een 10x betere performance dan de conventionele Flash of SVG charting libraries. De beschikbare charts zijn responsive en draaien op verschillende devices zoals iPhone, iPad, Android, Windows Phone en desktop.

Ga naar canvasjs.com/javascript-charts om alle mogelijke charts live te kunnen bekijken. De demo Angular applicatie gebruikt de 'spline' en 'splineArea' charts die met een refresh interval worden aangevuld met nieuwe data van de WebLogic server en zo dynamisch wordt aangepast en gevisualiseerd. Een voorbeeld van het gebruik van deze charts is te zien in het volgende bestand src/app/components/server-info/server-info.component.ts.

Demo applicatie WlsDashboard

De demo applicatie toont een dashboard van 1 of meer te configureren WebLogic servers. In het bestand src/app/app-component.html kan je eenvoudig een nieuwe server toevoegen met de juiste parameters van de server. ServerInfoComponent is het herbruikbare Angular component waarin dus de tag <app-server-info> wordt gemapt.

<app-server-info host='http://localhost' port='7101' username='weblogic' password='weblogic1'></app-server-info>

De applicatie maakt gebruik van Angular 4 omdat een lagere versie geen Angular Material ondersteunt.

De WLS RESTful management interface, werkt correct met iedere browser. Zodra je echter een RESTful URL gaat opvragen op de WLS-server vanuit een Angular applicatie dan draait de webpagina op een webserver op een ander domein dan WebLogic en krijg je te maken met CORS (Cross-Origin Resource Sharing). Gebruik voor testen van de demo applicatie Internet Explorer/ Edge i.p.v. een andere browser, deze is iets minder strikt!

Scherm met 2 instanties van herbruikbaar Angular component
Afbeelding 1 - Scherm met 2 instanties van herbruikbaar Angular component

Angular Material integreren in Angular

Het integreren van Angular Material in een Angular applicatie is vrij eenvoudig. Ga naar de root map van de applicatie en voer onderstaande cmd-line uit.

npm install -save @angular/material @angular/cdk

Na installatie kan je alle Material tags gebruiken in de html van de component. Dus gebruik je als voorbeeld de Material tag code <md-card> dan moet je in het typescript bestand de volgende component module importeren import { MdCardModule } from '@angular/material';. Zie voorbeeld in src/app/components/server-info/server-info.component.ts.

Een voorgedefinieerd kleurenthema kan je toevoegen in het bestand src/style.css op de volgende manier:

/* available material pre-built themes: deeppurple-amber.css, indigo-pink.css, pink-bluegrey.css, purple-green.css */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Material Icons integreren in Angular

Het opnemen van een stylesheet link in src/app/index.html is het enige dat je moet doen om gebruik te maken van Material Icons. Een voorbeeld van de notatiewijze om een icon in je pagina op te nemen is te vinden in src/app/components/server-info/server-info.component.html. Om een computer icon te laten zien met een grootte van 36px: <i class="material-icons md-36">computer</i>. Zo eenvoudig is het.

CanvasJS integreren in Angular

De javascript library kan worden toegevoegd in src/app/index.html met de volgende regel:

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

De definitie van een chart kan pas in TypeScript worden uitgevoerd zodra de volgende regel is opgenomen: declare var CanvasJS: any; en vervolgens kan je dan een nieuwe chart initialiseren met new CanvasJS.Chart();.

RESTful managementservice call

Belangrijk om te weten is dat het resultaat van een RESTful call per default wordt gecached. Als het resultaat dynamisch, dus steeds anders van inhoud, is dan moet aan de RESTful call een cache header worden meegegeven zodat het resultaat niet gecached wordt. Dit kan op de volgende manier zoals is vastgelegd in src/app/services/wls-server.services.ts.

JSON resultaat van RESTful call:

getServerInfo(serverInfoCall: ServerInfoCall): Promise {
    return this.http.get(serverInfoCall.host + ':' + serverInfoCall.port + '/management/wls/latest/servers/id/DefaultServer', {
        headers: new Headers({
            'Authorization': 'Basic ' + btoa(serverInfoCall.username + ':' + serverInfoCall.password),
            'Cache-Control': 'no-cache',
            'Pragma': 'no-cache',
            'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
        })
    })
    .map((res) => res.json() as ResponseDefaultserver).toPromise()
    .catch(this.handleError);;
}

Het resultaat van de RESTful management call is JSON en moet worden gemapt naar een class-structuur zodat je de data in TypeScript kunt gebruiken.

{
    "item": {
        "name": "DefaultServer",
        "state": "running",
        "activeHttpSessionCount": 0,
        "activeThreadCount": 29,
        "heapFreeCurrent": 316898496,
        "heapSizeCurrent": 708313088,
        "usedPhysicalMemory": 8359030784,
        "health": {"state": "ok"}
    },
    "links": [
        {
            "rel": "parent",
            "uri": "http:\/\/localhost:7101\/management\/wls\/latest\/servers"
        },
				.....
    ]
}

Classdiagram van ResponseDefaultserver:

Classdiagram van Angular classes ResponseDefaultserver
Afbeelding 2 - Classdiagram van Angular classes

Waarom een refresh van de chart in ngAfterViewInit

Angular werkt met componenten waarvan de lifecycle gemanaged wordt. Via een lifecycle hook kan je ingrijpen en acties uitvoeren.

In de demo applicatie wordt met een refresh interval steeds een RESTful call gedaan waarbij de data van de grafiek wordt bijgewerkt. Dit moet worden gedaan in de lifecycle hook ngAfterViewInit. De chart moet namelijk al geïnitialiseerd zijn voordat er aanpassingen kunnen worden gedaan en dat eerste moment is in deze lifecycle hook.

Scherm met 6 instanties van herbruikbaar Angular component
Afbeelding 3 - Scherm met 6 instanties van herbruikbaar Angular component

Conclusie

Als je als ontwikkelaar snel resultaat wil om server data in een browser te tonen dan zijn er voldoende opties te combineren om deze data te visualiseren.

De demo applicatie is een minimale opzet en geeft je een basis om dit verder uit te breiden. Met de RESTful management interface is er veel meer data voorhanden die ook in een dashboard kunnen zoals een overzicht van alle applicaties die er draaien en een overzicht van bijvoorbeeld de meest actuele logging.

Angular in combinatie met Angular Material maakt je applicatie eenvoudig Multi-platform voor zowel web, mobiel en desktop. De applicatie is daardoor snel en bruikbaar op de meeste moderne browsers.

Om data te visualiseren zijn er vele mogelijkheden. Blijf dichtbij wat een moderne browser kan en gebruik daarvan de mogelijkheden. CanvasJS is uitermate geschikt omdat het weinig code nodig heeft, ontzettend snel is en HTML5 gebruikt om data te tonen.

Links en referenties

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.