Merge pull request #1576 from influxdata/updates/switch-dashboard-ui-generated

Switch Dashboard UI to use generated client

http/cur_swagger.yml

@@ -4516,7 +4516,7 @@ components:
         x:
           type: integer
           format: int32
-        y:
+        "y":
           type: integer
           format: int32
         w:
@@ -4534,6 +4534,8 @@ components:
     Cell:
       type: object
       properties:
+        id:
+          type: string
         links:
           type: object
           properties:
@@ -4546,7 +4548,7 @@ components:
         x:
           type: integer
           format: int32
-        y:
+        "y":
           type: integer
           format: int32
         w:

ui/mocks/dummyData.ts

@@ -189,10 +189,8 @@ export const dashboard: Dashboard = {
   id: '1',
   cells: [],
   name: 'd1',
-  default: false,
   links: {
     self: 'self/link',
-    copy: 'copy/link',
     cells: 'cells/link',
   },
 }
@@ -206,7 +204,6 @@ export const cell: Cell = {
   id: '0246e457-916b-43e3-be99-211c4cbc03e8',
   links: {
     self: 'self/link',
-    copy: 'copy/link',
     view: 'view/link',
   },
 }

ui/src/api/api.ts

@@ -342,6 +342,12 @@ export interface Cell {
      * @memberof Cell
      */
     h?: number;
+    /**
+     * 
+     * @type {string}
+     * @memberof Cell
+     */
+    id?: string;
     /**
      * 
      * @type {CellLinks}
@@ -354,12 +360,6 @@ export interface Cell {
      * @memberof Cell
      */
     name?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof Cell
-     */
-    _true?: number;
     /**
      * The reference to a view from the views API
      * @type {string}
@@ -378,6 +378,12 @@ export interface Cell {
      * @memberof Cell
      */
     x?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof Cell
+     */
+    y?: number;
 }
 
 /**
@@ -474,12 +480,6 @@ export interface CreateCell {
      * @memberof CreateCell
      */
     name?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof CreateCell
-     */
-    _true?: number;
     /**
      * makes a copy of the provided view
      * @type {string}
@@ -504,6 +504,12 @@ export interface CreateCell {
      * @memberof CreateCell
      */
     x?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof CreateCell
