Skip to content

Commit

Permalink
Remove action items from Instance peers list.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kialam @jbradberry
kialam authored and jbradberry committed Sep 23, 2022
1 parent 4a41098 commit 9c6aa93
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 207 deletions.
57 changes: 2 additions & 55 deletions awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,12 @@ import PaginatedTable, {
HeaderCell,
HeaderRow,
} from 'components/PaginatedTable';
import useRequest, { useDismissableError } from 'hooks/useRequest';
import { getQSConfig, parseQueryString } from 'util/qs';
import { useLocation, useParams } from 'react-router-dom';
import useRequest from 'hooks/useRequest';
import DataListToolbar from 'components/DataListToolbar';
import { InstancesAPI } from 'api';
import useExpanded from 'hooks/useExpanded';
import ErrorDetail from 'components/ErrorDetail';
import useSelected from 'hooks/useSelected';
import HealthCheckButton from 'components/HealthCheckButton';
import AlertModal from 'components/AlertModal';
import InstancePeerListItem from './InstancePeerListItem';

const QS_CONFIG = getQSConfig('peer', {
Expand Down Expand Up @@ -65,38 +61,14 @@ function InstancePeerList() {
fetchPeers();
}, [fetchPeers]);

const { selected, isAllSelected, handleSelect, clearSelected, selectAll } =
useSelected(peers.filter((i) => i.node_type !== 'hop'));

const {
error: healthCheckError,
request: fetchHealthCheck,
isLoading: isHealthCheckLoading,
} = useRequest(
useCallback(async () => {
await Promise.all(
selected
.filter(({ node_type }) => node_type !== 'hop')
.map(({ instanceId }) => InstancesAPI.healthCheck(instanceId))
);
fetchPeers();
}, [selected, fetchPeers])
);
const handleHealthCheck = async () => {
await fetchHealthCheck();
clearSelected();
};

const { error, dismissError } = useDismissableError(healthCheckError);

const { expanded, isAllExpanded, handleExpand, expandAll } =
useExpanded(peers);

return (
<CardBody>
<PaginatedTable
contentError={contentError}
hasContentLoading={isLoading || isHealthCheckLoading}
hasContentLoading={isLoading}
items={peers}
itemCount={count}
pluralizedItemName={t`Peers`}
Expand Down Expand Up @@ -124,51 +96,26 @@ function InstancePeerList() {
>{t`Name`}</HeaderCell>
<HeaderCell sortKey="errors">{t`Status`}</HeaderCell>
<HeaderCell sortKey="node_type">{t`Node Type`}</HeaderCell>
<HeaderCell>{t`Capacity Adjustment`}</HeaderCell>
<HeaderCell>{t`Used Capacity`}</HeaderCell>
<HeaderCell>{t`Actions`}</HeaderCell>
</HeaderRow>
}
renderToolbar={(props) => (
<DataListToolbar
{...props}
isAllSelected={isAllSelected}
onSelectAll={selectAll}
isAllExpanded={isAllExpanded}
onExpandAll={expandAll}
qsConfig={QS_CONFIG}
additionalControls={[
<HealthCheckButton
onClick={handleHealthCheck}
selectedItems={selected}
/>,
]}
/>
)}
renderRow={(peer, index) => (
<InstancePeerListItem
onSelect={() => handleSelect(peer)}
isSelected={selected.some((row) => row.id === peer.id)}
isExpanded={expanded.some((row) => row.id === peer.id)}
onExpand={() => handleExpand(peer)}
key={peer.id}
peerInstance={peer}
rowIndex={index}
fetchInstance={fetchPeers}
/>
)}
/>
{error && (
<AlertModal
isOpen={error}
onClose={dismissError}
title={t`Error!`}
variant="error"
>
{t`Failed to run a health check on one or more peers.`}
<ErrorDetail error={error} />
</AlertModal>
)}
</CardBody>
);
}
Expand Down
156 changes: 4 additions & 152 deletions awx/ui/src/screens/Instances/InstancePeers/InstancePeerListItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,20 @@
import React, { useState, useCallback } from 'react';
import React from 'react';
import { Link } from 'react-router-dom';
import { t, Plural } from '@lingui/macro';
import styled from 'styled-components';
import { t } from '@lingui/macro';
import 'styled-components/macro';
import {
Progress,
ProgressMeasureLocation,
ProgressSize,
Slider,
Tooltip,
} from '@patternfly/react-core';
import { Tooltip } from '@patternfly/react-core';
import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
import { formatDateString } from 'util/dates';
import computeForks from 'util/computeForks';
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
import InstanceToggle from 'components/InstanceToggle';
import StatusLabel from 'components/StatusLabel';
import useRequest, { useDismissableError } from 'hooks/useRequest';
import useDebounce from 'hooks/useDebounce';
import { InstancesAPI } from 'api';
import { useConfig } from 'contexts/Config';
import AlertModal from 'components/AlertModal';
import ErrorDetail from 'components/ErrorDetail';
import { Detail, DetailList } from 'components/DetailList';

