WIP: Initial move of the certificate chain tree rendered with compact…

package.json

@@ -50,6 +50,9 @@
     "@ngrx/store": "10.1.2",
     "@ngx-formly/core": "5.6.1",
     "@stackblitz/sdk": "1.3.0",
+    "@types/asn1js": "2.0.2",
+    "@types/pkijs": "0.0.12",
+    "@types/pvutils": "1.0.1",
     "@types/yargs": "17.0.5",
     "@vcd/angular-client": "0.0.2-alpha.1",
     "@vcd/bindings": "9.1.1",
@@ -58,16 +61,20 @@
     "@webcomponents/webcomponentsjs": "2.0.0",
     "@wessberg/ts-evaluator": "0.0.25",
     "angular-cli-ghpages": "0.6.2",
+    "asn1": "0.2.6",
     "classlist.js": "1.1.20150312",
     "codecov.io": "0.1.6",
     "copyfiles": "^2.4.1",
+    "dayjs": "1.10.7",
     "karma-coverage": "2.0.2",
     "lit-html": "1.1.2",
     "messageformat": "1.0.2",
     "mkdirp": "^1.0.4",
     "mousetrap": "1.6.5",
+    "pkijs": "2.2.2",
     "prismjs": "1.25.0",
     "properties": "1.2.1",
+    "pvutils": "1.1.2",
     "rbradford-compodoc": "1.1.11",
     "rxjs": "6.5.5",
     "systemjs": "0.20.19",

projects/components/src/assets/resources/en.properties

@@ -1,8 +1,9 @@
 
 #
-# Copyright 2020-2021 VMware, Inc.  All rights reserved. VMware Confidential
+# Copyright 2020-2022 VMware, Inc.  All rights reserved. VMware Confidential
 #
 
+vcd.cc.no.info=-
 vcd.cc.select.all=Select All
 vcd.cc.submit=Submit
 vcd.cc.add=Add

projects/components/src/certificate-chain-tree-details/certificate-chain-tree-details-compact.component.html

@@ -0,0 +1,13 @@
+<div class="chain-tree-compact-details">
+    <div class="chain-tree">
+        <vcd-certificate-chain-tree
+            [certificate]="certificate"
+            [selectionEnabled]="true"
+            [preselectionMode]="preselectionMode"
+            (certificateSelected)="onCertificateSelected($event)"
+        >
+        </vcd-certificate-chain-tree>
+    </div>
+
+    <vcd-certificate-details-compact [humanCertificate]="selectedCertificate"></vcd-certificate-details-compact>
+</div>

projects/components/src/certificate-chain-tree-details/certificate-chain-tree-details-compact.component.scss

@@ -0,0 +1,3 @@
+.chain-tree {
+    margin-bottom: 1rem;
+}

projects/components/src/certificate-chain-tree-details/certificate-chain-tree-details-compact.component.spec.ts

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2021 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */

projects/components/src/certificate-chain-tree-details/certificate-chain-tree-details-compact.component.ts

@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2022 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PRESELECTION_MODE_LEAF } from '../utils/certificate/certificate-util';
+import { HumanCertificate } from '../utils/certificate/human-certificate';
+
+@Component({
+    selector: 'vcd-certificate-chain-tree-details-compact',
+    templateUrl: 'certificate-chain-tree-details-compact.component.html',
+    styleUrls: ['certificate-chain-tree-details-compact.component.scss'],
+})
+export class CertificateChainTreeDetailsCompactComponent {
+    /**
+     * Certificate chain data in pem format.
+     */
+    @Input() public certificate: string;
+
+    /**
+     * Optional. Which node to preselect initially - root or leaf.
+     */
+    @Input() public preselectionMode: number = PRESELECTION_MODE_LEAF;
+
+    /**
+     * Emits the currently selected by the user certificate in the tree.
+     */
+    @Output()
+    public certificateSelected: EventEmitter<HumanCertificate> = new EventEmitter<HumanCertificate>();
+
+    selectedCertificate: HumanCertificate;
+
+    onCertificateSelected($event: HumanCertificate): void {
+        this.selectedCertificate = $event;
+        this.certificateSelected.emit(this.selectedCertificate);
+    }
+}

projects/components/src/certificate-chain-tree-details/certificate-chain-tree-details.module.ts

@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2022 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { I18nModule } from '@vcd/i18n';
+import { VcdErrorBannerModule } from '../common/error';
+import { VcdLoadingIndicatorModule } from '../common/loading';
+import { PipesModule } from '../common/pipes/pipes.module';
+import { CertificateProcessingService } from '../utils/certificate/certificate-processing.service';
+import { CertificateChainTreeDetailsCompactComponent } from './certificate-chain-tree-details-compact.component';
+import { CertificateDetailsCompactComponent } from './certificate-details/certificate-details-compact.component';
+import { CertificateChainTreeComponent } from './certificate-chain-tree/certificate-chain-tree.component';
+
+@NgModule({
+    declarations: [
+        CertificateChainTreeComponent,
+        CertificateChainTreeDetailsCompactComponent,
+        CertificateDetailsCompactComponent,
+    ],
+
+    imports: [CommonModule, ClarityModule, I18nModule, PipesModule, VcdLoadingIndicatorModule, VcdErrorBannerModule],
+    entryComponents: [
+        CertificateChainTreeDetailsCompactComponent,
+        CertificateChainTreeComponent,
+        CertificateDetailsCompactComponent,
+    ],
+    exports: [
+        CertificateChainTreeDetailsCompactComponent,
+        CertificateChainTreeComponent,
+        CertificateDetailsCompactComponent,
+    ],
+    providers: [CertificateProcessingService],
+})
+export class CertificateChainTreeDetailsModule {}

projects/components/src/certificate-chain-tree-details/certificate-chain-tree/certificate-chain-tree.component.scss

@@ -0,0 +1,3 @@
+:host ::ng-deep vcd-error-banner .alert {
+    margin: 0;
+}

projects/components/src/certificate-chain-tree-details/certificate-chain-tree/certificate-chain-tree.component.spec.ts

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2021 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */