Merge branch 'main' into remove-column-layout-flag

kyma-project · Jun 23, 2024 · 4e58d4e · 4e58d4e
2 parents 7cd8930 + 2c7bb2c
commit 4e58d4e
Show file tree

Hide file tree

Showing 43 changed files with 930 additions and 345 deletions.
diff --git a/.github/workflows/busola-local-build.yml b/.github/workflows/busola-local-build.yml
@@ -5,6 +5,7 @@ on:
     branches:
       - main
     paths:
+      - ".github/workflows/busola-local-build.yml"
       - "backend/**"
       - "public/**"
       - "src/**"
@@ -15,6 +16,7 @@ on:
   pull_request_target:
     types: [opened, edited, synchronize, reopened, ready_for_review]
     paths:
+      - ".github/workflows/busola-local-build.yml"
       - "backend/**"
       - "public/**"
       - "src/**"

diff --git a/.github/workflows/cypress-tests.yml → ...kflows/pull-integration-namespace-k3d.yml b/.github/workflows/cypress-tests.yml → ...kflows/pull-integration-namespace-k3d.yml
@@ -1,21 +1,25 @@
-# fragments shamelessly stolen from https://github.com/kyma-project/api-gateway/tree/main/.github
-name: Cypress PoC
-on: workflow_dispatch
+name: pull-integration-namespace-k3d
+
+on: 
+  pull_request:
+    types: [opened, edited, synchronize, reopened, ready_for_review]
+    paths:
+      - ".github/workflows/pull-integration-namespace-k3d.yml"
+      - "resources/**"
+      - "tests/**"
+      - "nginx/**"
+      - "src/**"
+      - "tests/**"
+
 jobs:
-  test:
+  run-test:
     runs-on: ubuntu-latest
-    # environment:
-    #     name: release
     steps:
-      - uses: gardenlinux/workflow-telemetry-action@6f19ac2411a52a120abb74c812592b44f165d05c # pin@v1
+      - uses: gardenlinux/workflow-telemetry-action@v2
         with:
-          metric_frequency: 1
-          proc_trace_min_duration: 10
-          proc_trace_chart_max_count: 50
           comment_on_pr: false
       - uses: actions/checkout@v4
         with:
-          # ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 0
       - name: Create Single Cluster
         uses: AbsaOSS/k3d-action@4e8b3239042be1dc0aed6c5eb80c13b18200fc79 #v2.4.0
@@ -54,14 +58,14 @@ jobs:
           cd tests/integration
           npm ci && npm run "test:namespace"
       - name: Uploads artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: cypress-${{ github.job }}
           path: tests/integration/cypress/
           retention-days: 90
       - name: Upload Busola logs
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: busola-logs-${{ github.job }}

diff --git a/docs/extensibility/30-details-summary.md b/docs/extensibility/30-details-summary.md
@@ -4,11 +4,11 @@ You can customize the details page of the user interface component of your resou
 
 ## Available Parameters
 
-In the **data.details** section you can provide configuration of four optional components: **header**, **body**, **status** and **resourceGraph**. The **header**, **status** and **body** components are lists of widgets visible in the respective sections of the details page. You can use the **resourceGraph** component to present the relationship between different resources.
+In the **data.details** section you can provide configuration of four optional components: **header**, **body**, **status**, **health** and **resourceGraph**. The **header**, **status**, **body** and **health** components are lists of widgets visible in the respective sections of the details page. You can use the **resourceGraph** component to present the relationship between different resources.
 
-### **header** , **status** and **body** Parameters
+### **header**, **status**, **body** and **health** Parameters
 
