github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-19 04:26:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): rewrite Grid with hooks

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-04-24 16:26:07 +01:00
committed by Łukasz Mierzwa
parent 834377a5b1
commit b864d035dc
1 changed files with 59 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
ui/src/Components/Grid/index.js
View File

@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React from "react";
import PropTypes from "prop-types";
import { observer } from "mobx-react";
@@ -13,74 +13,64 @@ import { UpgradeNeeded } from "./UpgradeNeeded";
import { ReloadNeeded } from "./ReloadNeeded";
import { EmptyGrid } from "./EmptyGrid";
const Grid = observer(
class Grid extends Component {
static propTypes = {
alertStore: PropTypes.instanceOf(AlertStore).isRequired,
settingsStore: PropTypes.instanceOf(Settings).isRequired,
silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
};
render() {
const { alertStore, settingsStore, silenceFormStore } = this.props;
if (alertStore.info.upgradeNeeded) {
return (
<UpgradeNeeded
newVersion={alertStore.info.version}
reloadAfter={3000}
/>
);
}
if (alertStore.info.reloadNeeded) {
return <ReloadNeeded reloadAfter={4000} />;
}
if (alertStore.status.error) {
return <FatalError message={alertStore.status.error} />;
}
if (
alertStore.data.upstreams.counters &&
alertStore.data.upstreams.counters.total === 1 &&
alertStore.data.upstreams.counters.healthy === 0 &&
alertStore.data.upstreams.instances[0] &&
alertStore.data.upstreams.instances[0].error !== ""
) {
return (
<FatalError message={alertStore.data.upstreams.instances[0].error} />
);
}
if (
alertStore.info.version !== "unknown" &&
alertStore.info.totalAlerts === 0
) {
return <EmptyGrid />;
}
return (
<React.Fragment>
{alertStore.data.upstreams.instances
.filter((upstream) => upstream.error !== "")
.map((upstream) => (
<UpstreamError
key={upstream.name}
name={upstream.name}
message={upstream.error}
/>
))}
<AlertGrid
alertStore={alertStore}
settingsStore={settingsStore}
silenceFormStore={silenceFormStore}
/>
</React.Fragment>
);
}
const Grid = observer(({ alertStore, settingsStore, silenceFormStore }) => {
if (alertStore.info.upgradeNeeded) {
return (
<UpgradeNeeded newVersion={alertStore.info.version} reloadAfter={3000} />
);
}
);
if (alertStore.info.reloadNeeded) {
return <ReloadNeeded reloadAfter={4000} />;
}
if (alertStore.status.error) {
return <FatalError message={alertStore.status.error} />;
}
if (
alertStore.data.upstreams.counters &&
alertStore.data.upstreams.counters.total === 1 &&
alertStore.data.upstreams.counters.healthy === 0 &&
alertStore.data.upstreams.instances[0] &&
alertStore.data.upstreams.instances[0].error !== ""
) {
return (
<FatalError message={alertStore.data.upstreams.instances[0].error} />
);
}
if (
alertStore.info.version !== "unknown" &&
alertStore.info.totalAlerts === 0
) {
return <EmptyGrid />;
}
return (
<React.Fragment>
{alertStore.data.upstreams.instances
.filter((upstream) => upstream.error !== "")
.map((upstream) => (
<UpstreamError
key={upstream.name}
name={upstream.name}
message={upstream.error}
/>
))}
<AlertGrid
alertStore={alertStore}
settingsStore={settingsStore}
silenceFormStore={silenceFormStore}
/>
</React.Fragment>
);
});
Grid.propTypes = {
alertStore: PropTypes.instanceOf(AlertStore).isRequired,
settingsStore: PropTypes.instanceOf(Settings).isRequired,
silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
};
export { Grid };