mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(ui-toolkit, cp-frontend): Disable quick actions menu remove services filter add service
This commit is contained in:
parent
173b6c9307
commit
7f9eada428
@ -47,6 +47,8 @@ const ServicesQuickActions = ({
|
||||
onDeleteClick(evt, service);
|
||||
};
|
||||
|
||||
const disabled = service.transitionalStatus;
|
||||
|
||||
const status = service.instances.reduce((status, instance) => {
|
||||
return status
|
||||
? instance.status === status ? status : 'MIXED'
|
||||
@ -55,20 +57,20 @@ const ServicesQuickActions = ({
|
||||
|
||||
const startService = status === 'RUNNING'
|
||||
? null
|
||||
: <TooltipButton onClick={handleStartClick}>Start</TooltipButton>;
|
||||
: <TooltipButton onClick={handleStartClick} disabled={disabled}>Start</TooltipButton>;
|
||||
|
||||
const stopService = status === 'STOPPED'
|
||||
? null
|
||||
: <TooltipButton onClick={handleStopClick}>Stop</TooltipButton>;
|
||||
: <TooltipButton onClick={handleStopClick} disabled={disabled}>Stop</TooltipButton>;
|
||||
|
||||
return (
|
||||
<Tooltip {...p} onBlur={onBlur}>
|
||||
<TooltipButton onClick={handleScaleClick}>Scale</TooltipButton>
|
||||
<TooltipButton onClick={handleRestartClick}>Restart</TooltipButton>
|
||||
<TooltipButton onClick={handleScaleClick} disabled={disabled}>Scale</TooltipButton>
|
||||
<TooltipButton onClick={handleRestartClick} disabled={disabled}>Restart</TooltipButton>
|
||||
{startService}
|
||||
{stopService}
|
||||
<TooltipDivider />
|
||||
<TooltipButton onClick={handleDeleteClick}>Delete</TooltipButton>
|
||||
<TooltipButton onClick={handleDeleteClick} disabled={disabled}>Delete</TooltipButton>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
@ -1,13 +1,11 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
// Import { connect } from 'react-redux';
|
||||
import { Col, Row } from 'react-styled-flexboxgrid';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import unitcalc from 'unitcalc';
|
||||
|
||||
import { LayoutContainer } from '@components/layout';
|
||||
// Import { EmptyServices } from '@components/services';
|
||||
|
||||
import {
|
||||
Button,
|
||||
H2,
|
||||
@ -18,8 +16,6 @@ import {
|
||||
Legend
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
// Import { servicesForTopologySelector } from '@state/selectors';
|
||||
|
||||
const StyledLegend = Legend.extend`
|
||||
float: left;
|
||||
padding-top: ${unitcalc(2)};
|
||||
@ -36,10 +32,6 @@ const StyledForm = FormGroup.extend`
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
// Const StyledButton = styled(Button)`
|
||||
// margin-left: ${remcalc(48)};
|
||||
// `;
|
||||
|
||||
const StyledFilter = styled(Input)`
|
||||
margin: 0;
|
||||
`;
|
||||
@ -47,11 +39,6 @@ const StyledFilter = styled(Input)`
|
||||
const handleAddService = () => console.log('Adding a service...');
|
||||
|
||||
const ServicesMenu = ({ location, history: { push } }) => {
|
||||
/* If(!services || !services.length) {
|
||||
return (
|
||||
<EmptyServices />
|
||||
);
|
||||
} */
|
||||
|
||||
const toggleValue = location.pathname.split('-').pop();
|
||||
|
||||
@ -77,16 +64,6 @@ const ServicesMenu = ({ location, history: { push } }) => {
|
||||
</ToggleList>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={5}>
|
||||
<StyledForm name="topology-filter">
|
||||
<StyledFilter placeholder="Filter" />
|
||||
</StyledForm>
|
||||
</Col>
|
||||
<Col xs={2}>
|
||||
<Button secondary onClick={handleAddService}>
|
||||
Add a service
|
||||
</Button>
|
||||
</Col>
|
||||
</PaddedRow>
|
||||
</LayoutContainer>
|
||||
);
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import unitcalc from 'unitcalc';
|
||||
import is from 'styled-is';
|
||||
import theme from '../theme';
|
||||
import Button from '../button';
|
||||
|
||||
@ -32,6 +33,15 @@ const StyledButton = styled(Button)`
|
||||
color: ${theme.primary};
|
||||
border: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
`}
|
||||
`;
|
||||
|
||||
const TooltipButton = props =>
|
||||
|
Loading…
Reference in New Issue
Block a user