@veecode-platform/plugin-kong-service-manager/dist/components/RoutePage/aboutRoute/AboutRoute.esm.js

import React from 'react';
import { List, ListItem, Box, ListItemText, Chip } from '@material-ui/core';
import { useAboutRouteStyles } from './styles.esm.js';
import { CopyTextButton } from '@backstage/core-components';
import dayjs from 'dayjs';
import ErrorBoundary from '../../ErrorBoundary/ErrorBondary.esm.js';
import { BoxComponent } from '../../shared/BoxComponent/BoxComponent.esm.js';
import '../../shared/SelectComponent/Select.esm.js';
import { EmptyStateComponent } from '../../shared/EmptyStateComponent/EmptyStateComponent.esm.js';
import '../../shared/HtmlTooltip/HtmlTooltip.esm.js';
import '../../shared/ButtonComponent/styles.esm.js';
import '../../shared/LoadingComponent/styles.esm.js';
import '../../shared/MissingAnnotation/styles.esm.js';
import '@backstage/plugin-catalog-react';
import { SkeletonComponent } from '../../shared/SkeletonComponent/SkeletonComponent.esm.js';
import { LabelField } from '../../shared/Fields/Fields.esm.js';
import { MethodLabel } from '../../shared/MethodLabel/MethodLabel.esm.js';
import '@material-ui/icons/OpenInNew';
import '@material-ui/icons/RemoveRedEye';
import '@material-ui/icons/VisibilityOff';
import '@material-ui/icons/Close';
import '@material-ui/icons/Info';
import '@material-ui/icons/ArrowDropDown';
import '@material-ui/icons/ArrowDropUp';
import '@material-ui/icons/AccountCircle';
import '@material-ui/icons/Add';
import '@material-ui/icons/Remove';
import '@material-ui/icons/Undo';
import { transformPath } from '../../../utils/helpers/transformPath.esm.js';

const AboutRoute = (props) => {
  const { error, loading, routeDetails } = props;
  const { listComponent, listItemWrapper, listItem, itemValue } = useAboutRouteStyles();
  if (error) return /* @__PURE__ */ React.createElement(EmptyStateComponent, null);
  if (loading) return /* @__PURE__ */ React.createElement(BoxComponent, { title: "About Route" }, /* @__PURE__ */ React.createElement(List, { className: listComponent }, /* @__PURE__ */ React.createElement(
    SkeletonComponent,
    {
      options: ["Id", "Name", "Methods", "Last Update", "Created", "Protocols", "Hosts", "Paths", "Redirect Status", "Service Id", "Tags"]
    }
  )));
  return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(BoxComponent, { title: "About Route", noSelectInstance: true }, /* @__PURE__ */ React.createElement(List, { className: listComponent }, routeDetails ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "ID" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.id, /* @__PURE__ */ React.createElement(
    CopyTextButton,
    {
      text: routeDetails.id,
      tooltipText: "Copy ID",
      tooltipDelay: 3e3
    }
  )))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Name" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.name))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Methods" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.methods && routeDetails.methods.length > 0 ? routeDetails.methods.map((method) => /* @__PURE__ */ React.createElement(
    MethodLabel,
    {
      key: method,
      variant: method
    }
  )) : "-"))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Last updated" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue, title: dayjs.unix(routeDetails.updated_at).format("MM/DD/YYYY") }, `Updated ${dayjs().diff(dayjs.unix(routeDetails.updated_at), "day")} days ago`))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Created" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue, title: `Created ${dayjs().diff(dayjs.unix(routeDetails.created_at), "day")} days ago` }, dayjs.unix(routeDetails.created_at).format("MM/DD/YYYY")))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Protocols" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.protocols && routeDetails.protocols.length > 0 ? routeDetails.protocols.map((protocol) => /* @__PURE__ */ React.createElement("p", { key: protocol }, protocol)) : " - "))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Hosts" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.hosts.map((host) => /* @__PURE__ */ React.createElement("p", { key: host }, host)))))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Paths" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.paths && routeDetails.paths.length > 0 ? routeDetails.paths.map((path) => /* @__PURE__ */ React.createElement("p", { key: path }, transformPath(path))) : " - "))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Redirect Status Code" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.https_redirect_status_code ?? " - "))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Service Id" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.service_id))), /* @__PURE__ */ React.createElement(ListItem, { className: listItemWrapper }, /* @__PURE__ */ React.createElement(Box, { className: listItem }, /* @__PURE__ */ React.createElement(LabelField, { title: "Tags" }), /* @__PURE__ */ React.createElement(ListItemText, { className: itemValue }, routeDetails.tags && routeDetails.tags.length > 0 ? routeDetails.tags.map((t) => /* @__PURE__ */ React.createElement(Chip, { label: t, key: t })) : " - ")))) : /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, null, "No records to display")))));
};

export { AboutRoute as default };
//# sourceMappingURL=AboutRoute.esm.js.map