[FLINK-39079][Web Frontend] Add Diagnosis Advisor to Flink Web UI

flink-runtime-web/web-dashboard/src/app/components/diagnosis/diagnosis.component.html

@@ -0,0 +1,95 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="diagnosis-container">
+  <div *ngIf="loading" class="loading-state">
+    <nz-spin nzSimple></nz-spin>
+    <p>Analyzing metrics...</p>
+  </div>
+
+  <div *ngIf="!loading && !diagnosis" class="empty-state">
+    <nz-empty nzNotFoundText="No diagnostic suggestions available"></nz-empty>
+  </div>
+
+  <div *ngIf="!loading && diagnosis" class="diagnosis-content">
+    <div class="diagnosis-header">
+      <h3>Diagnosis Advisor</h3>
+      <span class="timestamp">Last updated: {{ diagnosis.timestamp }}</span>
+    </div>
+
+    <div *ngIf="diagnosis.diagnostics.length === 0" class="no-issues">
+      <nz-result
+        nzStatus="success"
+        nzTitle="No Issues Detected"
+        nzSubTitle="Your job metrics appear to be within normal ranges."
+      >
+        <nz-result-extra>
+          <p>Continue monitoring for any changes.</p>
+        </nz-result-extra>
+      </nz-result>
+    </div>
+
+    <div class="diagnosis-list">
+      <nz-alert
+        *ngFor="let suggestion of diagnosis.diagnostics"
+        [nzType]="
+          suggestion.severity === 'error'
+            ? 'error'
+            : suggestion.severity === 'warning'
+            ? 'warning'
+            : 'info'
+        "
+        [nzMessage]="suggestion.title"
+        [nzDescription]="suggestion.message"
+        [nzShowIcon]="true"
+        [nzIcon]="getSeverityIcon(suggestion.severity)"
+        [nzCloseable]="false"
+        class="diagnosis-alert"
+      >
+        <ng-template #description>
+          <div class="diagnosis-detail">
+            <p class="message">{{ suggestion.message }}</p>
+
+            <div
+              *ngIf="suggestion.metrics && Object.keys(suggestion.metrics).length > 0"
+              class="metrics-info"
+            >
+              <h4>Related Metrics:</h4>
+              <div class="metrics-grid">
+                <div *ngFor="let entry of suggestion.metrics | keyvalue" class="metric-item">
+                  <span class="metric-label">{{ getMetricLabel(entry.key) }}:</span>
+                  <span class="metric-value">{{ formatMetricValue(entry.key, entry.value) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div
+              *ngIf="suggestion.actions && suggestion.actions.length > 0"
+              class="recommended-actions"
+            >
+              <h4>Recommended Actions:</h4>
+              <ul>
+                <li *ngFor="let action of suggestion.actions">{{ action }}</li>
+              </ul>
+            </div>
+          </div>
+        </ng-template>
+      </nz-alert>
+    </div>
+  </div>
+</div>

flink-runtime-web/web-dashboard/src/app/components/diagnosis/diagnosis.component.less

@@ -0,0 +1,142 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.diagnosis-container {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.loading-state,
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: #8c8c8c;
+
+  p {
+    margin-top: 12px;
+    font-size: 14px;
+  }
+}
+
+.diagnosis-content {
+  .diagnosis-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #262626;
+      margin: 0;
+    }
+
+    .timestamp {
+      font-size: 12px;
+      color: #8c8c8c;
+    }
+  }
+
+  .no-issues {
+    padding: 20px;
+  }
+
+  .diagnosis-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .diagnosis-alert {
+      .diagnosis-detail {
+        .message {
+          margin-bottom: 16px;
+          color: #595959;
+          font-size: 14px;
+          line-height: 1.6;
+        }
+
+        .metrics-info {
+          margin-bottom: 16px;
+
+          h4 {
+            font-size: 13px;
+            font-weight: 600;
+            color: #262626;
+            margin-bottom: 8px;
+          }
+
+          .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 8px;
+            padding: 12px;
+            background: #fafafa;
+            border-radius: 4px;
+
+            .metric-item {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              font-size: 13px;
+
+              .metric-label {
+                color: #8c8c8c;
+              }
+
+              .metric-value {
+                color: #262626;
+                font-weight: 500;
+              }
+            }
+          }
+        }
+
+        .recommended-actions {
+          h4 {
+            font-size: 13px;
+            font-weight: 600;
+            color: #262626;
+            margin-bottom: 8px;
+          }
+
+          ul {
+            margin: 0;
+            padding-left: 20px;
+            list-style-type: disc;
+
+            li {
+              margin-bottom: 6px;
+              color: #595959;
+              font-size: 13px;
+              line-height: 1.5;
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

flink-runtime-web/web-dashboard/src/app/components/diagnosis/diagnosis.component.ts

@@ -0,0 +1,83 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+import { Diagnosis } from '@flink-runtime-web/interfaces';
+
+@Component({
+  selector: 'flink-diagnosis',
+  templateUrl: './diagnosis.component.html',
+  styleUrls: ['./diagnosis.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DiagnosisComponent implements OnChanges {
+  @Input() diagnosis: Diagnosis | null = null;
+  @Input() loading = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log('Diagnosis updated:', changes);
+  }
+
+  getSeverityClass(severity: string): string {
+    switch (severity.toLowerCase()) {
+      case 'warning':
+        return 'severity-warning';
+      case 'error':
+        return 'severity-error';
+      case 'info':
+      default:
+        return 'severity-info';
+    }
+  }
+
+  getSeverityIcon(severity: string): string {
+    switch (severity.toLowerCase()) {
+      case 'warning':
+        return 'exclamation-circle';
+      case 'error':
+        return 'close-circle';
+      case 'info':
+      default:
+        return 'info-circle';
+    }
+  }
+
+  formatMetricValue(key: string, value: unknown): string {
+    if (typeof value === 'number') {
+      if (key.toLowerCase().includes('usage') || key.toLowerCase().includes('ratio')) {
+        return `${(value * 100).toFixed(2)}%`;
+      } else if (key.toLowerCase().includes('count')) {
+        return value.toLocaleString();
+      } else {
+        return value.toFixed(2);
+      }
+    }
+    return String(value);
+  }
+
+  getMetricLabel(key: string): string {
+    const labels: { [key: string]: string } = {
+      cpuUsage: 'CPU Usage',
+      heapUsageRatio: 'Heap Usage',
+      gcCount: 'GC Count',
+      maxBackpressureRatio: 'Max Backpressure'
+    };
+    return labels[key] || key;
+  }
+}