feat(console): show instance detail (#4032)

feat: instance detail

Co-authored-by: Livio Spring <[email protected]>

console/src/app/pages/instance/instance.component.html

@@ -1,32 +1,33 @@
-<div class="iam-top">
-  <div class="max-width-container">
-    <div class="iam-top-row">
-      <div>
-        <div class="iam-title-row">
-          <h1 class="iam-title">{{ 'IAM.TITLE' | translate }}</h1>
-        </div>
-        <p class="iam-sub cnsl-secondary-text">{{ 'IAM.DESCRIPTION' | translate }}</p>
-      </div>
-      <span class="fill-space"></span>
-      <cnsl-contributors
-        [totalResult]="totalMemberResult"
-        [loading]="loading$ | async"
-        [membersSubject]="membersSubject"
-        title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
-        description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}"
-        (addClicked)="openAddMember()"
-        (showDetailClicked)="showDetail()"
-        (refreshClicked)="loadMembers()"
-        [disabled]="(['iam.member.write'] | hasRole | async) === false"
-      >
-      </cnsl-contributors>
-    </div>
-  </div>
-</div>
-<div class="max-width-container">
-  <h2 class="org-table-title">{{ 'ORG.LIST.TITLE' | translate }}</h2>
+<cnsl-top-view
+  [hasBackButton]="false"
+  title="{{ 'IAM.TITLE' | translate }}"
+  sub="{{ 'IAM.DESCRIPTION' | translate }}"
+  [isActive]="instance?.state === State.STATE_RUNNING"
+  [isInactive]="instance?.state === State.STATE_STOPPED || instance?.state === State.STATE_STOPPING"
+  [hasContributors]="true"
+  stateTooltip="{{ 'INSTANCE.STATE.' + instance?.state | translate }}"
+>
+  <cnsl-contributors
+    topContributors
+    [totalResult]="totalMemberResult"
+    [loading]="loading$ | async"
+    [membersSubject]="membersSubject"
+    title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
+    description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}"
+    (addClicked)="openAddMember()"
+    (showDetailClicked)="showDetail()"
+    (refreshClicked)="loadMembers()"
+    [disabled]="(['iam.member.write'] | hasRole | async) === false"
+  >
+  </cnsl-contributors>
 
-  <p class="org-table-desc cnsl-secondary-text">{{ 'ORG.LIST.DESCRIPTION' | translate }}</p>
+  <cnsl-info-row topContent *ngIf="instance" [instance]="instance"></cnsl-info-row>
+</cnsl-top-view>
+
+<div class="max-width-container">
+  <h2 class="instance-table-title">{{ 'ORG.LIST.TITLE' | translate }}</h2>
+
+  <p class="instance-table-desc cnsl-secondary-text">{{ 'ORG.LIST.DESCRIPTION' | translate }}</p>
 
   <cnsl-org-table></cnsl-org-table>
 

console/src/app/pages/instance/instance.component.scss

@@ -4,55 +4,15 @@
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
   $background: map-get($theme, background);
-
-  .iam-top {
-    border-bottom: 1px solid map-get($foreground, divider);
-    margin: 0 -2rem;
-    padding: 2rem 2rem 1rem 2rem;
-    background: map-get($background, metadata-section);
-
-    @media only screen and (max-width: 500px) {
-      margin: 0 -1rem;
-    }
-
-    .iam-top-row {
-      display: flex;
-      align-items: center;
-      padding-bottom: 1rem;
-
-      .iam-title-row {
-        display: flex;
-        align-items: center;
-
-        .iam-title {
-          margin: 0;
-          margin-right: 0.5rem;
-        }
-      }
-
-      .iam-sub {
-        margin: 1rem 0 0 0;
-        font-size: 14px;
-      }
-
-      .iam-top-desc {
-        font-size: 14px;
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-    }
-  }
 }
 
-.org-table-title {
+.instance-table-title {
   font-size: 1.2rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin-top: 2rem;
 }
 
-.org-table-desc {
+.instance-table-desc {
   font-size: 14px;
 }

console/src/app/pages/instance/instance.component.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
+import { InstanceDetail, State } from 'src/app/proto/generated/zitadel/instance_pb';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AdminService } from 'src/app/services/admin.service';
@@ -17,12 +18,13 @@ import { ToastService } from 'src/app/services/toast.service';
   styleUrls: ['./instance.component.scss'],
 })
 export class InstanceComponent {
+  public instance!: InstanceDetail.AsObject;
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
   public totalMemberResult: number = 0;
   public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
-
+  public State: any = State;
   constructor(
     public adminService: AdminService,
     private dialog: MatDialog,
@@ -39,6 +41,17 @@ export class InstanceComponent {
     });
 
     breadcrumbService.setBreadcrumb([instanceBread]);
+
+    this.adminService
+      .getMyInstance()
+      .then((instanceResp) => {
+        if (instanceResp.instance) {
+          this.instance = instanceResp.instance;
+        }
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
   }
 
   public loadMembers(): void {

console/src/app/pages/instance/instance.module.ts

@@ -16,12 +16,14 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
+import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { OrgTableModule } from 'src/app/modules/org-table/org-table.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SettingsGridModule } from 'src/app/modules/settings-grid/settings-grid.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
+import { TopViewModule } from 'src/app/modules/top-view/top-view.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
@@ -43,7 +45,9 @@ import { InstanceComponent } from './instance.component';
     MatCheckboxModule,
     MetaLayoutModule,
     MatIconModule,
+    TopViewModule,
     MatTableModule,
+    InfoRowModule,
     InputModule,
     MatSortModule,
     MatTooltipModule,