feat: [DPS-36767] - Embedded metrics dashboard as contextual view in stream (#13492)

* feat: [DPS-36767] - Embedded metrics dashboard as contextual view in stream UI

* Added changeset: Stream Metrics tab with embedded metrics dashboard

* Hide metrics tab and url behind a flag

* Hide tabs when stream query failed

* CR changes 1

* merge conflicts fix

Author: kagora-akamai

packages/manager/.changeset/pr-13492-added-1773404986416.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Stream Metrics tab with embedded metrics dashboard ([#13492](https://github.com/linode/manager/pull/13492))

packages/manager/cypress/e2e/core/delivery/destinations-non-empty-landing-page.spec.ts

@@ -92,7 +92,7 @@ function editDestinationViaActionMenu(
       mockGetDestination(destination);
       // Edit destination redirect
       ui.actionMenuItem.findByTitle('Edit').click();
-      cy.url().should('endWith', `/destinations/${destination.id}/edit`);
+      cy.url().should('endWith', `/destinations/${destination.id}/summary`);
     });
 }
 
@@ -181,15 +181,15 @@ describe('destinations landing checks for non-empty state', () => {
       });
     });
 
-    it('navigates to edit page when clicking destination label', () => {
+    it('navigates to summary page when clicking destination label', () => {
       cy.visitWithLogin('/logs/delivery/destinations');
       cy.wait('@getDestinations');
 
       const destination = mockAkamaiObjectStorageDestinations[0];
       mockGetDestination(destination).as('getDestination');
 
       cy.findByText(destination.label).click();
-      cy.url().should('endWith', `/destinations/${destination.id}/edit`);
+      cy.url().should('endWith', `/destinations/${destination.id}/summary`);
       cy.wait('@getDestination');
     });
 
@@ -255,7 +255,7 @@ describe('destinations landing checks for non-empty state', () => {
       mockGetDestination(destination).as('getDestination');
 
       cy.findByText(destination.label).click();
-      cy.url().should('endWith', `/destinations/${destination.id}/edit`);
+      cy.url().should('endWith', `/destinations/${destination.id}/summary`);
       cy.wait('@getDestination');
     });
 

packages/manager/cypress/e2e/core/delivery/edit-destination.spec.ts

@@ -43,7 +43,7 @@ describe('Edit Destination', () => {
   describe('given Akamai Object Storage type destination', () => {
     beforeEach(() => {
       cy.visitWithLogin(
-        `/logs/delivery/destinations/${mockAkamaiObjectStorageDestination.id}/edit`
+        `/logs/delivery/destinations/${mockAkamaiObjectStorageDestination.id}/summary`
       );
       mockGetDestination(mockAkamaiObjectStorageDestination);
     });
@@ -201,7 +201,7 @@ describe('Edit Destination', () => {
   describe('given Custom HTTPS type destination', () => {
     beforeEach(() => {
       cy.visitWithLogin(
-        `/logs/delivery/destinations/${mockCustomHttpsDestination.id}/edit`
+        `/logs/delivery/destinations/${mockCustomHttpsDestination.id}/summary`
       );
       mockGetDestination(mockCustomHttpsDestination);
     });

packages/manager/cypress/e2e/core/delivery/edit-stream.spec.ts

@@ -46,9 +46,7 @@ describe('Edit Stream', () => {
       mockGetStream(mockAuditLogsStream);
 
       // Visit the Edit Stream page
-      cy.visitWithLogin(
-        `/logs/delivery/streams/${mockAuditLogsStream.id}/edit/`
-      );
+      cy.visitWithLogin(`/logs/delivery/streams/${mockAuditLogsStream.id}`);
 
       const updatedLabel = randomLabel();
 
@@ -207,9 +205,7 @@ describe('Edit Stream', () => {
       mockGetClusters([cluster1, cluster2, cluster3, cluster4]);
 
       // Visit the Edit Stream page
-      cy.visitWithLogin(
-        `/logs/delivery/streams/${mockLKEAuditLogsStream.id}/edit/`
-      );
+      cy.visitWithLogin(`/logs/delivery/streams/${mockLKEAuditLogsStream.id}`);
 
       const updatedLabel = randomLabel();
 

packages/manager/cypress/e2e/core/delivery/streams-non-empty-landing-page.spec.ts

@@ -88,7 +88,7 @@ function editStreamViaActionMenu(tableAlias: string, stream: Stream) {
       mockGetStream(stream);
       // Edit stream redirect
       ui.actionMenuItem.findByTitle('Edit').click();
-      cy.url().should('endWith', `/streams/${stream.id}/edit`);
+      cy.url().should('endWith', `/streams/${stream.id}/summary`);
     });
 }
 
@@ -180,7 +180,7 @@ describe('Streams non-empty landing page', () => {
 
     // Redirect to stream edit page via name
     cy.findByText(exampleStream.label).click();
-    cy.url().should('endWith', `/streams/${exampleStream.id}/edit`);
+    cy.url().should('endWith', `/streams/${exampleStream.id}/summary`);
     cy.wait(['@getStream', '@getDestinations']);
 
     // Redirect to stream edit page via menu item

packages/manager/src/featureFlags.ts

@@ -134,6 +134,10 @@ interface AclpLogsFlag extends BetaFeatureFlag {
    * This property indicates whether to show Custom HTTPS destination type
    */
   customHttpsEnabled?: boolean;
+  /**
+   * This property indicates whether to show the "Metrics" tab on Logs Stream details page or not
+   */
+  metricsEnabled?: boolean;
   /**
    * This property indicates whether the feature is new or not
    */

packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationEdit.test.tsx

@@ -216,14 +216,14 @@ describe('DestinationEdit', () => {
     });
   });
 
-  describe('given Test Connection and Edit Destination buttons', () => {
+  describe('given Test Connection and Save Changes buttons', () => {
     const testConnectionButtonText = 'Test Connection';
     const saveDestinationButtonText = 'Save Changes';
     const editDestinationSpy = vi.fn();
     const verifyDestinationSpy = vi.fn();
 
     describe('when Test Connection button clicked and connection verified positively', () => {
-      it("should enable Edit Destination button and perform proper call when it's clicked", async () => {
+      it("should enable Save Changes button and perform proper call when it's clicked", async () => {
         server.use(
           http.get(`*/monitor/streams/destinations/${destinationId}`, () => {
             return HttpResponse.json(mockDestination);
@@ -269,7 +269,7 @@ describe('DestinationEdit', () => {
     });
 
     describe('when Test Connection button clicked and connection verified negatively', () => {
-      it('should not enable Edit Destination button', async () => {
+      it('should not enable Save Changes button', async () => {
         server.use(
           http.get(`*/monitor/streams/destinations/${destinationId}`, () => {
             return HttpResponse.json(mockDestination);

packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationEdit.tsx

@@ -25,7 +25,7 @@ import type { DestinationFormType } from 'src/features/Delivery/Shared/types';
 export const DestinationEdit = () => {
   const navigate = useNavigate();
   const { destinationId } = useParams({
-    from: '/logs/delivery/destinations/$destinationId/edit',
+    from: '/logs/delivery/destinations/$destinationId/summary',
   });
   const { mutateAsync: updateDestination, isPending: isUpdatingDestination } =
     useUpdateDestinationMutation();
@@ -37,7 +37,7 @@ export const DestinationEdit = () => {
 
   const landingHeaderProps: LandingHeaderProps = {
     breadcrumbProps: {
-      pathname: '/logs/delivery/destinations/edit',
+      pathname: '/logs/delivery/destinations/summary',
       crumbOverrides: [
         {
           label: 'Delivery',
@@ -48,7 +48,7 @@ export const DestinationEdit = () => {
     },
     docsLink: 'https://techdocs.akamai.com/cloud-computing/docs/log-delivery',
     removeCrumbX: [1, 2],
-    title: `Edit Destination ${destinationId}`,
+    title: `Destination ${destinationId}`,
   };
 
   const form = useForm<DestinationFormType>({
@@ -136,7 +136,7 @@ export const DestinationEdit = () => {
 
   return (
     <>
-      <DocumentTitleSegment segment="Edit Destination" />
+      <DocumentTitleSegment segment="Destination" />
       <LandingHeader {...landingHeaderProps} />
       <FormProvider {...form}>
         <DestinationForm

packages/manager/src/features/Delivery/Destinations/DestinationForm/destinationEditLazyRoute.ts

@@ -3,7 +3,7 @@ import { createLazyRoute } from '@tanstack/react-router';
 import { DestinationEdit } from 'src/features/Delivery/Destinations/DestinationForm/DestinationEdit';
 
 export const destinationEditLazyRoute = createLazyRoute(
-  '/logs/delivery/destinations/$destinationId/edit'
+  '/logs/delivery/destinations/$destinationId/summary'
 )({
   component: DestinationEdit,
 });

packages/manager/src/features/Delivery/Destinations/DestinationTableRow.tsx

@@ -25,7 +25,7 @@ export const DestinationTableRow = React.memo(
         <TableCell>
           <LinkWithTooltipAndEllipsis
             pendoId="Logs Delivery Destinations-Name"
-            to={`/logs/delivery/destinations/${id}/edit`}
+            to={`/logs/delivery/destinations/${id}/summary`}
           >
             {destination.label}
           </LinkWithTooltipAndEllipsis>