katello 3.6.0.1.rc2 → 3.7.0.rc1

data/webpack/scenes/RedHatRepositories/components/EnabledRepository.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import EnabledRepository from './EnabledRepository.js';
+
+storiesOf('RedHat Repositories Page', module).add('Enabled Repository', () => (
+  <EnabledRepository
+    id={638}
+    name="Red Hat Enterprise Linux 6 Server Kickstart x86_64 6.8"
+    releasever="6.8"
+    arch="x86_64"
+    type="rpm"
+  />
+));

data/webpack/scenes/RedHatRepositories/components/RepositorySet.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListView } from 'patternfly-react';
+
+import RepositoryTypeIcon from './RepositoryTypeIcon';
+import RepositorySetRepositories from './RepositorySetRepositories';
+
+const RepositorySet = ({
+  type, id, name, label, product,
+}) => (
+  <ListView.Item
+    id={id}
+    className="listViewItem--listItemVariants"
+    description={label}
+    heading={name}
+    leftContent={<RepositoryTypeIcon id={id} type={type} />}
+    stacked
+    hideCloseIcon
+  >
+    <RepositorySetRepositories contentId={id} productId={product.id} />
+  </ListView.Item>
+);
+
+RepositorySet.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  product: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default RepositorySet;

data/webpack/scenes/RedHatRepositories/components/RepositorySetRepositories.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Alert, Spinner } from 'patternfly-react';
+
+import loadRepositorySetRepos from '../../../redux/actions/RedHatRepositories/repositorySetRepositories';
+import RepositorySetRepository from './RepositorySetRepository';
+
+class RepositorySetRepositories extends Component {
+  componentDidMount() {
+    const { contentId, productId } = this.props;
+
+    if (this.props.data.loading) {
+      this.props.loadRepositorySetRepos(contentId, productId);
+    }
+  }
+
+  render() {
+    const { data } = this.props;
+
+    if (data.error) {
+      return (
+        <Alert type="danger">
+          <span>{data.error.displayMessage}</span>
+        </Alert>
+      );
+    }
+
+    const repos = data.repositories
+      .filter(({ enabled }) => !enabled)
+      .map(repo => <RepositorySetRepository key={repo.arch + repo.releasever} {...repo} />);
+
+    return (
+      <Spinner loading={data.loading}>
+        {repos.length ? repos : <div>{__('No repositories available.')}</div>}
+      </Spinner>
+    );
+  }
+}
+
+RepositorySetRepositories.propTypes = {
+  loadRepositorySetRepos: PropTypes.func.isRequired,
+  contentId: PropTypes.number.isRequired,
+  productId: PropTypes.number.isRequired,
+  data: PropTypes.shape({
+    loading: PropTypes.bool.isRequired,
+    repositories: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+};
+
+const mapStateToProps = (
+  { katello: { redHatRepositories: { repositorySetRepositories } } },
+  props,
+) => ({
+  data: repositorySetRepositories[props.contentId] || {
+    loading: true,
+    repositories: [],
+    error: null,
+  },
+});
+
+export default connect(mapStateToProps, {
+  loadRepositorySetRepos,
+})(RepositorySetRepositories);

data/webpack/scenes/RedHatRepositories/components/RepositorySetRepository.js

@@ -0,0 +1,127 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ListView, Spinner, OverlayTrigger, Tooltip, Icon } from 'patternfly-react';
+import { connect } from 'react-redux';
+
+import { setRepositoryEnabled } from '../../../redux/actions/RedHatRepositories/repositorySetRepositories';
+import '../index.scss';
+import api from '../../../services/api';
+
+class RepositorySetRepository extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { loading: false };
+
+    this.setEnabled = (response) => {
+      this.setState({ loading: false });
+
+      const { data: { output: { repository: { id, name, content_type: type } } } } = response;
+
+      const {
+        productId, contentId, arch, releasever,
+      } = this.props;
+
+      const enabledRepo = {
+        productId,
+        contentId,
+        id,
+        name,
+        type,
+        arch,
+        releasever,
+      };
+
+      this.props.setRepositoryEnabled(enabledRepo);
+    };
+
+    this.enableRepository = () => {
+      this.setState({ loading: true });
+
+      const {
+        productId, contentId, arch, releasever,
+      } = this.props;
+
+      const url = `/products/${productId}/repository_sets/${contentId}/enable`;
+
+      const data = {
+        id: contentId,
+        product_id: productId,
+        basearch: arch,
+        releasever: releasever || undefined,
+      };
+
+      api
+        .put(url, data)
+        .then(this.setEnabled)
+        .catch(({ response: { data: error } }) => {
+          this.setState({ loading: false, error });
+        });
+    };
+  }
+
+  render() {
+    const { arch, releasever } = this.props;
+
+    return (
+      <ListView.Item
+        heading={`${arch} ${releasever}`}
+        className="list-item-with-divider"
+        leftContent={
+          this.state.error ? (
+            <div className="list-error-danger">
+              <Icon name="times-circle-o" />
+            </div>
+          ) : null
+        }
+        additionalInfo={
+          this.state.error
+            ? [
+              <ListView.InfoItem key="error" stacked className="list-error-danger">
+                {this.state.error.displayMessage}
+              </ListView.InfoItem>,
+              ]
+            : null
+        }
+        actions={
+          <Spinner loading={this.state.loading} inline>
+            <OverlayTrigger
+              overlay={<Tooltip id="enable">Enable</Tooltip>}
+              placement="bottom"
+              trigger={['hover', 'focus']}
+              rootClose={false}
+            >
+              <button
+                onClick={this.enableRepository}
+                style={{
+                  backgroundColor: 'initial',
+                  border: 'none',
+                  color: '#0388ce',
+                }}
+              >
+                <i className={cx('fa-2x', 'fa fa-plus-circle')} />
+              </button>
+            </OverlayTrigger>
+          </Spinner>
+        }
+        stacked
+      />
+    );
+  }
+}
+
+RepositorySetRepository.propTypes = {
+  contentId: PropTypes.number.isRequired,
+  productId: PropTypes.number.isRequired,
+  arch: PropTypes.string,
+  releasever: PropTypes.string,
+  setRepositoryEnabled: PropTypes.func.isRequired,
+};
+
+RepositorySetRepository.defaultProps = {
+  releasever: '',
+  arch: __('Unspecified'),
+};
+
+export default connect(null, { setRepositoryEnabled })(RepositorySetRepository);

