• Home
• pl.ds.websight
• websight-package-manager-view
• 1.0.5
• source code
• PackageRow.js

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

apps.websight-package-manager.web-resources.components.PackageRow.js Maven / Gradle / Ivy

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from "/apps/websight-atlaskit-esm/web-resources/react.js";
import Badge from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/badge.js";
import Spinner from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/spinner.js";
import { Cell, Row } from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/table-tree.js";
import Tooltip from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/tooltip.js";
import styled from "/apps/websight-atlaskit-esm/web-resources/styled-components.js";
import { ConsoleContainer } from "/apps/websight-admin/web-resources/Containers.js";
import { colors } from "/apps/websight-admin/web-resources/theme.js";
import { ResizableWrapper } from "/apps/websight-admin/web-resources/Wrappers.js";
import PackageService from "../services/PackageService.js";
import * as PackageUtil from "../utils/PackageUtil.js";
import { CancelButton } from "./CancelButton.js";
import PackageActions from "./PackageActions.js";
import PackageStatuses from "./PackageStatuses.js";
import PackageThumbnail from "./PackageThumbnail.js";
import PackageInfo from "./PackageInfo.js";
import PackageBuildDetails from "./PackageBuildDetails.js";
const NameContainer = styled.span`
    display: flex;
    align-items: center;
    white-space: normal;
`;
const ActivityLogContainer = styled.div`
    margin: 10px 30px;
`;
const ResizableConsoleContent = styled.div`
    width: 100%;
    height: 100%;
    overflow: hidden;
`;
const ActivityLogConsole = styled(ConsoleContainer)`
    height: 100%;
    width: auto;
`;
const PackageActionStateDetails = styled.div`
    font-size: 12px;
    color: ${colors.darkGrey};
`;
const QueuedStateContainer = styled.div`
    display: flex;
`;

const getSelectedStylesOrEmpty = packageData => {
  return packageData.isSelectedPackage ? {
    backgroundColor: colors.mediumLightGrey
  } : {};
};

const PackageName = props => {
  const styles = {
    marginRight: '5px'
  };
  const {
    packageData
  } = props;

  if (PackageUtil.isPackageBuilt(packageData)) {
    return /*#__PURE__*/React.createElement(Tooltip, {
      content: "Download",
      delay: 0,
      tag: "span"
    }, /*#__PURE__*/React.createElement("a", {
      href: packageData.path + '?' + packageData.timestamp,
      style: styles
    }, packageData.downloadName));
  } else {
    return /*#__PURE__*/React.createElement("span", {
      style: styles
    }, packageData.downloadName);
  }
};

const PackageActionState = props => {
  const {
    state,
    type,
    cancelQueuedPackage,
    applicantId
  } = props;

  if (state === 'CHECKING') {
    return /*#__PURE__*/React.createElement(CheckingState, null);
  } else if (state === 'QUEUED') {
    return /*#__PURE__*/React.createElement(QueuedState, {
      action: type,
      cancelQueuedPackage: cancelQueuedPackage,
      applicantId: applicantId || ''
    });
  } else if (state === 'RUNNING') {
    return /*#__PURE__*/React.createElement(RunningState, {
      action: type
    });
  }
};

const CheckingState = () => {
  return /*#__PURE__*/React.createElement(PackageActionStateDetails, null, /*#__PURE__*/React.createElement(Spinner, {
    size: "small"
  }));
};

const QueuedState = props => {
  const {
    cancelQueuedPackage,
    applicantId
  } = props;
  const labels = {
    'BUILD': 'Build',
    'COVERAGE': 'Coverage',
    'INSTALL': 'Installation',
    'UNINSTALL': 'Uninstallation'
  };
  return /*#__PURE__*/React.createElement(PackageActionStateDetails, null, /*#__PURE__*/React.createElement(QueuedStateContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
    content: 'by ' + applicantId,
    delay: 0
  }, /*#__PURE__*/React.createElement("div", null, labels[props.action], " Queued")), /*#__PURE__*/React.createElement(CancelButton, {
    onClick: cancelQueuedPackage
  })));
};

const RunningState = props => {
  const labels = {
    'BUILD': 'Building...',
    'COVERAGE': 'Dumping coverage...',
    'INSTALL': 'Installing...',
    'UNINSTALL': 'Uninstalling...'
  };
  return /*#__PURE__*/React.createElement(PackageActionStateDetails, null, /*#__PURE__*/React.createElement("span", {
    style: {
      marginRight: '5px'
    }
  }, labels[props.action]), /*#__PURE__*/React.createElement(Spinner, {
    size: "small"
  }));
};

export default class PackageRow {
  constructor(props) {
    this.props = props;
  }

  onConsoleScroll(event, path) {
    const element = event.target;
    const isOnBottom = element.scrollHeight - element.scrollTop === element.clientHeight;

    if (!isOnBottom) {
      this.props.onConsoleScroll(path, isOnBottom);
    }
  }

