Added Functions tab to left navigation menu in Dev perspective

openshift · Sep 20, 2023 · 0bd1072 · 0bd1072
1 parent b5aa690
commit 0bd1072
Show file tree

Hide file tree

Showing 26 changed files with 607 additions and 45 deletions.
diff --git a/frontend/packages/console-shared/src/hooks/useTabbedTableBreadcrumb.ts b/frontend/packages/console-shared/src/hooks/useTabbedTableBreadcrumb.ts
@@ -20,6 +20,7 @@ export const useTabbedTableBreadcrumbsFor = (
   subTab: string = null,
   customBreadcrumbName?: string,
   customBreadcrumbURLRequired?: boolean,
+  customBreadCrumbDetailsPrefix?: string,
 ) => {
   const { t } = useTranslation();
   const { label, labelKey, labelPlural, labelPluralKey } = kindObj;
@@ -39,7 +40,7 @@ export const useTabbedTableBreadcrumbsFor = (
             },
             {
               name: t('console-shared~{{label}} details', {
-                label: labelKey ? t(labelKey) : label,
+                label: customBreadCrumbDetailsPrefix || (labelKey ? t(labelKey) : label),
               }),
               path: match.url,
             },
@@ -48,6 +49,7 @@ export const useTabbedTableBreadcrumbsFor = (
       subTab,
       customBreadcrumbName,
       customBreadcrumbURLRequired,
+      customBreadCrumbDetailsPrefix,
       labelPluralKey,
       t,
       labelPlural,

diff --git a/frontend/packages/dev-console/console-extensions.json b/frontend/packages/dev-console/console-extensions.json
@@ -1046,7 +1046,8 @@
         "/helm-releases",
         "/upload-jar",
         "/search-page",
-        "/builds"
+        "/builds",
+        "/functions"
       ],
       "component": { "$codeRef": "common.NamespaceRedirect" }
     }

