ODC-7377: Add Functions tab to the side navigation menu in Developer prespective #13138

lokanandaprabhu · 2023-09-07T07:37:34Z

Story:
https://issues.redhat.com/browse/ODC-7377

Description:

In the developer perspective, in the left side navigation menu, added Functions tab inside Resources section, which list down all the serverless functions created for the specific namepsace and on click of function it opens the Service details tab

Screenshots:

Screen.Recording.2023-09-07.at.12.41.59.PM.mov

Tests:

openshift-ci-robot · 2023-09-07T07:37:37Z

@lokanandaprabhu: This pull request references ODC-7377 which is a valid jira issue.

In response to this:

Story:
https://issues.redhat.com/browse/ODC-7377

Description:

In the developer perspective, in the left side navigation menu, added Functions tab inside Resources section, which list down all the serverless functions created for the specific namepsace and on click of function it opens the Service details tab

Screenshots:

Screen.Recording.2023-09-07.at.12.41.59.PM.mov

Tests:
To-Do

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci · 2023-09-07T07:38:00Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: lokanandaprabhu
Once this PR has been reviewed and has the lgtm label, please assign invinciblejai for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-ci-robot · 2023-09-08T09:19:00Z

@lokanandaprabhu: This pull request references ODC-7377 which is a valid jira issue.

In response to this:

Story:
https://issues.redhat.com/browse/ODC-7377

Description:

In the developer perspective, in the left side navigation menu, added Functions tab inside Resources section, which list down all the serverless functions created for the specific namepsace and on click of function it opens the Service details tab

Screenshots:

Screen.Recording.2023-09-07.at.12.41.59.PM.mov

Tests:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

lokanandaprabhu · 2023-09-20T10:28:03Z

/cc @jerolimov

jerolimov

It works already really well and the code looks almost good to me. 👍

Just some minor ideas... (see below)

@sanketpathak can you please take a look into the e2e tests?

/uncc jcaianirh divyanshiGupta
/cc @sanketpathak @vikram-raj

jerolimov · 2023-09-20T16:02:06Z

frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx

+  const [revisions, revisionLoaded, revisionErrorLoad] = useK8sWatchResource<RevisionKind[]>({
+    kind: referenceForModel(RevisionModel),
+    namespace: obj.metadata.namespace,
+    isList: true,
+  });
+
+  const revisionsForService =
+    revisionLoaded &&
+    !revisionErrorLoad &&
+    revisions.filter(
+      (revision) =>
+        _.get(revision.metadata, `labels["serving.knative.dev/service"]`) === obj.metadata.name,
+    );


I think you can use a labelSelector in useK8sWatchResource to get only the matching revisions instead of loading all Revisions and then filter them on the client.

jerolimov · 2023-09-20T16:05:21Z

frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx

+          <div className="col-md-6">
+            {isServerlessFunction(obj) && (
+              <DetailsItem label={t('knative-plugin~Type')} obj={obj}>
+                {t('knative-plugin~Function')}
+              </DetailsItem>
+            )}
+            {obj?.status?.url && (
+              <DetailsItem label={t('knative-plugin~URL')} obj={obj} path="status.url">
+                <ExternalLink
+                  href={obj.status.url}
+                  additionalClassName="co-external-link--block"
+                  text={obj.status.url}
+                />
+              </DetailsItem>
+            )}
+            {revisionsForService && revisionLoaded && !revisionErrorLoad && (
+              <DetailsItem label={t('knative-plugin~Revisions')} obj={obj} path="status.traffic">
+                <RevisionsOverviewList
+                  revisions={revisionsForService}
+                  service={obj}
+                  hideSectionHeading
+                />
+              </DetailsItem>
+            )}
+          </div>


The DetailsItem component renders dt and dd, these HTML elements must be wrapped in a dl:

<div className="col-md-6"> <dl> {isServerlessFunction(obj) && ( <DetailsItem label={t('knative-plugin~Type')} obj={obj}> {t('knative-plugin~Function')} </DetailsItem> )} ...

jerolimov · 2023-09-20T16:09:38Z

frontend/packages/knative-plugin/src/types.ts

+export enum ServiceTypeValue {
+  Functions = 'Functions',
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'Non-functions' = 'Non-functions',
+}


It's an enum that should not be related to the labels that are displayed to the user. So you should clean this up:

Suggested change

export enum ServiceTypeValue {

Functions = 'Functions',

// eslint-disable-next-line @typescript-eslint/naming-convention

'Non-functions' = 'Non-functions',

}

export enum ServiceTypeValue {

Function = 'Function',

Service = 'Service',

}

If the value is what you render to the user, you should change that in that component.

jerolimov · 2023-09-20T16:11:46Z

frontend/packages/knative-plugin/console-extensions.json

