feat(cp-frontend): Move portal query to header, display result, return user from mock server

This commit is contained in:
JUDIT GRESKOVITS 2017-05-25 17:32:19 +01:00
parent d2ac10ae28
commit 5ffa07aeee
10 changed files with 271 additions and 192 deletions

View File

@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Img } from 'normalized-styled-components';
@ -7,6 +8,7 @@ import unitcalc from 'unitcalc';
import Logo from '@assets/triton_logo.png';
import { Col, Row } from 'react-styled-flexboxgrid';
import { P } from 'joyent-ui-toolkit';
const StyledHeader = styled.div`
background-color: ${props => props.theme.primaryDarkBrand};
@ -18,14 +20,33 @@ const StyledLogo = styled(Img)`
height: ${remcalc(25)};
`;
export default () => (
const StyledP = styled(P)`
color: ${props => props.theme.white};
font-weight: 600;
margin: ${unitcalc(0.5)} 0 0 0;
`;
const Header = ({ datacenter, username }) => (
<StyledHeader>
<Row>
<Col lg={12} xs={12}>
<Col xs={6} sm={8} md={10}>
<Link to="/">
<StyledLogo src={Logo} />
</Link>
</Col>
<Col xs={3} sm={2} md={1}>
<StyledP>{datacenter}</StyledP>
</Col>
<Col xs={3} sm={2} md={1}>
<StyledP>{username}</StyledP>
</Col>
</Row>
</StyledHeader>
);
Header.propTypes = {
datacenter: PropTypes.string,
username: PropTypes.string
};
export default Header;

View File

@ -1,7 +1,6 @@
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
// Import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import PortalQuery from '@graphql/Portal.gql';
import InstancesQuery from '@graphql/Instances.gql';
import { LayoutContainer } from '@components/layout';
@ -49,8 +48,6 @@ class InstanceList extends Component {
}
}
const PortalGql = graphql(PortalQuery, {});
const InstanceListGql = graphql(InstancesQuery, {
options(props) {
const params = props.match.params;
@ -75,6 +72,6 @@ const InstanceListGql = graphql(InstancesQuery, {
})
});
const InstanceListWithData = compose(PortalGql, InstanceListGql)(InstanceList);
const InstanceListWithData = compose(InstanceListGql)(InstanceList);
export default InstanceListWithData;

View File

@ -0,0 +1,32 @@
import React from 'react';
import { graphql } from 'react-apollo';
import PortalQuery from '@graphql/Portal.gql';
import { Header as HeaderComponent } from '@components/navigation';
const Header = ({
portal = {
datacenter: {
region: ''
},
user: {
firstName: ''
}
},
loading,
error
}) => (
<HeaderComponent
datacenter={portal.datacenter.region}
username={portal.user.firstName}
/>
);
const HeaderWithData = graphql(PortalQuery, {
props: ({ data: { portal, loading, error } }) => ({
portal,
loading,
error
})
})(Header);
export default HeaderWithData;

View File

@ -1,2 +1,3 @@
export { default as Header } from './header';
export { default as Breadcrumb } from './breadcrumb';
export { default as Menu } from './menu';

View File

@ -1,9 +1,8 @@
import React, { Component } from 'react';
import { compose, graphql } from 'react-apollo';
// import { connect } from 'react-redux';
// Import { connect } from 'react-redux';
import styled from 'styled-components';
// import { Link } from 'react-router-dom';
import PortalQuery from '@graphql/Portal.gql';
// Import { Link } from 'react-router-dom';
import ServicesQuery from '@graphql/Services.gql';
import { processServices } from '@root/state/selectors';
@ -58,8 +57,6 @@ class ServiceList extends Component {
}
}
const PortalGql = graphql(PortalQuery, {});
const ServicesGql = graphql(ServicesQuery, {
options(props) {
return {
@ -78,6 +75,6 @@ const ServicesGql = graphql(ServicesQuery, {
})
});
const ServiceListWithData = compose(PortalGql, ServicesGql)(ServiceList);
const ServiceListWithData = compose(ServicesGql)(ServiceList);
export default ServiceListWithData;

View File

@ -1,8 +1,7 @@
import React from 'react';
import { compose, graphql } from 'react-apollo';
// import { connect } from 'react-redux';
// Import { connect } from 'react-redux';
import styled from 'styled-components';
import PortalQuery from '@graphql/Portal.gql';
import ServicesQuery from '@graphql/ServicesTopology.gql';
import unitcalc from 'unitcalc';
@ -10,12 +9,12 @@ import { processServices } from '@root/state/selectors';
import { LayoutContainer } from '@components/layout';
import { Loader, ErrorMessage } from '@components/messaging';
// import { ServicesTooltip } from '@components/services';
// Import { ServicesTooltip } from '@components/services';
/* import { Topology } from 'joyent-ui-toolkit'; */
/*import ServicesTooltip from '@components/services/tooltip';
import { Topology } from 'joyent-ui-toolkit';
/* Import ServicesTooltip from '@components/services/tooltip';
import { toggleTooltip } from '@state/actions';*/
import { toggleTooltip } from '@state/actions'; */
const StyledBackground = styled.div`
background-color: ${props => props.theme.whiteActive};
@ -44,14 +43,12 @@ const ServicesTopology = ({ push, services, datacenter, loading, error }) => {
return (
<StyledBackground>
<StyledContainer>
{/* <Topology services={services} /> */}
<Topology services={services} />
</StyledContainer>
</StyledBackground>
);
};
const PortalGql = graphql(PortalQuery, {});
const ServicesGql = graphql(ServicesQuery, {
options(props) {
return {
@ -69,8 +66,6 @@ const ServicesGql = graphql(ServicesQuery, {
})
});
const ServicesTopologyWithData = compose(PortalGql, ServicesGql)(
ServicesTopology
);
const ServicesTopologyWithData = compose(ServicesGql)(ServicesTopology);
export default ServicesTopologyWithData;

View File

@ -1,6 +1,8 @@
query Portal {
portal {
username
user {
firstName
}
datacenter {
uuid
region

View File

@ -1,9 +1,7 @@
import React from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import { Header } from '@components/navigation';
import { Breadcrumb, Menu } from '@containers/navigation';
import { Header, Breadcrumb, Menu } from '@containers/navigation';
import { DeploymentGroupList } from '@containers/deployment-groups';
import {

View File

@ -4,7 +4,13 @@
"region": "us-east-1"
},
"portal": {
"username": "juditgreskovits"
"user": {
"uuid": "uuid",
"login": "juditgreskovits",
"firstName": "Judit",
"lastName": "Greskovits",
"email": "name@email.com"
}
},
"deploymentGroups": [
{

View File

@ -1,77 +1,85 @@
scalar Date
scalar Object
type Portal {
username: String!
datacenter: Datacenter! # we can infer dockerhost from this
scalar Date
scalar Object
type Portal {
user: User!
datacenter: Datacenter!
deploymentGroups: [DeploymentGroup]!
}
}
type DeploymentGroup {
type User {
uuid: ID!
firstName: String!
lastName: String!
email: String!
login: String!
}
type DeploymentGroup {
uuid: ID!
name: String!
slug: String!
services(slug: String): [Service]!
version: Version!
history: [Version]!
}
}
type ServiceScale {
type ServiceScale {
uuid: ID!
serviceName: String!
replicas: Int!
}
}
enum ConvergenceActionType {
enum ConvergenceActionType {
NOOP
CREATE
RECREATE
START
}
}
type ConvergenceAction {
uuid: ID!
type ConvergenceAction {
uuid: String!
type: ConvergenceActionType!
service: String! # service name
machines: [String]! # instance machine ids
}
}
type StateConvergencePlan {
uuid: ID!
type StateConvergencePlan {
uuid: String!
running: Boolean!
actions: [ConvergenceAction]!
}
}
type Version {
uuid: ID!
type Version {
created: Date! # Either Int or define scalar
manifest: Manifest!
scale: [ServiceScale]!
plan: StateConvergencePlan
}
}
enum ManifestType {
enum ManifestType {
COMPOSE
MARIPOSA
}
}
enum ManifestFormat {
enum ManifestFormat {
JSON
YAML
}
}
type Manifest {
uuid: ID!
type Manifest {
uuid: String!
created: Date!
type: ManifestType!
format: ManifestFormat!
raw: String!
obj: Object!
}
}
# immutable
type Service {
uuid: ID! # unique id for db row
# immutable
type Service {
uuid: String! # unique id for db row
hash: String! # unique id for version of service
name: String! # human readable name
slug: String!
@ -81,10 +89,10 @@ type Service {
connections: [String!] # list of serviceUuids
parent: ID # parent service uuid
package: Package! # we don't have this in current mock data
}
}
# for metrics max / min (I guess)
type Package {
# for metrics max / min (I guess)
type Package {
uuid: ID!
name: String!
type: String!
@ -95,58 +103,75 @@ type Package {
vcpus: Int!
version: String!
group: String!
}
}
enum InstanceStatus {
enum InstanceStatus {
CREATED
RESTARTING
RUNNING
PAUSED
EXITED
DELETED
}
}
type Instance {
uuid: ID!
slug: String!
type Instance {
uuid: String!
name: String!
machineId: String!
status: InstanceStatus!
# metrics: [InstanceMetric]!
}
}
type Datacenter {
type Datacenter {
uuid: String!
# name: String! # Do we have 'official' human readable names?
region: String!
}
}
type InstanceMetric {
type InstanceMetric {
type: MetricType!
data: [MetricData]!
}
}
type CurrentMetric {
type CurrentMetric {
name: String!
value: Float!
measurement: String!
}
}
type MetricType {
uuid: ID!
type MetricType {
uuid: String!
name: String!
id: String!
}
}
type MetricData {
type MetricData {
timestamp: Int!
value: Float!
}
}
# we probably wont use some of these queries or arguments
# but this way we expose the entire db through gql
type Query {
# Need to review queries
type Query {
portal: Portal
deploymentGroups: [DeploymentGroup]
deploymentGroup(uuid: String, slug: String): DeploymentGroup
services(deploymentGroupUuid: String, deploymentGroupSlug: String): [Service]
service(uuid: String, slug: String): Service
instances(serviceUuid: String, serviceSlug: String): [Instance]
instance(uuid: String, machineId: String): Instance
metricTypes: [MetricType]
metricData(instanceUuid: String!, metricType: String!, from: Date!, to: Date!): [InstanceMetric]!
package: Package
datacenters: [Datacenter]
# tmp test
instanceMetric: InstanceMetric!
}
# we probably wont use some of these queries or arguments
# but this way we expose the entire db through gql
type Query {
portal: Portal
user: User
deploymentGroups(name: String, slug: String): [DeploymentGroup]
deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup
serviceScales(serviceName: String, versionUuid: ID): [ServiceScale]
@ -166,18 +191,23 @@ type Query {
instances(name: String!, machineId: ID, status: InstanceStatus, serviceUuid: ID, serviceSlug: String, deploymentGroupUuid: ID, deploymentGroupSlug: String): [Instance]
instance(uuid: ID!): Instance
datacenter(uuid: ID, region: String): Datacenter
}
}
type Mutation {
type Mutation {
createDeploymentGroup(name: String!) : DeploymentGroup
updateDeploymentGroup(uuid: ID!, name: String!) : DeploymentGroup
provisionManifest(deploymentGroupUuid: ID!, type: ManifestType!, format: ManifestFormat!, raw: String!) : Version
scale(service: ID!, replicas: Int!) : Version
stopServices(uuids: [ID]!) : [Service]
startServices(uuids: [ID]!) : [Service]
restartServices(uuids: [ID]!) : [Service]
deleteServices(uuids: [ID]!) : [Service]
stopInstances(uuids: [ID]!) : [Instance]
startInstances(uuids: [ID]!) : [Instance]
restartInstances(uuids: [ID]!) : [Instance]
}
# reprovision() ???
}