Merge pull request #2726 from cloudfoundry-incubator/split-app-vars

App Variables Tab: Split variables out into their CF defined buckets
cloudfoundry · Aug 20, 2018 · 1f350a3 · 1f350a3
2 parents 7d59b0c + c860f1b
commit 1f350a3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 27 deletions.
diff --git a/...cations/application/application-tabs-base/tabs/variables-tab/variables-tab.component.html b/...cations/application/application-tabs-base/tabs/variables-tab/variables-tab.component.html
@@ -24,9 +24,12 @@
       <mat-card-content>
         <app-code-block>
           <ng-container *ngFor="let envVar of (allEnvVars$ | async)">
-            <div class="variables-tab__env-code-block--line">
-              <pre>{{envVar.name}}=<span *ngIf="!isObject(envVar.value)">{{envVar.value}}</span></pre>
-              <pre *ngIf="isObject(envVar.value)">{{ envVar.value | json }}</pre>
+            <div class="variables-tab__env-code-block--line" [ngClass]="{'variables-tab__env-code-block--section': envVar.section}">
+              <pre *ngIf="envVar.section; else env">{{envVar.name}}</pre>
+              <ng-template #env>
+                <pre>{{envVar.name}}=<span *ngIf="!isObject(envVar.value)">{{envVar.value}}</span></pre>
+                <pre *ngIf="isObject(envVar.value)">{{ envVar.value | json }}</pre>
+              </ng-template>
             </div>
           </ng-container>
         </app-code-block>

diff --git a/...cations/application/application-tabs-base/tabs/variables-tab/variables-tab.component.scss b/...cations/application/application-tabs-base/tabs/variables-tab/variables-tab.component.scss
@@ -10,6 +10,11 @@
         white-space: pre-wrap;
       }
     }
+    &--section {
+      &:not(:first-of-type) {
+        padding-top: 15px;
+      }
+    }
   }
   &__env-table--add-form {
     form {

diff --git a/...lications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.ts b/...lications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.ts
@@ -1,10 +1,11 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { LoggerService } from '../../../../../../core/logger.service';
+import { ListDataSource } from '../../../../../../shared/components/list/data-sources-controllers/list-data-source';
 import {
-  CfAppVariablesDataSource,
   ListAppEnvVar,
 } from '../../../../../../shared/components/list/list-types/app-variables/cf-app-variables-data-source';
 import {
@@ -13,11 +14,12 @@ import {
 import { ListConfig } from '../../../../../../shared/components/list/list.component.types';
 import { AppState } from '../../../../../../store/app-state';
 import { ApplicationService } from '../../../../application.service';
-import { ListDataSource } from '../../../../../../shared/components/list/data-sources-controllers/list-data-source';
+
 
 export interface VariableTabAllEnvVarType {
   name: string;
   value: string;
+  section?: boolean;
 }
 
 @Component({
@@ -34,7 +36,8 @@ export class VariablesTabComponent implements OnInit {
   constructor(
     private store: Store<AppState>,
     private appService: ApplicationService,
-    private listConfig: ListConfig<ListAppEnvVar>
+    private listConfig: ListConfig<ListAppEnvVar>,
+    private loggerService: LoggerService
   ) {
     this.envVarsDataSource = listConfig.getDataSource();
   }
@@ -53,31 +56,47 @@ export class VariablesTabComponent implements OnInit {
       values: app.entity.entity.environment_json || {}
     })));
     this.allEnvVars$ = this.appService.appEnvVars.entities$.pipe(
-      map(allEnvVars => {
-        if (!allEnvVars || !allEnvVars.length || !allEnvVars[0] || !allEnvVars[0].entity) {
-          return [];
-        }
-        const result = new Array<VariableTabAllEnvVarType>();
-
-        Object.keys(allEnvVars[0].entity).forEach(envVarType => {
-          if (envVarType === 'cfGuid') {
-            return;
-          }
-          const envVars = allEnvVars[0].entity[envVarType];
-          Object.keys(envVars).forEach(key => {
-            result.push({
-              name: key,
-              value: envVars[key]
-            });
-          });
-        });
-        return result;
-      })
+      map(this.mapEnvVars.bind(this))
     );
   }
 
   isObject(test: any): boolean {
     return typeof test === 'object';
   }
 
+  private mapEnvVars(allEnvVars): VariableTabAllEnvVarType[] {
+    if (!allEnvVars || !allEnvVars.length || !allEnvVars[0] || !allEnvVars[0].entity) {
+      return [];
+    }
+    const result = new Array<VariableTabAllEnvVarType>();
+
+    Object.keys(allEnvVars[0].entity).forEach(envVarType => {
+      if (envVarType === 'cfGuid') {
+        return;
+      }
+      const envVars = allEnvVars[0].entity[envVarType];
+      result.push({
+        section: true,
+        name: envVarType.replace('_json', ''),
+        value: ''
+      });
+      Object.keys(envVars).forEach(key => {
+        result.push({
+          name: key,
+          value: key === 'STRATOS_PROJECT' ? this.parseStratosProject(envVars[key]) : envVars[key]
+        });
+      });
+    });
+    return result;
+  }
+
+  private parseStratosProject(value: string): Object | string {
+    try {
+      return JSON.parse(value);
+    } catch (err) {
+      this.loggerService.debug('Failed to parse STRATOS_PROJECT env var', err);
+    }
+    return '';
+  }
+
 }