grafana/public/app/features/manage-dashboards/state/reducers.ts
Peter Holmberg ec743cf9a7
Migration: Migrate Dashboard Import to React (#22338)
* first things

* introduce headers and moving buttons

* adding reducer and action for gcom dashboard

* action working

* continue building on import form

* change dashboard title

* add prop to not render a label

* first things

* introduce headers and moving buttons

* adding reducer and action for gcom dashboard

* action working

* continue building on import form

* change dashboard title

* add prop to not render a label

* import form layout

* break out form to component

* add actions and reader for file upload

* fix upload issue

* modified data types to handle both gcom and file upload

* import dashboard json

* save dashboard

* start change uid

* change dashboard uid

* fix spacing and date format

* fix import from json

* handle uid and title change

* revert change in panelinspect

* redo fileupload component

* after review

* redo forms to use Forms functionality

* first attempt on async validation

* use ternary on uid input

* removed unused actions, fixed async validation on form

* post form if invalid, break out form to component

* sync file with master

* fix after merge

* nits

* export formapi type

* redo page to use forms validation

* fix inputs and validation

* readd post

* add guards on data source and constants

* type checks and strict nulls

* strict nulls

* validate onchange and fix import button when valid

* shorten validate call

* reexport OnSubmit type

* add comment for overwrite useEffect

* move validation functions to util

* fix button imports

* remove angular import

* move title and uid validation
2020-03-31 16:29:44 +02:00

108 lines
2.6 KiB
TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { DataSourceSelectItem } from '@grafana/data';
export enum DashboardSource {
Gcom = 0,
Json = 1,
}
export interface ImportDashboardDTO {
title: string;
uid: string;
gnetId: string;
constants: string[];
dataSources: DataSourceSelectItem[];
folderId: number;
}
export enum InputType {
DataSource = 'datasource',
Constant = 'constant',
}
export interface DashboardInput {
name: string;
label: string;
info: string;
value: string;
type: InputType;
}
export interface DataSourceInput extends DashboardInput {
pluginId: string;
options: DataSourceSelectItem[];
}
export interface DashboardInputs {
dataSources: DataSourceInput[];
constants: DashboardInput[];
}
export interface ImportDashboardState {
meta: { updatedAt: string; orgName: string };
dashboard: any;
source: DashboardSource;
inputs: DashboardInputs;
isLoaded: boolean;
}
const initialImportDashboardState: ImportDashboardState = {
meta: { updatedAt: '', orgName: '' },
dashboard: {},
source: DashboardSource.Json,
inputs: {} as DashboardInputs,
isLoaded: false,
};
const importDashboardSlice = createSlice({
name: 'manageDashboards',
initialState: initialImportDashboardState,
reducers: {
setGcomDashboard: (state, action: PayloadAction<any>): ImportDashboardState => {
return {
...state,
dashboard: {
...action.payload.json,
id: null,
},
meta: { updatedAt: action.payload.updatedAt, orgName: action.payload.orgName },
source: DashboardSource.Gcom,
isLoaded: true,
};
},
setJsonDashboard: (state, action: PayloadAction<any>): ImportDashboardState => {
return {
...state,
dashboard: {
...action.payload,
id: null,
},
source: DashboardSource.Json,
isLoaded: true,
};
},
clearDashboard: (state): ImportDashboardState => {
return {
...state,
dashboard: {},
isLoaded: false,
};
},
setInputs: (state, action: PayloadAction<any[]>): ImportDashboardState => ({
...state,
inputs: {
dataSources: action.payload.filter(p => p.type === InputType.DataSource),
constants: action.payload.filter(p => p.type === InputType.Constant),
},
}),
},
});
export const { clearDashboard, setInputs, setGcomDashboard, setJsonDashboard } = importDashboardSlice.actions;
export const importDashboardReducer = importDashboardSlice.reducer;
export default {
importDashboard: importDashboardReducer,
};