JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

import {Component, Input, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {DeploymentOverviewService} from "../deployment-overview.service";
import { LastRowComponent } from '../deployment-info/last-row/last-row.component';

@Component({
  selector: 'app-deployment-info',
  templateUrl: './deployment-info.component.html',
  styles: [],

})
export class DeploymentInfoComponent implements OnInit {

  @Input('serviceUrl') serviceUrl: string;
  @Input('appUrl') appUrl: string;
  @Input('uiAppName') uiAppName: string;
  @Input('serviceName') serviceName: string;

  dependencies = new Array<Dependency>();
  devDependencies = new Array<Dependency>();

  getDepName:string;
  getUIHeader:string;
  getPackageVersion:string;

  objStyles:any={styleName:"",styleVersion:""};
  objVersion:any={package:"",config:""};

  uiAppVersion:string = 'N/A';
  lastDeployed:string = 'N/A';
  serviceVersion:string = 'N/A';
  serviceLastDeployed:string = 'N/A';

  depFilter:string[] = [ 'web-ui-styles', 'web-sec-ui', 'web-ui-components',  '@angular/cli', '@angular/core', 'typescript' ];

  constructor(private http: HttpClient, private depOverviewService: DeploymentOverviewService) {}

  ngOnInit() {

    let appInfo = this.depOverviewService.getAppInfo(this.appUrl);
    let deps = this.depOverviewService.getDependencies(this.appUrl);
    let devDeps = this.depOverviewService.getDependencies(this.appUrl);
    let stylesOne=this.depOverviewService.getStyles(this.appUrl);
    let serviceInfo = this.depOverviewService.getServiceInfo(this.serviceUrl);

    appInfo.subscribe(data => {
      let version = data.body['version'];
      let lastDeployed = data.headers.get('Last-Modified');

      if (!version) {
        version = 'N/A';
      }

      if (!lastDeployed) {
        lastDeployed = 'N/A';
      }

      this.uiAppVersion = version;
      this.lastDeployed = lastDeployed;
    },err => console.log(err+'error styles'));

    deps.subscribe(data => {
    ...

JavaScript

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 padding-left-20 padding-right-20 padding-top-20">
      <h3>
        UI
      </h3>
      <p>Name: {{uiAppName}} </p>
      <p>Version: {{uiAppVersion}}</p>
      <p>Last deployed: {{lastDeployed}}</p>
    </div>

    <div class="col-sm-6 padding-left-20 padding-right-20 padding-top-20">
      <h3>
        Service
      </h3>
      <p>Name: {{serviceName}}</p>
      <p>Version: {{serviceVersion}}</p>
      <p>Last deployed: {{serviceLastDeployed}}</p>
    </div>
  </div>
  <div class="row">
   <div *ngIf="!arrayEmpty(devDependencies)" class="col-sm-6 padding-20">
      <h3>Dependencies</h3>
      <div class="row" *ngFor="let dependency of dependencies">
        <div class="col-sm-6 border--grey padding-left-8">{{dependency.name}}</div>
        <div class="col-sm-6 border--grey padding-left-8">{{dependency.version}}</div>
      </div>
      <div class="row" *ngIf="location(getDepName)">
        <div class="col-sm-6 border--grey padding-left-8">{{getUIHeader}}</div>
        <div [ngClass]="{'color-red': !changeColor(), 'color-green': changeColor()}" class="col-sm-6 border--grey padding-left-8">{{getPackageVersion}}</div>
      </div>

      <div class="row" *ngIf="location(getDepName)">
        <div class="col-sm-6 border--grey padding-left-8">{{objStyles.styleName}}</div>
        <div [ngClass]="{'color-red': !changeColor(), 'color-green': changeColor()}" class="col-sm-6 border--grey padding-left-8">{{objStyles.styleVersion}}</div>
      </div>
    </div>

    <div *ngIf="!arrayEmpty(devDependencies)" class="col-sm-6 padding-20">
      <h3>Dev. Dependencies</h3>
      <div class="row" *ngFor="let dependency of devDependencies">
        <div  class="col-sm-6 border--grey padding-left-8">{{dependency.name}}</div>
        <div  class="col-sm-6 border--grey padding-left-8">{{dependency.version}}</div>
      </div>

      <div class="row" *ngIf="!location(getDepName)">
        <div...