@centreon/react-components
Version:
react components used by centreon web frontend
206 lines (167 loc) • 8.39 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _card = _interopRequireDefault(require("../Card/card.scss"));
var _Wrapper = _interopRequireDefault(require("../Wrapper"));
var _HorizontalLineContent = _interopRequireDefault(require("../HorizontalLines/HorizontalLineContent"));
var _Card = _interopRequireDefault(require("../Card"));
var _CardItem = _interopRequireDefault(require("../Card/CardItem"));
var _IconInfo = _interopRequireDefault(require("../Icon/IconInfo"));
var _Title = _interopRequireDefault(require("../Title"));
var _Subtitle = _interopRequireDefault(require("../Subtitle"));
var _ButtonRegular = _interopRequireDefault(require("../Button/ButtonRegular"));
var _IconContent = _interopRequireDefault(require("../Icon/IconContent"));
var _ButtonAction = _interopRequireDefault(require("../Button/ButtonAction"));
/* eslint-disable no-nested-ternary */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/prop-types */
/* eslint-disable no-restricted-globals */
var ExtensionsHolder =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2["default"])(ExtensionsHolder, _React$Component);
function ExtensionsHolder() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2["default"])(this, ExtensionsHolder);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(ExtensionsHolder)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parseDescription", function (description) {
return description.replace(/^centreon\s+(\w+)/i, function (_, $1) {
return $1;
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPropsFromLicense", function (licenseInfo) {
var licenseProps = {};
if (licenseInfo && licenseInfo.required) {
if (!licenseInfo.expiration_date) {
licenseProps = {
itemFooterColor: 'red',
itemFooterLabel: 'License required'
};
} else if (!isNaN(Date.parse(licenseInfo.expiration_date))) {
// @todo move this logic to centreon. Furthermore, it will facilitate translation
// @todo use moment to convert date in the proper format (locale and timezone from user)
var expirationDate = new Date(licenseInfo.expiration_date);
licenseProps = {
itemFooterColor: 'green',
itemFooterLabel: "License expires ".concat(expirationDate.toISOString().slice(0, 10))
};
} else {
licenseProps = {
itemFooterColor: 'red',
itemFooterLabel: 'License not valid'
};
}
}
return licenseProps;
});
return _this;
}
(0, _createClass2["default"])(ExtensionsHolder, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
title = _this$props.title,
entities = _this$props.entities,
onCardClicked = _this$props.onCardClicked,
onDelete = _this$props.onDelete,
titleColor = _this$props.titleColor,
hrColor = _this$props.hrColor,
hrTitleColor = _this$props.hrTitleColor,
onInstall = _this$props.onInstall,
onUpdate = _this$props.onUpdate,
updating = _this$props.updating,
installing = _this$props.installing,
type = _this$props.type;
return _react["default"].createElement(_Wrapper["default"], null, _react["default"].createElement(_HorizontalLineContent["default"], {
hrColor: hrColor,
hrTitleColor: hrTitleColor,
hrTitle: title
}), _react["default"].createElement(_Card["default"], null, _react["default"].createElement("div", null, entities.map(function (entity) {
return _react["default"].createElement("div", {
id: "".concat(type, "-").concat(entity.id),
onClick: function onClick() {
onCardClicked(entity.id, type);
},
className: _card["default"]['card-inline']
}, _react["default"].createElement(_CardItem["default"], (0, _extends2["default"])({
itemBorderColor: entity.version.installed ? !entity.version.outdated ? 'green' : 'orange' : 'gray'
}, _this2.getPropsFromLicense(entity.license)), entity.version.installed ? _react["default"].createElement(_IconInfo["default"], {
iconPosition: "info-icon-position",
iconName: "state",
iconColor: "green"
}) : null, _react["default"].createElement(_Title["default"], {
labelStyle: {
fontSize: '16px'
},
titleColor: titleColor,
label: _this2.parseDescription(entity.description),
title: entity.description
}, _react["default"].createElement(_Subtitle["default"], {
label: "by ".concat(entity.label)
})), _react["default"].createElement(_ButtonRegular["default"], {
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
var id = entity.id;
var version = entity.version;
if (version.outdated && !updating[entity.id]) {
onUpdate(id, type);
} else if (!version.installed && !installing[entity.id]) {
onInstall(id, type);
}
},
customClass: "button-card-position",
style: {
opacity: installing[entity.id] || updating[entity.id] ? '0.5' : 'inherit',
cursor: entity.version.installed ? 'default' : 'pointer'
},
buttonType: entity.version.installed ? entity.version.outdated ? 'regular' : 'bordered' : 'regular',
color: entity.version.installed ? entity.version.outdated ? 'orange' : 'blue' : 'green',
label: (!entity.version.installed ? 'Available ' : '') + entity.version.available
}, !entity.version.installed ? _react["default"].createElement(_IconContent["default"], {
iconContentColor: "white",
iconContentType: "".concat(installing[entity.id] ? 'update' : 'add'),
loading: installing[entity.id],
customClass: "content-icon-button"
}) : entity.version.outdated ? _react["default"].createElement(_IconContent["default"], {
iconContentColor: "white",
iconContentType: "update",
loading: updating[entity.id],
customClass: "content-icon-button"
}) : null), entity.version.installed ? _react["default"].createElement(_ButtonAction["default"], {
buttonActionType: "delete",
buttonIconType: "delete",
customPosition: "button-action-card-position",
iconColor: "gray",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onDelete(entity, type);
}
}) : null));
}))));
}
}]);
return ExtensionsHolder;
}(_react["default"].Component);
var _default = ExtensionsHolder;
exports["default"] = _default;