initial mapping for the url

Signed-off-by: Shey Gao <[email protected]>

docs/_sidebar.md

@@ -162,6 +162,7 @@
     - [Opensearch dashboards.release notes 2.12.0](../release-notes/opensearch-dashboards.release-notes-2.12.0.md)
     - [Opensearch dashboards.release notes 2.13.0](../release-notes/opensearch-dashboards.release-notes-2.13.0.md)
     - [Opensearch dashboards.release notes 2.14.0](../release-notes/opensearch-dashboards.release-notes-2.14.0.md)
+    - [Opensearch dashboards.release notes 2.15.0](../release-notes/opensearch-dashboards.release-notes-2.15.0.md)
     - [Opensearch dashboards.release notes 2.2.0](../release-notes/opensearch-dashboards.release-notes-2.2.0.md)
     - [Opensearch dashboards.release notes 2.2.1](../release-notes/opensearch-dashboards.release-notes-2.2.1.md)
     - [Opensearch dashboards.release notes 2.3.0](../release-notes/opensearch-dashboards.release-notes-2.3.0.md)

src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx

@@ -228,4 +228,4 @@ export const DashboardListing = () => {
       toastNotifications={notifications.toasts}
     />
   );
-};
+};

src/plugins/opensearch_dashboards_react/opensearch_dashboards.json

@@ -3,5 +3,5 @@
   "version": "opensearchDashboards",
   "ui": true,
   "server": false,
-  "requiredBundles": ["opensearchDashboardsUtils"]
+  "requiredBundles": ["opensearchDashboardsUtils" ]
 }

src/plugins/opensearch_dashboards_react/public/table_list_view/table_list_view.tsx

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
 import { debounce, keyBy, sortBy, uniq } from 'lodash';
@@ -46,10 +46,14 @@ import {
   EuiConfirmModal,
   EuiCallOut,
   EuiBasicTableColumn,
+  EuiPopover,
+  EuiContextMenu,
+  EuiIcon,
 } from '@elastic/eui';
 import { HttpFetchError, ToastsStart } from 'opensearch-dashboards/public';
 import { toMountPoint } from '../util';
 
+
 interface Column {
   name: string;
   width?: string;
@@ -58,13 +62,15 @@ interface Column {
 
 interface Item {
   id?: string;
+  title?: string; // Adjust based on your actual item properties
 }
 
 export interface TableListViewProps {
   createButton?: JSX.Element;
   createItem?(): void;
   deleteItems?(items: object[]): Promise<void>;
   editItem?(item: object): void;
+  visbuilderEditItem?(item: object): void;
   entityName: string;
   entityNamePlural: string;
   findItems(query: string): Promise<{ total: number; hits: object[] }>;
@@ -438,7 +444,12 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         icon: 'pencil',
         type: 'icon',
         enabled: ({ error }: { error: string }) => !error,
-        onClick: this.props.editItem,
+        render: (item: Item) => (
+          <EditActionDropdown 
+          item={item} 
+          editItem={this.props.editItem}
+          visbuilderEditItem={this.props.visbuilderEditItem} />
+        ),
       },
     ];
 
@@ -476,7 +487,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
       <EuiInMemoryTable
         itemId="id"
         items={this.state.items}
-        columns={(columns as unknown) as Array<EuiBasicTableColumn<object>>} // EuiBasicTableColumn is stricter than Column
+        columns={(columns as unknown) as Array<EuiBasicTableColumn<object>>}
         pagination={this.pagination}
         loading={this.state.isFetchingItems}
         message={noItemsMessage}
@@ -570,7 +581,82 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
   }
 }
 
-export { TableListView };
+interface EditActionDropdownProps {
+  item: Item;
+  editItem?(item: object): void;
+  visbuilderEditItem?(item: object): void;
+}
+
+const EditActionDropdown: React.FC<EditActionDropdownProps> = ({ item, editItem, visbuilderEditItem }) => {
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+
+  const onButtonClick = () => {
+    setPopoverOpen(!isPopoverOpen);
+  };
 
-// eslint-disable-next-line import/no-default-export
+  const closePopover = () => {
+    setPopoverOpen(false);
+  };
+
+  // Extract the title and check for specific types
+  const title = item.title;
+  const isSpecificType = ['Area', 'Bar', 'Line', 'Metric', 'Table'].some(type => title?.includes(type));
+
+  const panels = [
+    {
+      id: 0,
+      items: [
+        {
+          name: 'Edit',
+          icon: 'pencil',
+          onClick: () => {
+            closePopover();
+            editItem && editItem(item);
+          },
+        },
+        ...(isSpecificType ? [
+          {
+            name: 'Import to VisBuilder',
+            icon: 'importAction', 
+            onClick: () => {
+              closePopover();
+              visbuilderEditItem && visbuilderEditItem(item);
+            },
+          },
+        ] : []),
+      ],
+    },
+  ];
+
+  return (
+    <EuiPopover
+      button={<EuiIcon type="pencil" onClick={onButtonClick} />}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      initialFocus={false}
+    >
+      <EuiContextMenu initialPanelId={0} panels={panels} />
+    </EuiPopover>
+  );
+};
+
+
+export { TableListView };
 export default TableListView;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/plugins/opensearch_dashboards_utils/public/state_management/url/osd_url_storage.ts

