lens-ui/app/components/SavedQueriesComponent.js

/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';

import AdhocQueryActions from '../actions/AdhocQueryActions';
import SavedQueryStore from '../stores/SavedQueryStore';
import UserStore from '../stores/UserStore';
import Loader from './LoaderComponent';
import SavedQueryPreview from './SavedQueryPreviewComponent';

class SavedQueries extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      loading: true,
      savedQueries: null,
      page: null,
      totalPages: null
    };

    this._onChange = this._onChange.bind(this);
    this.prev = this.prev.bind(this);
    this.next = this.next.bind(this);
    this._getPaginatedSavedQueries = this._getPaginatedSavedQueries.bind(this);

    let secretToken = UserStore.getUserDetails().secretToken;
    let user = UserStore.getUserDetails().email;
    AdhocQueryActions.getSavedQueries(secretToken, user);
  }

  componentDidMount () {
    SavedQueryStore.addChangeListener(this._onChange);
  }

  componentWillUnmount () {
    SavedQueryStore.removeChangeListener(this._onChange);
  }

  render () {
    let loading = this.state.loading ? <Loader size='4px' margin='2px'/> : null;

    let queries = !this.state.savedQueries ? null :
      Object.keys(this.state.savedQueries).map(queryId => {
        return <SavedQueryPreview key={'saved|' + queryId}
          query={this.state.savedQueries[queryId]} />;
      });

    // no saved queries
    if (!this.state.loading && !queries) {
      queries = (<div className='alert-danger' style={{padding: '8px 5px'}}>
          <strong>Sorry, we couldn&#39;t find any saved queries.</strong>
        </div>);
    }

    if (!this.state.loading && this.state.totalPages == 0) {
      queries = (<div className='alert-danger' style={{padding: '8px 5px'}}>
          <strong>You&#39;ve not saved any query.</strong>
        </div>);
    }

    var pagination = (
      <div className='pull-right'>
        <button onClick={this.prev}
          className='btn btn-link glyphicon glyphicon-triangle-left'>
        </button>
          <small>
            { this.state.page && this.state.totalPages &&
              (this.state.page + ' of ' + this.state.totalPages)
            }
          </small>
        <button onClick={this.next}
          className='btn btn-link glyphicon glyphicon-triangle-right'>
        </button>
      </div>
    );

    return (
      <section>
        <div style={{border: '1px solid #dddddd', borderRadius: '4px',
          padding: '0px 8px 8px 8px'}}>
          <h3 style={{margin: '8px 10px'}}>
            Saved Queries
            {pagination}
          </h3>
          <hr style={{marginTop: '6px'}}/>
          <div>
            {loading}
            {queries}
          </div>
        </div>
      </section>
    );
  }

  prev () {
    if (this.state.page > 1) this._onChange(this.state.page - 1);
  }

  next () {
    if (this.state.page < this.state.totalPages) {
      this._onChange(this.state.page + 1);
    }
  }

  _onChange (page) {
    // done to filter success/error messages from store
    if (typeof page === 'object') page = this.state.page;

    var PAGE_SIZE = 10;
    page = page || this.state.page || 1;
    var state = {
      savedQueries: this._getPaginatedSavedQueries(page, PAGE_SIZE),
      page: page,
      totalPages: Math.ceil(SavedQueryStore.getTotalRecords() / PAGE_SIZE)
    };
    state.loading = !!(!state.savedQueries && state.totalPages);
    this.setState(state);
  }

  _getPaginatedSavedQueries (pageNumber, pageSize) {
    if (!pageNumber && !pageSize) return;

    var token = UserStore.getUserDetails().secretToken;
    var email = UserStore.getUserDetails().email;
    var savedQueries = SavedQueryStore.getSavedQueries();
    var savedQueriesLength = savedQueries && Object.keys(savedQueries).length;
    var totalQueries = SavedQueryStore.getTotalRecords();
    var relevantSavedQueries = null;
    var startIndex = (pageNumber - 1) * pageSize;
    if (savedQueriesLength > startIndex) {
      relevantSavedQueries = Object.keys(savedQueries)
        .slice(startIndex, startIndex + pageSize);
      if ((totalQueries != savedQueriesLength) && (relevantSavedQueries.length < pageSize) && totalQueries) {
        // call backend
        AdhocQueryActions.getSavedQueries(token, email, {
          offset: startIndex,
          pageSize: pageSize
        });

        this.setState({loading: true});
      }
    } else {
      // trigger action
      if (!totalQueries) return;

      AdhocQueryActions.getSavedQueries(token, email, {
        offset: startIndex,
        pageSize: pageSize
      });

      this.setState({loading: true});
    }

    var filteredQueries = relevantSavedQueries && relevantSavedQueries.map(id => {
      return savedQueries[id];
    });

    return filteredQueries;
  }

}

export default SavedQueries;