Skip to content

N
nexpie-grafana-theme
Commit fed35909 by Torkel Ödegaard
Options

tech: progress on react poc

parent 84b15194
Showing with 81 additions and 434 deletions
package.json
...@@ -62,6 +62,7 @@ ...@@ -62,6 +62,7 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@types/enzyme": "^2.8.8",
"ace-builds": "^1.2.8", "ace-builds": "^1.2.8",
"eventemitter3": "^2.0.2", "eventemitter3": "^2.0.2",
"gaze": "^1.1.2", "gaze": "^1.1.2",
...@@ -75,6 +76,7 @@ ...@@ -75,6 +76,7 @@
"ngreact": "^0.4.1", "ngreact": "^0.4.1",
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1", "react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"remarkable": "^1.7.1", "remarkable": "^1.7.1",
"sinon": "1.17.6", "sinon": "1.17.6",
"systemjs-builder": "^0.15.34", "systemjs-builder": "^0.15.34",
......
public/app/core/components/PasswordStrength.tsx 0 → 100644
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<IProps, any> {
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 (
<div className={`password-strength small ${strengthClass}`}>
<em>{strengthText}</em>
</div>
);
}
}
coreModule.directive('passwordStrength', function(reactDirective) {
return reactDirective(PasswordStrength, ['password']);
});
public/app/core/components/collapse_box.ts deleted 100644 → 0
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
const template = `
<div class="collapse-box">
<div class="collapse-box__header">
<a class="collapse-box__header-title pointer" ng-click="ctrl.toggle()">
<span class="fa fa-fw fa-caret-right" ng-hide="ctrl.isOpen"></span>
<span class="fa fa-fw fa-caret-down" ng-hide="!ctrl.isOpen"></span>
{{ctrl.title}}
</a>
<div class="collapse-box__header-actions" ng-transclude="actions" ng-if="ctrl.isOpen"></div>
</div>
<div class="collapse-box__body" ng-transclude="body" ng-if="ctrl.isOpen">
</div>
</div>
`;
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);
public/app/core/components/scroll/scroll.ts deleted 100644 → 0
// ///<reference path="../../headers/common.d.ts" />
//
// 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();
// };
public/app/core/components/wizard/wizard.html deleted 100644 → 0
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-cog fa-spin"></i>
<span class="p-l-1">{{model.name}}</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content">
<div ng-if="activeStep">
</div>
<!-- <table class="filter&#45;table"> -->
<!-- <tbody> -->
<!-- <tr ng&#45;repeat="step in model.steps"> -->
<!-- <td>{{step.name}}</td> -->
<!-- <td>{{step.status}}</td> -->
<!-- <td width="1%"> -->
<!-- <i class="fa fa&#45;check" style="color: #39A039"></i> -->
<!-- </td> -->
<!-- </tr> -->
<!-- </tbody> -->
<!-- </table> -->
</div>
</div>
public/app/core/components/wizard/wizard.ts deleted 100644 → 0
///<reference path="../../../headers/common.d.ts" />
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);
public/app/core/core.ts
...@@ -35,7 +35,6 @@ import {layoutSelector} from './components/layout_selector/layout_selector'; ...@@ -35,7 +35,6 @@ import {layoutSelector} from './components/layout_selector/layout_selector';
import {switchDirective} from './components/switch'; import {switchDirective} from './components/switch';
import {dashboardSelector} from './components/dashboard_selector'; import {dashboardSelector} from './components/dashboard_selector';
import {queryPartEditorDirective} from './components/query_part/query_part_editor'; import {queryPartEditorDirective} from './components/query_part/query_part_editor';
import {WizardFlow} from './components/wizard/wizard';
import {formDropdownDirective} from './components/form_dropdown/form_dropdown'; import {formDropdownDirective} from './components/form_dropdown/form_dropdown';
import 'app/core/controllers/all'; import 'app/core/controllers/all';
import 'app/core/services/all'; import 'app/core/services/all';
...@@ -48,11 +47,9 @@ import {assignModelProperties} from './utils/model_utils'; ...@@ -48,11 +47,9 @@ import {assignModelProperties} from './utils/model_utils';
import {contextSrv} from './services/context_srv'; import {contextSrv} from './services/context_srv';
import {KeybindingSrv} from './services/keybindingSrv'; import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help'; 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 {JsonExplorer} from './components/json_explorer/json_explorer';
import {NavModelSrv, NavModel} from './nav_model_srv'; import {NavModelSrv, NavModel} from './nav_model_srv';
import {CoolButton} from './components/CoolButton';
export { export {
arrayJoin, arrayJoin,
...@@ -70,16 +67,14 @@ export { ...@@ -70,16 +67,14 @@ export {
appEvents, appEvents,
dashboardSelector, dashboardSelector,
queryPartEditorDirective, queryPartEditorDirective,
WizardFlow,
colors, colors,
formDropdownDirective, formDropdownDirective,
assignModelProperties, assignModelProperties,
contextSrv, contextSrv,
KeybindingSrv, KeybindingSrv,
helpModal, helpModal,
collapseBox,
JsonExplorer, JsonExplorer,
NavModelSrv, NavModelSrv,
NavModel, NavModel,
CoolButton, PasswordStrength,
}; };
public/app/core/directives/password_strength.js
...@@ -4,7 +4,7 @@ define([ ...@@ -4,7 +4,7 @@ define([
function (coreModule) { function (coreModule) {
'use strict'; 'use strict';
coreModule.default.directive('passwordStrength', function() { coreModule.default.directive('passwordStrength2', function() {
var template = '<div class="password-strength small" ng-if="!loginMode" ng-class="strengthClass">' + var template = '<div class="password-strength small" ng-if="!loginMode" ng-class="strengthClass">' +
'<em>{{strengthText}}</em>' + '<em>{{strengthText}}</em>' +
'</div>'; '</div>';
......
public/app/core/specs/PasswordStrength_specs.tsx 0 → 100644
// 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(<PasswordStrength password="asd" />);
// expect(wrapper.find(".password-strength-bad")).to.have.length(3);
// });
// });
//
public/app/features/plugins/partials/ds_edit.html
<navbar model="ctrl.navModel"></navbar> <navbar model="ctrl.navModel"></navbar>
<div class="page-container"> <div class="page-container">
<cool-button>
</cool-button>
<second-button fname="ctrl.current.name"></second-button>
<div class="page-header"> <div class="page-header">
<h1 ng-show="ctrl.isNew">Add data source</h1> <h1 ng-show="ctrl.isNew">Add data source</h1>
......
public/app/partials/signup_step2.html
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off"> <input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
</div> </div>
<div style="margin-left: 7.5rem; width: 254px;"> <div style="margin-left: 9rem; width: 194px;">
<password-strength password="formModel.password"></password-strength> <password-strength password="formModel.password"></password-strength>
</div> </div>
......
public/sass/_grafana.scss
...@@ -76,7 +76,6 @@ ...@@ -76,7 +76,6 @@
@import "components/edit_sidemenu.scss"; @import "components/edit_sidemenu.scss";
@import "components/row.scss"; @import "components/row.scss";
@import "components/json_explorer.scss"; @import "components/json_explorer.scss";
@import "components/collapse_box.scss";
@import "components/code_editor.scss"; @import "components/code_editor.scss";
// PAGES // PAGES
......
public/sass/components/_collapse_box.scss deleted 100644 → 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;
}
}
public/test/test-main.js
...@@ -10,6 +10,9 @@ ...@@ -10,6 +10,9 @@
baseURL: '/base/', baseURL: '/base/',
defaultJSExtensions: true, defaultJSExtensions: true,
paths: { 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', 'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
'eventemitter3': 'vendor/npm/eventemitter3/index.js', 'eventemitter3': 'vendor/npm/eventemitter3/index.js',
'remarkable': 'vendor/npm/remarkable/dist/remarkable.js', 'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
......
tasks/options/watch.js
...@@ -23,6 +23,7 @@ module.exports = function(config, grunt) { ...@@ -23,6 +23,7 @@ module.exports = function(config, grunt) {
gaze([ gaze([
config.srcDir + '/app/**/*', config.srcDir + '/app/**/*',
config.srcDir + '/test/**/*',
config.srcDir + '/sass/**/*', config.srcDir + '/sass/**/*',
], function(err, watcher) { ], function(err, watcher) {
......
yarn.lock
...@@ -2,6 +2,17 @@ ...@@ -2,6 +2,17 @@
# yarn lockfile v1 # 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": "@types/react-dom@^15.5.4":
version "15.5.4" version "15.5.4"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f"
...@@ -3736,6 +3747,13 @@ react-dom@^15.6.1: ...@@ -3736,6 +3747,13 @@ react-dom@^15.6.1:
object-assign "^4.1.0" object-assign "^4.1.0"
prop-types "^15.5.10" 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: react@^15.6.1:
version "15.6.1" version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df" resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
......
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