const Unavailable = styled.span`
color: var(--pf-global--danger-color--200);
`;

const SliderHolder = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;

const SliderForks = styled.div`
flex-grow: 1;
margin-right: 8px;
margin-left: 8px;
text-align: center;
`;

function InstancePeerListItem({
peerInstance,
fetchInstances,
isSelected,
onSelect,
isExpanded,
onExpand,
rowIndex,
}) {
const { me = {} } = useConfig();
const [forks, setForks] = useState(
computeForks(
peerInstance.mem_capacity,
peerInstance.cpu_capacity,
peerInstance.capacity_adjustment
)
);
const labelId = `check-action-${peerInstance.id}`;

function usedCapacity(item) {
if (item.enabled) {
return (
<Progress
value={Math.round(100 - item.percent_capacity_remaining)}
measureLocation={ProgressMeasureLocation.top}
size={ProgressSize.sm}
title={t`Used capacity`}
/>
);
}
return <Unavailable>{t`Unavailable`}</Unavailable>;
}

const { error: updateInstanceError, request: updateInstance } = useRequest(
useCallback(
async (values) => {
await InstancesAPI.update(peerInstance.id, values);
},
[peerInstance]
)
);

const { error: updateError, dismissError: dismissUpdateError } =
useDismissableError(updateInstanceError);

const debounceUpdateInstance = useDebounce(updateInstance, 200);

const handleChangeValue = (value) => {
const roundedValue = Math.round(value * 100) / 100;
setForks(
computeForks(
peerInstance.mem_capacity,
peerInstance.cpu_capacity,
roundedValue
)
);
debounceUpdateInstance({ capacity_adjustment: roundedValue });
};
const isHopNode = peerInstance.node_type === 'hop';
return (
<>
Expand All @@ -117,15 +33,7 @@ function InstancePeerListItem({
}}
/>
)}
<Td
select={{
rowIndex,
isSelected,
onSelect,
disable: isHopNode,
}}
dataLabel={t`Selected`}
/>
<Td />
<Td id={labelId} dataLabel={t`Name`}>
<Link to={`/instances/${peerInstance.id}/details`}>
<b>{peerInstance.hostname}</b>
Expand All @@ -149,51 +57,6 @@ function InstancePeerListItem({
</Td>

<Td dataLabel={t`Node Type`}>{peerInstance.node_type}</Td>
{!isHopNode && (
<>
<Td dataLabel={t`Capacity Adjustment`}>
<SliderHolder data-cy="slider-holder">
<div data-cy="cpu-capacity">{t`CPU ${peerInstance.cpu_capacity}`}</div>
<SliderForks data-cy="slider-forks">
<div data-cy="number-forks">
<Plural value={forks} one="# fork" other="# forks" />
</div>
<Slider
areCustomStepsContinuous
max={1}
min={0}
step={0.1}
value={peerInstance.capacity_adjustment}
onChange={handleChangeValue}
isDisabled={!me?.is_superuser || !peerInstance?.enabled}
data-cy="slider"
/>
</SliderForks>
<div data-cy="mem-capacity">{t`RAM ${peerInstance.mem_capacity}`}</div>
</SliderHolder>
</Td>

<Td
dataLabel={t`Instance group used capacity`}
css="--pf-c-table--cell--MinWidth: 175px;"
>
{usedCapacity(peerInstance)}
</Td>

<ActionsTd
dataLabel={t`Actions`}
css="--pf-c-table--cell--Width: 125px"
>
<ActionItem visible>
<InstanceToggle
css="display: inline-flex;"
fetchInstances={fetchInstances}
instance={peerInstance}
/>
</ActionItem>
</ActionsTd>
</>
)}
</Tr>
{!isHopNode && (
<Tr
Expand Down Expand Up @@ -229,17 +92,6 @@ function InstancePeerListItem({
</Td>
</Tr>
)}
{updateError && (
<AlertModal
variant="error"
title={t`Error!`}
isOpen
onClose={dismissUpdateError}
>
{t`Failed to update capacity adjustment.`}
<ErrorDetail error={updateError} />
</AlertModal>
)}
</>
);
}
Expand Down

0 comments on commit 9c6aa93

Please sign in to comment.