data/webpack/scenes/RedHatRepositories/components/RepositoryTypeIcon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListView, OverlayTrigger, Tooltip } from 'patternfly-react';
+
+import { getTypeIcon } from '../../../services/index';
+
+export default class RepositoryTypeIcon extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.tooltipId = `type-tooltip-${props.id}`;
+  }
+
+  render() {
+    const typeIcon = getTypeIcon(this.props.type);
+
+    return (
+      <OverlayTrigger
+        overlay={<Tooltip id={this.tooltipId}>{this.props.type}</Tooltip>}
+        placement="bottom"
+        trigger={['hover', 'focus']}
+        rootClose={false}
+      >
+        <ListView.Icon name={typeIcon.name} size="sm" type={typeIcon.type} />
+      </OverlayTrigger>
+    );
+  }
+}
+
+RepositoryTypeIcon.propTypes = {
+  id: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+};

data/webpack/scenes/RedHatRepositories/components/Search.js

@@ -0,0 +1,91 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { Component } from 'react';
+import { DropdownButton, MenuItem } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+import '../index.scss';
+import Search from '../../../components/Search/index';
+import { orgId } from '../../../services/api';
+
+class RepositorySearch extends Component {
+  constructor(props) {
+    super(props);
+    this.dropDownItems = [
+      {
+        key: 'available',
+        endpoint: 'repository_sets',
+        title: 'Available',
+      },
+      {
+        key: 'enabled',
+        endpoint: 'enabled_repositories',
+        title: 'Enabled',
+      },
+      {
+        key: 'both',
+        endpoint: false,
+        title: 'Both',
+      },
+    ];
+    this.state = { searchList: this.dropDownItems[0] };
+    this.onSearch = this.onSearch.bind(this);
+    this.getAutoCompleteParams = this.getAutoCompleteParams.bind(this);
+  }
+
+  onSearch(search) {
+    this.props.onSearch(search);
+  }
+
+  onSelectSearchList(searchList) {
+    this.setState({ searchList });
+    this.props.onSelectSearchList(searchList.key);
+  }
+
+  getAutoCompleteParams(search) {
+    const params = {
+      organization_id: orgId,
+      search,
+    };
+
+    if (this.state.searchList.key === 'enabled') {
+      params.enabled = true;
+    }
+
+    return {
+      endpoint: '/repository_sets/auto_complete_search',
+      params,
+    };
+  }
+
+  render() {
+    return (
+      <div style={{ display: 'flex' }}>
+        <DropdownButton title={this.state.searchList.title} id="search-list-select">
+          {this.dropDownItems
+            .filter(({ key }) => key !== this.state.searchList.key)
+            .map(({ key, title, ...rest }) => (
+              <MenuItem
+                key={key}
+                onClick={() =>
+                  this.onSelectSearchList({ key, title, ...rest })
+                }
+              >
+                {title}
+              </MenuItem>
+            ))}
+        </DropdownButton>
+        <Search
+          onSearch={this.onSearch}
+          getAutoCompleteParams={this.getAutoCompleteParams}
+        />
+      </div>
+    );
+  }
+}
+
+RepositorySearch.propTypes = {
+  onSearch: PropTypes.func.isRequired,
+  onSelectSearchList: PropTypes.func.isRequired,
+};
+
+export default RepositorySearch;

