Moved history component, added start draft of frontend code style guide

public/app/features/all.ts

@@ -1,7 +1,7 @@
 import './annotations/all';
 import './templating/all';
 import './plugins/all';
-import './dashboard/all';
+import './dashboard';
 import './playlist/all';
 import './panel/all';
 import './org/all';

public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.test.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import { HistoryListCtrl } from 'app/features/dashboard/history/history';
-import { versions, compare, restore } from './history_mocks';
+import { HistoryListCtrl } from './HistoryListCtrl';
+import { versions, compare, restore } from './__mocks__/history';
 import $q from 'q';
 
 describe('HistoryListCtrl', () => {

public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts

@@ -1,12 +1,10 @@
-import './history_srv';
-
 import _ from 'lodash';
 import angular from 'angular';
 import moment from 'moment';
 
 import locationUtil from 'app/core/utils/location_util';
-import { DashboardModel } from '../dashboard_model';
-import { HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv } from './history_srv';
+import { DashboardModel } from '../../dashboard_model';
+import { HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv } from './HistorySrv';
 
 export class HistoryListCtrl {
   appending: boolean;
@@ -200,7 +198,7 @@ export class HistoryListCtrl {
 export function dashboardHistoryDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/history/history.html',
+    templateUrl: 'public/app/features/dashboard/components/VersionHistory/template.html',
     controller: HistoryListCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts

@@ -1,7 +1,6 @@
-import '../history/history_srv';
-import { versions, restore } from './history_mocks';
-import { HistorySrv } from '../history/history_srv';
-import { DashboardModel } from '../dashboard_model';
+import { versions, restore } from './__mocks__/history';
+import { HistorySrv } from './HistorySrv';
+import { DashboardModel } from '../../dashboard_model';
 jest.mock('app/core/store');
 
 describe('historySrv', () => {

public/app/features/dashboard/components/VersionHistory/HistorySrv.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
-import { DashboardModel } from '../dashboard_model';
+import { DashboardModel } from '../../dashboard_model';
 
 export interface HistoryListOpts {
   limit: number;

public/app/features/dashboard/components/VersionHistory/index.ts

@@ -0,0 +1,2 @@
+export { HistoryListCtrl } from './HistoryListCtrl';
+export { HistorySrv } from './HistorySrv';

public/app/features/dashboard/index.ts

@@ -1,6 +1,5 @@
 import './dashboard_ctrl';
 import './alerting_srv';
-import './history/history';
 import './dashboard_loader_srv';
 import './submenu/submenu';
 import './save_as_modal';
@@ -27,6 +26,7 @@ import './components/DashExportModal';
 import './components/DashNav';
 import './components/ExportDataModal';
 import './components/FolderPicker';
+import './components/VersionHistory';
 
 // angular wrappers
 import { react2AngularDirective } from 'app/core/utils/react2angular';

style_guides/frontend.md

@@ -0,0 +1,62 @@
+# Frontend Style Guide
+
+Generally we follow the Airbnb  [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
+
+## Table of Contents
+
+  1. [Basic Rules](#basic-rules)
+  1. [File & Component Organization](#Organization)
+  1. [Naming](#naming)
+  1. [Declaration](#declaration)
+  1. [Props](#props)
+  1. [Refs](#refs)
+  1. [Methods](#methods)
+  1. [Ordering](#ordering)
+
+## Basic rules
+
+* Try to keep files small and focused and break large components up into sub components.
+
+## Organization
+
+* Components and types that needs to be used by external plugins needs to go into @grafana/ui
+* Components should get their own folder under features/xxx/components
+  * Sub components can live in that component folders, so not small component needs their own folder
+  * Place test next to their component file (same dir)
+  * Mocks in __mocks__ dir
+  * Test utils in __tests__ dir
+  * Component sass should live in the same folder as component code
+* State logic & domain models should live in features/xxx/state
+* Containers (pages) can live in feature root features/xxx
+  * up for debate?
+
+## Props
+
+* Name callback props & handlers with a "on"  prefix.
+
+```tsx
+// good
+onChange = () => {
+
+};
+
+render() {
+  return (
+    <MyComponent onChange={this.onChange} />
+  );
+}
+
+// bad
+handleChange = () => {
+
+};
+
+render() {
+  return (
+    <MyComponent changed={this.handleChange} />
+  );
+}
+```
+
+
+