Skip to content

N
nexpie-grafana-theme
Commit 1ce3e49e by ryan
Options

fix lint problems

parent cae9c28f
Showing with 80 additions and 69 deletions
public/app/core/components/Login/LoginBackground.tsx
...@@ -4,14 +4,10 @@ const xCount = 50; ...@@ -4,14 +4,10 @@ const xCount = 50;
const yCount = 50; const yCount = 50;
function Cell({ x, y, flipIndex }) { function Cell({ x, y, flipIndex }) {
const index = y * xCount + x; const index = (y * xCount) + x;
const bgColor1 = getColor(x, y); const bgColor1 = getColor(x, y);
return ( return (
<div <div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`}
key={index}
style={{ background: bgColor1 }}
/>
); );
} }
...@@ -35,7 +31,7 @@ export default class LoginBackground extends Component<any, any> { ...@@ -35,7 +31,7 @@ export default class LoginBackground extends Component<any, any> {
} }
flipElements() { flipElements() {
const elementIndexToFlip = getRandomInt(0, xCount * yCount - 1); const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
this.setState(prevState => { this.setState(prevState => {
return { return {
...prevState, ...prevState,
...@@ -61,7 +57,9 @@ export default class LoginBackground extends Component<any, any> { ...@@ -61,7 +57,9 @@ export default class LoginBackground extends Component<any, any> {
return ( return (
<div className="login-bg__row"> <div className="login-bg__row">
{Array.from(Array(xCount)).map((el2, x) => { {Array.from(Array(xCount)).map((el2, x) => {
return <Cell y={y} x={x} flipIndex={this.state.flipIndex} />; return (
<Cell y={y} x={x} flipIndex={this.state.flipIndex} />
);
})} })}
</div> </div>
); );
...@@ -1238,5 +1236,5 @@ function getColor(x, y) { ...@@ -1238,5 +1236,5 @@ function getColor(x, y) {
// let randY = getRandomInt(0, y); // let randY = getRandomInt(0, y);
// let randIndex = randY * xCount + randX; // let randIndex = randY * xCount + randX;
return colors[(y * xCount + x) % colors.length]; return colors[(y*xCount + x) % colors.length];
} }
public/app/core/components/PasswordStrength.tsx
...@@ -5,27 +5,28 @@ export interface IProps { ...@@ -5,27 +5,28 @@ export interface IProps {
} }
export class PasswordStrength extends React.Component<IProps, any> { export class PasswordStrength extends React.Component<IProps, any> {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() { render() {
const { password } = this.props; const { password } = this.props;
let strengthText = 'strength: strong like a bull.'; let strengthText = "strength: strong like a bull.";
let strengthClass = 'password-strength-good'; let strengthClass = "password-strength-good";
if (!password) { if (!password) {
return null; return null;
} }
if (password.length <= 8) { if (password.length <= 8) {
strengthText = 'strength: you can do better.'; strengthText = "strength: you can do better.";
strengthClass = 'password-strength-ok'; strengthClass = "password-strength-ok";
} }
if (password.length < 4) { if (password.length < 4) {
strengthText = 'strength: weak sauce.'; strengthText = "strength: weak sauce.";
strengthClass = 'password-strength-bad'; strengthClass = "password-strength-bad";
} }
return ( return (
...@@ -35,3 +36,5 @@ export class PasswordStrength extends React.Component<IProps, any> { ...@@ -35,3 +36,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
); );
} }
} }
public/app/core/components/colorpicker/ColorPalette.tsx
...@@ -29,8 +29,7 @@ export class ColorPalette extends React.Component<IProps, any> { ...@@ -29,8 +29,7 @@ export class ColorPalette extends React.Component<IProps, any> {
key={paletteColor} key={paletteColor}
className={'pointer fa ' + cssClass} className={'pointer fa ' + cssClass}
style={{ color: paletteColor }} style={{ color: paletteColor }}
onClick={this.onColorSelect(paletteColor)} onClick={this.onColorSelect(paletteColor)}>
>
&nbsp; &nbsp;
</i> </i>
); );
...@@ -42,3 +41,4 @@ export class ColorPalette extends React.Component<IProps, any> { ...@@ -42,3 +41,4 @@ export class ColorPalette extends React.Component<IProps, any> {
); );
} }
} }
public/app/core/components/colorpicker/ColorPickerPopover.tsx
...@@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> { ...@@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
this.state = { this.state = {
tab: 'palette', tab: 'palette',
color: this.props.color || DEFAULT_COLOR, color: this.props.color || DEFAULT_COLOR,
colorString: this.props.color || DEFAULT_COLOR, colorString: this.props.color || DEFAULT_COLOR
}; };
} }
...@@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> { ...@@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
if (newColor.isValid()) { if (newColor.isValid()) {
this.setState({ this.setState({
color: newColor.toString(), color: newColor.toString(),
colorString: newColor.toString(), colorString: newColor.toString()
}); });
this.props.onColorSelect(color); this.props.onColorSelect(color);
} }
...@@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> { ...@@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
onColorStringChange(e) { onColorStringChange(e) {
let colorString = e.target.value; let colorString = e.target.value;
this.setState({ this.setState({
colorString: colorString, colorString: colorString
}); });
let newColor = tinycolor(colorString); let newColor = tinycolor(colorString);
...@@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component<IProps, any> { ...@@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
componentDidMount() { componentDidMount() {
this.pickerNavElem.find('li:first').addClass('active'); this.pickerNavElem.find('li:first').addClass('active');
this.pickerNavElem.on('show', e => { this.pickerNavElem.on('show', (e) => {
// use href attr (#name => name) // use href attr (#name => name)
let tab = e.target.hash.slice(1); let tab = e.target.hash.slice(1);
this.setState({ this.setState({
tab: tab, tab: tab
}); });
}); });
} }
...@@ -97,24 +97,19 @@ export class ColorPickerPopover extends React.Component<IProps, any> { ...@@ -97,24 +97,19 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
<div className="gf-color-picker"> <div className="gf-color-picker">
<ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}> <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
<li className="gf-tabs-item-colorpicker"> <li className="gf-tabs-item-colorpicker">
<a href="#palette" data-toggle="tab"> <a href="#palette" data-toggle="tab">Colors</a>
Colors
</a>
</li> </li>
<li className="gf-tabs-item-colorpicker"> <li className="gf-tabs-item-colorpicker">
<a href="#spectrum" data-toggle="tab"> <a href="#spectrum" data-toggle="tab">Custom</a>
Custom
</a>
</li> </li>
</ul> </ul>
<div className="gf-color-picker__body">{currentTab}</div> <div className="gf-color-picker__body">
{currentTab}
</div>
<div> <div>
<input <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
className="gf-form-input gf-form-input--small" onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
value={this.state.colorString} </input>
onChange={this.onColorStringChange.bind(this)}
onBlur={this.onColorStringBlur.bind(this)}
/>
</div> </div>
</div> </div>
); );
......
public/app/core/components/colorpicker/SpectrumPicker.tsx
...@@ -29,17 +29,14 @@ export class SpectrumPicker extends React.Component<IProps, any> { ...@@ -29,17 +29,14 @@ export class SpectrumPicker extends React.Component<IProps, any> {
} }
componentDidMount() { componentDidMount() {
let spectrumOptions = _.assignIn( let spectrumOptions = _.assignIn({
{
flat: true, flat: true,
showAlpha: true, showAlpha: true,
showButtons: false, showButtons: false,
color: this.props.color, color: this.props.color,
appendTo: this.elem, appendTo: this.elem,
move: this.onSpectrumMove, move: this.onSpectrumMove,
}, }, this.props.options);
this.props.options
);
this.elem.spectrum(spectrumOptions); this.elem.spectrum(spectrumOptions);
this.elem.spectrum('show'); this.elem.spectrum('show');
...@@ -67,6 +64,9 @@ export class SpectrumPicker extends React.Component<IProps, any> { ...@@ -67,6 +64,9 @@ export class SpectrumPicker extends React.Component<IProps, any> {
} }
render() { render() {
return <div className="spectrum-container" ref={this.setComponentElem} />; return (
<div className="spectrum-container" ref={this.setComponentElem}></div>
);
} }
} }
public/app/core/components/search/SearchResult.tsx
import React from 'react'; import React from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { observer } from 'mobx-react'; import { observer } from "mobx-react";
import { store } from 'app/stores/store'; import { store } from "app/stores/store";
export interface SearchResultProps { export interface SearchResultProps {
search: any; search: any;
...@@ -13,7 +13,7 @@ export class SearchResult extends React.Component<SearchResultProps, any> { ...@@ -13,7 +13,7 @@ export class SearchResult extends React.Component<SearchResultProps, any> {
super(props); super(props);
this.state = { this.state = {
search: store.search, search: store.search
}; };
store.search.query(); store.search.query();
...@@ -56,20 +56,29 @@ export class SearchResultSection extends React.Component<SectionProps, any> { ...@@ -56,20 +56,29 @@ export class SearchResultSection extends React.Component<SectionProps, any> {
render() { render() {
let collapseClassNames = classNames({ let collapseClassNames = classNames({
fa: true, fa: true,
'fa-plus': !this.props.section.expanded, "fa-plus": !this.props.section.expanded,
'fa-minus': this.props.section.expanded, "fa-minus": this.props.section.expanded,
'search-section__header__toggle': true, "search-section__header__toggle": true
}); });
return ( return (
<div className="search-section" key={this.props.section.id}> <div className="search-section" key={this.props.section.id}>
<div className="search-section__header"> <div className="search-section__header">
<i className={classNames('search-section__header__icon', this.props.section.icon)} /> <i
<span className="search-section__header__text">{this.props.section.title}</span> className={classNames(
"search-section__header__icon",
this.props.section.icon
)}
/>
<span className="search-section__header__text">
{this.props.section.title}
</span>
<i className={collapseClassNames} onClick={this.toggleSection} /> <i className={collapseClassNames} onClick={this.toggleSection} />
</div> </div>
{this.props.section.expanded && ( {this.props.section.expanded && (
<div className="search-section__items">{this.props.section.items.map(this.renderItem)}</div> <div className="search-section__items">
{this.props.section.items.map(this.renderItem)}
</div>
)} )}
</div> </div>
); );
......
public/app/core/specs/PasswordStrength.jest.tsx
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import {shallow} from 'enzyme';
import { PasswordStrength } from '../components/PasswordStrength'; import {PasswordStrength} from '../components/PasswordStrength';
describe('PasswordStrength', () => { describe('PasswordStrength', () => {
it('should have class bad if length below 4', () => { it('should have class bad if length below 4', () => {
const wrapper = shallow(<PasswordStrength password="asd" />); const wrapper = shallow(<PasswordStrength password="asd" />);
expect(wrapper.find('.password-strength-bad')).toHaveLength(1); expect(wrapper.find(".password-strength-bad")).toHaveLength(1);
}); });
it('should have class ok if length below 8', () => { it('should have class ok if length below 8', () => {
const wrapper = shallow(<PasswordStrength password="asdasd" />); const wrapper = shallow(<PasswordStrength password="asdasd" />);
expect(wrapper.find('.password-strength-ok')).toHaveLength(1); expect(wrapper.find(".password-strength-ok")).toHaveLength(1);
}); });
it('should have class good if length above 8', () => { it('should have class good if length above 8', () => {
const wrapper = shallow(<PasswordStrength password="asdaasdda" />); const wrapper = shallow(<PasswordStrength password="asdaasdda" />);
expect(wrapper.find('.password-strength-good')).toHaveLength(1); expect(wrapper.find(".password-strength-good")).toHaveLength(1);
}); });
}); });
public/app/core/utils/kbn.ts
...@@ -133,12 +133,12 @@ kbn.secondsToHms = function(seconds) { ...@@ -133,12 +133,12 @@ kbn.secondsToHms = function(seconds) {
kbn.secondsToHhmmss = function(seconds) { kbn.secondsToHhmmss = function(seconds) {
var strings = []; var strings = [];
var numhours = Math.floor(seconds / 3600); var numhours = Math.floor(seconds/3600);
var numminutes = Math.floor((seconds % 3600) / 60); var numminutes = Math.floor((seconds%3600)/60);
var numseconds = Math.floor((seconds % 3600) % 60); var numseconds = Math.floor((seconds%3600)%60);
numhours > 9 ? strings.push('' + numhours) : strings.push('0' + numhours); numhours > 9 ? strings.push(''+numhours) : strings.push('0'+numhours);
numminutes > 9 ? strings.push('' + numminutes) : strings.push('0' + numminutes); numminutes > 9 ? strings.push(''+numminutes) : strings.push('0'+numminutes);
numseconds > 9 ? strings.push('' + numseconds) : strings.push('0' + numseconds); numseconds > 9 ? strings.push(''+numseconds) : strings.push('0'+numseconds);
return strings.join(':'); return strings.join(':');
}; };
......
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
import React from 'react'; import React from 'react';
import { PanelModel } from '../panel_model'; import {PanelModel} from '../panel_model';
import { PanelContainer } from './PanelContainer'; import {PanelContainer} from './PanelContainer';
import { AttachedPanel } from './PanelLoader'; import {AttachedPanel} from './PanelLoader';
import { DashboardRow } from './DashboardRow'; import {DashboardRow} from './DashboardRow';
import { AddPanelPanel } from './AddPanelPanel'; import {AddPanelPanel} from './AddPanelPanel';
export interface DashboardPanelProps { export interface DashboardPanelProps {
panel: PanelModel; panel: PanelModel;
...@@ -46,6 +46,9 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> { ...@@ -46,6 +46,9 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
return <AddPanelPanel panel={this.props.panel} getPanelContainer={this.props.getPanelContainer} />; return <AddPanelPanel panel={this.props.panel} getPanelContainer={this.props.getPanelContainer} />;
} }
return <div ref={element => (this.element = element)} className="panel-height-helper" />; return (
<div ref={element => this.element = element} className="panel-height-helper" />
);
} }
} }
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