+     */
+    y?: number;
 }
 
 /**

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

@@ -12,7 +12,6 @@ import {
   updateCells as updateCellsAJAX,
   addCell as addCellAJAX,
   deleteCell as deleteCellAJAX,
-  copyCell as copyCellAJAX,
 } from 'src/dashboards/apis/v2'
 import {createView as createViewAJAX} from 'src/dashboards/apis/v2/view'
 
@@ -37,8 +36,9 @@ import * as copy from 'src/shared/copy/notifications'
 // Types
 import {RemoteDataState} from 'src/types'
 import {PublishNotificationAction} from 'src/types/actions/notifications'
-import {Dashboard, Cell, AppState} from 'src/types/v2'
+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',
@@ -150,11 +150,11 @@ export const deleteCell = (
 
 // Thunks
 
-export const getDashboardsAsync = (url: string) => async (
+export const getDashboardsAsync = () => async (
   dispatch: Dispatch<Action>
 ): Promise<Dashboard[]> => {
   try {
-    const dashboards = await getDashboardsAJAX(url)
+    const dashboards = await getDashboardsAJAX()
     dispatch(loadDashboards(dashboards))
     return dashboards
   } catch (error) {
@@ -169,7 +169,7 @@ export const importDashboardAsync = (
 ) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
     await createDashboardAJAX(url, dashboard)
-    const dashboards = await getDashboardsAJAX(url)
+    const dashboards = await getDashboardsAJAX()
 
     dispatch(loadDashboards(dashboards))
     dispatch(notify(copy.dashboardImported(name)))
@@ -264,7 +264,7 @@ export const createCellWithView = (
 
     const createdCell = await addCellAJAX(dashboard.links.cells, cell)
 
-    let updatedDashboard = {
+    let updatedDashboard: Dashboard = {
       ...dashboard,
       cells: [...dashboard.cells, createdCell],
     }
@@ -312,10 +312,9 @@ export const copyDashboardCellAsync = (
 ) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
     const clonedCell = getClonedDashboardCell(dashboard, cell)
-    const cellFromServer = await copyCellAJAX(cell.links.copy, clonedCell)
     const updatedDashboard = {
       ...dashboard,
-      cells: [...dashboard.cells, cellFromServer],
+      cells: [...dashboard.cells, clonedCell],
     }
 
     dispatch(loadDashboard(updatedDashboard))

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

@@ -1,9 +1,10 @@
 // Libraries
 import AJAX from 'src/utils/ajax'
+import {dashboardsAPI} from 'src/utils/api'
 
 // Types
-import {Dashboard} from 'src/types/v2'
-import {DashboardSwitcherLinks, NewCell, Cell} from 'src/types/v2/dashboards'
+import {Dashboard, Cell} from 'src/api'
+import {DashboardSwitcherLinks, NewCell} from 'src/types/v2/dashboards'
 
 // Utils
 import {
@@ -12,16 +13,10 @@ import {
 } from 'src/dashboards/utils/dashboardSwitcherLinks'
 
 // TODO(desa): what to do about getting dashboards from another v2 source
-export const getDashboards = async (url: string): Promise<Dashboard[]> => {
-  try {
-    const {data} = await AJAX({
-      url,
-    })
+export const getDashboards = async (): Promise<Dashboard[]> => {
+  const {data} = await dashboardsAPI.dashboardsGet()
 
-    return data.dashboards
-  } catch (error) {
-    throw error
-  }
+  return data.dashboards
 }
 
 export const getDashboard = async (id: string): Promise<Dashboard> => {
@@ -84,10 +79,9 @@ export const updateDashboard = async (
 }
 
 export const loadDashboardLinks = async (
-  dashboardsLink: string,
   activeDashboard: Dashboard
 ): Promise<DashboardSwitcherLinks> => {
-  const dashboards = await getDashboards(dashboardsLink)
+  const dashboards = await getDashboards()
 
   const links = linksFromDashboards(dashboards)
   const dashboardLinks = updateDashboardLinks(links, activeDashboard)

ui/src/dashboards/components/DashboardHeader.tsx

@@ -12,7 +12,8 @@ import {Button, ButtonShape, ComponentColor, IconFont} from 'src/clockface'
 // Types
 import * as AppActions from 'src/types/actions/app'
 import * as QueriesModels from 'src/types/queries'
-import {Dashboard, DashboardSwitcherLinks} from 'src/types/v2/dashboards'
+import {Dashboard} from 'src/api'
+import {DashboardSwitcherLinks} from 'src/types/v2/dashboards'
 
 interface Props {
   activeDashboard: string

ui/src/dashboards/components/DashboardPage.tsx

@@ -350,13 +350,10 @@ class DashboardPage extends Component<Props, State> {
   }
 
   private getDashboardLinks = async (): Promise<void> => {
-    const {links, dashboard: activeDashboard} = this.props
+    const {dashboard: activeDashboard} = this.props
 
     try {
-      const dashboardLinks = await loadDashboardLinks(
-        links.dashboards,
-        activeDashboard
-      )
+      const dashboardLinks = await loadDashboardLinks(activeDashboard)
 
       this.setState({
         dashboardLinks,

ui/src/dashboards/components/dashboard_empty/DashboardEmpty.tsx

@@ -6,7 +6,7 @@ import {connect} from 'react-redux'
 import {addCellAsync} from 'src/dashboards/actions/v2'
 
 // Types
-import {Dashboard} from 'src/types/v2/dashboards'
+import {Dashboard} from 'src/api'
 import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'

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

@@ -42,8 +42,9 @@ import {
 
 // Types
 import {Notification} from 'src/types/notifications'
-import {DashboardFile, Cell} from 'src/types/v2/dashboards'
-import {Links, Dashboard} from 'src/types/v2'
+import {DashboardFile} from 'src/types/v2/dashboards'
+import {Cell, Dashboard} from 'src/api'
+import {Links} from 'src/types/v2'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -77,8 +78,8 @@ class DashboardIndex extends PureComponent<Props, State> {
   }
 
   public async componentDidMount() {
-    const {handleGetDashboards, dashboards, links} = this.props
-    await handleGetDashboards(links.dashboards)
+    const {handleGetDashboards, dashboards} = this.props
+    await handleGetDashboards()
     const dashboardIDs = dashboards.map(d => d.id)
     this.props.retainRangesDashTimeV1(dashboardIDs)
   }

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

@@ -18,7 +18,7 @@ import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
 
 // Types
 import {Sort} from 'src/clockface'
-import {Dashboard} from 'src/types/v2'
+import {Dashboard} from 'src/api'
 
 interface Props {
   searchTerm: string
@@ -36,7 +36,7 @@ interface State {
   sortDirection: Sort
 }
 
-type SortKey = keyof Dashboard | 'modified' | 'owner' // owner and modified are currently hardcoded
+type SortKey = keyof Dashboard | 'modified' | 'owner' | 'default' // owner and modified are currently hardcoded
 
 class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
   constructor(props) {

ui/src/dashboards/constants/index.ts

@@ -3,7 +3,8 @@ import {
   DEFAULT_FIX_FIRST_COLUMN,
 } from 'src/shared/constants/tableGraph'
 import {Cell} from 'src/types'
-import {Dashboard, DecimalPlaces} from 'src/types/v2/dashboards'
+import {DecimalPlaces} from 'src/types/v2/dashboards'
+import {Dashboard} from 'src/api'
 
 export const UNTITLED_GRAPH: string = 'Untitled Graph'
 
@@ -69,7 +70,6 @@ type EmptyDefaultDashboard = Pick<
 export const EMPTY_DASHBOARD: EmptyDefaultDashboard = {
   id: '0',
   name: '',
-  default: false,
   cells: [
     {
       x: 0,

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

@@ -1,5 +1,5 @@
 import {Action, ActionTypes} from 'src/dashboards/actions/v2'
-import {Dashboard} from 'src/types/v2'
+import {Dashboard} from 'src/api'
 import _ from 'lodash'
 
 type State = Dashboard[]

ui/src/dashboards/resources.ts

@@ -216,7 +216,6 @@ export const cell: Cell = {
   links: {
     self: '/chronograf/v1/dashboards/9/cells/67435',
     view: '1',
-    copy: '12',
   },
 }
 

ui/src/dashboards/utils/cellGetters.ts

@@ -1,4 +1,5 @@
-import {NewCell, Cell, Dashboard} from 'src/types/v2/dashboards'
+import {NewCell} from 'src/types/v2/dashboards'
+import {Cell, Dashboard} from 'src/api'
 import {UNTITLED_GRAPH} from 'src/dashboards/constants'
 
 const getMostCommonValue = (values: number[]): number => {

ui/src/dashboards/utils/dashboardSwitcherLinks.ts

@@ -1,4 +1,4 @@
-import {Dashboard} from 'src/types/v2/dashboards'
+import {Dashboard} from 'src/api'
 import {DashboardSwitcherLinks} from 'src/types/v2/dashboards'
 
 export const EMPTY_LINKS = {

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

@@ -21,7 +21,7 @@ import {
 } from 'src/shared/constants'
 
 // Types
-import {Cell} from 'src/types/v2'
+import {Cell} from 'src/api'
 import {TimeRange} from 'src/types'
 
 // Styles
@@ -107,7 +107,14 @@ class Cells extends Component<Props & WithRouterProps, State> {
   }
 
   private get cells(): Layout[] {
-    return this.props.cells.map(c => ({...c, i: c.id}))
+    return this.props.cells.map(c => ({
+      ...c,
+      x: c.x,
+      y: c.y,
+      h: c.h,
+      w: c.w,
+      i: c.id,
+    }))
   }
 
   private get isDashboard(): boolean {

ui/src/types/apis/dashboards.ts

@@ -1,4 +1,4 @@
-import {Dashboard} from 'src/types/v2/dashboards'
+import {Dashboard} from 'src/api'
 import {AxiosResponse} from 'axios'
 
 export interface DashboardsResponse {

ui/src/types/index.ts

@@ -1,6 +1,7 @@
 import {LayoutCell, LayoutQuery} from './layouts'
 import {Service, NewService} from './services'
-import {Cell, DashboardQuery, Legend, Axes, Dashboard} from './v2/dashboards'
+import {DashboardQuery, Legend, Axes} from './v2/dashboards'
+import {Dashboard, Cell} from 'src/api'
 import {
   GroupBy,
   Query,

ui/src/types/v2/dashboards.ts

@@ -1,4 +1,5 @@
 import {Color} from 'src/types/colors'
+import {Dashboard} from 'src/api'
 
 export interface Axis {
   label: string
@@ -204,21 +205,6 @@ export enum ViewType {
   LogViewer = 'log-viewer',
 }
 
-interface DashboardLinks {
-  self: string
-  cells: string
-  copy: string
-}
-
-export interface Dashboard {
-  id: string
-  cells: Cell[]
-  name: string
-  default: boolean
-  links: DashboardLinks
-  meta?: {[x: string]: any}
-}
-
 export interface DashboardFile {
   meta?: DashboardFileMetaSection
   dashboard: Dashboard

ui/src/types/v2/index.ts

@@ -3,9 +3,7 @@ import {Bucket, RetentionRule, RetentionRuleTypes} from 'src/types/v2/buckets'
 import {RangeState} from 'src/dashboards/reducers/v2/ranges'
 import {ViewsState} from 'src/dashboards/reducers/v2/views'
 import {
-  Dashboard,
   DashboardSwitcherLinks,
-  Cell,
   NewCell,
   View,
   NewView,
@@ -15,6 +13,8 @@ import {
   ViewProperties,
   DashboardQuery,
 } from 'src/types/v2/dashboards'
+
+import {Cell, Dashboard} from 'src/api'
 import {Task} from 'src/types/v2/tasks'
 import {Member} from 'src/types/v2/members'
 import {Organization} from 'src/types/v2/orgs'

ui/src/utils/api.ts

@@ -1,3 +1,6 @@
-import {TasksApi} from 'src/api'
+import {TasksApi, UsersApi, DashboardsApi, CellsApi} from 'src/api'
 
 export const taskAPI = new TasksApi({basePath: '/api/v2'})
+export const usersAPI = new UsersApi({basePath: '/api/v2'})
+export const dashboardsAPI = new DashboardsApi({basePath: '/api/v2'})
+export const cellsAPI = new CellsApi({basePath: '/api/v1'})