diff --git a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx index 7e3dedb5e9..03a34774ae 100644 --- a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx +++ b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx @@ -1,64 +1,25 @@ import React, { Component, PropTypes } from 'react'; -import { take } from 'lodash'; import { Link } from 'react-router'; -import Button from 'components/buttons/Button'; import Icon from 'components/icons/Icon'; import scheduledQueryInterface from 'interfaces/scheduled_query'; const baseClass = 'pack-details-side-panel'; -const DEFAULT_NUM_QUERIES = 6; class ScheduledQueriesSection extends Component { static propTypes = { scheduledQueries: PropTypes.arrayOf(scheduledQueryInterface), }; - constructor (props) { - super(props); - - this.state = { showAllQueries: false }; - } - - onShowAll = () => { - this.setState({ showAllQueries: true }); - - return false; - } - - renderShowMoreQueries = () => { - const { showAllQueries } = this.state; - const scheduledQueryCount = this.props.scheduledQueries.length; - const shouldRenderShowMore = !showAllQueries && scheduledQueryCount > DEFAULT_NUM_QUERIES; - - if (shouldRenderShowMore) { - const { onShowAll } = this; - const numMoreQueries = scheduledQueryCount - DEFAULT_NUM_QUERIES; - const queryText = numMoreQueries === 1 ? 'Query' : 'Queries'; - - return ( -
- {numMoreQueries} More {queryText} - -
- ); - } - - return false; - } - render () { - const { renderShowMoreQueries } = this; const { scheduledQueries } = this.props; - const { showAllQueries } = this.state; - const queriesToRender = showAllQueries ? scheduledQueries : take(scheduledQueries, DEFAULT_NUM_QUERIES); return (

Queries

- {renderShowMoreQueries()}
); } diff --git a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss index fd6035a37c..f4b039d3a2 100644 --- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss +++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss @@ -21,22 +21,6 @@ display: block; } - &__more-queries-section { - @include display(flex); - @include justify-content(space-between); - - color: $link; - font-size: 16px; - text-transform: uppercase; - - button { - color: $link; - font-size: 16px; - font-weight: $normal; - text-transform: uppercase; - } - } - &__pack-icon { color: $text-light; margin-right: 11px; diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx index 714b42994f..07d4d9171f 100644 --- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx +++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx @@ -9,10 +9,7 @@ import SecondarySidePanelContainer from '../SecondarySidePanelContainer'; import { availability, - columnsToRender, displayTypeForDataType, - numAdditionalColumns, - shouldShowAllColumns, } from './helpers'; const baseClass = 'query-side-panel'; @@ -24,25 +21,6 @@ class QuerySidePanel extends Component { selectedOsqueryTable: osqueryTableInterface, }; - componentWillMount () { - const { selectedOsqueryTable } = this.props; - const showAllColumns = shouldShowAllColumns(selectedOsqueryTable); - - this.setState({ showAllColumns }); - } - - componentWillReceiveProps (nextProps) { - const { selectedOsqueryTable } = nextProps; - - if (this.props.selectedOsqueryTable !== selectedOsqueryTable) { - const showAllColumns = shouldShowAllColumns(selectedOsqueryTable); - - this.setState({ showAllColumns }); - } - - return false; - } - onSelectTable = (value) => { const { onOsqueryTableSelect } = this.props; @@ -51,10 +29,6 @@ class QuerySidePanel extends Component { return false; } - onShowAllColumns = () => { - this.setState({ showAllColumns: true }); - } - onSuggestedQueryClick = (query) => { return (evt) => { evt.preventDefault(); @@ -67,8 +41,7 @@ class QuerySidePanel extends Component { renderColumns = () => { const { selectedOsqueryTable } = this.props; - const { showAllColumns } = this.state; - const columns = columnsToRender(selectedOsqueryTable, showAllColumns); + const columns = selectedOsqueryTable.columns; const columnBaseClass = 'query-column-list'; return columns.map((column) => { @@ -84,23 +57,6 @@ class QuerySidePanel extends Component { }); } - renderMoreColumns = () => { - const { selectedOsqueryTable } = this.props; - const { showAllColumns } = this.state; - const { onShowAllColumns } = this; - - if (showAllColumns) { - return false; - } - - return ( -
- {numAdditionalColumns(selectedOsqueryTable)} MORE COLUMNS - -
- ); - } - renderTableSelect = () => { const { onSelectTable } = this; const { selectedOsqueryTable } = this.props; @@ -122,7 +78,6 @@ class QuerySidePanel extends Component { render () { const { renderColumns, - renderMoreColumns, renderTableSelect, } = this; const { selectedOsqueryTable: { description, platform } } = this.props; @@ -154,7 +109,6 @@ class QuerySidePanel extends Component { - {renderMoreColumns()} ); diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.jsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.jsx index f059302d60..4aff836621 100644 --- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.jsx +++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.jsx @@ -53,9 +53,4 @@ describe('QuerySidePanel - component', () => { expect(onOsqueryTableSelect).toHaveBeenCalledWith('groups'); }); - - it('renders a CTA to show more columns', () => { - const component = mount(); - expect(component.text()).toContain('4 MORE COLUMNSSHOW'); - }); }); diff --git a/frontend/components/side_panels/QuerySidePanel/_styles.scss b/frontend/components/side_panels/QuerySidePanel/_styles.scss index ed3c86d4a1..67c026e9e1 100644 --- a/frontend/components/side_panels/QuerySidePanel/_styles.scss +++ b/frontend/components/side_panels/QuerySidePanel/_styles.scss @@ -60,22 +60,6 @@ border-top: 1px solid $accent-light; } - &__more-columns { - @include flex-grow(1); - font-size: 14px; - font-weight: $light; - line-height: 1.43; - letter-spacing: 0.5px; - color: $text-medium; - } - - &__show-columns { - color: $brand; - cursor: pointer; - font-size: 14px; - line-height: 1.43; - } - &__suggestion { @include flex-grow(1); font-size: 14px; diff --git a/frontend/components/side_panels/QuerySidePanel/helpers.js b/frontend/components/side_panels/QuerySidePanel/helpers.js index 697178144a..17a2e298a6 100644 --- a/frontend/components/side_panels/QuerySidePanel/helpers.js +++ b/frontend/components/side_panels/QuerySidePanel/helpers.js @@ -1,14 +1,7 @@ import { includes } from 'lodash'; -const DEFAULT_NUM_COLUMNS_TO_DISPLAY = 5; const ALL_PLATFORMS_AVAILABILITY = ['specs', 'utility']; -export const columnsToRender = (table, showAllColumns) => { - if (showAllColumns) return table.columns; - - return table.columns.slice(0, DEFAULT_NUM_COLUMNS_TO_DISPLAY); -}; - export const displayTypeForDataType = (dataType) => { switch (dataType) { case 'TEXT_TYPE': @@ -22,18 +15,6 @@ export const displayTypeForDataType = (dataType) => { } }; -export const shouldShowAllColumns = (table) => { - const { columns } = table; - - return columns.length <= DEFAULT_NUM_COLUMNS_TO_DISPLAY; -}; - -export const numAdditionalColumns = (table) => { - const { columns } = table; - - return columns.length - DEFAULT_NUM_COLUMNS_TO_DISPLAY; -}; - export const availability = (platform) => { if (!platform) { return []; diff --git a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss index 0aa615ba33..36af533ef0 100644 --- a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss +++ b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss @@ -9,9 +9,9 @@ width: $sidepanel-width; margin-top: $pad-base; margin-left: $pad-base; - min-height: 100%; border-top-left-radius: 3px; padding-top: $pad-base; + min-height: calc(100vh - #{$pad-base} - #{$footer-height}); @include breakpoint(smalldesk) { width: $sidepanel-tablet-width;