Volume info for containers (inside of the pod panel) (kubernetes#5752)

* Volume info for containers (inside of the pod panel)

* lots of bindings

* more types

* Remove horizontal lines below the card titles (kubernetes#5773)

* raw API calls for ingress should use NetworkingV1beta1 client (kubernetes#5774)

* Improve volume source logic

* delete extra lines

* Refactor typings and simplify volume source logic usage

* Restore top border

* Fix code checks

Co-authored-by: Yuchen Cheng <[email protected]>
Co-authored-by: Sebastian Florek <[email protected]>

aio/scripts/version.js

@@ -37,7 +37,7 @@ writeFileSync(
 
 // Please note that this file is autogenerated by "npm run postversion" script.
 
-import {VersionInfo} from '@api/frontendapi';
+import {VersionInfo} from '@api/root.ui';
 
 // prettier-ignore
 export const version: VersionInfo = ${JSON.stringify(gitInfo, null, 2).replace(/\"/g, '\'')};

src/app/backend/resource/pod/detail.go

@@ -76,6 +76,9 @@ type Container struct {
 
 	// Command arguments
 	Args []string `json:"args"`
+
+	// Information about mounted volumes
+	VolumeMounts []VolumeMount `json:"volumeMounts"`
 }
 
 // EnvVar represents an environment variable of a container.
@@ -92,6 +95,23 @@ type EnvVar struct {
 	ValueFrom *v1.EnvVarSource `json:"valueFrom"`
 }
 
+type VolumeMount struct {
+	// Name of the variable.
+	Name string `json:"name"`
+
+	// Is the volume read only ?
+	ReadOnly bool `json:"readOnly"`
+
+	// Path within the container at which the volume should be mounted. Must not contain ':'.
+	MountPath string `json:"mountPath"`
+
+	// Path within the volume from which the container's volume should be mounted. Defaults to "" (volume's root).
+	SubPath string `json:"subPath"`
+
+	// Information about the Volume itself
+	Volume v1.Volume `json:"volume"`
+}
+
 // GetPodDetail returns the details of a named Pod from a particular namespace.
 func GetPodDetail(client kubernetes.Interface, metricClient metricapi.MetricClient, namespace, name string) (
 	*PodDetail, error) {
@@ -179,6 +199,31 @@ func getPodController(client kubernetes.Interface, nsQuery *common.NamespaceQuer
 	return &ctrl, nil
 }
 
+func getVolume(volumes []v1.Volume, volumeName string) v1.Volume {
+	for _, volume := range volumes {
+		if volume.Name == volumeName {
+			// yes, this is exponential, but N is VERY small, so the malloc for creating a named dictionary would probably take longer
+			return volume
+		}
+	}
+	return v1.Volume{}
+}
+
+func extractContainerMounts(container v1.Container, pod *v1.Pod) []VolumeMount {
+	volume_mounts := make([]VolumeMount, 0)
+	for _, a_volume_mount := range container.VolumeMounts {
+		volume_mount := VolumeMount{
+			Name:      a_volume_mount.Name,
+			ReadOnly:  a_volume_mount.ReadOnly,
+			MountPath: a_volume_mount.MountPath,
+			SubPath:   a_volume_mount.SubPath,
+			Volume:    getVolume(pod.Spec.Volumes, a_volume_mount.Name),
+		}
+		volume_mounts = append(volume_mounts, volume_mount)
+	}
+	return volume_mounts
+}
+
 func extractContainerInfo(containerList []v1.Container, pod *v1.Pod, configMaps *v1.ConfigMapList, secrets *v1.SecretList) []Container {
 	containers := make([]Container, 0)
 	for _, container := range containerList {
@@ -197,12 +242,15 @@ func extractContainerInfo(containerList []v1.Container, pod *v1.Pod, configMaps
 		}
 		vars = append(vars, evalEnvFrom(container, configMaps, secrets)...)
 
+		volume_mounts := extractContainerMounts(container, pod)
+
 		containers = append(containers, Container{
-			Name:     container.Name,
-			Image:    container.Image,
-			Env:      vars,
-			Commands: container.Command,
-			Args:     container.Args,
+			Name:         container.Name,
+			Image:        container.Image,
+			Env:          vars,
+			Commands:     container.Command,
+			Args:         container.Args,
+			VolumeMounts: volume_mounts,
 		})
 	}
 	return containers

src/app/frontend/_theming.scss

@@ -317,4 +317,8 @@
   .kd-edit-active {
     color: map-get($colors, primary);
   }
+
+  .kd-volume-mounts {
+    border: 1px solid $border;
+  }
 }

src/app/frontend/about/actionbar/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component} from '@angular/core';
-import {VersionInfo} from '@api/frontendapi';
+import {VersionInfo} from '@api/root.ui';
 import {ConfigService} from '../../common/services/global/config';
 
 @Component({selector: '', templateUrl: './template.html'})

src/app/frontend/about/component.spec.ts

@@ -16,7 +16,7 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {AppConfig} from '@api/backendapi';
+import {AppConfig} from '@api/root.api';
 import {SharedModule} from 'shared.module';
 import {CardComponent} from '../common/components/card/component';
 import {AssetsService} from '../common/services/global/assets';

src/app/frontend/about/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {VersionInfo} from '@api/frontendapi';
+import {VersionInfo} from '@api/root.ui';
 import {AssetsService} from '../common/services/global/assets';
 import {ConfigService} from '../common/services/global/config';
 

src/app/frontend/chrome/nav/pinner/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {PinnedResource} from '@api/backendapi';
+import {PinnedResource} from '@api/root.api';
 import {PinnerService} from '../../../common/services/global/pinner';
 import {Resource} from '../../../common/services/resource/endpoint';
 

src/app/frontend/chrome/userpanel/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, OnInit} from '@angular/core';
-import {LoginStatus} from '@api/backendapi';
+import {LoginStatus} from '@api/root.api';
 import {AuthService} from '../../common/services/global/authentication';
 
 @Component({

src/app/frontend/common/components/actionbar/detailactions/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ObjectMeta, TypeMeta} from '@api/backendapi';
+import {ObjectMeta, TypeMeta} from '@api/root.api';
 import {ResourceMeta} from '../../../services/global/actionbar';
 
 @Component({

src/app/frontend/common/components/actionbar/detailactions/delete/component.ts

@@ -14,7 +14,7 @@
 
 import {Component, Input, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {ObjectMeta, TypeMeta} from '@api/backendapi';
+import {ObjectMeta, TypeMeta} from '@api/root.api';
 import {first} from 'rxjs/operators';
 
 import {VerberService} from '../../../../services/global/verber';

src/app/frontend/common/components/actionbar/detailactions/edit/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ObjectMeta, TypeMeta} from '@api/backendapi';
+import {ObjectMeta, TypeMeta} from '@api/root.api';
 
 import {VerberService} from '../../../../services/global/verber';
 

src/app/frontend/common/components/actionbar/detailactions/exec/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ObjectMeta} from '@api/backendapi';
+import {ObjectMeta} from '@api/root.api';
 import {KdStateService} from '../../../../services/global/state';
 
 @Component({

src/app/frontend/common/components/actionbar/detailactions/pin/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ObjectMeta, TypeMeta} from '@api/backendapi';
+import {ObjectMeta, TypeMeta} from '@api/root.api';
 import {PinnerService} from '../../../../services/global/pinner';
 
 @Component({

src/app/frontend/common/components/actionbar/detailactions/scale/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ObjectMeta, TypeMeta} from '@api/backendapi';
+import {ObjectMeta, TypeMeta} from '@api/root.api';
 
 import {VerberService} from '../../../../services/global/verber';
 

src/app/frontend/common/components/actionbar/detailactions/trigger/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ObjectMeta, TypeMeta} from '@api/backendapi';
+import {ObjectMeta, TypeMeta} from '@api/root.api';
 
 import {VerberService} from '../../../../services/global/verber';
 

src/app/frontend/common/components/breadcrumbs/component.ts

@@ -14,7 +14,7 @@
 
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Params, Route, Router} from '@angular/router';
-import {Breadcrumb} from '@api/frontendapi';
+import {Breadcrumb} from '@api/root.ui';
 import {distinctUntilChanged, filter} from 'rxjs/operators';
 import {POD_DETAIL_ROUTE} from '../../../resource/workloads/pod/routing';
 import {REPLICASET_DETAIL_ROUTE} from '../../../resource/workloads/replicaset/routing';

src/app/frontend/common/components/card/style.scss

@@ -19,10 +19,19 @@
   .mat-card {
     min-width: 100 * $baseline-grid;
     padding: 0;
-  }
 
-  .mat-card.kd-graph {
-    min-width: unset;
+    &.kd-inner-table {
+      box-shadow: none;
+      margin: 0;
+
+      .mat-card-content {
+        padding: 0;
+      }
+    }
+
+    &.kd-graph {
+      min-width: unset;
+    }
   }
 
   .mat-card-title {

src/app/frontend/common/components/card/template.html

@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 
-<mat-card [ngClass]="{'kd-minimized-card': !expanded && !graphMode, 'kd-graph': graphMode}">
+<mat-card [ngClass]="{'kd-minimized-card': !expanded && !graphMode, 'kd-graph': graphMode, 'kd-inner-table': role === 'inner'}">
   <mat-card-title *ngIf="withTitle"
                   [ngClass]="getTitleClasses()"
                   (click)="onCardHeaderClick(); $event.stopPropagation()"

src/app/frontend/common/components/chips/component.ts

@@ -22,7 +22,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import {StringMap} from '@api/backendapi';
+import {StringMap} from '@api/root.api';
 
 import {GlobalSettingsService} from '../../services/global/globalsettings';
 

src/app/frontend/common/components/condition/component.ts

@@ -14,7 +14,7 @@
 
 import {Component, Input, OnInit} from '@angular/core';
 import {MatTableDataSource} from '@angular/material/table';
-import {Condition} from 'typings/backendapi';
+import {Condition} from 'typings/root.api';
 
 @Component({
   selector: 'kd-condition-list',

src/app/frontend/common/components/container/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnChanges} from '@angular/core';
-import {ConfigMapKeyRef, Container, EnvVar, SecretKeyRef} from '@api/backendapi';
+import {ConfigMapKeyRef, Container, EnvVar, SecretKeyRef} from '@api/root.api';
 import {KdStateService} from '../../services/global/state';
 
 @Component({

src/app/frontend/common/components/container/style.scss

@@ -21,3 +21,9 @@
   align-self: baseline;
   margin-left: $baseline-grid / 2;
 }
+
+.kd-volume-mounts {
+  border-radius: $baseline-grid / 4;
+  margin-right: $baseline-grid;
+  margin-top: $baseline-grid / 2;
+}

src/app/frontend/common/components/container/template.html

@@ -106,5 +106,23 @@
         </div>
       </div>
     </kd-property>
+
+    <kd-property *ngIf="container?.volumeMounts?.length > 0"
+                 [stretched]="true"
+                 fxFlex="100">
+      <div key
+           i18n>Mounts</div>
+      <div value
+           class="kd-volume-mounts">
+        <kd-volumemounts-list [volumeMounts]="container?.volumeMounts"
+                              [namespace]="namespace"
+                              [initialized]="initialized">
+        </kd-volumemounts-list>
+      </div>
+    </kd-property>
+  </div>
+
+  <div content>
   </div>
+
 </kd-card>

src/app/frontend/common/components/creator/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {ResourceOwner} from '@api/backendapi';
+import {ResourceOwner} from '@api/root.api';
 import {KdStateService} from '../../services/global/state';
 
 @Component({

src/app/frontend/common/components/endpoint/cardlist/component.ts

@@ -14,7 +14,7 @@
 
 import {Component, Input} from '@angular/core';
 import {MatTableDataSource} from '@angular/material/table';
-import {Endpoint} from '@api/backendapi';
+import {Endpoint} from '@api/root.api';
 
 @Component({
   selector: 'kd-endpoint-card-list',

src/app/frontend/common/components/endpoint/external/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {Endpoint} from '@api/backendapi';
+import {Endpoint} from '@api/root.api';
 
 /**
  * Component definition object for the component that displays the endpoints which are accessible

src/app/frontend/common/components/endpoint/internal/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {Endpoint} from '@api/backendapi';
+import {Endpoint} from '@api/root.api';
 
 /**
  * Component definition object for the component that displays the endpoints which are accessible

src/app/frontend/common/components/graph/component.ts

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {DataPoint, Metric} from '@api/backendapi';
-import {ViewportMetadata} from '@api/frontendapi';
+import {DataPoint, Metric} from '@api/root.api';
+import {ViewportMetadata} from '@api/root.ui';
 import {curveMonotoneX, timeFormat} from 'd3';
 
 import {FormattedValue} from './helper';

src/app/frontend/common/components/graphcard/component.spec.ts

@@ -14,7 +14,7 @@
 
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Metric} from '@api/backendapi';
+import {Metric} from '@api/root.api';
 
 import {SharedModule} from '../../../shared.module';
 import {CardComponent} from '../card/component';

src/app/frontend/common/components/graphcard/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
-import {Metric} from '@api/backendapi';
+import {Metric} from '@api/root.api';
 import {GraphType} from '../graph/component';
 
 @Component({selector: 'kd-graph-card', templateUrl: './template.html'})

src/app/frontend/common/components/graphmetrics/component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {Metric} from '@api/backendapi';
+import {Metric} from '@api/root.api';
 import {GraphType} from '../graph/component';
 
 @Component({

src/app/frontend/common/components/ingressrulelist/component.ts

@@ -14,7 +14,7 @@
 
 import {Component, Input} from '@angular/core';
 import {MatTableDataSource} from '@angular/material/table';
-import {IngressSpecRule, IngressSpecRuleHttpPath} from '@api/backendapi';
+import {IngressSpecRule, IngressSpecRuleHttpPath} from '@api/root.api';
 import {KdStateService} from '../../services/global/state';
 import {GlobalServicesModule} from '../../services/global/module';