diff --git a/frontend/packages/dev-console/integration-tests/support/constants/global.ts b/frontend/packages/dev-console/integration-tests/support/constants/global.ts
@@ -17,6 +17,7 @@ export enum devNavigationMenu {
   Routes = 'Routes',
   Deployments = 'Deployments',
   Consoles = 'Consoles',
+  Functions = 'Functions',
 }
 
 export enum adminNavigationBar {

diff --git a/frontend/packages/dev-console/integration-tests/support/constants/pageTitle.ts b/frontend/packages/dev-console/integration-tests/support/constants/pageTitle.ts
@@ -62,4 +62,5 @@ export const pageTitle = {
   Samples: 'Samples',
   CreateServerlessFunction: 'Create Serverless function',
   AddGitRepository: 'Add Git Repository',
+  Functions: 'Functions',
 };
diff --git a/frontend/packages/dev-console/integration-tests/support/pageObjects/global-po.ts b/frontend/packages/dev-console/integration-tests/support/pageObjects/global-po.ts
@@ -12,6 +12,7 @@ export const devNavigationMenuPO = {
   secret: '#Secret',
   dropdownButton: '[data-test-id="dropdown-button"]',
   environments: '[data-test-id="environments-header"]',
+  functions: '[data-test-id="functions-details-header"]',
 };
 
 export const adminNavigationMenuPO = {

diff --git a/frontend/packages/dev-console/integration-tests/support/pages/app.ts b/frontend/packages/dev-console/integration-tests/support/pages/app.ts
@@ -235,6 +235,12 @@ export const navigateTo = (opt: devNavigationMenu) => {
       cy.testA11y('cluster Page in dev perspective');
       break;
     }
+    case devNavigationMenu.Functions: {
+      cy.get(devNavigationMenuPO.functions).click();
+      detailsPage.titleShouldContain(pageTitle.Functions);
+      cy.testA11y('Functions Page in dev perspective');
+      break;
+    }
     default: {
       throw new Error('Option is not available');
     }

diff --git a/frontend/packages/dev-console/integration-tests/support/pages/functions/createGitWorkload.ts b/frontend/packages/dev-console/integration-tests/support/pages/functions/createGitWorkload.ts
@@ -10,12 +10,15 @@ export const createGitWorkload = (
   resourceType: string = 'Deployment',
   appName: string = 'nodejs-ex-git-app',
   isPipelineSelected: boolean = false,
+  isServerlessFunction: boolean = false,
 ) => {
   addPage.selectCardFromOptions(addOptions.ImportFromGit);
   gitPage.enterGitUrl(gitUrl);
   gitPage.verifyValidatedMessage(gitUrl);
   gitPage.enterComponentName(componentName);
-  gitPage.selectResource(resourceType);
+  if (!isServerlessFunction) {
+    gitPage.selectResource(resourceType);
+  }
   gitPage.enterAppName(appName);
   if (isPipelineSelected === true) {
     gitPage.selectAddPipeline();
@@ -42,14 +45,22 @@ export const createGitWorkloadIfNotExistsOnTopologyPage = (
   resourceType: string = 'Deployment',
   appName?: string,
   isPipelineSelected: boolean = false,
+  isServerlessFunction: boolean = false,
 ) => {
   navigateTo(devNavigationMenu.Topology);
   topologyPage.waitForLoad();
   cy.get('body').then(($body) => {
     if ($body.find(topologyPO.emptyStateIcon).length) {
       cy.log(`Topology doesn't have workload "${componentName}", lets create it`);
       navigateTo(devNavigationMenu.Add);
-      createGitWorkload(gitUrl, componentName, resourceType, appName);
+      createGitWorkload(
+        gitUrl,
+        componentName,
+        resourceType,
+        appName,
+        isPipelineSelected,
+        isServerlessFunction,
+      );
       topologyPage.verifyWorkloadInTopologyPage(componentName);
     } else {
       topologyPage.search(componentName);
@@ -58,7 +69,14 @@ export const createGitWorkloadIfNotExistsOnTopologyPage = (
           cy.log(`knative service: ${componentName} is already created`);
         } else {
           navigateTo(devNavigationMenu.Add);
-          createGitWorkload(gitUrl, componentName, resourceType, appName, isPipelineSelected);
+          createGitWorkload(
+            gitUrl,
+            componentName,
+            resourceType,
+            appName,
+            isPipelineSelected,
+            isServerlessFunction,
+          );
           topologyPage.verifyWorkloadInTopologyPage(componentName);
         }
       });

diff --git a/frontend/packages/dev-console/integration-tests/utilities/appFunctions.ts b/frontend/packages/dev-console/integration-tests/utilities/appFunctions.ts
@@ -13,6 +13,7 @@ export enum NavigationMenu {
   ProjectDetails = 'Project Details',
   ProjectAccess = 'Project Access',
   Pipelines = 'Pipelines',
+  Functions = 'Functions',
 }
 
 export enum Perspective {
@@ -72,6 +73,12 @@ export const naviagteTo = async function (opt: NavigationMenu) {
       await browser.wait(EC.urlContains('project-access'), ELEMENT_WAIT);
       break;
     }
+    case NavigationMenu.Functions: {
+      await click($('a.pf-c-nav__link[data-component="pf-nav-expandable"]'));
+      await click($('[data-test-id="functions-details-header"]'));
+      await browser.wait(EC.urlContains('functions'), ELEMENT_WAIT);
+      break;
+    }
     default: {
       throw new Error('Option is not available');
     }

diff --git a/frontend/packages/knative-plugin/console-extensions.json b/frontend/packages/knative-plugin/console-extensions.json
@@ -409,6 +409,67 @@
       "required": ["KNATIVE_SERVING"]
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": ["/functions/all-namespaces", "/functions/ns/:ns"],
+      "component": {
+        "$codeRef": "overviewComponent.FunctionsPage"
+      }
+    },
+    "flags": {
+      "required": ["KNATIVE_SERVING"]
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": ["/functions"],
+      "component": {
+        "$codeRef": "knativeComponent.NamespaceRedirect"
+      }
+    },
+    "flags": {
+      "required": ["KNATIVE_SERVING"]
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "functions",
+      "perspective": "dev",
+      "section": "resources",
+      "name": "%knative-plugin~Functions%",
+      "href": "/functions",
+      "namespaced": true,
+      "insertBefore": "builds",
+      "dataAttributes": {
+        "data-quickstart-id": "qs-nav-functions",
+        "data-test-id": "functions-details-header"
+      }
+    },
+    "flags": {
+      "required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": ["/functions/ns/:ns/:name"],
+      "model": {
+        "group": "serving.knative.dev",
+        "version": "v1",
+        "kind": "Service"
+      },
+      "component": { "$codeRef": "overviewComponent.FunctionDetailsPage" }
+    },
+    "flags": {
+      "required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {

diff --git a/...packages/knative-plugin/integration-tests/features/functions/functions-navigation.feature b/...packages/knative-plugin/integration-tests/features/functions/functions-navigation.feature
@@ -0,0 +1,32 @@
+@knative-serverless @knative
+Feature: Navigations to Serverless Functions page 
+              As a user, I want to navigate to Serverless functions page in developer perspective
+
+        Background:
+            Given user is at developer perspective 
+              And user has created or selected namespace "aut-knative-functions"
+
+
+        @smoke
+        Scenario: User navigates to Functions page when no Function is created: KN-08-TC01
+             When user clicks on the Functions tab
+             Then user redirected to Functions page
+              And user is able to see the message "No Functions found"
+
+        @smoke
+        Scenario: User navigates to Functions page when Function is created: KN-08-TC02
+            Given user has created a serverless function using repo "https://github.com/Lucifergene/serverless-func-repo" with name "serverless-func-test-repo"
+             When user clicks on the Functions tab
+             Then user redirected to Functions page
+              And user will see the serverless functions listed
+
+
+        @smoke
+        Scenario: User navigates to Function details page: KN-08-TC03
+            Given user clicks on the Functions tab
+             When user clicks on the function name "serverless-func-test-repo"
+             Then user will see the Details page opened
+              And user is able to see service URL and Revisions details
+              And user is able to see Containers sections
+
+
diff --git a/frontend/packages/knative-plugin/integration-tests/support/pageObjects/functions-po.ts b/frontend/packages/knative-plugin/integration-tests/support/pageObjects/functions-po.ts
@@ -0,0 +1,5 @@
+export const functionsPO = {
+  emptyState: 'div.pf-c-empty-state__content',
+  table: '[role="grid"]',
+  search: '[data-test-id="item-filter"]',
+};
diff --git a/frontend/packages/knative-plugin/integration-tests/support/pages/functions/functions-page.ts b/frontend/packages/knative-plugin/integration-tests/support/pages/functions/functions-page.ts
@@ -0,0 +1,18 @@
+import { functionsPO } from '../../pageObjects/functions-po';
+
+export const functionsPage = {
+  verifyTitle: () => cy.byTestSectionHeading('Service details').should('be.visible'),
+  verifyMessage: (noFunctionsFound: string) =>
+    cy.get(functionsPO.emptyState).contains(noFunctionsFound),
+  verifyFunctionsListed: () => {
+    cy.get(functionsPO.table).get('table').its('length').should('be.greaterThan', 0);
+  },
+  clickFunctionName: (name: string) => cy.get(`a[title="${name}"]`).click(),
+  search: (name: string) => {
+    cy.get(functionsPO.search).clear().type(name);
+  },
+  verifyServiceURL: () => cy.byTestID('URL').should('be.visible'),
+  verifyServiceRevision: () => cy.byTestID('Revisions').should('be.visible'),
+  verifyContainerSection: () =>
+    cy.get('[data-test-section-heading="Containers"]').should('be.visible'),
+};
diff --git a/...ative-plugin/integration-tests/support/step-definitions/functions/functions-navigation.ts b/...ative-plugin/integration-tests/support/step-definitions/functions/functions-navigation.ts
@@ -0,0 +1,64 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { detailsPage } from '@console/cypress-integration-tests/views/details-page';
+import {
+  devNavigationMenu,
+  switchPerspective,
+} from '@console/dev-console/integration-tests/support/constants';
+import {
+  createGitWorkloadIfNotExistsOnTopologyPage,
+  navigateTo,
+  perspective,
+} from '@console/dev-console/integration-tests/support/pages';
+import { functionsPage } from '../../pages/functions/functions-page';
+
+Given('user is at developer perspective', () => {
+  perspective.switchTo(switchPerspective.Developer);
+});
+
+When('user clicks on the Functions tab', () => {
+  navigateTo(devNavigationMenu.Functions);
+});
+
+Then('user redirected to Functions page', () => {
+  detailsPage.titleShouldContain('Functions');
+});
+
+Then('user is able to see the message {string}', (noFunctionsFound: string) => {
+  functionsPage.verifyMessage(noFunctionsFound);
+});
+
+Given(
+  'user has created a serverless function using repo {string} with name {string}',
+  (gitRepo: string, name: string) => {
+    createGitWorkloadIfNotExistsOnTopologyPage(
+      gitRepo,
+      name,
+      'Serverless Function',
+      `${name}-app`,
+      false,
+      true,
+    );
+  },
+);
+
+Then('user will see the serverless functions listed', () => {
+  functionsPage.verifyFunctionsListed();
+});
+
+When('user clicks on the function name {string}', (functionName: string) => {
+  functionsPage.search(functionName);
+  functionsPage.clickFunctionName(functionName);
+});
+
+Then('user will see the Details page opened', () => {
+  functionsPage.verifyTitle();
+});
+
+Then('user is able to see service URL and Revisions details', () => {
+  functionsPage.verifyServiceURL();
+  functionsPage.verifyServiceRevision();
+});
+
+Then('user is able to see Containers sections', () => {
+  functionsPage.verifyContainerSection();
+});
diff --git a/frontend/packages/knative-plugin/locales/en/knative-plugin.json b/frontend/packages/knative-plugin/locales/en/knative-plugin.json
@@ -1,4 +1,5 @@
 {
+  "Functions": "Functions",
   "Eventing": "Eventing",
   "Event Source": "Event Source",
   "Create an Event source to register interest in a class of events from a particular system": "Create an Event source to register interest in a class of events from a particular system",
@@ -76,6 +77,7 @@
   "Set traffic distribution": "Set traffic distribution",
   "Move {{kind}}": "Move {{kind}}",
   "Edit {{applicationName}}": "Edit {{applicationName}}",
+  "Edit Service": "Edit Service",
   "Move sink": "Move sink",
   "Delete Revision": "Delete Revision",
   "Edit URI": "Edit URI",
@@ -197,6 +199,8 @@
   "{{OKcount}} OK / {{conditionsSize}}": "{{OKcount}} OK / {{conditionsSize}}",
   "Subscriber": "Subscriber",
   "Filters": "Filters",
+  "No Functions found": "No Functions found",
+  "Select a Project to view its details<1></1>.": "Select a Project to view its details<1></1>.",
   "There is an existing placeholder Service with name {{name}} in namespace {{namespace}}. Please provide another name": "There is an existing placeholder Service with name {{name}} in namespace {{namespace}}. Please provide another name",
   "This feature will create a new serverless deployment next to your existing deployment. Other configurations, including the traffic pattern, can be modified in the form.": "This feature will create a new serverless deployment next to your existing deployment. Other configurations, including the traffic pattern, can be modified in the form.",
   "No configurations found for this resource.": "No configurations found for this resource.",
@@ -242,7 +246,10 @@
   "Route details": "Route details",
   "URL": "URL",
   "Traffic": "Traffic",
+  "Service details": "Service details",
+  "Containers": "Containers",
   "Generation": "Generation",
+  "Non-functions": "Non-functions",
   "Connects <strong>{{resourceName}}</strong> to": "Connects <1>{{resourceName}}</1> to",
   "Select a sink": "Select a sink",
   "Save": "Save",