From 5ffa07aeeef3a473311d0ec03d781fbb29f1ccfa Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Thu, 25 May 2017 17:32:19 +0100 Subject: [PATCH] feat(cp-frontend): Move portal query to header, display result, return user from mock server --- .../src/components/navigation/header.js | 25 +- .../src/containers/instances/list.js | 7 +- .../src/containers/navigation/header.js | 32 ++ .../src/containers/navigation/index.js | 1 + .../src/containers/services/list.js | 9 +- .../src/containers/services/topology.js | 19 +- packages/cp-frontend/src/graphql/Portal.gql | 4 +- packages/cp-frontend/src/router.js | 4 +- packages/cp-gql-mock-server/src/data.json | 8 +- packages/cp-gql-schema/schema.gql | 354 ++++++++++-------- 10 files changed, 271 insertions(+), 192 deletions(-) create mode 100644 packages/cp-frontend/src/containers/navigation/header.js diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js index a2dcec24..0e8ad86a 100644 --- a/packages/cp-frontend/src/components/navigation/header.js +++ b/packages/cp-frontend/src/components/navigation/header.js @@ -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 }) => ( - + + + {datacenter} + + + {username} + ); + +Header.propTypes = { + datacenter: PropTypes.string, + username: PropTypes.string +}; + +export default Header; diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js index ae307ba5..d314cae9 100644 --- a/packages/cp-frontend/src/containers/instances/list.js +++ b/packages/cp-frontend/src/containers/instances/list.js @@ -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; diff --git a/packages/cp-frontend/src/containers/navigation/header.js b/packages/cp-frontend/src/containers/navigation/header.js new file mode 100644 index 00000000..077a5c84 --- /dev/null +++ b/packages/cp-frontend/src/containers/navigation/header.js @@ -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 +}) => ( + +); + +const HeaderWithData = graphql(PortalQuery, { + props: ({ data: { portal, loading, error } }) => ({ + portal, + loading, + error + }) +})(Header); + +export default HeaderWithData; diff --git a/packages/cp-frontend/src/containers/navigation/index.js b/packages/cp-frontend/src/containers/navigation/index.js index 4e5c76e1..570ccc4d 100644 --- a/packages/cp-frontend/src/containers/navigation/index.js +++ b/packages/cp-frontend/src/containers/navigation/index.js @@ -1,2 +1,3 @@ +export { default as Header } from './header'; export { default as Breadcrumb } from './breadcrumb'; export { default as Menu } from './menu'; diff --git a/packages/cp-frontend/src/containers/services/list.js b/packages/cp-frontend/src/containers/services/list.js index 7e76fbbe..62c3bb70 100644 --- a/packages/cp-frontend/src/containers/services/list.js +++ b/packages/cp-frontend/src/containers/services/list.js @@ -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; diff --git a/packages/cp-frontend/src/containers/services/topology.js b/packages/cp-frontend/src/containers/services/topology.js index f4f9c87f..56d0b444 100644 --- a/packages/cp-frontend/src/containers/services/topology.js +++ b/packages/cp-frontend/src/containers/services/topology.js @@ -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 ( - {/* */} + ); }; -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; diff --git a/packages/cp-frontend/src/graphql/Portal.gql b/packages/cp-frontend/src/graphql/Portal.gql index 9918426c..4d5e20c9 100644 --- a/packages/cp-frontend/src/graphql/Portal.gql +++ b/packages/cp-frontend/src/graphql/Portal.gql @@ -1,6 +1,8 @@ query Portal { portal { - username + user { + firstName + } datacenter { uuid region diff --git a/packages/cp-frontend/src/router.js b/packages/cp-frontend/src/router.js index 93f098ab..7a34742a 100644 --- a/packages/cp-frontend/src/router.js +++ b/packages/cp-frontend/src/router.js @@ -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 { diff --git a/packages/cp-gql-mock-server/src/data.json b/packages/cp-gql-mock-server/src/data.json index 7a3ad0fe..42066257 100644 --- a/packages/cp-gql-mock-server/src/data.json +++ b/packages/cp-gql-mock-server/src/data.json @@ -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": [ { diff --git a/packages/cp-gql-schema/schema.gql b/packages/cp-gql-schema/schema.gql index 76032b22..82f28374 100644 --- a/packages/cp-gql-schema/schema.gql +++ b/packages/cp-gql-schema/schema.gql @@ -1,183 +1,213 @@ -scalar Date -scalar Object -type Portal { - username: String! - datacenter: Datacenter! # we can infer dockerhost from this - deploymentGroups: [DeploymentGroup]! -} + scalar Date + scalar Object -type DeploymentGroup { - uuid: ID! - name: String! - slug: String! - services(slug: String): [Service]! - version: Version! - history: [Version]! -} + type Portal { + user: User! + datacenter: Datacenter! + deploymentGroups: [DeploymentGroup]! + } -type ServiceScale { - uuid: ID! - serviceName: String! - replicas: Int! -} + type User { + uuid: ID! + firstName: String! + lastName: String! + email: String! + login: String! + } -enum ConvergenceActionType { - NOOP - CREATE - RECREATE - START -} + type DeploymentGroup { + uuid: ID! + name: String! + slug: String! + services(slug: String): [Service]! + version: Version! + history: [Version]! + } -type ConvergenceAction { - uuid: ID! - type: ConvergenceActionType! - service: String! # service name - machines: [String]! # instance machine ids -} + type ServiceScale { + uuid: ID! + serviceName: String! + replicas: Int! + } -type StateConvergencePlan { - uuid: ID! - running: Boolean! - actions: [ConvergenceAction]! -} + enum ConvergenceActionType { + NOOP + CREATE + RECREATE + START + } -type Version { - uuid: ID! - created: Date! # Either Int or define scalar - manifest: Manifest! - scale: [ServiceScale]! - plan: StateConvergencePlan -} + type ConvergenceAction { + uuid: String! + type: ConvergenceActionType! + service: String! # service name + machines: [String]! # instance machine ids + } -enum ManifestType { - COMPOSE - MARIPOSA -} + type StateConvergencePlan { + uuid: String! + running: Boolean! + actions: [ConvergenceAction]! + } -enum ManifestFormat { - JSON - YAML -} + type Version { + created: Date! # Either Int or define scalar + manifest: Manifest! + scale: [ServiceScale]! + plan: StateConvergencePlan + } -type Manifest { - uuid: ID! - created: Date! - type: ManifestType! - format: ManifestFormat! - raw: String! - obj: Object! -} + enum ManifestType { + COMPOSE + MARIPOSA + } -# immutable -type Service { - uuid: ID! # unique id for db row - hash: String! # unique id for version of service - name: String! # human readable name - slug: String! - instances: [Instance]! - # metrics: [MetricType]! - currentMetrics: [CurrentMetric]! - connections: [String!] # list of serviceUuids - parent: ID # parent service uuid - package: Package! # we don't have this in current mock data -} + enum ManifestFormat { + JSON + YAML + } -# for metrics max / min (I guess) -type Package { - uuid: ID! - name: String! - type: String! - memory: Float! - disk: Float! - swap: Float! - lwps: Int! - vcpus: Int! - version: String! - group: String! -} + type Manifest { + uuid: String! + created: Date! + type: ManifestType! + format: ManifestFormat! + raw: String! + obj: Object! + } -enum InstanceStatus { - CREATED - RESTARTING - RUNNING - PAUSED - EXITED - DELETED -} + # 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! + instances: [Instance]! + # metrics: [MetricType]! + currentMetrics: [CurrentMetric]! + connections: [String!] # list of serviceUuids + parent: ID # parent service uuid + package: Package! # we don't have this in current mock data + } -type Instance { - uuid: ID! - slug: String! - name: String! - machineId: String! - status: InstanceStatus! - # metrics: [InstanceMetric]! -} + # for metrics max / min (I guess) + type Package { + uuid: ID! + name: String! + type: String! + memory: Float! + disk: Float! + swap: Float! + lwps: Int! + vcpus: Int! + version: String! + group: String! + } -type Datacenter { - uuid: String! - # name: String! # Do we have 'official' human readable names? - region: String! -} + enum InstanceStatus { + CREATED + RESTARTING + RUNNING + PAUSED + EXITED + DELETED + } -type InstanceMetric { - type: MetricType! - data: [MetricData]! -} + type Instance { + uuid: String! + name: String! + machineId: String! + status: InstanceStatus! + # metrics: [InstanceMetric]! + } -type CurrentMetric { - name: String! - value: Float! - measurement: String! -} + type Datacenter { + uuid: String! + # name: String! # Do we have 'official' human readable names? + region: String! + } -type MetricType { - uuid: ID! - name: String! - id: String! -} + type InstanceMetric { + type: MetricType! + data: [MetricData]! + } -type MetricData { - timestamp: Int! - value: Float! -} + type CurrentMetric { + name: String! + value: Float! + measurement: String! + } -# we probably wont use some of these queries or arguments -# but this way we expose the entire db through gql -type Query { - portal: Portal - deploymentGroups(name: String, slug: String): [DeploymentGroup] - deploymentGroup(uuid: ID, name: String, slug: String): DeploymentGroup - serviceScales(serviceName: String, versionUuid: ID): [ServiceScale] - serviceScale(uuid: ID!): ServiceScale - convergenceActions(type: ConvergenceActionType, service: String, versionUuid: ID): [ConvergenceAction] - convergenceAction(uuid: ID!): ConvergenceAction - stateConvergencePlans(running: Boolean, versionUuid: ID): [StateConvergencePlan] - stateConvergencePlan(uuid: ID!): StateConvergencePlan - versions(manifestUuid: ID, deploymentGroupUuid: ID): [Version] - version(uuid: ID, manifestUuid: ID): Version - manifests(type: String, deploymentGroupUuid: ID): [Manifest] - manifest(uuid: ID!): Manifest - services(name: String, slug: String, parentUuid: ID, deploymentGroupUuid: ID, deploymentGroupSlug: String): [Service] - service(uuid: ID, hash: ID): Service - packages(name: String, type: String, memory: Int, disk: Int, swap: Int, lwps: Int, vcpus: Int, version: String, group: String): [Package] - package(uuid: ID!): Package - 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 MetricType { + uuid: String! + name: String! + id: String! + } -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] -} + type MetricData { + timestamp: Int! + value: Float! + } + + # 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] + serviceScale(uuid: ID!): ServiceScale + convergenceActions(type: ConvergenceActionType, service: String, versionUuid: ID): [ConvergenceAction] + convergenceAction(uuid: ID!): ConvergenceAction + stateConvergencePlans(running: Boolean, versionUuid: ID): [StateConvergencePlan] + stateConvergencePlan(uuid: ID!): StateConvergencePlan + versions(manifestUuid: ID, deploymentGroupUuid: ID): [Version] + version(uuid: ID, manifestUuid: ID): Version + manifests(type: String, deploymentGroupUuid: ID): [Manifest] + manifest(uuid: ID!): Manifest + services(name: String, slug: String, parentUuid: ID, deploymentGroupUuid: ID, deploymentGroupSlug: String): [Service] + service(uuid: ID, hash: ID): Service + packages(name: String, type: String, memory: Int, disk: Int, swap: Int, lwps: Int, vcpus: Int, version: String, group: String): [Package] + package(uuid: ID!): Package + 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 { + 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() ??? + }