-This table lists the available parameters of the **data.details.header**, **data.details.status** and/or **data.details.body** section in your resource ConfigMap. You can learn whether each of the parameters is required and what purpose it serves. The **data.details.header** and **data.details.body** components are arrays of objects.
+This table lists the available parameters of the **data.details.header**, **data.details.status**, **data.details.health** and/or **data.details.body** section in your resource ConfigMap. You can learn whether each of the parameters is required and what purpose it serves. The **data.details.header**, **data.details.status**, **data.details.health** and **data.details.body** components are arrays of objects.
 
 | Parameter             | Required | Type                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
 | --------------------- | -------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -24,41 +24,60 @@ Extra parameters might be available for specific widgets.
 See the following examples:
 
 ```yaml
-header:
-  - source: metadata.name
-  - source: spec.priority
-    widget: Badge
-  - source: "$join(spec.volumes.name, ', ')"
-body:
-  - name: columns
-    widget: Columns
-    children:
-      - name: left-panel
-        widget: Panel
-      - name: right-panel
-        widget: Panel
-  - name: summary
-    widget: Panel
-    children:
-      - source: metadata.name
-      - source: spec.priority
-        widget: Badge
-      - name: Volumes names of volumes with config map
-        source: "$join(spec.volumes['configMap' in $keys($)].name, ', ')"
-  - source: spec.details
-    widget: CodeViewer
-    language: "'json'"
-  - source: spec.configPatches
-    widget: Panel
-    children:
-      - source: applyTo
-      - source: match.context
-        visibility: '$exists($value.match.context)'
-  - source: spec.configPatches
-    widget: Table
-    children:
-      - source: applyTo
-      - source: match.context
+details:
+  header:
+    - source: metadata.name
+    - source: spec.priority
+      widget: Badge
+    - source: "$join(spec.volumes.name, ', ')"
+  status:
+    - name: Replicas
+      source: status.replicas
+    - name: Condition details
+      widget: ConditionList
+      source: status.conditions
+  health:
+    - name: MyTitle
+      widget: StatisticalCard
+      source: status
+      mainValue:
+        name: MySubtitle
+        source: $item.importantValue
+      children:
+        - name: ExtraInformation1
+          source: $item.value1
+        - name: ExtraInformation2
+          source: $item.value2
+  body:
+    - name: columns
+      widget: Columns
+      children:
+        - name: left-panel
+          widget: Panel
+        - name: right-panel
+          widget: Panel
+    - name: summary
+      widget: Panel
+      children:
+        - source: metadata.name
+        - source: spec.priority
+          widget: Badge
+        - name: Volumes names of volumes with config map
+          source: "$join(spec.volumes['configMap' in $keys($)].name, ', ')"
+    - source: spec.details
+      widget: CodeViewer
+      language: "'json'"
+    - source: spec.configPatches
+      widget: Panel
+      children:
+        - source: applyTo
+        - source: match.context
+          visibility: '$exists($value.match.context)'
+    - source: spec.configPatches
+      widget: Table
+      children:
+        - source: applyTo
+        - source: match.context
 ```
 
 ### Data Scoping

diff --git a/docs/extensibility/50-list-and-details-widgets.md b/docs/extensibility/50-list-and-details-widgets.md
@@ -1,6 +1,7 @@
 # List and Details Widgets
 