@@ -274,3 +274,4 @@ export function getRelativeToHistoryPath(absoluteUrl: string, history: History):
       : parsedUrl.hash,
   });
 }
+

src/plugins/saved_objects/public/saved_object/saved_object_loader.ts

@@ -164,4 +164,4 @@ export class SavedObjectLoader {
       };
     });
   }
-}
+}

src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx

@@ -40,7 +40,7 @@ import { VisBuilderServices } from '../..';
 import { VisBuilderSavedObject } from '../../types';
 import { AppDispatch } from './state_management';
 import { EDIT_PATH, VISBUILDER_SAVED_OBJECT } from '../../../common';
-import { setEditorState } from './state_management/metadata_slice';
+import { setIsMigrated, setEditorState } from './state_management/metadata_slice';
 export interface TopNavConfigParams {
   visualizationIdFromUrl: string;
   savedVisBuilderVis: VisBuilderSavedObject;
@@ -207,6 +207,7 @@ export const getOnSave = (
           'data-test-subj': 'saveVisualizationSuccess',
         });
 
+
         if (originatingApp && returnToOrigin) {
           // create or edit visBuilder directly from another app, such as `dashboard`
           if (newlyCreated && stateTransfer) {
@@ -229,6 +230,7 @@ export const getOnSave = (
           });
         }
         dispatch(setEditorState({ state: 'clean' }));
