public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: began folder to redux migration

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-09-10 14:30:42 +02:00
parent 6c90a53654
commit 59b5b146da
8 changed files with 222 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/containers/ManageDashboards/FolderSettings.tsx
-160
View File
@@ -1,160 +0,0 @@
import React from 'react';
import { hot } from 'react-hot-loader';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import ContainerProps from 'app/containers/ContainerProps';
import { getSnapshot } from 'mobx-state-tree';
import appEvents from 'app/core/app_events';
@inject('nav', 'folder', 'view')
@observer
export class FolderSettings extends React.Component<ContainerProps, any> {
formSnapshot: any;
componentDidMount() {
this.loadStore();
}
loadStore() {
const { nav, folder, view } = this.props;
return folder.load(view.routeParams.get('uid') as string).then(res => {
this.formSnapshot = getSnapshot(folder);
view.updatePathAndQuery(`${res.url}/settings`, {}, {});
return nav.initFolderNav(toJS(folder.folder), 'manage-folder-settings');
});
}
onTitleChange(evt) {
this.props.folder.setTitle(this.getFormSnapshot().folder.title, evt.target.value);
}
getFormSnapshot() {
if (!this.formSnapshot) {
this.formSnapshot = getSnapshot(this.props.folder);
}
return this.formSnapshot;
}
save(evt) {
if (evt) {
evt.stopPropagation();
evt.preventDefault();
}
const { nav, folder, view } = this.props;
folder
.saveFolder({ overwrite: false })
.then(newUrl => {
view.updatePathAndQuery(newUrl, {}, {});
appEvents.emit('dashboard-saved');
appEvents.emit('alert-success', ['Folder saved']);
})
.then(() => {
return nav.initFolderNav(toJS(folder.folder), 'manage-folder-settings');
})
.catch(this.handleSaveFolderError.bind(this));
}
delete(evt) {
if (evt) {
evt.stopPropagation();
evt.preventDefault();
}
const { folder, view } = this.props;
const title = folder.folder.title;
appEvents.emit('confirm-modal', {
title: 'Delete',
text: `Do you want to delete this folder and all its dashboards?`,
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: () => {
return folder.deleteFolder().then(() => {
appEvents.emit('alert-success', ['Folder Deleted', `${title} has been deleted`]);
view.updatePathAndQuery('dashboards', '', '');
});
},
});
}
handleSaveFolderError(err) {
if (err.data && err.data.status === 'version-mismatch') {
err.isHandled = true;
const { nav, folder, view } = this.props;
appEvents.emit('confirm-modal', {
title: 'Conflict',
text: 'Someone else has updated this folder.',
text2: 'Would you still like to save this folder?',
yesText: 'Save & Overwrite',
icon: 'fa-warning',
onConfirm: () => {
folder
.saveFolder({ overwrite: true })
.then(newUrl => {
view.updatePathAndQuery(newUrl, {}, {});
appEvents.emit('dashboard-saved');
appEvents.emit('alert-success', ['Folder saved']);
})
.then(() => {
return nav.initFolderNav(toJS(folder.folder), 'manage-folder-settings');
});
},
});
}
}
render() {
const { nav, folder } = this.props;
if (!folder.folder || !nav.main) {
return <h2>Loading</h2>;
}
return (
<div>
<PageHeader model={nav as any} />
<div className="page-container page-body">
<h2 className="page-sub-heading">Folder Settings</h2>
<div className="section gf-form-group">
<form name="folderSettingsForm" onSubmit={this.save.bind(this)}>
<div className="gf-form">
<label className="gf-form-label width-7">Name</label>
<input
type="text"
className="gf-form-input width-30"
value={folder.folder.title}
onChange={this.onTitleChange.bind(this)}
/>
</div>
<div className="gf-form-button-row">
<button
type="submit"
className="btn btn-success"
disabled={!folder.folder.canSave || !folder.folder.hasChanged}
>
<i className="fa fa-save" /> Save
</button>
<button className="btn btn-danger" onClick={this.delete.bind(this)} disabled={!folder.folder.canSave}>
<i className="fa fa-trash" /> Delete
</button>
</div>
</form>
</div>
</div>
</div>
);
}
}
export default hot(module)(FolderSettings);
public/app/containers/ManageDashboards/FolderSettings.test.tsx → public/app/features/manage-dashboards/FolderSettingsPage.test.tsx
View File
public/app/features/manage-dashboards/FolderSettingsPage.tsx
+180
View File
@@ -0,0 +1,180 @@
import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import appEvents from 'app/core/app_events';
import { getNavModel } from 'app/core/selectors/navModel';
import { NavModel, StoreState } from 'app/types';
import { getFolderByUid } from './state/actions';
export interface Props {
navModel: NavModel;
folderUid: string;
getFolderByUid: typeof getFolderByUid;
}
export class FolderSettingsPage extends PureComponent<Props> {
// formSnapshot: any;
//
componentDidMount() {
this.props.getFolderByUid(this.props.folderUid);
}
//
// loadStore() {
// const { nav, folder, view } = this.props;
//
// return folder.load(view.routeParams.get('uid') as string).then(res => {
// this.formSnapshot = getSnapshot(folder);
// view.updatePathAndQuery(`${res.url}/settings`, {}, {});
//
// return nav.initFolderNav(toJS(folder.folder), 'manage-folder-settings');
// });
// }
// onTitleChange(evt) {
// this.props.folder.setTitle(this.getFormSnapshot().folder.title, evt.target.value);
// }
//
// getFormSnapshot() {
// if (!this.formSnapshot) {
// this.formSnapshot = getSnapshot(this.props.folder);
// }
//
// return this.formSnapshot;
// }
//
// save(evt) {
// if (evt) {
// evt.stopPropagation();
// evt.preventDefault();
// }
//
// const { nav, folder, view } = this.props;
//
// folder
// .saveFolder({ overwrite: false })
// .then(newUrl => {
// view.updatePathAndQuery(newUrl, {}, {});
//
// appEvents.emit('dashboard-saved');
// appEvents.emit('alert-success', ['Folder saved']);
// })
// .then(() => {
// return nav.initFolderNav(toJS(folder.folder), 'manage-folder-settings');
// })
// .catch(this.handleSaveFolderError.bind(this));
// }
//
// delete(evt) {
// if (evt) {
// evt.stopPropagation();
// evt.preventDefault();
// }
//
// const { folder, view } = this.props;
// const title = folder.folder.title;
//
// appEvents.emit('confirm-modal', {
// title: 'Delete',
// text: `Do you want to delete this folder and all its dashboards?`,
// icon: 'fa-trash',
// yesText: 'Delete',
// onConfirm: () => {
// return folder.deleteFolder().then(() => {
// appEvents.emit('alert-success', ['Folder Deleted', `${title} has been deleted`]);
// view.updatePathAndQuery('dashboards', '', '');
// });
// },
// });
// }
//
// handleSaveFolderError(err) {
// if (err.data && err.data.status === 'version-mismatch') {
// err.isHandled = true;
//
// const { nav, folder, view } = this.props;
//
// appEvents.emit('confirm-modal', {
// title: 'Conflict',
// text: 'Someone else has updated this folder.',
// text2: 'Would you still like to save this folder?',
// yesText: 'Save & Overwrite',
// icon: 'fa-warning',
// onConfirm: () => {
// folder
// .saveFolder({ overwrite: true })
// .then(newUrl => {
// view.updatePathAndQuery(newUrl, {}, {});
//
// appEvents.emit('dashboard-saved');
// appEvents.emit('alert-success', ['Folder saved']);
// })
// .then(() => {
// return nav.initFolderNav(toJS(folder.folder), 'manage-folder-settings');
// });
// },
// });
// }
// }
render() {
const { navModel } = this.props;
// if (!folder.folder || !nav.main) {
// return <h2>Loading</h2>;
// }
return (
<div>
<PageHeader model={navModel} />
<div className="page-container page-body">
<h2 className="page-sub-heading">Folder Settings</h2>
</div>
</div>
);
}
// asd() {
// <div className="section gf-form-group">
// <form name="folderSettingsForm" onSubmit={this.save.bind(this)}>
// <div className="gf-form">
// <label className="gf-form-label width-7">Name</label>
// <input
// type="text"
// className="gf-form-input width-30"
// value={folder.folder.title}
// onChange={this.onTitleChange.bind(this)}
// />
// </div>
// <div className="gf-form-button-row">
// <button
// type="submit"
// className="btn btn-success"
// disabled={!folder.folder.canSave || !folder.folder.hasChanged}
// >
// <i className="fa fa-save" /> Save
// </button>
// <button className="btn btn-danger" onClick={this.delete.bind(this)} disabled={!folder.folder.canSave}>
// <i className="fa fa-trash" /> Delete
// </button>
// </div>
// </form>
// </div>
//
// }
}
const mapStateToProps = (state: StoreState) => {
const uid = state.location.routeParams.uid;
return {
navModel: getNavModel(state.navIndex, `folder-settings-${uid}`),
folderUid: uid,
};
};
const mapDispatchToProps = {
getFolderByUid,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(FolderSettingsPage));
public/app/features/manage-dashboards/state/actions.ts
+29
View File
@@ -0,0 +1,29 @@
import { getBackendSrv } from 'app/core/services/backend_srv';
import { StoreState } from 'app/types';
import { ThunkAction } from 'redux-thunk';
import { FolderDTO } from 'app/types';
export enum ActionTypes {
LoadFolder = 'LOAD_FOLDER',
}
export interface LoadFolderAction {
type: ActionTypes.LoadFolder;
payload: FolderDTO;
}
export const loadFolder = (folder: FolderDTO): LoadFolderAction => ({
type: ActionTypes.LoadFolder,
payload: folder,
});
export type Action = LoadFolderAction;
type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
export function getFolderByUid(uid: string): ThunkResult<void> {
return async dispatch => {
const folder = await getBackendSrv().getFolderByUid(uid);
dispatch(loadFolder(folder));
};
}
public/app/features/manage-dashboards/state/reducers.ts
View File
public/app/routes/routes.ts
+2 -2
View File
@@ -4,7 +4,7 @@ import './ReactContainer';
import ServerStats from 'app/features/admin/ServerStats';
import AlertRuleList from 'app/features/alerting/AlertRuleList';
import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions';
import FolderSettings from 'app/containers/ManageDashboards/FolderSettings';
import FolderSettingsPage from 'app/features/manage-dashboards/FolderSettingsPage';
import TeamPages from 'app/containers/Teams/TeamPages';
import TeamList from 'app/containers/Teams/TeamList';
@@ -99,7 +99,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
.when('/dashboards/f/:uid/:slug/settings', {
template: '<react-container />',
resolve: {
component: () => FolderSettings,
component: () => FolderSettingsPage,
},
})
.when('/dashboards/f/:uid/:slug', {
public/app/types/dashboard.ts
+7
View File
@@ -0,0 +1,7 @@
export interface FolderDTO {
id: number;
title: string;
url: string;
version: number;
hasAcl: boolean;
}
public/app/types/index.ts
+4
View File
@@ -1,3 +1,7 @@
import { FolderDTO } from './dashboard';
export { FolderDTO };
//
// Location
//