api-browser
Version:
Web components for interacting with GraphQL APIs using GraphiQL, and RESTful APIs supporting the OpenAPI schema, using SwaggerUI
222 lines (168 loc) • 12.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _is = require('ramda/src/is');
var _is2 = _interopRequireDefault(_is);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _regenerator = require('babel-runtime/regenerator');
var _regenerator2 = _interopRequireDefault(_regenerator);
var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
var _pathOr = require('ramda/src/pathOr');
var _pathOr2 = _interopRequireDefault(_pathOr);
var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n display: grid;\n padding: 1em;\n grid-template-columns: repeat(3, 1fr);\n grid-column-gap: 1.5em;\n grid-row-gap: 2.5em;\n color: ', ';\n font-family: ', ';\n'], ['\n display: grid;\n padding: 1em;\n grid-template-columns: repeat(3, 1fr);\n grid-column-gap: 1.5em;\n grid-row-gap: 2.5em;\n color: ', ';\n font-family: ', ';\n']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n display: grid;\n padding: 1.5em;\n align-items: center;\n background: ', ';\n border: 1px solid ', ';\n grid-template-columns: auto auto 1fr;\n grid-column-gap: 0.6em;\n grid-row-gap: 0.8em;\n grid-template-areas:\n "avatar avatar name name"\n "avatar avatar . ."\n "', ' url url ui-button"\n "description description description description";\n & a.ui-link {\n display: block;\n grid-area: ui-button;\n }\n & button.ui-button {\n border-radius: 50%;\n padding: 0.5em;\n }\n'], ['\n display: grid;\n padding: 1.5em;\n align-items: center;\n background: ', ';\n border: 1px solid ', ';\n grid-template-columns: auto auto 1fr;\n grid-column-gap: 0.6em;\n grid-row-gap: 0.8em;\n grid-template-areas:\n "avatar avatar name name"\n "avatar avatar . ."\n "', ' url url ui-button"\n "description description description description";\n & a.ui-link {\n display: block;\n grid-area: ui-button;\n }\n & button.ui-button {\n border-radius: 50%;\n padding: 0.5em;\n }\n']),
_templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n grid-area: name;\n font-size: 2em;\n font-weight: bold;\n'], ['\n grid-area: name;\n font-size: 2em;\n font-weight: bold;\n']),
_templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n display: block;\n grid-area: description;\n font-style: italic;\n font-size: ', ';\n'], ['\n display: block;\n grid-area: description;\n font-style: italic;\n font-size: ', ';\n']),
_templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n display: block;\n grid-area: url;\n font-size: 0.9em;\n color: ', ';\n'], ['\n display: block;\n grid-area: url;\n font-size: 0.9em;\n color: ', ';\n']),
_templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n display: block;\n text-align: center;\n cursor: pointer;\n grid-area: status;\n padding: 0.2em;\n width: 1.2em;\n height: 1.2em;\n font-size: 0.8em;\n border-radius: 50%;\n background: ', ';\n border: 1px solid ', ';\n &:before {\n content: "\\', '";\n color: white;\n }\n'], ['\n display: block;\n text-align: center;\n cursor: pointer;\n grid-area: status;\n padding: 0.2em;\n width: 1.2em;\n height: 1.2em;\n font-size: 0.8em;\n border-radius: 50%;\n background: ', ';\n border: 1px solid ', ';\n &:before {\n content: "\\\\', '";\n color: white;\n }\n']),
_templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n display: block;\n border: 1px solid transparent;\n height: 18px;\n width: 18px;\n'], ['\n display: block;\n border: 1px solid transparent;\n height: 18px;\n width: 18px;\n']),
_templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n display: block;\n grid-area: avatar;\n position: relative;\n border-radius: 50%;\n border: 2px solid ', ';\n box-shadow: 2px 2px 4px ', ';\n font-family: ', ';\n height: 70px;\n width: 70px;\n\n &::after {\n content: "";\n ', '\n background-size: 100%;\n max-height: 2.8em;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n }\n'], ['\n display: block;\n grid-area: avatar;\n position: relative;\n border-radius: 50%;\n border: 2px solid ', ';\n box-shadow: 2px 2px 4px ', ';\n font-family: ', ';\n height: 70px;\n width: 70px;\n\n &::after {\n content: "";\n ', '\n background-size: 100%;\n max-height: 2.8em;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n }\n']);
var _color = require('color');
var _color2 = _interopRequireDefault(_color);
var _v = require('uuid/v4');
var _v2 = _interopRequireDefault(_v);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Link = require('react-router-dom/Link');
var _Link2 = _interopRequireDefault(_Link);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ListWrapper = _styledComponents2.default.section(_templateObject, (0, _pathOr2.default)('darkgray', ['theme', 'fonts', 'fontColor']), (0, _pathOr2.default)('Roboto, Helvetica, Arial', ['theme', 'fonts', 'fontFamily']));
var ApiCard = _styledComponents2.default.div(_templateObject2, (0, _pathOr2.default)('white', ['theme', 'colors', 'grayscale', 'white']), (0, _pathOr2.default)('gray', ['theme', 'colors', 'grayscale', 'md']), function (props) {
return props.healthcheck ? 'status' : 'url';
});
var ApiName = _styledComponents2.default.h2(_templateObject3);
var ApiDescription = _styledComponents2.default.p(_templateObject4, (0, _pathOr2.default)('14px', ['theme', 'fonts', 'fontSize']));
var ApiUrl = _styledComponents2.default.a(_templateObject5, (0, _color2.default)((0, _pathOr2.default)('gray', ['theme', 'fonts', 'fontColor'])).lighten(0.1).hex());
var ApiHealth = _styledComponents2.default.p(_templateObject6, function (props) {
return props.status ? 'forestgreen' : 'red';
}, (0, _pathOr2.default)('lightgray', ['theme', 'colors', 'grayscale', 'lt']), function (props) {
return props.status ? '2713' : '2717';
});
var UiAvatar = _styledComponents2.default.img(_templateObject7);
var Avatar = _styledComponents2.default.img(_templateObject8, (0, _pathOr2.default)('white', ['theme', 'colors', 'grayscale', 'white']), (0, _pathOr2.default)('lightgray', ['theme', 'colors', 'grayscale', 'lt']), (0, _pathOr2.default)('Roboto, Helvetica, Arial', ['theme', 'fonts', 'fontFamily']), function (props) {
return props.avatarSrc && 'background: url(' + props.avatarSrc + ') no-repeat;';
});
var apiHealthCheck = function () {
var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(url) {
var response;
return _regenerator2.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch(url);
case 2:
response = _context.sent;
return _context.abrupt('return', response.status >= 200 && response.status < 300);
case 4:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
}));
return function apiHealthCheck(_x) {
return _ref.apply(this, arguments);
};
}();
var ApiList = function (_PureComponent) {
(0, _inherits3.default)(ApiList, _PureComponent);
function ApiList() {
var _ref2;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, ApiList);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref2 = ApiList.__proto__ || Object.getPrototypeOf(ApiList)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {}, _this.checkHealth = function (url, healthcheck) {
apiHealthCheck((0, _is2.default)(String, healthcheck) ? healthcheck : url).then(function (up) {
return _this.setState((0, _defineProperty3.default)({}, url, up));
});
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(ApiList, [{
key: 'componentWillMount',
value: function componentWillMount() {
var _this2 = this;
var _props$apis = this.props.apis,
apis = _props$apis === undefined ? [] : _props$apis;
apis.filter(function (a) {
return a.url && a.healthcheck;
}).forEach(function (_ref3) {
var url = _ref3.url,
healthcheck = _ref3.healthcheck;
return _this2.checkHealth(url, healthcheck);
});
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var apis = this.props.apis;
return _react2.default.createElement(
ListWrapper,
null,
apis.map(function (_ref4) {
var name = _ref4.name,
healthcheck = _ref4.healthcheck,
uiUrl = _ref4.uiUrl,
uiSrc = _ref4.uiSrc,
avatarSrc = _ref4.avatarSrc,
description = _ref4.description,
url = _ref4.url;
return _react2.default.createElement(
ApiCard,
{ key: (0, _v2.default)(), healthcheck: healthcheck },
uiUrl && uiSrc && _react2.default.createElement(
_Link2.default,
{ className: 'ui-link', to: uiUrl },
_react2.default.createElement(UiAvatar, { src: uiSrc })
),
healthcheck && _react2.default.createElement(ApiHealth, { onClick: function onClick() {
return _this3.checkHealth(url, healthcheck);
}, status: _this3.state[url] }),
_react2.default.createElement(Avatar, { src: avatarSrc }),
_react2.default.createElement(
ApiName,
null,
name
),
_react2.default.createElement(
ApiUrl,
{ href: url },
url
),
_react2.default.createElement(
ApiDescription,
null,
description
)
);
})
);
}
}]);
return ApiList;
}(_react.PureComponent);
ApiList.displayName = 'ApiList';
ApiList.defaultProps = {
apis: []
};
exports.default = (0, _styledComponents.withTheme)(ApiList);