Merge pull request #13 from keskami/feature/mock-drilldown

Switch Statement for Static URL and Dashboard Navigation
willie-hung · Apr 19, 2024 · 7e87845 · 7e87845
2 parents 5d6ab7a + 0c3d550
commit 7e87845
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 84 deletions.
diff --git a/src/core/public/saved_objects/simple_saved_object.ts b/src/core/public/saved_objects/simple_saved_object.ts
@@ -51,7 +51,7 @@ export class SimpleSavedObject<T = unknown> {
   public migrationVersion: SavedObjectType<T>['migrationVersion'];
   public error: SavedObjectType<T>['error'];
   public references: SavedObjectType<T>['references'];
-  public updated_at: SavedObjectType<T>['updated_at']
+  public updated_at: SavedObjectType<T>['updated_at'];
 
   constructor(
     private client: SavedObjectsClient,

diff --git a/src/plugins/vis_type_drilldown/public/components/card_form.tsx b/src/plugins/vis_type_drilldown/public/components/card_form.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   EuiPanel,
   EuiTitle,
@@ -13,6 +13,7 @@ import {
   EuiAccordion,
   EuiFlexGroup,
   EuiSuperSelect,
+  EuiFilterButton,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { Card } from '../types';
@@ -22,18 +23,10 @@ interface CardFormProps {
   card: Card;
   updateCard: (index: number, card: Card) => void;
   options: any;
-  valueOfSelected: string;
-  onChange: () => void;
 }
 
-const CardForm = ({
-  index,
-  card,
-  updateCard,
-  options,
-  valueOfSelected,
-  onChange,
-}: CardFormProps) => {
+const CardForm = ({ index, card, updateCard, options }: CardFormProps) => {
+  const [activeVisName, setActiveVisName] = useState<any>('');
   return (
     <EuiAccordion
       id={String(index)}
@@ -117,7 +110,7 @@ const CardForm = ({
               className="eui-fullHeight"
               value={card.cardUrl}
               onChange={({ target: { value } }) => {
-                updateCard(index, { ...card, cardUrl: value });
+                updateCard(index, { ...card, cardUrl: value, cardType: 'URL' });
               }}
               fullWidth={true}
             />
@@ -139,8 +132,15 @@ const CardForm = ({
 
           <EuiSuperSelect
             options={options}
-            valueOfSelected={valueOfSelected}
-            onChange={onChange}
+            valueOfSelected={activeVisName}
+            onChange={(selectedDashboard: string) => {
+              setActiveVisName(selectedDashboard);
+              updateCard(index, {
+                ...card,
+                cardDashboardID: selectedDashboard,
+                cardType: 'Dashboard',
+              });
+            }}
             fullWidth={true}
             data-test-subj="chartPicker"
           />

diff --git a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, Fragment, useEffect, useRef } from 'react';
+import React, { useCallback, Fragment, useEffect, useRef, useState } from 'react';
 import {
   EuiTitle,
   EuiFlexGroup,
@@ -14,6 +14,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { SimpleSavedObject } from 'src/core/public/saved_objects/simple_saved_object';
 import { useOpenSearchDashboards } from '../../opensearch_dashboards_react/public';
 import { Card, DrilldownServices, DrilldownVisParams } from './types';
 import { CardForm } from './components/card_form';
@@ -33,75 +34,33 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVi
       cardName: 'newDrilldownCard',
       cardDescription: 'newDrilldownCard',
       cardUrl: 'newDrilldownCard',
+      cardType: 'newDrilldownCard',
+      cardDashboardID: 'newDrilldownCard',
     };
     setValue('cards', [...stateParams.cards, newCard]);
   }, [stateParams.cards, setValue]);
 
+  const [dashboards, setDashboards] = useState<Array<SimpleSavedObject<any>>>([]);
+
   const {
     services: { http, savedObjects },
   } = useOpenSearchDashboards<DrilldownServices>();
 
-  interface List {
-    value: string;
-    inputDisplay: string;
-    dropdownDisplay: JSX.Element; // Adjust the type based on the actual type of dropdownDisplay
-  }
-
-  const options = useRef<List[]>([
-    {
-      value: '1',
-      inputDisplay: 'Option 1',
-      dropdownDisplay: (
-        <Fragment>
-          <strong>Name</strong>
-          <EuiText size="s" color="subdued">
-            <p className="euiTextColor--subdued">
-              id
-              <br />
-              text
-            </p>
-          </EuiText>
-        </Fragment>
-      ),
-    },
-  ]);
-
-  const saved = useRef<any>();
-  // const index = useRef<any>();
-
   useEffect(() => {
-    const fetchData = async () => {
-      saved.current = savedObjects?.client.find({
+    const getSaved = async () => {
+      const saved = await savedObjects?.client.find({
         type: 'dashboard',
       });
-      const path = (await saved.current).savedObjects[0].client
-        .getPath(['dashboard', (await saved.current).savedObjects[0].id])
-        .substring(28);
-      const savedObjectURL = http.basePath.prepend('/app/dashboards#/view/' + path);
-      options.current = [
-        {
-          value: savedObjectURL,
-          inputDisplay: 'yes',
-          dropdownDisplay: (
-            <Fragment>
-              <strong>Name</strong>
-              <EuiText size="s" color="subdued">
-                <p className="euiTextColor--subdued">
-                  id
-                  <br />
-                  text
-                </p>
-              </EuiText>
-            </Fragment>
-          ),
-        },
-      ];
+      setDashboards(saved?.savedObjects);
     };
-    fetchData();
-  });
 
-  const activeVisName = '';
-  const handleVisTypeChange = () => {};
+    getSaved();
+  }, [savedObjects.client, http.basePath]);
+
+  const options = dashboards.map((dashboard) => ({
+    value: dashboard.id,
+    inputDisplay: dashboard.attributes.title,
+  }));
 
   return (
     <EuiFlexGroup
@@ -114,14 +73,7 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVi
       {stateParams.cards &&
         stateParams.cards.map((card, index) => (
           <>
-            <CardForm
-              index={index}
-              card={card}
-              updateCard={updateCard}
-              options={options.current}
-              valueOfSelected={activeVisName}
-              onChange={handleVisTypeChange}
-            />
+            <CardForm index={index} card={card} updateCard={updateCard} options={options} />
           </>
         ))}
       <EuiButtonEmpty size="xs" iconType="plusInCircleFilled" onClick={addCardForm}>

diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis.ts b/src/plugins/vis_type_drilldown/public/drilldown_vis.ts
@@ -15,7 +15,6 @@ export const drillDownVisDefinition = {
   isAccessible: true,
   icon: 'logstashFilter',
   description: i18n.translate('visTypeDrilldown.drilldownDescription', {
-
     defaultMessage: 'I LOVE drilldown!',
   }),
   toExpressionAst,
@@ -26,6 +25,8 @@ export const drillDownVisDefinition = {
           cardName: '',
           cardDescription: '',
           cardUrl: '',
+          cardType: '',
+          cardDashboardID: '',
         },
       ],
     },

diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui';
-import { DrilldownVisParams, Card } from './types';
+import { useOpenSearchDashboards } from '../../opensearch_dashboards_react/public';
+import { DrilldownVisParams, Card, DrilldownServices } from './types';
 
 interface DrilldownVisComponentProps extends DrilldownVisParams {
   renderComplete: () => void;
@@ -14,8 +15,21 @@ interface DrilldownVisComponentProps extends DrilldownVisParams {
 const DrilldownVisComponent = ({ cards, renderComplete }: DrilldownVisComponentProps) => {
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
+  const {
+    services: { application },
+  } = useOpenSearchDashboards<DrilldownServices>();
+
   const parsedCardData = JSON.parse(cards);
 
+  const onDashboardSelection = useCallback(
+    (id) => {
+      application?.navigateToApp('dashboards', {
+        path: `#/view/${id}`,
+      });
+    },
+    [application]
+  );
+
   return (
     <>
       {parsedCardData &&
@@ -26,7 +40,22 @@ const DrilldownVisComponent = ({ cards, renderComplete }: DrilldownVisComponentP
               title={card.cardName}
               layout="horizontal"
               description={card.cardDescription}
-              onClick={() => window.open(card.cardUrl, '_blank')}
+              onClick={() => {
+                switch (card.cardType) {
+                  case 'URL':
+                    // Implement navigation logic to a different URL
+                    window.open(card.cardUrl);
+                    break;
+                  case 'Dashboard':
+                    // Implement custom action logic
+                    onDashboardSelection(card.cardDashboardID);
+                    break;
+                  default:
+                    window.open('_blank');
+                    // Handle default case or throw an error if needed
+                    break;
+                }
+              }}
               paddingSize="m"
             />
           </EuiFlexItem>

diff --git a/src/plugins/vis_type_drilldown/public/types.ts b/src/plugins/vis_type_drilldown/public/types.ts
@@ -23,6 +23,8 @@ export interface Card {
   cardName: string;
   cardDescription: string;
   cardUrl: string;
+  cardType: string;
+  cardDashboardID: string;
 }
 
 export interface DrilldownArguments {