diff --git a/src/plugins/vis_type_drilldown/.eslintrc.js b/src/plugins/vis_type_drilldown/.eslintrc.js deleted file mode 100644 index b16a8b23a08e..000000000000 --- a/src/plugins/vis_type_drilldown/.eslintrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - root: true, - extends: ['@elastic/eslint-config-kibana', 'plugin:@elastic/eui/recommended'], - rules: { - '@osd/eslint/require-license-header': 'off', - }, -}; diff --git a/src/plugins/vis_type_drilldown/.i18nrc.json b/src/plugins/vis_type_drilldown/.i18nrc.json deleted file mode 100644 index 138c287b908a..000000000000 --- a/src/plugins/vis_type_drilldown/.i18nrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "prefix": "visTypeDrilldown", - "paths": { - "visTypeDrilldown": "." - }, - "translations": ["translations/ja-JP.json"] -} diff --git a/src/plugins/vis_type_drilldown/README.md b/src/plugins/vis_type_drilldown/README.md index a35b1f5ece8d..062c2781fb0f 100755 --- a/src/plugins/vis_type_drilldown/README.md +++ b/src/plugins/vis_type_drilldown/README.md @@ -1,11 +1,6 @@ # vis_type_drilldown -A OpenSearch Dashboards plugin +This drilldown plugin allows users to design their own navigation controls, customized to fit their specific preferences and workflow requirements. +Please refer to [Drilldown functionality for dashboards](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/1308) --- - -## Development - -See the [OpenSearch Dashboards contributing -guide](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/CONTRIBUTING.md) for instructions -setting up your development environment. diff --git a/src/plugins/vis_type_drilldown/opensearch_dashboards.json b/src/plugins/vis_type_drilldown/opensearch_dashboards.json index c7cb6af3f0fa..250d7660d44b 100644 --- a/src/plugins/vis_type_drilldown/opensearch_dashboards.json +++ b/src/plugins/vis_type_drilldown/opensearch_dashboards.json @@ -4,14 +4,6 @@ "opensearchDashboardsVersion": "opensearchDashboards", "server": true, "ui": true, - "requiredPlugins": [ - "opensearchDashboardsReact", - "charts", - "expressions", - "visualizations", - "navigation", - "data", - "visDefaultEditor" - ], + "requiredPlugins": ["charts", "expressions", "visualizations", "visDefaultEditor"], "optionalPlugins": [] } diff --git a/src/plugins/vis_type_drilldown/public/application.tsx b/src/plugins/vis_type_drilldown/public/application.tsx deleted file mode 100644 index 7184c1ab807c..000000000000 --- a/src/plugins/vis_type_drilldown/public/application.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import ReactDOM from 'react-dom'; -import { AppMountParameters, CoreStart } from '../../../core/public'; -import { AppPluginStartDependencies } from './types'; -import { VisDrilldownApp } from './components/app'; - -export const renderApp = ( - { notifications, http }: CoreStart, - { navigation }: AppPluginStartDependencies, - { appBasePath, element }: AppMountParameters -) => { - ReactDOM.render( - , - element - ); - - return () => ReactDOM.unmountComponentAtNode(element); -}; diff --git a/src/plugins/vis_type_drilldown/public/card_form.tsx b/src/plugins/vis_type_drilldown/public/card_form.tsx index ba0d053cc5ca..27bf46b8033c 100644 --- a/src/plugins/vis_type_drilldown/public/card_form.tsx +++ b/src/plugins/vis_type_drilldown/public/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,82 +13,89 @@ import { EuiAccordion, EuiFlexGroup, } from '@elastic/eui'; +import { Card } from './types'; interface CardFormProps { index: number; - cards: any[]; - card: any; - onUpdateCard: (index: number, card: any) => void; + card: Card; + updateCard: (index: number, card: Card) => void; } -const CardForm = ({ index, cards, card, onUpdateCard }: CardFormProps) => ( - - - - - -

