stitch-ui/src/app/components/ServicesPanel.js

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
import PropTypes from "prop-types";
import { OrderedMap } from "immutable";
import { servicesByType } from "../../services/registry";

class ServicesPanel extends React.Component {
  gotoService(name) {
    this.context.router.history.push(
      `/groups/${this.props.app.groupId}/apps/${this.props.app
        ._id}/services/${name}/config`
    );
  }

  render() {
    const svcs = OrderedMap(this.props.services || {});
    return (
      <div className="main-content">
        <h3>Services</h3>
        {svcs.size > 0
          ? null
          : <div className="no-services"> No services yet.</div>}
        {svcs.entrySeq().map(kv => {
          const svc = kv[1];
          const svcName = kv[0];
          const svcDefinition = servicesByType.get(svc.type);
          return (
            <div
              className="rich-radio rich-radio-is-medium"
              key={svcName}
              onClick={() => {
                this.gotoService(svcName);
              }}
            >
              <div className="rich-radio-illustration-container">
                <div className="rich-radio-illustration">
                  {React.createElement(svcDefinition.icon)}
                </div>
                <div>
                  <div className="rich-radio-illustration-title">
                    {svcName}
                  </div>
                  <div className="rich-radio-illustration-description">
                    {svcDefinition.getLongDisplayName()}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
        <div
          className="rich-radio rich-radio-is-medium rich-radio-is-new"
          onClick={this.props.onAddService}
        >
          + Add Service
        </div>
      </div>
    );
  }
}

ServicesPanel.contextTypes = {
  router: PropTypes.object
};

export default ServicesPanel;