-You can use list and details widgets in the lists and details pages in the user interface component of your resource. You can distinguish the following widget types:
+You can use list and details widgets in the lists and details pages in the user interface component of your resource.
+You can distinguish the following widget types:
 
 - [Inline widgets](#inline-widgets) for simple values in **data.list**, **data.details.header**, **data.details.status** and **data.detail.bodies**
   - [`Bagde`](#badge)
@@ -23,6 +24,7 @@ You can use list and details widgets in the lists and details pages in the user
   - [`Plain`](#plain)
   - [`ResourceList`](#resourcelist)
   - [`ResourceRefs`](#resourcerefs)
+  - [`StatisticalCard`](#StatisticalCard)
   - [`Table`](#table)
   - [`Tabs`](#tabs)
 
@@ -91,16 +93,17 @@ This is an exaple of kind only:
   kindOnly: true
 ```
 
-### ConditionList
+### `ConditionList`
 
-The condition List widget renders the conditions as an expandable list with condition details.
+The `ConditionList` widget renders the conditions as an expandable list with condition details. This widget is primarily designed for the overview section **data.details.status**
 
-#### Example
+See the following example:
 
 ```yaml
-- name: Condition details
-  widget: ConditionList
-  source: status.conditions
+status:
+  - name: Condition details
+    widget: ConditionList
+    source: status.conditions
 ```
 
 <img src="./assets/display-widgets/ConditionList.png" alt="Example of a condition list widget" style="border: 1px solid #D2D5D9">
@@ -426,7 +429,7 @@ injections: |-
     design: information-1
     children:
       - widget: ResourceButton
-        source: "'Modify Modules'"
+        source: "'Add Modules'"
         resource: 
           customUrl: kymamodules
       - widget: ExternalLinkButton
@@ -578,6 +581,63 @@ See the following example:
 
 <img src="./assets/display-widgets/ResourceRefs.png" alt="Example of a ResourceRefs widget" style="border: 1px solid #D2D5D9">
 
+### `StatisticalCard`
+
+`StatisticalCard` widgets render a card component with several numerical pieces of information.
+To display the widget in the **Monitoring and Health** section of a details page, configure it in **data.details.health**.  
+To render the card within the dense grid layout in the **Monitoring and Health** section of **Cluster Details**, use [injections](#widget-injections-overview) (**destination: ClusterOverview, slot: health**).
+
+These are the available `StatisticalCard` widget parameters:
+
+| Parameter            | Required | Type                                       | Description                                                                                                                                                                                                              |
+| -------------------- | -------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **mainValue**        | **Yes**  | object                                     | The main value displayed using a bigger font.                                                                                                                                                                            |
+| **mainValue.source** | **Yes**  | string or [JSONata](jsonata.md) expression | Fetches data for the column. In its simplest form, it's the path to the value.                                                                                                                                           |
+| **mainValue.name**   | **Yes**  | string                                     | The name for the primary label of this field. Required for most widgets (except for some rare cases that don't display a label). This can be a key to use from the [**translation** section](./translations-section.md). |
+| **children**         | No       | array of objects                           | An array of additional values, listed next to the main one.                                                                                                                                                              |
+| **children.source**  | **Yes**  | string or [JSONata](jsonata.md) expression | Fetches data for the column. In its simplest form, it's the path to the value.                                                                                                                                           |
+| **children.name**    | **Yes**  | string                                     | The name for the primary label of this field. Required for most widgets (except for some rare cases that don't display a label). This can be a key to use from the [**translation** section](./translations-section.md). |
+
+This is an example of the widget configuration in the **data.details.health** section which allows the `StatisticalCard` to be displayed on the details page in the **Monitoring and Health** section:
+
+```yaml
+details: |-
+  health:
+    - name: MyTitle
+      widget: StatisticalCard
+      source: status
+      mainValue:
+        name: MySubtitle
+        source: $item.importantValue
+      children:
+        - name: ExtraInformation1
+          source: $item.value1
+        - name: ExtraInformation2
+          source: $item.value2
+```
+
+This is an example of the widget configured using injection which allows the `StatisticalCard` to be displayed in the **Monitoring and Health** section of **Cluster Details**:
+
+```yaml
+injections: |-
+  - name: MyTitle
+    widget: StatisticalCard
+    source: status
+    mainValue:
+      name: MySubtitle
+      source: $sum($item.importantValue)
+    children:
+      - name: ExtraInformation1
+        source: $max($item.value1)
+      - name: ExtraInformation2
+        source: $count($item.value2)
+    targets:
+      - slot: health
+        location: ClusterOverview
+```
+
+<img src="./assets/display-widgets/StatisticalCard.png" alt="Example of a StatisticalCard widget" style="border: 1px solid #D2D5D9" width="75%">
+
 ### `Table`
 
 Table widgets display array data as rows of a table instead of free-standing components. The **children** parameter defines the values used to render the columns. Similar to the **list** section of the ConfigMap, you should use inline widgets only as children.

diff --git a/docs/extensibility/70-widget-injection.md b/docs/extensibility/70-widget-injection.md
@@ -24,6 +24,7 @@ These are the available **injections** widget parameters:
 - **details-header** - In the header of the details view
 - **details-top** - At the top of the resource view
 - **banner** - At the top of the resource view. This slot should be only used with `location: ClusterOverview` and [`widget: FeaturedCard`](./50-list-and-details-widgets.md#featuredcard).
+- **health** - At the top of the resource view. This slot should be only used with `location: ClusterOverview` and [`widget: StatisticalCard`](./50-list-and-details-widgets.md#statisticalcard).
 - **list-header** - In the header of the list view
 
 ## Available **injections** Locations

diff --git a/docs/extensibility/assets/display-widgets/StatisticalCard.png b/docs/extensibility/assets/display-widgets/StatisticalCard.png
diff --git a/public/i18n/en.yaml b/public/i18n/en.yaml
@@ -12,7 +12,6 @@ cluster-overview:
     cluster-details: Cluster Details
     metadata: Metadata
   statistics:
-    title:  Monitoring and Health
     cpu-usage: 'CPU Usage'
     memory-usage: 'Memory Usage'
     namespaces-health: 'Namespaces Health'
@@ -327,6 +326,7 @@ common:
     link: Link
     loading: Loading...
     logs: Logs
+    monitoring-and-health: Monitoring and Health
     name: Name
     namespace: Namespace
     namespaces: Namespaces
@@ -933,6 +933,8 @@ kubeconfig-id:
   error: "Couldn't load kubeconfig ID; configuration not changed (Error: ${{error}})"
   must-be-an-object: Kubeconfig must be a JSON or YAML object.
 kyma-modules:
+  installed-modules: Installed Modules
+  modify-modules: Modify Modules
   module-added: Module added 
   module-uninstall: Module deleted
   learn-more: Learn more
@@ -1480,8 +1482,14 @@ settings:
     title: Interface
   language: Language
   other:
+    info: Changes to the page size only take effect locally. To set the global default page size, go to Preferences.
     default-page-size: Default Page Size
     title: Other
+    all: All
+    results-per-page: Results per page
+    page: Page
+    of: of {{pagesCount}}
+    total-items: '{{itemsCount}} items'
   theme: Theme
 stateful-sets:
   description: <0>StatefulSet</0> is used for the management of Pods' deployment and scaling.