From 84b1519480b687f0b00f859cc92aafabe9ecedbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Sep 2017 17:44:23 +0200 Subject: [PATCH 1/2] tech: initial react poc --- package.json | 11 +- public/app/app.ts | 2 + public/app/core/components/CoolButton.tsx | 67 ++++++++ public/app/core/core.ts | 2 + .../features/plugins/partials/ds_edit.html | 4 + public/app/headers/common.d.ts | 6 - public/app/system.conf.js | 4 +- tasks/options/copy.js | 3 + tsconfig.json | 5 +- yarn.lock | 144 +++++++++++++++--- 10 files changed, 216 insertions(+), 32 deletions(-) create mode 100644 public/app/core/components/CoolButton.tsx diff --git a/package.json b/package.json index f83605611de..2e4f174dec0 100644 --- a/package.json +++ b/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" } } diff --git a/public/app/app.ts b/public/app/app.ts index 3603e793d5c..27039c01350 100644 --- a/public/app/app.ts +++ b/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']; diff --git a/public/app/core/components/CoolButton.tsx b/public/app/core/components/CoolButton.tsx new file mode 100644 index 00000000000..7dd7988c421 --- /dev/null +++ b/public/app/core/components/CoolButton.tsx @@ -0,0 +1,67 @@ + +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 { + + constructor(props) { + super(props); + + this.state = {count: 1}; + } + + onClick() { + this.setState(prevState => ({ + count: prevState.count + 1 + })); + console.log(this.state.count); + } + + render() { + return ( +
+

Hello

+
{this.state.count}
+ Go to alerting +
+ ); + } +} + +export interface Props { + fname: string; + onClick: () => void; +} + +function SecondButton({fname, onClick}: Props) { + return ( +
+
+ Hello {fname} +
+
+ +
+
+ ); +} + +coreModule.directive('coolButton', function(reactDirective) { + return reactDirective(CoolButton); +}); + +coreModule.directive('secondButton', function(reactDirective) { + return reactDirective(SecondButton, [ + ['fname', {watchDepth: 'value'}] + ]); +}); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 6a5702d1f12..140c75fe863 100644 --- a/public/app/core/core.ts +++ b/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, }; diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index f01ca47153b..fd978d8b704 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,6 +1,10 @@
+ + + +

Add data source

diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index 84e46c3e9e4..c643c0af452 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -1,4 +1,3 @@ -/// 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; diff --git a/public/app/system.conf.js b/public/app/system.conf.js index d8d53b572a4..7bcf8faf3f8 100644 --- a/public/app/system.conf.js +++ b/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', diff --git a/tasks/options/copy.js b/tasks/options/copy.js index 25a0ab8bd11..494366b5b00 100644 --- a/tasks/options/copy.js +++ b/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' } diff --git a/tsconfig.json b/tsconfig.json index 7250a5f1313..f6bc060746a 100644 --- a/tsconfig.json +++ b/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": [ diff --git a/yarn.lock b/yarn.lock index 345f1b4156e..7b6472e84e6 100644 --- a/yarn.lock +++ b/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" From fed35909cc01f05bb255386c7f592baf54760094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Sep 2017 13:32:57 +0200 Subject: [PATCH 2/2] tech: progress on react poc --- package.json | 2 + .../app/core/components/PasswordStrength.tsx | 39 ++++ public/app/core/components/collapse_box.ts | 58 ----- public/app/core/components/scroll/scroll.ts | 211 ------------------ public/app/core/components/wizard/wizard.html | 32 --- public/app/core/components/wizard/wizard.ts | 73 ------ public/app/core/core.ts | 9 +- .../app/core/directives/password_strength.js | 2 +- .../app/core/specs/PasswordStrength_specs.tsx | 14 ++ .../features/plugins/partials/ds_edit.html | 4 - public/app/partials/signup_step2.html | 2 +- public/sass/_grafana.scss | 1 - public/sass/components/_collapse_box.scss | 46 ---- public/test/test-main.js | 17 +- tasks/options/watch.js | 1 + yarn.lock | 18 ++ 16 files changed, 88 insertions(+), 441 deletions(-) create mode 100644 public/app/core/components/PasswordStrength.tsx delete mode 100644 public/app/core/components/collapse_box.ts delete mode 100644 public/app/core/components/scroll/scroll.ts delete mode 100644 public/app/core/components/wizard/wizard.html delete mode 100644 public/app/core/components/wizard/wizard.ts create mode 100644 public/app/core/specs/PasswordStrength_specs.tsx delete mode 100644 public/sass/components/_collapse_box.scss diff --git a/package.json b/package.json index 2e4f174dec0..82fcce2b20d 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ }, "license": "Apache-2.0", "dependencies": { + "@types/enzyme": "^2.8.8", "ace-builds": "^1.2.8", "eventemitter3": "^2.0.2", "gaze": "^1.1.2", @@ -75,6 +76,7 @@ "ngreact": "^0.4.1", "react": "^15.6.1", "react-dom": "^15.6.1", + "react-test-renderer": "^15.6.1", "remarkable": "^1.7.1", "sinon": "1.17.6", "systemjs-builder": "^0.15.34", diff --git a/public/app/core/components/PasswordStrength.tsx b/public/app/core/components/PasswordStrength.tsx new file mode 100644 index 00000000000..c376042ce75 --- /dev/null +++ b/public/app/core/components/PasswordStrength.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import coreModule from '../core_module'; + +export interface IProps { + password: string; +} + +export class PasswordStrength extends React.Component { + + constructor(props) { + super(props); + } + + render() { + let strengthText = "strength: strong like a bull."; + let strengthClass = "password-strength-good"; + + if (this.props.password.length < 4) { + strengthText = "strength: weak sauce."; + strengthClass = "password-strength-bad"; + } + + if (this.props.password.length <= 8) { + strengthText = "strength: you can do better."; + strengthClass = "password-strength-ok"; + } + + return ( +
+ {strengthText} +
+ ); + } +} + +coreModule.directive('passwordStrength', function(reactDirective) { + return reactDirective(PasswordStrength, ['password']); +}); diff --git a/public/app/core/components/collapse_box.ts b/public/app/core/components/collapse_box.ts deleted file mode 100644 index 7fc234cb583..00000000000 --- a/public/app/core/components/collapse_box.ts +++ /dev/null @@ -1,58 +0,0 @@ -/// - -import coreModule from 'app/core/core_module'; - -const template = ` -
-
- - - - {{ctrl.title}} - -
-
-
-
-
-`; - -export class CollapseBoxCtrl { - isOpen: boolean; - stateChanged: () => void; - - /** @ngInject **/ - constructor(private $timeout) { - this.isOpen = false; - } - - toggle() { - this.isOpen = !this.isOpen; - this.$timeout(() => { - this.stateChanged(); - }); - } -} - -export function collapseBox() { - return { - restrict: 'E', - template: template, - controller: CollapseBoxCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: { - "title": "@", - "isOpen": "=?", - "stateChanged": "&" - }, - transclude: { - 'actions': '?collapseBoxActions', - 'body': 'collapseBoxBody', - }, - link: function(scope, elem, attrs) { - } - }; -} - -coreModule.directive('collapseBox', collapseBox); diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts deleted file mode 100644 index 914f3ba2dd9..00000000000 --- a/public/app/core/components/scroll/scroll.ts +++ /dev/null @@ -1,211 +0,0 @@ -// /// -// -// import _ from 'lodash'; -// -// var objectAssign = require('object-assign'); -// var Emitter = require('tiny-emitter'); -// var Lethargy = require('lethargy').Lethargy; -// var support = require('./support'); -// var clone = require('./clone'); -// var bindAll = require('bindall-standalone'); -// var EVT_ID = 'virtualscroll'; -// -// var keyCodes = { -// LEFT: 37, -// UP: 38, -// RIGHT: 39, -// DOWN: 40 -// }; -// -// function VirtualScroll(this: any, options) { -// _.bindAll(this, '_onWheel', '_onMouseWheel', '_onTouchStart', '_onTouchMove', '_onKeyDown'); -// -// this.el = window; -// if (options && options.el) { -// this.el = options.el; -// delete options.el; -// } -// -// this.options = _.assign({ -// mouseMultiplier: 1, -// touchMultiplier: 2, -// firefoxMultiplier: 15, -// keyStep: 120, -// preventTouch: false, -// unpreventTouchClass: 'vs-touchmove-allowed', -// limitInertia: false -// }, options); -// -// if (this.options.limitInertia) this._lethargy = new Lethargy(); -// -// this._emitter = new Emitter(); -// this._event = { -// y: 0, -// x: 0, -// deltaX: 0, -// deltaY: 0 -// }; -// -// this.touchStartX = null; -// this.touchStartY = null; -// this.bodyTouchAction = null; -// } -// -// VirtualScroll.prototype._notify = function(e) { -// var evt = this._event; -// evt.x += evt.deltaX; -// evt.y += evt.deltaY; -// -// this._emitter.emit(EVT_ID, { -// x: evt.x, -// y: evt.y, -// deltaX: evt.deltaX, -// deltaY: evt.deltaY, -// originalEvent: e -// }); -// }; -// -// VirtualScroll.prototype._onWheel = function(e) { -// var options = this.options; -// if (this._lethargy && this._lethargy.check(e) === false) return; -// -// var evt = this._event; -// -// // In Chrome and in Firefox (at least the new one) -// evt.deltaX = e.wheelDeltaX || e.deltaX * -1; -// evt.deltaY = e.wheelDeltaY || e.deltaY * -1; -// -// // for our purpose deltamode = 1 means user is on a wheel mouse, not touch pad -// // real meaning: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent#Delta_modes -// if(support.isFirefox && e.deltaMode == 1) { -// evt.deltaX *= options.firefoxMultiplier; -// evt.deltaY *= options.firefoxMultiplier; -// } -// -// evt.deltaX *= options.mouseMultiplier; -// evt.deltaY *= options.mouseMultiplier; -// -// this._notify(e); -// }; -// -// VirtualScroll.prototype._onMouseWheel = function(e) { -// if (this.options.limitInertia && this._lethargy.check(e) === false) return; -// -// var evt = this._event; -// -// // In Safari, IE and in Chrome if 'wheel' isn't defined -// evt.deltaX = (e.wheelDeltaX) ? e.wheelDeltaX : 0; -// evt.deltaY = (e.wheelDeltaY) ? e.wheelDeltaY : e.wheelDelta; -// -// this._notify(e); -// }; -// -// VirtualScroll.prototype._onTouchStart = function(e) { -// var t = (e.targetTouches) ? e.targetTouches[0] : e; -// this.touchStartX = t.pageX; -// this.touchStartY = t.pageY; -// }; -// -// VirtualScroll.prototype._onTouchMove = function(e) { -// var options = this.options; -// if(options.preventTouch -// && !e.target.classList.contains(options.unpreventTouchClass)) { -// e.preventDefault(); -// } -// -// var evt = this._event; -// -// var t = (e.targetTouches) ? e.targetTouches[0] : e; -// -// evt.deltaX = (t.pageX - this.touchStartX) * options.touchMultiplier; -// evt.deltaY = (t.pageY - this.touchStartY) * options.touchMultiplier; -// -// this.touchStartX = t.pageX; -// this.touchStartY = t.pageY; -// -// this._notify(e); -// }; -// -// VirtualScroll.prototype._onKeyDown = function(e) { -// var evt = this._event; -// evt.deltaX = evt.deltaY = 0; -// -// switch(e.keyCode) { -// case keyCodes.LEFT: -// case keyCodes.UP: -// evt.deltaY = this.options.keyStep; -// break; -// -// case keyCodes.RIGHT: -// case keyCodes.DOWN: -// evt.deltaY = - this.options.keyStep; -// break; -// -// default: -// return; -// } -// -// this._notify(e); -// }; -// -// VirtualScroll.prototype._bind = function() { -// if(support.hasWheelEvent) this.el.addEventListener('wheel', this._onWheel); -// if(support.hasMouseWheelEvent) this.el.addEventListener('mousewheel', this._onMouseWheel); -// -// if(support.hasTouch) { -// this.el.addEventListener('touchstart', this._onTouchStart); -// this.el.addEventListener('touchmove', this._onTouchMove); -// } -// -// if(support.hasPointer && support.hasTouchWin) { -// this.bodyTouchAction = document.body.style.msTouchAction; -// document.body.style.msTouchAction = 'none'; -// this.el.addEventListener('MSPointerDown', this._onTouchStart, true); -// this.el.addEventListener('MSPointerMove', this._onTouchMove, true); -// } -// -// if(support.hasKeyDown) document.addEventListener('keydown', this._onKeyDown); -// }; -// -// VirtualScroll.prototype._unbind = function() { -// if(support.hasWheelEvent) this.el.removeEventListener('wheel', this._onWheel); -// if(support.hasMouseWheelEvent) this.el.removeEventListener('mousewheel', this._onMouseWheel); -// -// if(support.hasTouch) { -// this.el.removeEventListener('touchstart', this._onTouchStart); -// this.el.removeEventListener('touchmove', this._onTouchMove); -// } -// -// if(support.hasPointer && support.hasTouchWin) { -// document.body.style.msTouchAction = this.bodyTouchAction; -// this.el.removeEventListener('MSPointerDown', this._onTouchStart, true); -// this.el.removeEventListener('MSPointerMove', this._onTouchMove, true); -// } -// -// if(support.hasKeyDown) document.removeEventListener('keydown', this._onKeyDown); -// }; -// -// VirtualScroll.prototype.on = function(cb, ctx) { -// this._emitter.on(EVT_ID, cb, ctx); -// -// var events = this._emitter.e; -// if (events && events[EVT_ID] && events[EVT_ID].length === 1) this._bind(); -// }; -// -// VirtualScroll.prototype.off = function(cb, ctx) { -// this._emitter.off(EVT_ID, cb, ctx); -// -// var events = this._emitter.e; -// if (!events[EVT_ID] || events[EVT_ID].length <= 0) this._unbind(); -// }; -// -// VirtualScroll.prototype.reset = function() { -// var evt = this._event; -// evt.x = 0; -// evt.y = 0; -// }; -// -// VirtualScroll.prototype.destroy = function() { -// this._emitter.off(); -// this._unbind(); -// }; diff --git a/public/app/core/components/wizard/wizard.html b/public/app/core/components/wizard/wizard.html deleted file mode 100644 index 9d3f680649a..00000000000 --- a/public/app/core/components/wizard/wizard.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-

- - {{model.name}} -

- - - - -
- -
-
- -
- - - - - - - - - - - - -
- -
- diff --git a/public/app/core/components/wizard/wizard.ts b/public/app/core/components/wizard/wizard.ts deleted file mode 100644 index 2ae38cf9e03..00000000000 --- a/public/app/core/components/wizard/wizard.ts +++ /dev/null @@ -1,73 +0,0 @@ -/// - -import config from 'app/core/config'; -import _ from 'lodash'; -import $ from 'jquery'; - -import coreModule from 'app/core/core_module'; -import appEvents from 'app/core/app_events'; - -export class WizardSrv { - /** @ngInject */ - constructor() { - } -} - -export interface WizardStep { - name: string; - type: string; - process: any; -} - -export class SelectOptionStep { - type: string; - name: string; - fulfill: any; - - constructor() { - this.type = 'select'; - } - - process() { - return new Promise((fulfill, reject) => { - - }); - } -} - -export class WizardFlow { - name: string; - steps: WizardStep[]; - - constructor(name) { - this.name = name; - this.steps = []; - } - - addStep(step) { - this.steps.push(step); - } - - next(index) { - var step = this.steps[0]; - - return step.process().then(() => { - if (this.steps.length === index+1) { - return; - } - - return this.next(index+1); - }); - } - - start() { - appEvents.emit('show-modal', { - src: 'public/app/core/components/wizard/wizard.html', - model: this - }); - - return this.next(0); - } -} - -coreModule.service('wizardSrv', WizardSrv); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 140c75fe863..d8be6c2a88d 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -35,7 +35,6 @@ import {layoutSelector} from './components/layout_selector/layout_selector'; import {switchDirective} from './components/switch'; import {dashboardSelector} from './components/dashboard_selector'; import {queryPartEditorDirective} from './components/query_part/query_part_editor'; -import {WizardFlow} from './components/wizard/wizard'; import {formDropdownDirective} from './components/form_dropdown/form_dropdown'; import 'app/core/controllers/all'; import 'app/core/services/all'; @@ -48,11 +47,9 @@ import {assignModelProperties} from './utils/model_utils'; import {contextSrv} from './services/context_srv'; import {KeybindingSrv} from './services/keybindingSrv'; import {helpModal} from './components/help/help'; -import {collapseBox} from './components/collapse_box'; +import {PasswordStrength} from './components/PasswordStrength'; import {JsonExplorer} from './components/json_explorer/json_explorer'; import {NavModelSrv, NavModel} from './nav_model_srv'; -import {CoolButton} from './components/CoolButton'; - export { arrayJoin, @@ -70,16 +67,14 @@ export { appEvents, dashboardSelector, queryPartEditorDirective, - WizardFlow, colors, formDropdownDirective, assignModelProperties, contextSrv, KeybindingSrv, helpModal, - collapseBox, JsonExplorer, NavModelSrv, NavModel, - CoolButton, + PasswordStrength, }; diff --git a/public/app/core/directives/password_strength.js b/public/app/core/directives/password_strength.js index fa3f8638ba1..089ff08c13b 100644 --- a/public/app/core/directives/password_strength.js +++ b/public/app/core/directives/password_strength.js @@ -4,7 +4,7 @@ define([ function (coreModule) { 'use strict'; - coreModule.default.directive('passwordStrength', function() { + coreModule.default.directive('passwordStrength2', function() { var template = '
' + '{{strengthText}}' + '
'; diff --git a/public/app/core/specs/PasswordStrength_specs.tsx b/public/app/core/specs/PasswordStrength_specs.tsx new file mode 100644 index 00000000000..0ba239b2637 --- /dev/null +++ b/public/app/core/specs/PasswordStrength_specs.tsx @@ -0,0 +1,14 @@ +// import React from 'react'; +// import {describe, beforeEach, it, sinon, expect} from 'test/lib/common'; +// import {shallow} from 'enzyme'; +// +// import {PasswordStrength} from '../components/PasswordStrength'; +// +// describe('PasswordStrength', () => { +// +// it.skip('should have class bad if length below 4', () => { +// const wrapper = shallow(); +// expect(wrapper.find(".password-strength-bad")).to.have.length(3); +// }); +// }); +// diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index fd978d8b704..f01ca47153b 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,10 +1,6 @@
- - - -

Add data source

diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html index afb6d0d4fc4..b0e6c6ad88a 100644 --- a/public/app/partials/signup_step2.html +++ b/public/app/partials/signup_step2.html @@ -55,7 +55,7 @@
-
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 77afde21e37..cbced4cbca1 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -76,7 +76,6 @@ @import "components/edit_sidemenu.scss"; @import "components/row.scss"; @import "components/json_explorer.scss"; -@import "components/collapse_box.scss"; @import "components/code_editor.scss"; // PAGES diff --git a/public/sass/components/_collapse_box.scss b/public/sass/components/_collapse_box.scss deleted file mode 100644 index 86658cfcfec..00000000000 --- a/public/sass/components/_collapse_box.scss +++ /dev/null @@ -1,46 +0,0 @@ -.collapse-box { - margin-bottom: $spacer; - - &--error { - .collapse-box__header { - border-color: $collapse-box-body-error-border; - } - .collapse-box__body { - border-color: $collapse-box-body-error-border; - } - } - -} - -.collapse-box__header { - display: flex; - flex-direction: row; - padding: $input-padding-y $input-padding-x; - margin-right: $gf-form-margin; - background-color: $input-label-bg; - font-size: $font-size-sm; - margin-right: $gf-form-margin; - border: $input-btn-border-width solid $collapse-box-body-border; - @include border-radius($label-border-radius-sm); -} - -.collapse-box__header-title { - flex-grow: 1; -} - -.collapse-box__body { - padding: $input-padding-y*2 $input-padding-x; - display: block; - margin-right: $gf-form-margin; - border: $input-btn-border-width solid $collapse-box-body-border; - border-top: none; - @include border-radius($label-border-radius-sm); -} - -.collapse-box__header-actions { - display: flex; - flex-direction: row; - a { - margin-left: $spacer; - } -} diff --git a/public/test/test-main.js b/public/test/test-main.js index 6df23f11106..ed20d19fd82 100644 --- a/public/test/test-main.js +++ b/public/test/test-main.js @@ -10,6 +10,9 @@ baseURL: '/base/', defaultJSExtensions: true, paths: { + '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', 'eventemitter3': 'vendor/npm/eventemitter3/index.js', 'remarkable': 'vendor/npm/remarkable/dist/remarkable.js', @@ -83,7 +86,7 @@ function file2moduleName(filePath) { return filePath.replace(/\\/g, '/') - .replace(/^\/base\//, '') + .replace(/^\/base\//, '') .replace(/\.\w*$/, ''); } @@ -112,12 +115,12 @@ // load specs return Promise.all( Object.keys(window.__karma__.files) // All files served by Karma. - .filter(onlySpecFiles) - .map(file2moduleName) - .map(function(path) { - // console.log(path); - return System.import(path); - })); + .filter(onlySpecFiles) + .map(file2moduleName) + .map(function(path) { + // console.log(path); + return System.import(path); + })); }).then(function() { window.__karma__.start(); }, function(error) { diff --git a/tasks/options/watch.js b/tasks/options/watch.js index 54ecbd6672e..c421ec3e01e 100644 --- a/tasks/options/watch.js +++ b/tasks/options/watch.js @@ -23,6 +23,7 @@ module.exports = function(config, grunt) { gaze([ config.srcDir + '/app/**/*', + config.srcDir + '/test/**/*', config.srcDir + '/sass/**/*', ], function(err, watcher) { diff --git a/yarn.lock b/yarn.lock index 7b6472e84e6..9b626f54ac5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,17 @@ # yarn lockfile v1 +"@types/cheerio@*": + version "0.22.2" + resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.2.tgz#539625874bc856086ad491c2fdc9b10c05ae308e" + +"@types/enzyme@^2.8.8": + version "2.8.8" + resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-2.8.8.tgz#ddef76ac5435bb6d96c129b2b541d72c0ce75a41" + dependencies: + "@types/cheerio" "*" + "@types/react" "*" + "@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" @@ -3736,6 +3747,13 @@ react-dom@^15.6.1: object-assign "^4.1.0" prop-types "^15.5.10" +react-test-renderer@^15.6.1: + version "15.6.1" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.1.tgz#026f4a5bb5552661fd2cc4bbcd0d4bc8a35ebf7e" + dependencies: + fbjs "^0.8.9" + object-assign "^4.1.0" + react@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"