"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ServiceListPreview = ServiceListPreview;
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _agent_icon = require("../../../shared/agent_icon");
var _style = require("../../../../utils/style");
var _environment_badge = require("../../../shared/environment_badge");
var _truncate_with_tooltip = require("../../../shared/truncate_with_tooltip");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const DEFAULT_SORT_FIELD = 'serviceName';
const DEFAULT_SORT_DIRECTION = 'asc';
function ServiceListPreview({
  items,
  isLoading
}) {
  const [pageIndex, setPageIndex] = (0, _react.useState)(0);
  const [pageSize, setPageSize] = (0, _react.useState)(10);
  const [sortField, setSortField] = (0, _react.useState)(DEFAULT_SORT_FIELD);
  const [sortDirection, setSortDirection] = (0, _react.useState)(DEFAULT_SORT_DIRECTION);
  const onTableChange = (0, _react.useCallback)(options => {
    var _options$sort, _options$sort2;
    setPageIndex(options.page.index);
    setPageSize(options.page.size);
    setSortField(((_options$sort = options.sort) === null || _options$sort === void 0 ? void 0 : _options$sort.field) || DEFAULT_SORT_FIELD);
    setSortDirection(((_options$sort2 = options.sort) === null || _options$sort2 === void 0 ? void 0 : _options$sort2.direction) || DEFAULT_SORT_DIRECTION);
  }, []);
  const sort = (0, _react.useMemo)(() => {
    return {
      sort: {
        field: sortField,
        direction: sortDirection
      }
    };
  }, [sortField, sortDirection]);
  const pagination = (0, _react.useMemo)(() => ({
    pageIndex,
    pageSize,
    totalItemCount: items.length,
    hidePerPageOptions: true
  }), [pageIndex, pageSize, items.length]);
  const renderedItems = (0, _react.useMemo)(() => {
    const sortedItems = (0, _lodash.orderBy)(items, sortField, sortDirection);
    return sortedItems.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
  }, [pageIndex, pageSize, sortField, sortDirection, items]);
  const columns = [{
    field: 'serviceName',
    name: _i18n.i18n.translate('xpack.apm.serviceGroups.selectServicesList.nameColumnLabel', {
      defaultMessage: 'Name'
    }),
    sortable: true,
    render: (_, {
      serviceName,
      agentName
    }) => /*#__PURE__*/_react.default.createElement(_truncate_with_tooltip.TruncateWithTooltip, {
      "data-test-subj": "apmServiceListAppLink",
      text: serviceName,
      content: /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
        gutterSize: "s",
        justifyContent: "flexStart"
      }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
        grow: false
      }, /*#__PURE__*/_react.default.createElement(_agent_icon.AgentIcon, {
        agentName: agentName
      })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
        grow: false
      }, serviceName))
    })
  }, {
    field: 'environments',
    name: _i18n.i18n.translate('xpack.apm.serviceGroups.selectServicesList.environmentColumnLabel', {
      defaultMessage: 'Environments'
    }),
    width: `${_style.unit * 10}px`,
    sortable: true,
    render: (_, {
      environments
    }) => /*#__PURE__*/_react.default.createElement(_environment_badge.EnvironmentBadge, {
      environments: environments !== null && environments !== void 0 ? environments : []
    })
  }];
  return /*#__PURE__*/_react.default.createElement(_eui.EuiBasicTable, {
    loading: isLoading,
    noItemsMessage: _i18n.i18n.translate('xpack.apm.serviceGroups.selectServicesList.notFoundLabel', {
      defaultMessage: 'No services available within the last 24 hours. You can still create the group and services that match your query will be added.'
    }),
    items: renderedItems,
    columns: columns,
    sorting: sort,
    onChange: onTableChange,
    pagination: pagination
  });
}