organization/space: added created and updated dates to summary

Besides adding those info there was a slightly change in the data display itself. Instead of a single list of attributes we splitted that into two columns in order to utilize better the white space. Signed-off-by: Vítor Avelino <[email protected]>
cloudfoundry · Mar 27, 2019 · 596ac45 · 596ac45
1 parent 6ee680d
commit 596ac45
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 45 deletions.
diff --git a/.../shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html b/.../shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
@@ -1,22 +1,35 @@
-<app-meta-card class="cf-org-usage">
-  <app-meta-card-title>Summary</app-meta-card-title>
-  <app-meta-card-item>
-    <app-meta-card-key>User Org Role</app-meta-card-key>
-    <app-meta-card-value>{{ (cfOrgService.userOrgRole$ | async) }}</app-meta-card-value>
-  </app-meta-card-item>
-  <app-meta-card-item>
-    <app-meta-card-key>Quota Definition Name</app-meta-card-key>
-    <app-meta-card-value>{{ (cfOrgService.quotaDefinition$ | async)?.name }}
-    </app-meta-card-value>
-  </app-meta-card-item>
-  <app-meta-card-item>
-    <app-meta-card-key>Provision Paid Services</app-meta-card-key>
-    <app-meta-card-value>
-      <app-boolean-indicator [isTrue]="(cfOrgService.quotaDefinition$ | async)?.non_basic_services_allowed" type="yes-no"></app-boolean-indicator>
-    </app-meta-card-value>
-  </app-meta-card-item>
-  <app-meta-card-item>
-    <app-meta-card-key>Org Status</app-meta-card-key>
-    <app-meta-card-value>{{ ((cfOrgService.org$ | async)?.entity?.entity?.status) | capitalizeFirst}}</app-meta-card-value>
-  </app-meta-card-item>
-</app-meta-card>
+<div class="cf-org-usage">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Summary</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="app-metadata">
+        <div class="app-metadata__two-cols">
+          <app-metadata-item label="User Org Role">
+            {{ (cfOrgService.userOrgRole$ | async) }}
+          </app-metadata-item>
+          <app-metadata-item label="Quota Definition Name">
+            {{ (cfOrgService.quotaDefinition$ | async)?.name }}
+          </app-metadata-item>
+          <app-metadata-item label="Provision Paid Services">
+            <app-boolean-indicator [isTrue]="(cfOrgService.quotaDefinition$ | async)?.non_basic_services_allowed" type="yes-no">
+            </app-boolean-indicator>
+          </app-metadata-item>
+        </div>
+
+        <div class="app-metadata__two-cols">
+          <app-metadata-item label="Org Status">
+            {{ ((cfOrgService.org$ | async)?.entity?.entity?.status) | capitalizeFirst}}
+          </app-metadata-item>
+          <app-metadata-item label="Created At">
+            {{ ((cfOrgService.org$ | async)?.entity?.metadata?.created_at) | date:'medium' }}
+          </app-metadata-item>
+          <app-metadata-item label="Updated At">
+            {{ ((cfOrgService.org$ | async)?.entity?.metadata?.updated_at) | date:'medium' }}
+          </app-metadata-item>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/.../shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss b/.../shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss
@@ -0,0 +1,17 @@
+.app-metadata {
+  display: flex;
+  flex-direction: row;
+
+  &__two-cols {
+    flex: 1;
+
+    app-metadata-item:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+.mat-card-title {
+  font-weight: 500;
+}
+
diff --git a/...ared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.spec.ts b/...ared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.spec.ts
@@ -16,6 +16,7 @@ import { EntityMonitorFactory } from '../../../monitors/entity-monitor.factory.s
 import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.factory';
 import { CapitalizeFirstPipe } from '../../../pipes/capitalizeFirstLetter.pipe';
 import { BooleanIndicatorComponent } from '../../boolean-indicator/boolean-indicator.component';
+import { MetadataItemComponent } from '../../metadata-item/metadata-item.component';
 import { CardCfOrgUserDetailsComponent } from './card-cf-org-user-details.component';
 
 describe('CardCfOrgUserDetailsComponent', () => {
@@ -24,7 +25,13 @@ describe('CardCfOrgUserDetailsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CardCfOrgUserDetailsComponent, ...MetadataCardTestComponents, CapitalizeFirstPipe, BooleanIndicatorComponent],
+      declarations: [
+        CardCfOrgUserDetailsComponent,
+        MetadataItemComponent,
+        MetadataCardTestComponents,
+        CapitalizeFirstPipe,
+        BooleanIndicatorComponent
+      ],
       imports: [...BaseTestModulesNoShared],
       providers: [
         CfUserService,

diff --git a/...re/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html b/...re/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
@@ -1,21 +1,34 @@
-<app-meta-card class="cf-space-usage">
-  <app-meta-card-title>Summary</app-meta-card-title>
-  <app-meta-card-item>
-    <app-meta-card-key>User Space Role/s</app-meta-card-key>
-    <app-meta-card-value>{{ cfSpaceService.userRole$ | async }}</app-meta-card-value>
-  </app-meta-card-item>
-  <app-meta-card-item>
-    <app-meta-card-key>Quota Definition Name</app-meta-card-key>
-    <app-meta-card-value>{{ (cfSpaceService.quotaDefinition$ | async)?.entity.name }}</app-meta-card-value>
-  </app-meta-card-item>
-  <app-meta-card-item>
-    <app-meta-card-key>Provision Paid Services</app-meta-card-key>
-    <app-meta-card-value>
-      <app-boolean-indicator [isTrue]="(cfSpaceService.quotaDefinition$ | async)?.non_basic_services_allowed" type="yes-no"></app-boolean-indicator>
-    </app-meta-card-value>
-  </app-meta-card-item>
-  <app-meta-card-item>
-    <app-meta-card-key>SSH Access</app-meta-card-key>
-    <app-meta-card-value>{{ allowSshStatus$ | async }}</app-meta-card-value>
-  </app-meta-card-item>
-</app-meta-card>
+<div class="cf-space-usage">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Summary</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="app-metadata">
+        <div class="app-metadata__two-cols">
+          <app-metadata-item label="User Space Role/s">
+            {{ (cfSpaceService.userRole$ | async) }}
+          </app-metadata-item>
+          <app-metadata-item label="Quota Definition Name">
+            {{ (cfSpaceService.quotaDefinition$ | async)?.entity.name }}
+          </app-metadata-item>
+          <app-metadata-item label="Provision Paid Services">
+            <app-boolean-indicator [isTrue]="(cfSpaceService.quotaDefinition$ | async)?.non_basic_services_allowed" type="yes-no">
+            </app-boolean-indicator>
+          </app-metadata-item>
+        </div>
+        <div class="app-metadata__two-cols">
+          <app-metadata-item label="SSH Access">
+            {{ allowSshStatus$ | async }}
+          </app-metadata-item>
+          <app-metadata-item label="Created At">
+            {{ ((cfSpaceService.space$ | async)?.entity?.metadata?.created_at) | date: 'medium' }}
+          </app-metadata-item>
+          <app-metadata-item label="Updated At">
+            {{ ((cfSpaceService.space$ | async)?.entity?.metadata?.updated_at) | date: 'medium' }}
+          </app-metadata-item>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/...re/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss b/...re/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss
@@ -0,0 +1,16 @@
+.app-metadata {
+  display: flex;
+  flex-direction: row;
+
+  &__two-cols {
+    flex: 1;
+
+    app-metadata-item:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+.mat-card-title {
+  font-weight: 500;
+}
diff --git a/...src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.spec.ts b/...src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.spec.ts
@@ -8,6 +8,7 @@ import {
 import { CloudFoundrySpaceServiceMock } from '../../../../../test-framework/cloud-foundry-space.service.mock';
 import { EntityMonitorFactory } from '../../../monitors/entity-monitor.factory.service';
 import { BooleanIndicatorComponent } from '../../boolean-indicator/boolean-indicator.component';
+import { MetadataItemComponent } from '../../metadata-item/metadata-item.component';
 import { CardCfSpaceDetailsComponent } from './card-cf-space-details.component';
 
 describe('CardCfSpaceDetailsComponent', () => {
@@ -16,7 +17,7 @@ describe('CardCfSpaceDetailsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CardCfSpaceDetailsComponent, MetadataCardTestComponents, BooleanIndicatorComponent],
+      declarations: [CardCfSpaceDetailsComponent, MetadataItemComponent, MetadataCardTestComponents, BooleanIndicatorComponent],
       imports: [...BaseTestModulesNoShared],
       providers: [
         { provide: CloudFoundrySpaceService, useClass: CloudFoundrySpaceServiceMock },