- -

- - +const CardForm = ({ index, card, updateCard }: CardFormProps) => { + return ( + + + + + +

+ +

+ + - - - onUpdateCard(index, { ...cards[index], cardName: value }) - } - fullWidth={true} - /> - + + { + updateCard(index, { ...card, cardName: value }); + }} + fullWidth={true} + /> + - - -

- -

- - + + +

+ +

+ + - - - onUpdateCard(index, { ...cards[index], cardDescription: value }) - } - fullWidth={true} - data-test-subj="markdownTextarea" - /> - + + { + updateCard(index, { ...card, cardDescription: value }); + }} + fullWidth={true} + data-test-subj="markdownTextarea" + /> + - - -

- -

- - + + +

+ +

+ + - - - onUpdateCard(index, { ...cards[index], url: value }) - } - fullWidth={true} - /> - - - - -); + + { + updateCard(index, { ...card, cardUrl: value }); + }} + fullWidth={true} + /> + + + + + ); +}; export { CardForm }; diff --git a/src/plugins/vis_type_drilldown/public/components/app.tsx b/src/plugins/vis_type_drilldown/public/components/app.tsx deleted file mode 100644 index c059e51219a1..000000000000 --- a/src/plugins/vis_type_drilldown/public/components/app.tsx +++ /dev/null @@ -1,124 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React, { useState } from 'react'; -import { i18n } from '@osd/i18n'; -import { FormattedMessage, I18nProvider } from '@osd/i18n/react'; -import { BrowserRouter as Router } from 'react-router-dom'; - -import { - EuiButton, - EuiHorizontalRule, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageHeader, - EuiTitle, - EuiText, -} from '@elastic/eui'; - -import { CoreStart } from '../../../../core/public'; -import { NavigationPublicPluginStart } from '../../../navigation/public'; - -import { PLUGIN_ID, PLUGIN_NAME } from '../../common'; - -interface VisDrilldownAppDeps { - basename: string; - notifications: CoreStart['notifications']; - http: CoreStart['http']; - navigation: NavigationPublicPluginStart; -} - -export const VisDrilldownApp = ({ - basename, - notifications, - http, - navigation, -}: VisDrilldownAppDeps) => { - // Use React hooks to manage state. - const [timestamp, setTimestamp] = useState(); - - const onClickHandler = () => { - // Use the core http service to make a response to the server API. - http.get('/api/vis_type_drilldown/example').then((res) => { - setTimestamp(res.time); - // Use the core notifications service to display a success message. - notifications.toasts.addSuccess( - i18n.translate('visTypeDrilldown.dataUpdated', { - defaultMessage: 'Data updated', - }) - ); - }); - }; - - // Render the application DOM. - // Note that `navigation.ui.TopNavMenu` is a stateful component exported on the `navigation` plugin's start contract. - return ( - - - <> - - - - - -

- -

- - - - - -

- -

- - - - -

- -

- -

- -

- - - - - - - - - - - - ); -}; diff --git a/src/plugins/vis_type_drilldown/public/drilldown_fn.ts b/src/plugins/vis_type_drilldown/public/drilldown_fn.ts index e12f49a7ce81..80d08c8bf22e 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_fn.ts +++ b/src/plugins/vis_type_drilldown/public/drilldown_fn.ts @@ -23,34 +23,10 @@ export const createDrilldownVisFn = (): DrilldownVisExpressionFunctionDefinition name: 'drilldownVis', type: 'render', inputTypes: [], - help: i18n.translate('visDrilldown.function.help', { + help: i18n.translate('visTypeDrilldown.function.help', { defaultMessage: 'Drilldown visualization', }), args: { - cardName: { - types: ['string'], - aliases: ['_'], - required: true, - help: i18n.translate('visTypeDrilldown.function.cardName.help', { - defaultMessage: 'Card name', - }), - }, - cardDescription: { - types: ['string'], - aliases: ['_'], - required: true, - help: i18n.translate('visTypeDrilldown.function.cardDescription.help', { - defaultMessage: 'Card description', - }), - }, - url: { - types: ['string'], - aliases: ['_'], - required: true, - help: i18n.translate('visTypeDrilldown.function.url.help', { - defaultMessage: 'URL', - }), - }, cards: { types: [], help: i18n.translate('visTypeDrilldown.function.cards.help', { @@ -65,9 +41,6 @@ export const createDrilldownVisFn = (): DrilldownVisExpressionFunctionDefinition value: { visType: 'drilldown', visParams: { - cardName: args.cardName, - cardDescription: args.cardDescription, - url: args.url, cards: args.cards, }, }, diff --git a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx index 49a6ef06239b..18121470d496 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx +++ b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx @@ -3,8 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useState } from 'react'; -import { EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui'; +import React, { useCallback, useState } from 'react'; +import { EuiFlexGroup, EuiButtonEmpty, EuiFieldText } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { VisOptionsProps } from 'src/plugins/vis_default_editor/public'; @@ -12,23 +12,16 @@ import { Card, DrilldownVisParams } from './types'; import { CardForm } from './card_form'; function DrilldownOptions({ stateParams, setValue }: VisOptionsProps) { - const [formCount, setFormCount] = useState(stateParams.cards.length ?? 1); - const addCardForm = () => { - setFormCount(formCount + 1); - addCard(); // Also add a new card to the array - }; - - const addCard = () => { const newCard: Card = { - cardName: '', - cardDescription: '', - url: '', + cardName: 'newDrilldownCard', + cardDescription: 'newDrilldownCard', + cardUrl: 'newDrilldownCard', }; setValue('cards', [...stateParams.cards, newCard]); }; - const updateCard = (index: number, card: any) => { + const updateCard = (index: number, card: Card) => { const updatedCards = [...stateParams.cards]; updatedCards[index] = card; setValue('cards', updatedCards); @@ -43,15 +36,12 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps - {Array.from({ length: formCount }).map((_, index) => ( - - ))} + {stateParams.cards && + stateParams.cards.map((card, index) => ( + <> + + + ))} diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis.ts b/src/plugins/vis_type_drilldown/public/drilldown_vis.ts index 3389a417eee8..df685e296173 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_vis.ts +++ b/src/plugins/vis_type_drilldown/public/drilldown_vis.ts @@ -13,21 +13,18 @@ export const drillDownVisDefinition = { name: 'drilldown', title: 'Drilldown', isAccessible: true, - icon: 'dashboardApp', + icon: 'logstashFilter', description: i18n.translate('visTypeMarkdown.markdownDescription', { defaultMessage: 'I LOVE drilldown!', }), toExpressionAst, visConfig: { defaults: { - cardName: '', - cardDescription: '', - url: '', cards: [ { cardName: '', cardDescription: '', - url: '', + cardUrl: '', }, ], }, diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx index 033621e97e9f..9067ce077818 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx +++ b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx @@ -4,33 +4,31 @@ */ import React, { useEffect } from 'react'; +import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui'; import { DrilldownVisParams } from './types'; interface DrilldownVisComponentProps extends DrilldownVisParams { renderComplete: () => void; } -const DrilldownVisComponent = ({ - cardName, - cardDescription, - url, - cards, - renderComplete, -}: DrilldownVisComponentProps) => { +const DrilldownVisComponent = ({ cards, renderComplete }: DrilldownVisComponentProps) => { useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering. return ( <> -

COOL

- {/* - } - title={cardName} - description={cardDescription} - onClick={() => window.open(url, '_blank')} - /> - */} - {/*

{cardName}

*/} + {cards && + cards.map((card, index) => ( + + } + title={card.cardName} + layout="horizontal" + description={card.cardDescription} + onClick={() => window.open(card.cardUrl, '_blank')} + paddingSize="m" + /> + + ))} ); }; diff --git a/src/plugins/vis_type_drilldown/public/plugin.ts b/src/plugins/vis_type_drilldown/public/plugin.ts index 70efda116ff7..d2297f883614 100644 --- a/src/plugins/vis_type_drilldown/public/plugin.ts +++ b/src/plugins/vis_type_drilldown/public/plugin.ts @@ -3,14 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { i18n } from '@osd/i18n'; -import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../core/public'; -import { - VisDrilldownPluginSetup, - VisDrilldownPluginStart, - AppPluginStartDependencies, -} from './types'; -import { PLUGIN_NAME } from '../common'; +import { CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { VisDrilldownPluginSetup, VisDrilldownPluginStart } from './types'; import { drillDownVisDefinition } from './drilldown_vis'; import { createDrilldownVisFn } from './drilldown_fn'; import { VisualizationsSetup } from '../../visualizations/public'; @@ -31,32 +25,6 @@ export class VisDrilldownPlugin visualizations.createBaseVisualization(drillDownVisDefinition); expressions.registerRenderer(drilldownVisRenderer); expressions.registerFunction(createDrilldownVisFn); - - // Register an application into the side navigation menu - core.application.register({ - id: 'visTypeDrilldown', - title: PLUGIN_NAME, - async mount(params: AppMountParameters) { - // Load application bundle - const { renderApp } = await import('./application'); - // Get start services as specified in opensearch_dashboards.json - const [coreStart, depsStart] = await core.getStartServices(); - // Render the application - return renderApp(coreStart, depsStart as AppPluginStartDependencies, params); - }, - }); - - // Return methods that should be available to other plugins - return { - getGreeting() { - return i18n.translate('visTypeDrilldown.greetingText', { - defaultMessage: 'Hello from {name}!', - values: { - name: PLUGIN_NAME, - }, - }); - }, - }; } public start(core: CoreStart): VisDrilldownPluginStart { diff --git a/src/plugins/vis_type_drilldown/public/to_ast.ts b/src/plugins/vis_type_drilldown/public/to_ast.ts index 8dd2d2ee0b89..c7230b1a68cd 100644 --- a/src/plugins/vis_type_drilldown/public/to_ast.ts +++ b/src/plugins/vis_type_drilldown/public/to_ast.ts @@ -8,14 +8,11 @@ import { buildExpression, buildExpressionFunction } from '../../expressions/publ import { DrilldownVisExpressionFunctionDefinition } from './drilldown_fn'; export const toExpressionAst = (vis: Vis) => { - const { cardName, cardDescription, url, cards } = vis.params; + const { cards } = vis.params; const drilldownVis = buildExpressionFunction( 'drilldownVis', { - cardName, - cardDescription, - url, cards, } ); diff --git a/src/plugins/vis_type_drilldown/public/types.ts b/src/plugins/vis_type_drilldown/public/types.ts index ce724bb5478f..20ee1542b1e5 100644 --- a/src/plugins/vis_type_drilldown/public/types.ts +++ b/src/plugins/vis_type_drilldown/public/types.ts @@ -5,11 +5,10 @@ import { NavigationPublicPluginStart } from '../../navigation/public'; import { VisualizationsSetup } from '../../visualizations/public'; -import { Arguments } from '../../vis_type_markdown/public/types'; -export interface VisDrilldownPluginSetup { - getGreeting: () => string; -} +// export interface VisDrilldownPluginSetup { +// getGreeting: () => string; +// } // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface VisDrilldownPluginStart {} @@ -21,19 +20,13 @@ export interface AppPluginStartDependencies { export interface Card { cardName: string; cardDescription: string; - url: string; + cardUrl: string; } export interface DrilldownArguments { - cardName: string; - cardDescription: string; - url: string; cards: Card[]; } export interface DrilldownVisParams { - cardName: string; - cardDescription: string; - url: string; cards: Card[]; }