Skip to content

N
nexpie-grafana-theme
Commit 84b15194 by Torkel Ödegaard
Options

tech: initial react poc

parent 4326790b
Showing with 216 additions and 32 deletions
package.json
......@@ -10,6 +10,8 @@
"url": "http://github.com/grafana/grafana.git"
},
"devDependencies": {
"@types/react": "^16.0.5",
"@types/react-dom": "^15.5.4",
"autoprefixer": "^6.4.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.1",
......@@ -48,7 +50,7 @@
"mocha": "3.2.0",
"phantomjs-prebuilt": "^2.1.14",
"reflect-metadata": "0.1.8",
"rxjs": "^5.0.0-rc.5",
"rxjs": "^5.4.3",
"sass-lint": "^1.10.2",
"systemjs": "0.19.41",
"zone.js": "^0.7.2"
......@@ -70,13 +72,16 @@
"karma-sinon": "^1.0.5",
"lodash": "^4.17.4",
"mousetrap": "^1.6.0",
"ngreact": "^0.4.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"remarkable": "^1.7.1",
"sinon": "1.17.6",
"systemjs-builder": "^0.15.34",
"tether": "^1.4.0",
"tether-drop": "https://github.com/torkelo/drop",
"tslint": "^5.1.0",
"typescript": "^2.2.2",
"tslint": "^5.7.0",
"typescript": "^2.5.2",
"virtual-scroll": "^1.1.1"
}
}
public/app/app.ts
......@@ -9,6 +9,7 @@ import 'angular-sanitize';
import 'angular-dragdrop';
import 'angular-bindonce';
import 'angular-ui';
import 'ngreact';
import $ from 'jquery';
import angular from 'angular';
......@@ -84,6 +85,7 @@ export class GrafanaApp {
'pasvaz.bindonce',
'ui.bootstrap',
'ui.bootstrap.tpls',
'react'
];
var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];
......
public/app/core/components/CoolButton.tsx 0 → 100644
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import coreModule from '../core_module';
export interface ICoolButtonProps {
count: number;
}
export interface ICoolButtonState {
count: number;
}
export class CoolButton extends React.Component<ICoolButtonProps, ICoolButtonState> {
constructor(props) {
super(props);
this.state = {count: 1};
}
onClick() {
this.setState(prevState => ({
count: prevState.count + 1
}));
console.log(this.state.count);
}
render() {
return (
<div>
<h2 onClick={this.onClick.bind(this)}>Hello</h2>
<div>{this.state.count}</div>
<a href="/alerting">Go to alerting</a>
</div>
);
}
}
export interface Props {
fname: string;
onClick: () => void;
}
function SecondButton({fname, onClick}: Props) {
return (
<div className="hello">
<div className="greeting">
Hello {fname}
</div>
<div>
<button onClick={onClick}>button</button>
</div>
</div>
);
}
coreModule.directive('coolButton', function(reactDirective) {
return reactDirective(CoolButton);
});
coreModule.directive('secondButton', function(reactDirective) {
return reactDirective(SecondButton, [
['fname', {watchDepth: 'value'}]
]);
});
public/app/core/core.ts
......@@ -51,6 +51,7 @@ import {helpModal} from './components/help/help';
import {collapseBox} from './components/collapse_box';
import {JsonExplorer} from './components/json_explorer/json_explorer';
import {NavModelSrv, NavModel} from './nav_model_srv';
import {CoolButton} from './components/CoolButton';
export {
......@@ -80,4 +81,5 @@ export {
JsonExplorer,
NavModelSrv,
NavModel,
CoolButton,
};
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<cool-button>
</cool-button>
<second-button fname="ctrl.current.name"></second-button>
<div class="page-header">
<h1 ng-show="ctrl.isNew">Add data source</h1>
......
public/app/headers/common.d.ts
/// <reference path="./es6-shim/es6-shim.d.ts" />
declare var System: any;
......@@ -53,11 +52,6 @@ declare module 'eventemitter3' {
export default config;
}
declare module 'virtual-scroll' {
var config: any;
export default config;
}
declare module 'mousetrap' {
var config: any;
export default config;
......
public/app/system.conf.js
......@@ -2,7 +2,9 @@ System.config({
defaultJSExtenions: true,
baseURL: 'public',
paths: {
'virtual-scroll': 'vendor/npm/virtual-scroll/src/index.js',
'react': 'vendor/npm/react/dist/react.js',
'react-dom': 'vendor/npm/react-dom/dist/react-dom.js',
'ngreact': 'vendor/npm/ngreact/ngReact.js',
'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
'tether': 'vendor/npm/tether/dist/js/tether.js',
......
tasks/options/copy.js
......@@ -38,6 +38,9 @@ module.exports = function(config) {
'remarkable/dist/*',
'virtual-scroll/**/*',
'mousetrap/**/*',
'react/dist/*.js',
'react-dom/dist/*.js',
'ngreact/ngReact.js',
],
dest: '<%= srcDir %>/vendor/npm'
}
......
tsconfig.json
......@@ -5,19 +5,22 @@
"outDir": "public_gen",
"noImplicitAny": false,
"target": "es5",
"lib": ["es6", "dom"],
"rootDir": "public/",
"module": "system",
"jsx": "react",
"noEmitOnError": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitReturns":false,
"noImplicitThis":false,
"noImplicitThis": false,
"noImplicitUseStrict":false,
"noUnusedLocals":false,
"moduleResolution": "classic"
},
"include": [
"public/app/**/*.ts",
"public/app/**/*.tsx",
"public/test/**/*.ts"
],
"exclude": [
......
yarn.lock
......@@ -2,6 +2,16 @@
# yarn lockfile v1
"@types/react-dom@^15.5.4":
version "15.5.4"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f"
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^16.0.5":
version "16.0.5"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.5.tgz#d713cf67cc211dea20463d2a0b66005c22070c4b"
"JSV@>= 4.0.x":
version "4.0.2"
resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
......@@ -196,6 +206,10 @@ arrify@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
asn1@~0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
......@@ -767,16 +781,12 @@ commander@2.8.x:
dependencies:
graceful-readlink ">= 1.0.0"
commander@2.9.0, commander@2.9.x, commander@~2.9.0:
commander@2.9.0, commander@2.9.x, commander@^2.8.1, commander@^2.9.0, commander@~2.9.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
dependencies:
graceful-readlink ">= 1.0.0"
commander@^2.8.1, commander@^2.9.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
comment-parser@^0.3.1:
version "0.3.2"
resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-0.3.2.tgz#3c03f0776b86a36dfd9a0a2c97c6307f332082fe"
......@@ -858,6 +868,10 @@ convert-source-map@~1.1.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-js@^2.2.0, core-js@^2.4.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086"
......@@ -877,6 +891,14 @@ crc@^3.4.4:
version "3.4.4"
resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"
create-react-class@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"
cross-spawn@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
......@@ -1106,6 +1128,12 @@ encodeurl@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
end-of-stream@^1.0.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
......@@ -1449,6 +1477,18 @@ faye-websocket@~0.10.0:
dependencies:
websocket-driver ">=0.5.1"
fbjs@^0.8.9:
version "0.8.15"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.15.tgz#4f0695fdfcc16c37c0b07facec8cb4c4091685b9"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
fd-slicer@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
......@@ -2202,7 +2242,7 @@ iconv-lite@0.4.13:
version "0.4.13"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
iconv-lite@0.4.15:
iconv-lite@0.4.15, iconv-lite@~0.4.13:
version "0.4.15"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
......@@ -2463,6 +2503,13 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@0.1.x, isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
......@@ -2911,7 +2958,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
......@@ -3159,12 +3206,23 @@ ng-annotate@^1.2.1:
stringset "~0.2.1"
tryor "~0.1.2"
ngreact@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/ngreact/-/ngreact-0.4.1.tgz#53d8f0db7c687c6daa340827a5ef04a903c14701"
no-case@^2.2.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
dependencies:
lower-case "^1.1.1"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-gyp@^3.3.1:
version "3.6.2"
resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
......@@ -3290,7 +3348,7 @@ oauth-sign@~0.8.1:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
object-assign@^4.0.1, object-assign@^4.1.0:
object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
......@@ -3578,6 +3636,12 @@ progress@^1.1.8, progress@~1.1.8:
version "1.1.8"
resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
promised-io@0.3.5:
version "0.3.5"
resolved "https://registry.yarnpkg.com/promised-io/-/promised-io-0.3.5.tgz#4ad217bb3658bcaae9946b17a8668ecd851e1356"
......@@ -3592,6 +3656,13 @@ prompt@~0.2.14:
utile "0.2.x"
winston "0.8.x"
prop-types@^15.5.10:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
pseudomap@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
......@@ -3656,6 +3727,25 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-dom@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.10"
react@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
dependencies:
create-react-class "^15.6.0"
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.10"
read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
......@@ -3942,9 +4032,9 @@ rx-lite@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
rxjs@^5.0.0-rc.5:
version "5.4.2"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.2.tgz#2a3236fcbf03df57bae06fd6972fd99e5c08fcf7"
rxjs@^5.4.3:
version "5.4.3"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.3.tgz#0758cddee6033d68e0fd53676f0f3596ce3d483f"
dependencies:
symbol-observable "^1.0.1"
......@@ -4017,6 +4107,10 @@ set-immediate-shim@^1.0.0, set-immediate-shim@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
setprototypeof@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
......@@ -4501,9 +4595,9 @@ tslib@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
tslint@^5.1.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.5.0.tgz#10e8dab3e3061fa61e9442e8cee3982acf20a6aa"
tslint@^5.7.0:
version "5.7.0"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.7.0.tgz#c25e0d0c92fa1201c2bc30e844e08e682b4f3552"
dependencies:
babel-code-frame "^6.22.0"
colors "^1.1.2"
......@@ -4514,11 +4608,11 @@ tslint@^5.1.0:
resolve "^1.3.2"
semver "^5.3.0"
tslib "^1.7.1"
tsutils "^2.5.1"
tsutils "^2.8.1"
tsutils@^2.5.1:
version "2.8.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.0.tgz#0160173729b3bf138628dd14a1537e00851d814a"
tsutils@^2.8.1:
version "2.8.2"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.2.tgz#2c1486ba431260845b0ac6f902afd9d708a8ea6a"
dependencies:
tslib "^1.7.1"
......@@ -4553,9 +4647,13 @@ typedarray@~0.0.5:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
typescript@^2.2.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
typescript@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"
ua-parser-js@^0.7.9:
version "0.7.14"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
uglify-js@2.6.x:
version "2.6.4"
......@@ -4736,6 +4834,10 @@ websocket-extensions@>=0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
when@^3.7.5:
version "3.7.8"
resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment