Add labels to workload status charts (#5994)

* Add labels to workload status charts

* Update translation files

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

@@ -34,6 +34,10 @@ export const emptyResourcesRatio: ResourcesRatio = {
 export class WorkloadStatusComponent {
   @Input() resourcesRatio = emptyResourcesRatio;
   colors: string[] = [];
+  animations = false;
+  labels = true;
+  trimLabels = false;
+  size = [350, 250];
 
   getCustomColor(label: string): string {
     if (label.includes('Running')) {

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

@@ -25,9 +25,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.cronJobRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%
@@ -43,9 +45,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.daemonSetRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%
@@ -61,9 +65,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.deploymentRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%
@@ -79,9 +85,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.jobRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%
@@ -97,9 +105,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.podRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false"
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels"
                               id="kd-graph-pods">
           <ng-template #tooltipTemplate
                        let-model="model">
@@ -116,9 +126,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.replicaSetRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%
@@ -134,9 +146,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.replicationControllerRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%
@@ -152,9 +166,11 @@ limitations under the License.
       <div fxLayout="column"
            fxLayoutAlign="center center">
         <ngx-charts-pie-chart [results]="resourcesRatio.statefulSetRatio"
-                              [view]="[200,200]"
+                              [view]="size"
                               [customColors]="getCustomColor"
-                              [animations]="false">
+                              [animations]="animations"
+                              [labels]="labels"
+                              [trimLabels]="trimLabels">
           <ng-template #tooltipTemplate
                        let-model="model">
             {{model.value | number}}%