Skip to content

N
nexpie-grafana-theme
Commit ab62a09f by Johannes Schill
Options

chore: Fix typings and add Page-component to ServerStats #14762

parent d54c4173
Showing with 242 additions and 101 deletions
public/app/features/admin/ServerStats.tsx
...@@ -4,7 +4,7 @@ import { connect } from 'react-redux'; ...@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { NavModel, StoreState } from 'app/types'; import { NavModel, StoreState } from 'app/types';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { getServerStats, ServerStat } from './state/apis'; import { getServerStats, ServerStat } from './state/apis';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
interface Props { interface Props {
navModel: NavModel; navModel: NavModel;
...@@ -13,21 +13,24 @@ interface Props { ...@@ -13,21 +13,24 @@ interface Props {
interface State { interface State {
stats: ServerStat[]; stats: ServerStat[];
isLoading: boolean;
} }
export class ServerStats extends PureComponent<Props, State> { export class ServerStats extends PureComponent<Props, State> {
constructor(props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
stats: [], stats: [],
isLoading: false
}; };
} }
async componentDidMount() { async componentDidMount() {
try { try {
this.setState({ isLoading: true });
const stats = await this.props.getServerStats(); const stats = await this.props.getServerStats();
this.setState({ stats }); this.setState({ stats, isLoading: false });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
...@@ -35,12 +38,11 @@ export class ServerStats extends PureComponent<Props, State> { ...@@ -35,12 +38,11 @@ export class ServerStats extends PureComponent<Props, State> {
render() { render() {
const { navModel } = this.props; const { navModel } = this.props;
const { stats } = this.state; const { stats, isLoading } = this.state;
return ( return (
<div> <Page navModel={navModel}>
<PageHeader model={navModel} /> <Page.Contents isLoading={isLoading}>
<div className="page-container page-body">
<table className="filter-table form-inline"> <table className="filter-table form-inline">
<thead> <thead>
<tr> <tr>
...@@ -50,8 +52,8 @@ export class ServerStats extends PureComponent<Props, State> { ...@@ -50,8 +52,8 @@ export class ServerStats extends PureComponent<Props, State> {
</thead> </thead>
<tbody>{stats.map(StatItem)}</tbody> <tbody>{stats.map(StatItem)}</tbody>
</table> </table>
</div> </Page.Contents>
</div> </Page>
); );
} }
} }
......
public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ServerStats Should render table with stats 1`] = ` exports[`ServerStats Should render table with stats 1`] = `
<div> <div
className="page-scrollbar-wrapper"
>
<div <div
className="page-header-canvas" className="custom-scrollbars"
style={
Object {
"height": "auto",
"maxHeight": "100%",
"minHeight": "100%",
"overflow": "hidden",
"position": "relative",
"width": "100%",
}
}
> >
<div <div
className="page-container" className="view"
style={
Object {
"WebkitOverflowScrolling": "touch",
"bottom": undefined,
"left": undefined,
"marginBottom": 0,
"marginRight": 0,
"maxHeight": "calc(100% + 0px)",
"minHeight": "calc(100% + 0px)",
"overflow": "scroll",
"position": "relative",
"right": undefined,
"top": undefined,
}
}
> >
<div <div
className="page-header" className="page-scrollbar-content"
> >
<div <div
className="page-header__inner" className="page-header-canvas"
> >
<span
className="page-header__logo"
>
<i
className="page-header__icon fa fa-fw fa-warning"
/>
</span>
<div <div
className="page-header__info-block" className="page-container"
> >
<h1
className="page-header__title"
>
Admin
</h1>
<div <div
className="page-header__sub-title" className="page-header"
> >
subTitle <div
className="page-header__inner"
>
<span
className="page-header__logo"
>
<i
className="page-header__icon fa fa-fw fa-warning"
/>
</span>
<div
className="page-header__info-block"
>
<h1
className="page-header__title"
>
Admin
</h1>
<div
className="page-header__sub-title"
>
subTitle
</div>
</div>
</div>
<nav>
<div
className="gf-form-select-wrapper width-20 page-header__select-nav"
>
<label
className="gf-form-select-icon icon"
htmlFor="page-header-select-nav"
/>
<select
className="gf-select-nav gf-form-input"
id="page-header-select-nav"
onChange={[Function]}
value="Admin"
>
<option
value="Admin"
>
Admin
</option>
</select>
</div>
<ul
className="gf-tabs page-header__tabs"
>
<li
className="gf-tabs-item"
>
<a
className="gf-tabs-link active"
href="Admin"
>
<i
className="icon"
/>
Admin
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div> </div>
<nav> <div
className="page-container page-body"
>
<table
className="filter-table form-inline"
>
<thead>
<tr>
<th>
Name
</th>
<th>
Value
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Total dashboards
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Total Users
</td>
<td>
1
</td>
</tr>
</tbody>
</table>
</div>
<footer
className="footer"
>
<div <div
className="gf-form-select-wrapper width-20 page-header__select-nav" className="text-center"
> >
<label <ul>
className="gf-form-select-icon icon" <li>
htmlFor="page-header-select-nav" <a
/> href="http://docs.grafana.org"
<select target="_blank"
className="gf-select-nav gf-form-input" >
id="page-header-select-nav" <i
onChange={[Function]} className="fa fa-file-code-o"
value="Admin" />
> Docs
<option </a>
value="Admin" </li>
> <li>
Admin <a
</option> href="https://grafana.com/services/support"
</select> target="_blank"
>
<i
className="fa fa-support"
/>
Support Plans
</a>
</li>
<li>
<a
href="https://community.grafana.com/"
target="_blank"
>
<i
className="fa fa-comments-o"
/>
Community
</a>
</li>
<li>
<a
href="https://grafana.com"
target="_blank"
>
Grafana
</a>
<span>
v
v1.0
(commit:
1
)
</span>
</li>
</ul>
</div> </div>
<ul </footer>
className="gf-tabs page-header__tabs"
>
<li
className="gf-tabs-item"
>
<a
className="gf-tabs-link active"
href="Admin"
>
<i
className="icon"
/>
Admin
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div> <div
<div className="track-horizontal"
className="page-container page-body" style={
> Object {
<table "display": "none",
className="filter-table form-inline" "height": 6,
"position": "absolute",
}
}
> >
<thead> <div
<tr> className="thumb-horizontal"
<th> style={
Name Object {
</th> "display": "block",
<th> "height": "100%",
Value "position": "relative",
</th> }
</tr> }
</thead> />
<tbody> </div>
<tr> <div
<td> className="track-vertical"
Total dashboards style={
</td> Object {
<td> "display": "none",
10 "position": "absolute",
</td> "width": 6,
</tr> }
<tr> }
<td> >
Total Users <div
</td> className="thumb-vertical"
<td> style={
1 Object {
</td> "display": "block",
</tr> "position": "relative",
</tbody> "width": "100%",
</table> }
}
/>
</div>
</div> </div>
</div> </div>
`; `;
public/app/features/alerting/AlertRuleList.tsx
...@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'; ...@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Page from 'app/core/components/Page/Page'; import Page from 'app/core/components/Page/Page';
// import PageHeader from 'app/core/components/PageHeader/PageHeader';
import AlertRuleItem from './AlertRuleItem'; import AlertRuleItem from './AlertRuleItem';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
......
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