github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): drop useLocalStore from LabelSetList

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-06-05 15:25:23 +01:00
committed by Łukasz Mierzwa
parent 291de7c62f
commit 31ebb3ae34
1 changed files with 34 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
ui/src/Components/LabelSetList/index.js
View File

@@ -1,8 +1,6 @@
import React from "react";
import React, { useState } from "react";
import PropTypes from "prop-types";
import { useLocalStore, useObserver } from "mobx-react";
import { AlertStore } from "Stores/AlertStore";
import { IsMobile } from "Common/Device";
import { hashObject } from "Common/Hash";
@@ -29,54 +27,44 @@ const GroupListToUniqueLabelsList = (groups) => {
};
const LabelSetList = ({ alertStore, labelsList }) => {
const pagination = useLocalStore(() => ({
activePage: 1,
onPageChange(pageNumber) {
pagination.activePage = pageNumber;
},
}));
const [activePage, setActivePage] = useState(1);
const maxPerPage = IsMobile() ? 5 : 10;
return useObserver(() =>
labelsList.length > 0 ? (
return labelsList.length > 0 ? (
<div>
<p className="lead text-center">Affected alerts</p>
<div>
<p className="lead text-center">Affected alerts</p>
<div>
<ul className="list-group list-group-flush mb-3">
{labelsList
.slice(
(pagination.activePage - 1) * maxPerPage,
pagination.activePage * maxPerPage
)
.map((labels, index) => (
<li
key={`${index}/${labels.length}`}
className="list-group-item px-0 pt-2 pb-1"
>
{Object.entries(labels).map(([name, value]) => (
<StaticLabel
key={name}
alertStore={alertStore}
name={name}
value={value}
/>
))}
</li>
))}
</ul>
</div>
<PageSelect
totalPages={Math.ceil(labelsList.length / maxPerPage)}
activePage={pagination.activePage}
maxPerPage={maxPerPage}
totalItemsCount={labelsList.length}
setPageCallback={pagination.onPageChange}
/>
<ul className="list-group list-group-flush mb-3">
{labelsList
.slice((activePage - 1) * maxPerPage, activePage * maxPerPage)
.map((labels, index) => (
<li
key={`${index}/${labels.length}`}
className="list-group-item px-0 pt-2 pb-1"
>
{Object.entries(labels).map(([name, value]) => (
<StaticLabel
key={name}
alertStore={alertStore}
name={name}
value={value}
/>
))}
</li>
))}
</ul>
</div>
) : (
<p className="text-muted text-center">No alerts matched</p>
)
<PageSelect
totalPages={Math.ceil(labelsList.length / maxPerPage)}
activePage={activePage}
maxPerPage={maxPerPage}
totalItemsCount={labelsList.length}
setPageCallback={setActivePage}
/>
</div>
) : (
<p className="text-muted text-center">No alerts matched</p>
);
};
LabelSetList.propTypes = {