+        dispatch(setIsMigrated(false));
       } else {
         // reset title if save not successful
         savedVisBuilderVis.title = currentTitle;

src/plugins/vis_builder/public/application/utils/state_management/metadata_slice.ts

@@ -22,6 +22,7 @@ export interface MetadataState {
     state: EditorState;
   };
   originatingApp?: string;
+  isMigrated: boolean; 
 }
 
 const initialState: MetadataState = {
@@ -30,6 +31,7 @@ const initialState: MetadataState = {
     state: 'loading',
   },
   originatingApp: undefined,
+  isMigrated: false,
 };
 
 export const getPreloadedState = async ({
@@ -51,6 +53,9 @@ export const slice = createSlice({
   name: 'metadata',
   initialState,
   reducers: {
+    setIsMigrated(state, action: PayloadAction<boolean>) {
+      state.isMigrated = action.payload;
+    },
     setError: (state, action: PayloadAction<{ key: string; error: boolean }>) => {
       const { key, error } = action.payload;
       state.editor.errors[key] = error;
@@ -68,4 +73,4 @@ export const slice = createSlice({
 });
 
 export const { reducer } = slice;
-export const { setError, setEditorState, setOriginatingApp, setState } = slice.actions;
+export const { setError, setEditorState, setOriginatingApp, setState, setIsMigrated } = slice.actions;

src/plugins/vis_builder/public/application/utils/use/use_can_save.ts

@@ -10,7 +10,11 @@ export const useCanSave = () => {
   const isEmpty = useTypedSelector(
     (state) => state.visualization.activeVisualization?.aggConfigParams?.length === 0
   );
-  const hasNoChange = useTypedSelector((state) => state.metadata.editor.state !== 'dirty');
+
+  const hasNoChange = useTypedSelector((state) => {
+    console.log(state);
+    return state.metadata.editor.state !== 'dirty' && state.metadata.isMigrated === false;
+  });
   const hasDraftAgg = useTypedSelector(
     (state) => !!state.visualization.activeVisualization?.draftAgg
   );

src/plugins/vis_builder/public/application/utils/use/use_saved_vis_builder_vis.ts

@@ -69,7 +69,7 @@ export const useSavedVisBuilderVis = (visualizationIdFromUrl: string | undefined
           const actualFilters = [];
           const tempFilters = typeof filters === 'function' ? filters() : filters;
           (Array.isArray(tempFilters) ? tempFilters : [tempFilters]).forEach((filter) => {
-            if (filter) actualFilters.push(filter);
+            if (filter) actualFilters.push();
           });
           data.query.filterManager.setAppFilters(actualFilters);
           data.query.queryString.setQuery(query);

src/plugins/vis_builder/public/saved_visualizations/migrate_to_visbuilder.ts

@@ -0,0 +1,33 @@
+export function mapVisToVisBuilder(savedVis) {
+    const visState = savedVis.visState;
+    const searchSource = savedVis.searchSource;
+
+    return {
+      title: visState.title,
+      visualizationState: {
+        indexPattern: searchSource.getField('index').id,
+        searchField: '', // This might need to be determined based on your specific use case
+        activeVisualization: {
+          name: visState.type,
+          aggConfigParams: visState.aggs.aggs.map(agg => ({
+            id: agg.id,
+            enabled: agg.enabled,
+            type: agg.type,
+            schema: agg.schema,
+            params: agg.params,
+          })),
+        },
+      },
+      styleState: {
+        addLegend: visState.params.addLegend || false,
+        addTooltip: visState.params.addTooltip || false,
+        legendPosition: visState.params.legendPosition || 'right',
+        type: visState.type,
+      },
+      uiState: savedVis.uiState.toJSON(),
+      searchSource: {
+        query: searchSource.getField('query'),
+        filter: searchSource.getField('filter'),
+      },
+    };
+  }

src/plugins/vis_builder/public/saved_visualizations/saved_visualizations.ts

@@ -16,3 +16,5 @@ export function createSavedVisBuilderLoader(services: SavedObjectOpenSearchDashb
 
   return new SavedObjectLoader(SavedVisBuilderVisClass, savedObjectsClient);
 }
+
+///

src/plugins/vis_builder/public/types.ts

@@ -17,6 +17,7 @@ import { AppMountParameters, CoreStart, ToastsStart, ScopedHistory } from '../..
 import { IOsdUrlStateStorage } from '../../opensearch_dashboards_utils/public';
 import { DataPublicPluginSetup } from '../../data/public';
 import { UiActionsStart } from '../../ui_actions/public';
+import { Capabilities } from '../../../core/public';
 
 export type VisBuilderSetup = TypeServiceSetup;
 export interface VisBuilderStart extends TypeServiceStart {
@@ -54,6 +55,7 @@ export interface VisBuilderServices extends CoreStart {
   osdUrlStateStorage: IOsdUrlStateStorage;
   dashboard: DashboardStart;
   uiActions: UiActionsStart;
+  capabilities: Capabilities;
 }
 
 export interface ISavedVis {

src/plugins/visualize/public/application/components/visualize_editor.tsx

@@ -106,4 +106,4 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
       onAppLeave={onAppLeave}
     />
   );
-};
+};

src/plugins/visualize/public/application/components/visualize_listing.tsx

@@ -44,6 +44,7 @@ import { VisualizeConstants } from '../visualize_constants';
 import { getTableColumns, getNoItemsMessage } from '../utils';
 import { getUiActions } from '../../services';
 import { SAVED_OBJECT_DELETE_TRIGGER } from '../../../../saved_objects_management/public';
+import { constructVisBuilderPath } from '../utils/migrate_url';
 
 export const VisualizeListing = () => {
   const {
@@ -101,14 +102,28 @@ export const VisualizeListing = () => {
     ({ editUrl, editApp }) => {
       if (editApp) {
         application.navigateToApp(editApp, { path: editUrl });
+        console.log(editUrl);
         return;
       }
       // for visualizations the edit and view URLs are the same
       history.push(editUrl);
+
     },
     [application, history]
   );
 
+  const {
+    services: visualizeServices,
+  } = useOpenSearchDashboards<VisualizeServices>();
+
+  const visbuilderEditItem = useCallback(
+    async (item) => {
+      const path = await constructVisBuilderPath(item, visualizeServices);
+      application.navigateToApp('vis-builder', { path });
+    },
+    [visualizeServices, application]
+  );
+
   const noItemsFragment = useMemo(() => getNoItemsMessage(createNewVis), [createNewVis]);
   const tableColumns = useMemo(() => getTableColumns(application, history, uiSettings), [
     application,
@@ -171,6 +186,7 @@ export const VisualizeListing = () => {
       findItems={fetchItems}
       deleteItems={visualizeCapabilities.delete ? deleteItems : undefined}
       editItem={visualizeCapabilities.save ? editItem : undefined}
+      visbuilderEditItem={visualizeCapabilities.save ? visbuilderEditItem : undefined}
       tableColumns={tableColumns}
       listingLimit={listingLimit}
       initialPageSize={savedObjectsPublic.settings.getPerPage()}
@@ -185,7 +201,10 @@ export const VisualizeListing = () => {
       tableListTitle={i18n.translate('visualize.listing.table.listTitle', {
         defaultMessage: 'Visualizations',
       })}
-      toastNotifications={toastNotifications}
-    />
+      toastNotifications={toastNotifications} />
   );
 };
+
+
+
+