+      }
+    },
+    "flags": {
+      "required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]


I recently tried to remove all the OPENSHIFT flags as there is no dependency here to OPENSHIFT. It's a feature that works on all clusters with Knative.

Suggested change

"required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]

"required": ["KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]

jerolimov · 2023-09-20T16:12:34Z

frontend/packages/knative-plugin/console-extensions.json

+      "component": { "$codeRef": "overviewComponent.FunctionDetailsPage" }
+    },
+    "flags": {
+      "required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]


Same as above. It's a feature that works on all clusters with Knative. Please remove OPENSHIFT from the dependency list:

Suggested change

"required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]

"required": ["KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]

jerolimov · 2023-09-20T16:19:44Z

/retest

openshift-ci · 2023-09-20T17:50:28Z

@lokanandaprabhu: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	`543fee4`	link	true	`/test e2e-gcp-console`

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here.

lokanandaprabhu · 2023-09-21T07:52:27Z

Addressed all review comments in PR - #13174

lokanandaprabhu · 2023-09-21T07:52:56Z

Closing this PR since PR - #13174 handles this feature story as well.

/close

openshift-ci · 2023-09-21T07:53:10Z

@lokanandaprabhu: Closed this PR.

In response to this:

Closing this PR since PR - #13174 handles this feature story as well.

/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Sep 7, 2023

openshift-ci bot requested review from divyanshiGupta and jcaianirh September 7, 2023 07:37

openshift-ci bot added the component/dev-console Related to dev-console label Sep 7, 2023

openshift-ci bot added component/knative Related to knative-plugin component/shared Related to console-shared kind/i18n Indicates issue or PR relates to internationalization or has content that needs to be translated labels Sep 7, 2023

lokanandaprabhu force-pushed the feature/ODC-7377 branch 2 times, most recently from 2ed88e7 to fb94b99 Compare September 8, 2023 09:18

lokanandaprabhu force-pushed the feature/ODC-7377 branch from fb94b99 to 170d42c Compare September 8, 2023 13:09

lokanandaprabhu force-pushed the feature/ODC-7377 branch 2 times, most recently from 0bd1072 to ab4c8ad Compare September 20, 2023 06:34

Added Functions tab to left navigation menu in Dev perspective

543fee4

lokanandaprabhu force-pushed the feature/ODC-7377 branch from ab4c8ad to 543fee4 Compare September 20, 2023 09:49

openshift-ci bot requested a review from jerolimov September 20, 2023 10:28

jerolimov suggested changes Sep 20, 2023

View reviewed changes

openshift-ci bot requested review from sanketpathak and vikram-raj and removed request for divyanshiGupta and jcaianirh September 20, 2023 16:19

jerolimov mentioned this pull request Sep 20, 2023

ODC-7377,ODC-7378: Add Revisions, Routes and Pods tab for service details page #13174

Merged

openshift-ci bot closed this Sep 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ODC-7377: Add Functions tab to the side navigation menu in Developer prespective #13138

ODC-7377: Add Functions tab to the side navigation menu in Developer prespective #13138

lokanandaprabhu commented Sep 7, 2023 •

edited

openshift-ci-robot commented Sep 7, 2023 •

edited by openshift-ci bot

openshift-ci bot commented Sep 7, 2023

openshift-ci-robot commented Sep 8, 2023 •

edited by openshift-ci bot

lokanandaprabhu commented Sep 20, 2023

jerolimov left a comment

jerolimov Sep 20, 2023

jerolimov Sep 20, 2023

jerolimov Sep 20, 2023

jerolimov Sep 20, 2023

jerolimov Sep 20, 2023

jerolimov commented Sep 20, 2023

openshift-ci bot commented Sep 20, 2023

lokanandaprabhu commented Sep 21, 2023

lokanandaprabhu commented Sep 21, 2023

openshift-ci bot commented Sep 21, 2023

	"required": ["OPENSHIFT", "KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]
	"required": ["KNATIVE_SERVING", "KNATIVE_SERVING_SERVICE"]

ODC-7377: Add Functions tab to the side navigation menu in Developer prespective #13138

ODC-7377: Add Functions tab to the side navigation menu in Developer prespective #13138

Conversation

lokanandaprabhu commented Sep 7, 2023 • edited

openshift-ci-robot commented Sep 7, 2023 • edited by openshift-ci bot

openshift-ci bot commented Sep 7, 2023

openshift-ci-robot commented Sep 8, 2023 • edited by openshift-ci bot

lokanandaprabhu commented Sep 20, 2023

jerolimov left a comment

Choose a reason for hiding this comment

jerolimov Sep 20, 2023

Choose a reason for hiding this comment

jerolimov Sep 20, 2023

Choose a reason for hiding this comment

jerolimov Sep 20, 2023

Choose a reason for hiding this comment

jerolimov Sep 20, 2023

Choose a reason for hiding this comment

jerolimov Sep 20, 2023

Choose a reason for hiding this comment

jerolimov commented Sep 20, 2023

openshift-ci bot commented Sep 20, 2023

lokanandaprabhu commented Sep 21, 2023

lokanandaprabhu commented Sep 21, 2023

openshift-ci bot commented Sep 21, 2023

lokanandaprabhu commented Sep 7, 2023 •

edited

openshift-ci-robot commented Sep 7, 2023 •

edited by openshift-ci bot

openshift-ci-robot commented Sep 8, 2023 •

edited by openshift-ci bot