  cancelQueuedPackage(path) {
    PackageService.cancelQueuedPackageAction(path, () => {
      this.props.updateActionState(path, {
        state: 'CHECKING',
        type: 'CANCEL'
      }, false);
    });
  }

  render() {
    const row = this.props.data;

    const packageRow = packageData => {
      const selectedStyles = getSelectedStylesOrEmpty(packageData);
      const clickableStyles = {
        cursor: 'pointer'
      };
      return [/*#__PURE__*/React.createElement(Cell, {
        key: "package",
        className: "name-cell",
        style: { ...selectedStyles,
          ...clickableStyles
        },
        onClick: () => {
          if (!this.preventSelectingPackage) {
            this.props.selectPackage(packageData.path);
          }

          this.preventSelectingPackage = false;
        }
      }, /*#__PURE__*/React.createElement(NameContainer, {
        style: {
          cursor: 'pointer'
        }
      }, /*#__PURE__*/React.createElement(PackageThumbnail, {
        thumbnailData: packageData.thumbnail
      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PackageName, {
        packageData: packageData
      }), /*#__PURE__*/React.createElement(Badge, null, packageData.size ? packageData.size : 'new'), /*#__PURE__*/React.createElement(PackageInfo, {
        packageData: packageData,
        onClick: () => this.preventSelectingPackage = true
      })), /*#__PURE__*/React.createElement(PackageBuildDetails, {
        packageData: packageData
      })))), /*#__PURE__*/React.createElement(Cell, {
        key: "status",
        singleLine: true,
        style: { ...selectedStyles,
          ...clickableStyles
        },
        onClick: () => this.props.selectPackage(packageData.path)
      }, /*#__PURE__*/React.createElement(PackageStatuses, {
        packageData: packageData
      })), /*#__PURE__*/React.createElement(Cell, {
        key: "group",
        singleLine: true,
        style: { ...selectedStyles,
          ...clickableStyles
        },
        onClick: () => this.props.selectPackage(packageData.path)
      }, packageData.group), /*#__PURE__*/React.createElement(Cell, {
        key: "actions",
        singleLine: true,
        style: { ...selectedStyles,
          paddingRight: '0px'
        }
      }, actions(packageData))];
    };

    const consoleRow = item => /*#__PURE__*/React.createElement("div", {
      style: {
        width: '100%'
      }
    }, /*#__PURE__*/React.createElement(ActivityLogContainer, null, /*#__PURE__*/React.createElement(ResizableWrapper, {
      size: '270px'
    }, /*#__PURE__*/React.createElement(ResizableConsoleContent, null, /*#__PURE__*/React.createElement(ActivityLogConsole, {
      id: 'activity-log-console|' + item.path,
      className: "activity-log-console",
      onScroll: event => this.onConsoleScroll(event, item.path)
    }, item.logs.map((log, index) => /*#__PURE__*/React.createElement("div", {
      key: index
    }, log)))))));

    const actionButtons = packageData => {
      return /*#__PURE__*/React.createElement(PackageActions, {
        packageData: packageData,
        groups: this.props.groups,
        openConsoleForNewPackage: this.props.openConsoleForNewPackage,
        refreshPage: this.props.refreshPage,
        toggleConsole: this.props.toggleConsole,
        updateActionState: this.props.updateActionState,
        extraActions: this.props.extraActions
      });
    };

    const actions = packageData => {
      const lastAction = packageData.lastAction || {};

      if (['CHECKING', 'QUEUED', 'RUNNING'].includes(lastAction.state)) {
        const actionState = /*#__PURE__*/React.createElement(PackageActionState, _extends({}, lastAction, {
          cancelQueuedPackage: () => this.cancelQueuedPackage(packageData.path)
        }));
        return lastAction.state === 'QUEUED' ? actionState : /*#__PURE__*/React.createElement(Tooltip, {
          content: 'by ' + lastAction.applicantId,
          delay: 0
        }, /*#__PURE__*/React.createElement("div", null, actionState));
      } else {
        return actionButtons(packageData);
      }
    };

    const content = !row.children && row.logs ? consoleRow(row) : packageRow(row);
    const hasPackageLogs = row.children && row.children.length > 0 || ['RUNNING', 'FINISHED'].includes((row.lastAction || {}).state);
    return /*#__PURE__*/React.createElement(Row, {
      hasChildren: hasPackageLogs,
      items: row.children,
      isExpanded: row.isConsoleExpanded,
      onExpand: () => {
        this.preventSelectingPackage = true;
        this.props.toggleConsole(row.path, true);
      },
      onCollapse: () => {
        this.preventSelectingPackage = true;
        this.props.toggleConsole(row.path, false);
      },
      key: row.path
    }, content);
  }

}