mgr/dashboard: resolve the redirect url with the prop name

the prop can be passed to the redirectLink array like `::prop` and the
table component will resolve the url

Fixes: https://tracker.ceph.com/issues/73754
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html

@@ -482,5 +482,5 @@
 <ng-template #redirectTpl
              let-value="data.value"
              let-column="data.column">
-  <a [routerLink]="column.customTemplateConfig?.redirectLink">{{value}}</a>
+  <a [routerLink]="column.customTemplateConfig?.redirectLink | redirectLinkResolver:value">{{value}}</a>
 </ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts

@@ -111,6 +111,8 @@ export enum CellTemplate {
   //    }
   //    ...
   // }
+  // you can also use '::prop' in the redirectLink array to replace it with the cell value.
+  // e.g ['dashboard', '::prop', 'details']
   */
   redirect = 'redirect'
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts

@@ -40,6 +40,7 @@ import { XmlPipe } from './xml.pipe';
 import { MbpersecondPipe } from './mbpersecond.pipe';
 import { PipeFunctionPipe } from './pipe-function.pipe';
 import { DimlessBinaryPerMinutePipe } from './dimless-binary-per-minute.pipe';
+import { RedirectLinkResolverPipe } from './redirect-link-resolver.pipe';
 
 @NgModule({
   imports: [CommonModule],
@@ -82,7 +83,8 @@ import { DimlessBinaryPerMinutePipe } from './dimless-binary-per-minute.pipe';
     XmlPipe,
     MbpersecondPipe,
     PipeFunctionPipe,
-    DimlessBinaryPerMinutePipe
+    DimlessBinaryPerMinutePipe,
+    RedirectLinkResolverPipe
   ],
   exports: [
     ArrayPipe,
@@ -123,7 +125,8 @@ import { DimlessBinaryPerMinutePipe } from './dimless-binary-per-minute.pipe';
     XmlPipe,
     MbpersecondPipe,
     PipeFunctionPipe,
-    DimlessBinaryPerMinutePipe
+    DimlessBinaryPerMinutePipe,
+    RedirectLinkResolverPipe
   ],
   providers: [
     ArrayPipe,
@@ -155,7 +158,8 @@ import { DimlessBinaryPerMinutePipe } from './dimless-binary-per-minute.pipe';
     MgrSummaryPipe,
     OctalToHumanReadablePipe,
     MbpersecondPipe,
-    DimlessBinaryPerMinutePipe
+    DimlessBinaryPerMinutePipe,
+    RedirectLinkResolverPipe
   ]
 })
 export class PipesModule {}

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/redirect-link-resolver.pipe.spec.ts

@@ -0,0 +1,34 @@
+import { RedirectLinkResolverPipe } from './redirect-link-resolver.pipe';
+
+describe('RedirectLinkResolverPipe', () => {
+  let pipe: RedirectLinkResolverPipe;
+
+  beforeEach(() => {
+    pipe = new RedirectLinkResolverPipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should replace "::prop" with the provided value', () => {
+    const redirectLink = ['home', '::prop', 'details'];
+    const value = 'route';
+    const result = pipe.transform(redirectLink, value);
+    expect(result).toEqual(['home', 'route', 'details']);
+  });
+
+  it('should handle multiple "::prop" replacements', () => {
+    const redirectLink = ['::prop', 'user', '::prop'];
+    const value = 'id42';
+    const result = pipe.transform(redirectLink, value);
+    expect(result).toEqual(['id42', 'user', 'id42']);
+  });
+
+  it('should return the same array if no "::prop" exists', () => {
+    const redirectLink = ['home', 'about', 'contact'];
+    const value = 'ignored';
+    const result = pipe.transform(redirectLink, value);
+    expect(result).toEqual(redirectLink);
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/redirect-link-resolver.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'redirectLinkResolver'
+})
+export class RedirectLinkResolverPipe implements PipeTransform {
+  transform(redirectLink: string[], value: string): string[] {
+    return redirectLink.map((seg) => (seg === '::prop' ? value : seg));
+  }
+}