DP-688 Adding API Health checker functionality

src/app/adf-api-docs/df-api-docs/df-api-docs.component.html

@@ -32,4 +32,54 @@
   </mat-form-field>
 </div>
 
+<div #swaggerInjectedContentContainer class="custom-swagger-content-wrapper">
+  <div
+    #healthBannerElement
+    class="api-health-banner"
+    *ngIf="healthStatus"
+    [ngClass]="{
+      'status-loading': healthStatus === 'loading',
+      'status-healthy': healthStatus === 'healthy',
+      'status-unhealthy': healthStatus === 'unhealthy',
+      'status-warning': healthStatus === 'warning'
+    }">
+    <div *ngIf="healthStatus === 'loading'">
+      <p>{{ 'apiHealthBanner.loading' | transloco }}</p>
+    </div>
+    <div *ngIf="healthStatus === 'healthy'">
+      <p>{{ 'apiHealthBanner.healthy' | transloco }}</p>
+    </div>
+    <div *ngIf="healthStatus === 'unhealthy'">
+      <p>
+        {{ 'apiHealthBanner.unhealthyBase' | transloco }}
+        <button
+          mat-button
+          color="accent"
+          class="view-details-button"
+          (click)="toggleUnhealthyErrorDetails()">
+          {{
+            (showUnhealthyErrorDetails
+              ? 'apiHealthBanner.hideDetails'
+              : 'apiHealthBanner.viewDetails'
+            ) | transloco
+          }}
+        </button>
+      </p>
+      <div *ngIf="showUnhealthyErrorDetails" class="unhealthy-error-details">
+        <pre>{{ healthError }}</pre>
+      </div>
+    </div>
+    <div *ngIf="healthStatus === 'warning'">
+      <p>
+        {{ 'apiHealthBanner.warningDefault' | transloco }}
+      </p>
+    </div>
+  </div>
+
+  <df-api-quickstart
+    *ngIf="serviceName"
+    [apiDocJson]="apiDocJson"
+    [serviceName]="serviceName"></df-api-quickstart>
+</div>
+
 <div #apiDocumentation class="swagger-ui"></div>

src/app/adf-api-docs/df-api-docs/df-api-docs.component.scss

@@ -41,3 +41,106 @@
 .swagger-ui {
   margin-top: 16px;
 }
+
+.api-health-banner {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border-left-width: 4px;
+  border-left-style: solid;
+
+  p {
+    margin: 0;
+    font-size: 0.9em;
+  }
+
+  &.status-healthy {
+    border-left-color: #28a745;
+    background-color: #e9f5ec;
+    color: #155724;
+  }
+
+  &.status-unhealthy,
+  &.status-error {
+    border-left-color: #dc3545;
+    background-color: #f8d7da;
+    color: #721c24;
+  }
+
+  &.status-unhealthy {
+    & > div {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+
+      & > p {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        .view-details-button {
+          margin-left: 12px;
+          flex-shrink: 0;
+          padding: 2px 8px;
+          line-height: normal;
+          font-size: 0.9em;
+          min-width: auto;
+        }
+      }
+
+      .unhealthy-error-details {
+        margin-top: 0;
+        padding: 8px 12px;
+        background-color: rgba(0, 0, 0, 0.03);
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        border-radius: 4px;
+        width: 100%;
+        box-sizing: border-box;
+        max-height: 150px;
+        overflow-y: auto;
+
+        pre {
+          margin: 0;
+          white-space: pre-wrap;
+          word-break: break-word;
+          font-size: 0.85em;
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &.status-loading {
+    border-left-color: #007bff;
+    background-color: #e7f3ff;
+    color: #004085;
+  }
+
+  &.status-warning {
+    border-left-color: #ffc107;
+    background-color: #fff3cd;
+    color: #856404;
+  }
+}
+
+// Styles for elements within Swagger UI, piercing encapsulation
+:host ::ng-deep {
+  .swagger-ui {
+    // This targets the wrapper div for Swagger UI in your component's template
+    .information-container {
+      .main {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+    }
+  }
+}
+
+.custom-swagger-content-wrapper {
+  width: 100%;
+}