Merge pull request #1619 from influxdata/updates/switch-views-to-generated

Switch views request to use generated client

ui/src/dashboards/actions/v2/index.ts

@@ -38,7 +38,6 @@ import {RemoteDataState} from 'src/types'
 import {PublishNotificationAction} from 'src/types/actions/notifications'
 import {Dashboard, Cell} from 'src/api'
 import {NewView} from 'src/types/v2/dashboards'
-import {AppState} from 'src/types/v2'
 
 export enum ActionTypes {
   LoadDashboards = 'LOAD_DASHBOARDS',
@@ -163,12 +162,11 @@ export const getDashboardsAsync = () => async (
   }
 }
 
-export const importDashboardAsync = (
-  url: string,
-  dashboard: Dashboard
-) => async (dispatch: Dispatch<Action>): Promise<void> => {
+export const importDashboardAsync = (dashboard: Dashboard) => async (
+  dispatch: Dispatch<Action>
+): Promise<void> => {
   try {
-    await createDashboardAJAX(url, dashboard)
+    await createDashboardAJAX(dashboard)
     const dashboards = await getDashboardsAJAX()
 
     dispatch(loadDashboards(dashboards))
@@ -188,7 +186,7 @@ export const deleteDashboardAsync = (dashboard: Dashboard) => async (
   dispatch(deleteTimeRange(dashboard.id))
 
   try {
-    await deleteDashboardAJAX(dashboard.links.self)
+    await deleteDashboardAJAX(dashboard)
     dispatch(notify(copy.dashboardDeleted(dashboard.name)))
   } catch (error) {
     dispatch(
@@ -249,13 +247,9 @@ export const addCellAsync = (dashboard: Dashboard) => async (
 export const createCellWithView = (
   dashboard: Dashboard,
   view: NewView
-) => async (
-  dispatch: Dispatch<Action>,
-  getState: () => AppState
-): Promise<void> => {
+) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
-    const viewsLink = getState().links.views
-    const createdView = await createViewAJAX(viewsLink, view)
+    const createdView = await createViewAJAX(view)
 
     const cell = {
       ...getNewDashboardCell(dashboard),
@@ -282,7 +276,7 @@ export const updateCellsAsync = (dashboard: Dashboard, cells: Cell[]) => async (
   dispatch: Dispatch<Action>
 ): Promise<void> => {
   try {
-    const updatedCells = await updateCellsAJAX(dashboard.links.cells, cells)
+    const updatedCells = await updateCellsAJAX(dashboard.id, cells)
     const updatedDashboard = {
       ...dashboard,
       cells: updatedCells,
@@ -298,7 +292,7 @@ export const deleteCellAsync = (dashboard: Dashboard, cell: Cell) => async (
   dispatch: Dispatch<Action>
 ): Promise<void> => {
   try {
-    await deleteCellAJAX(cell.links.self)
+    await deleteCellAJAX(dashboard.id, cell)
     dispatch(deleteCell(dashboard, cell))
     dispatch(notify(copy.cellDeleted()))
   } catch (error) {

ui/src/dashboards/actions/v2/notes.ts

@@ -120,5 +120,5 @@ export const updateViewNote = () => async (dispatch, getState: GetState) => {
     properties: {...view.properties, note, showNoteWhenEmpty},
   }
 
-  return dispatch(updateView(view.links.self, updatedView))
+  return dispatch(updateView(updatedView))
 }

ui/src/dashboards/actions/v2/views.ts

@@ -6,7 +6,7 @@ import {
 
 // Types
 import {RemoteDataState} from 'src/types'
-import {View} from 'src/types/v2'
+import {View} from 'src/api'
 import {Dispatch} from 'redux'
 
 export type Action = SetViewAction
@@ -29,13 +29,13 @@ export const setView = (
   payload: {id, view, status},
 })
 
-export const readView = (url: string, id: string) => async (
+export const readView = (id: string) => async (
   dispatch: Dispatch<Action>
 ): Promise<void> => {
   dispatch(setView(id, null, RemoteDataState.Loading))
 
   try {
-    const view = await readViewAJAX(url)
+    const view = await readViewAJAX(id)
 
     dispatch(setView(id, view, RemoteDataState.Done))
   } catch {
@@ -43,13 +43,13 @@ export const readView = (url: string, id: string) => async (
   }
 }
 
-export const updateView = (url: string, view: View) => async (
+export const updateView = (view: View) => async (
   dispatch: Dispatch<Action>
 ): Promise<void> => {
   dispatch(setView(view.id, null, RemoteDataState.Loading))
 
   try {
-    const newView = await updateViewAJAX(url, view)
+    const newView = await updateViewAJAX(view.id, view)
 
     dispatch(setView(view.id, newView, RemoteDataState.Done))
   } catch {

ui/src/dashboards/apis/v2/index.ts

@@ -1,10 +1,9 @@
 // Libraries
-import AJAX from 'src/utils/ajax'
-import {dashboardsAPI} from 'src/utils/api'
+import {dashboardsAPI, cellsAPI} from 'src/utils/api'
 
 // Types
-import {Dashboard, Cell} from 'src/api'
-import {DashboardSwitcherLinks, NewCell} from 'src/types/v2/dashboards'
+import {Dashboard, Cell, CreateCell} from 'src/api'
+import {DashboardSwitcherLinks} from 'src/types/v2/dashboards'
 
 // Utils
 import {
@@ -20,62 +19,31 @@ export const getDashboards = async (): Promise<Dashboard[]> => {
 }
 
 export const getDashboard = async (id: string): Promise<Dashboard> => {
-  try {
-    const {data} = await AJAX({
-      url: `/api/v2/dashboards/${id}`,
-    })
+  const {data} = await dashboardsAPI.dashboardsDashboardIDGet(id)
 
-    return data
-  } catch (error) {
-    throw error
-  }
+  return data
 }
 
 export const createDashboard = async (
-  url: string,
   dashboard: Partial<Dashboard>
 ): Promise<Dashboard> => {
-  try {
-    const {data} = await AJAX({
-      method: 'POST',
-      url,
-      data: dashboard,
-    })
-
-    return data
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
+  const {data} = await dashboardsAPI.dashboardsPost('', dashboard)
+  return data
 }
 
-export const deleteDashboard = async (url: string): Promise<void> => {
-  try {
-    return await AJAX({
-      method: 'DELETE',
-      url,
-    })
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
+export const deleteDashboard = async (dashboard: Dashboard): Promise<void> => {
+  await dashboardsAPI.dashboardsDashboardIDDelete(dashboard.id)
 }
 
 export const updateDashboard = async (
   dashboard: Dashboard
 ): Promise<Dashboard> => {
-  try {
-    const {data} = await AJAX({
-      method: 'PATCH',
-      url: dashboard.links.self,
-      data: dashboard,
-    })
+  const {data} = await dashboardsAPI.dashboardsDashboardIDPatch(
+    dashboard.id,
+    dashboard
+  )
 
-    return data
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
+  return data
 }
 
 export const loadDashboardLinks = async (
@@ -89,62 +57,23 @@ export const loadDashboardLinks = async (
   return dashboardLinks
 }
 
-export const addCell = async (url: string, cell: NewCell): Promise<Cell> => {
-  try {
-    const {data} = await AJAX({
-      method: 'POST',
-      url,
-      data: cell,
-    })
-
-    return data
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
+export const addCell = async (id, cell: CreateCell): Promise<Cell> => {
+  const {data} = await cellsAPI.dashboardsDashboardIDCellsPost(id, cell)
+  return data
 }
 
 export const updateCells = async (
-  url: string,
+  id: string,
   cells: Cell[]
 ): Promise<Cell[]> => {
-  try {
-    const {data} = await AJAX({
-      method: 'PUT',
-      url,
-      data: cells,
-    })
+  const {data} = await cellsAPI.dashboardsDashboardIDCellsPut(id, cells)
 
-    return data.cells
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
+  return data.cells
 }
 
-export const deleteCell = async (url: string): Promise<void> => {
-  try {
-    return await AJAX({
-      method: 'DELETE',
-      url,
-    })
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
-}
-
-export const copyCell = async (url: string, cell: Cell): Promise<Cell> => {
-  try {
-    const {data} = await AJAX({
-      method: 'POST',
-      url,
-      data: cell,
-    })
-
-    return data
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
+export const deleteCell = async (
+  dashboardID: string,
+  cell: Cell
+): Promise<void> => {
+  await cellsAPI.dashboardsDashboardIDCellsCellIDDelete(dashboardID, cell.id)
 }

ui/src/dashboards/apis/v2/view.ts

@@ -1,56 +1,35 @@
-// Libraries
-import AJAX from 'src/utils/ajax'
-
 // Utils
-import {getDeep} from 'src/utils/wrappers'
+import {viewsAPI} from 'src/utils/api'
 
 // Types
-import {View, ViewParams} from 'src/types/v2'
+import {View} from 'src/api'
 import {NewView} from 'src/types/v2/dashboards'
 
-export const readView = async (url: string): Promise<View> => {
-  const {data} = await AJAX({url})
+export const readView = async (id: string): Promise<View> => {
+  const {data} = await viewsAPI.viewsViewIDGet(id)
 
   return data
 }
 
-export const createView = async (url: string, view: NewView): Promise<View> => {
-  const {data} = await AJAX({
-    url,
-    method: 'POST',
-    data: view,
-  })
+export const createView = async (
+  view: NewView,
+  org: string = ''
+): Promise<View> => {
+  const {data} = await viewsAPI.viewsPost(org, view)
 
   return data
 }
 
 export const updateView = async (
-  url: string,
+  id: string,
   view: Partial<View>
 ): Promise<View> => {
-  const {data} = await AJAX({
-    url,
-    method: 'PATCH',
-    data: view,
-  })
+  const {data} = await viewsAPI.viewsViewIDPatch(id, view)
 
   return data
 }
 
-export const readViews = async (
-  url: string,
-  params?: ViewParams
-): Promise<View[]> => {
-  try {
-    const response = await AJAX({
-      method: 'GET',
-      url,
-      params,
-    })
-
-    return getDeep<View[]>(response, 'data.views', [])
-  } catch (error) {
-    console.error(error)
-    return []
-  }
+export const readViews = async (org: string = ''): Promise<View[]> => {
+  const {data} = await viewsAPI.viewsGet(org)
+  return data.views
 }

ui/src/dashboards/components/DashboardPage.tsx

@@ -288,7 +288,7 @@ class DashboardPage extends Component<Props, State> {
 
     try {
       if (view.id) {
-        await onUpdateView(view.links.self, view)
+        await onUpdateView(view)
       } else {
         await onCreateCellWithView(dashboard, view)
       }

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -149,13 +149,13 @@ class DashboardIndex extends PureComponent<Props, State> {
   }
 
   private handleCreateDashboard = async (): Promise<void> => {
-    const {links, router, notify} = this.props
+    const {router, notify} = this.props
     try {
       const newDashboard = {
         name: 'Name this dashboard',
         cells: [],
       }
-      const data = await createDashboard(links.dashboards, newDashboard)
+      const data = await createDashboard(newDashboard)
       router.push(`/dashboards/${data.id}`)
     } catch (error) {
       notify(dashboardCreateFailed())
@@ -165,10 +165,10 @@ class DashboardIndex extends PureComponent<Props, State> {
   private handleCloneDashboard = async (
     dashboard: Dashboard
   ): Promise<void> => {
-    const {router, links, notify} = this.props
+    const {router, notify} = this.props
     const name = `${dashboard.name} (clone)`
     try {
-      const data = await createDashboard(links.dashboards, {
+      const data = await createDashboard({
         ...dashboard,
         name,
       })
@@ -215,7 +215,6 @@ class DashboardIndex extends PureComponent<Props, State> {
       h: 4,
     }
 
-    const {links} = this.props
     const name = _.get(dashboard, 'name', 'Name this dashboard')
     const cellsWithDefaultsApplied = getDeep<Cell[]>(
       dashboard,
@@ -223,7 +222,7 @@ class DashboardIndex extends PureComponent<Props, State> {
       []
     ).map(c => ({...defaultCell, ...c}))
 
-    await this.props.handleImportDashboard(links.dashboards, {
+    await this.props.handleImportDashboard({
       ...dashboard,
       name,
       cells: cellsWithDefaultsApplied,

ui/src/dashboards/reducers/v2/views.ts

@@ -1,7 +1,7 @@
 // Types
 import {Action} from 'src/dashboards/actions/v2/views'
 import {RemoteDataState} from 'src/types'
-import {View} from 'src/types/v2'
+import {View} from 'src/api'
 
 export interface ViewsState {
   [viewID: string]: {

ui/src/logs/actions/index.ts

@@ -26,7 +26,8 @@ import {logViewData as defaultLogView} from 'src/logs/data/logViewData'
 // Types
 import {Dispatch} from 'redux'
 import {ThunkDispatch} from 'redux-thunk'
-import {View, NewView, ViewType, TimeSeriesValue} from 'src/types/v2/dashboards'
+import {View} from 'src/api'
+import {NewView, TimeSeriesValue} from 'src/types/v2/dashboards'
 import {
   Filter,
   LogConfig,
@@ -347,13 +348,13 @@ export const getSourceAndPopulateBucketsAsync = (sourceURL: string) => async (
   }
 }
 
-export const getLogConfigAsync = (url: string) => async (
+export const getLogConfigAsync = () => async (
   dispatch: Dispatch<SetConfigAction>,
   getState: GetState
 ) => {
   const state = getState()
   const isTruncated = getIsTruncated(state)
-  const views = await readViewsAJAX(url, {type: ViewType.LogViewer})
+  const views = await readViewsAJAX()
   const logView: NewView | View = getDeep(views, '0', defaultLogView)
 
   const logConfig = {
@@ -364,13 +365,12 @@ export const getLogConfigAsync = (url: string) => async (
   await dispatch(setConfig(logConfig))
 }
 
-export const createLogConfigAsync = (
-  url: string,
-  newConfig: LogConfig
-) => async (dispatch: Dispatch<SetConfigAction>) => {
+export const createLogConfigAsync = (newConfig: LogConfig) => async (
+  dispatch: Dispatch<SetConfigAction>
+) => {
   const {isTruncated} = newConfig
   const {id, ...newLogView} = uiToServerConfig(newConfig)
-  const logView = await createViewAJAX(url, newLogView)
+  const logView = await createViewAJAX(newLogView)
   const logConfig = {
     ...serverToUIConfig(logView),
     isTruncated,
@@ -381,9 +381,9 @@ export const createLogConfigAsync = (
 export const updateLogConfigAsync = (updatedConfig: LogConfig) => async (
   dispatch: Dispatch<SetConfigAction>
 ) => {
-  const {isTruncated, link} = updatedConfig
+  const {isTruncated} = updatedConfig
   const updatedView = uiToServerConfig(updatedConfig)
-  const logView = await updateViewAJAX(link, updatedView)
+  const logView = await updateViewAJAX(updatedView.id, updatedView)
 
   const logConfig = {
     ...serverToUIConfig(logView),

ui/src/logs/containers/logs_page/LogsPage.tsx

@@ -119,7 +119,7 @@ class LogsPage extends Component<Props, State> {
   public async componentDidMount() {
     try {
       await this.setCurrentSource()
-      await this.props.getConfig(this.configLink)
+      await this.props.getConfig()
 
       if (this.props.searchStatus !== SearchStatus.SourceError) {
         this.setState({scrollMode: ScrollMode.TailTop})
@@ -283,7 +283,7 @@ class LogsPage extends Component<Props, State> {
     }
 
     if (!this.isLogConfigSaved) {
-      await this.props.createConfig(this.configLink, updatedConfig)
+      await this.props.createConfig(updatedConfig)
     } else {
       await this.props.updateConfig(updatedConfig)
     }
@@ -367,10 +367,6 @@ class LogsPage extends Component<Props, State> {
     })
   }
 
-  private get configLink(): string {
-    return getDeep<string>(this.props, 'links.views', '')
-  }
-
   private get isTruncated(): boolean {
     return this.props.logConfig.isTruncated
   }

ui/src/logs/utils/config.ts

@@ -15,13 +15,14 @@ import {
 } from 'src/types/logs'
 
 import {
-  View,
   NewView,
   LogViewerView,
   LogViewerColumn,
   LogViewerColumnSetting,
 } from 'src/types/v2/dashboards'
 
+import {View} from 'src/api'
+
 import {
   DEFAULT_TRUNCATION,
   LOG_VIEW_NAME,

ui/src/shared/actions/v2/me.ts

@@ -5,7 +5,7 @@ export enum ActionTypes {
   SetMe = 'SET_ME',
 }
 
-type GetStateFunc = () => Promise<AppState>
+type GetStateFunc = () => AppState
 
 export interface SetMe {
   type: ActionTypes.SetMe
@@ -30,7 +30,7 @@ export const getMe = () => async (dispatch, getState: GetStateFunc) => {
   try {
     const {
       links: {me: url},
-    } = await getState()
+    } = getState()
 
     const user = await getMeAPI(url)
 

ui/src/shared/components/cells/Cell.tsx

@@ -14,7 +14,8 @@ import {readView} from 'src/dashboards/actions/v2/views'
 
 // Types
 import {RemoteDataState, TimeRange} from 'src/types'
-import {Cell, View, AppState, ViewType} from 'src/types/v2'
+import {AppState, ViewType} from 'src/types/v2'
+import {Cell, View} from 'src/api'
 
 // Styles
 import './Cell.scss'
@@ -47,7 +48,7 @@ class CellComponent extends Component<Props> {
     const {viewStatus, cell, onReadView} = this.props
 
     if (viewStatus === RemoteDataState.NotStarted) {
-      onReadView(cell.links.view, cell.viewID)
+      onReadView(cell.viewID)
     }
   }
 

ui/src/shared/components/cells/View.tsx

@@ -7,7 +7,8 @@ import RefreshingView from 'src/shared/components/RefreshingView'
 
 // Types
 import {TimeRange} from 'src/types'
-import {View, ViewType, ViewShape} from 'src/types/v2'
+import {ViewType, ViewShape} from 'src/types/v2'
+import {View} from 'src/api'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 

ui/src/types/v2/dashboards.ts

@@ -1,5 +1,5 @@
 import {Color} from 'src/types/colors'
-import {Dashboard} from 'src/api'
+import {Dashboard, View as ViewAPI} from 'src/api'
 
 export interface Axis {
   label: string
@@ -69,11 +69,14 @@ export interface DecimalPlaces {
   digits: number
 }
 
-export interface View<T extends ViewProperties = ViewProperties> {
-  id: string
-  name: string
-  properties: T
-  links: ViewLinks
+export interface MarkDownProperties {
+  type: ViewType.Markdown
+  text: string
+}
+
+export interface View<T extends ViewProperties = ViewProperties>
+  extends ViewAPI {
+  properties?: T
 }
 
 type Omit<K, V> = Pick<K, Exclude<keyof K, V>>

ui/src/utils/api.ts

@@ -5,10 +5,12 @@ import {
   CellsApi,
   TelegrafsApi,
   AuthorizationsApi,
+  ViewsApi,
 } from 'src/api'
 
 const basePath = '/api/v2'
 
+export const viewsAPI = new ViewsApi({basePath: '/api/v2'})
 export const taskAPI = new TasksApi({basePath})
 export const usersAPI = new UsersApi({basePath})
 export const dashboardsAPI = new DashboardsApi({basePath})