data/webpack/scenes/RedHatRepositories/components/SearchBar.js

@@ -0,0 +1,145 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Button } from 'patternfly-react';
+import { Form, FormGroup } from 'react-bootstrap';
+
+import { loadEnabledRepos } from '../../../redux/actions/RedHatRepositories/enabled';
+import { loadRepositorySets } from '../../../redux/actions/RedHatRepositories/sets';
+
+import api from '../../../services/api';
+import Search from './Search';
+import MultiSelect from '../../../components/MultiSelect/index';
+
+const filterOptions = [
+  { value: 'rpm', label: __('RPM') },
+  { value: 'sourceRpm', label: __('Source RPM') },
+  { value: 'debugRpm', label: __('Debug RPM') },
+  { value: 'kickstarter', label: __('Kickstarter') },
+  { value: 'ostree', label: __('OSTree') },
+  { value: 'beta', label: __('Beta') },
+  { value: 'other', label: __('Other') },
+];
+
+class SearchBar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      query: '',
+      searchList: 'available',
+      filters: [],
+    };
+
+    this.onSearch = this.onSearch.bind(this);
+    this.onSelectSearchList = this.onSelectSearchList.bind(this);
+  }
+
+  onSearch(query) {
+    this.updateSearch({ query });
+  }
+
+  onSelectSearchList(searchList) {
+    this.updateSearch({ searchList });
+  }
+
+  onSelectFilterType(filters) {
+    this.updateSearch({ filters });
+  }
+
+  updateSearch(stateUpdate = {}) {
+    const newState = {
+      ...this.state,
+      ...stateUpdate,
+    };
+    this.setState(stateUpdate);
+
+    const clearSearch = stateUpdate.searchList ? {} : null;
+
+    if (newState.searchList === 'available') {
+      this.reloadRepos(newState, clearSearch);
+    } else if (newState.searchList === 'enabled') {
+      this.reloadRepos(clearSearch, newState);
+    } else {
+      this.reloadRepos(newState, newState);
+    }
+  }
+
+  reloadRepos(repoSetsSearch, enabledSearch) {
+    if (repoSetsSearch !== null) {
+      const setsParams = {
+        perPage: this.props.repositorySets.pagination.perPage,
+        search: repoSetsSearch,
+      };
+      this.props.loadRepositorySets(setsParams);
+    }
+
+    if (enabledSearch !== null) {
+      const enabledParams = {
+        perPage: this.props.enabledRepositories.pagination.perPage,
+        search: enabledSearch,
+      };
+      this.props.loadEnabledRepos(enabledParams, enabledSearch);
+    }
+  }
+
+  render() {
+    const { repoParams } = this.props;
+
+    return (
+      <Form className="toolbar-pf-actions">
+        <FormGroup className="toolbar-pf-filter">
+          <Search onSearch={this.onSearch} onSelectSearchList={this.onSelectSearchList} />
+        </FormGroup>
+
+        <MultiSelect
+          value={this.state.filters}
+          options={filterOptions}
+          onChange={(e) => {
+            const values = [...e.target.options]
+              .filter(({ selected }) => selected)
+              .map(({ value }) => value);
+            this.onSelectFilterType(values);
+          }}
+        />
+
+        <FormGroup>
+          <Button
+            className="export-csv-button"
+            onClick={() => { api.open('/repositories.csv', repoParams); }}
+          >
+            {__('Export Enabled as CSV')}
+          </Button>
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+SearchBar.propTypes = {
+  loadEnabledRepos: PropTypes.func.isRequired,
+  loadRepositorySets: PropTypes.func.isRequired,
+  repoParams: PropTypes.shape({}).isRequired,
+  enabledRepositories: PropTypes.shape({
+    pagination: PropTypes.shape({
+      perPage: PropTypes.number,
+    }),
+  }).isRequired,
+  repositorySets: PropTypes.shape({
+    pagination: PropTypes.shape({
+      perPage: PropTypes.number,
+    }),
+  }).isRequired,
+};
+
+const mapStateToProps = ({ katello: { redHatRepositories: { enabled, sets } } }) => ({
+  enabledRepositories: enabled,
+  repositorySets: sets,
+});
+
+export default connect(mapStateToProps, {
+  loadEnabledRepos,
+  loadRepositorySets,
+})(SearchBar);