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
- {queriesToRender.map((scheduledQuery) => {
+ {scheduledQueries.map((scheduledQuery) => {
return (
-
@@ -67,7 +28,6 @@ class ScheduledQueriesSection extends Component {
);
})}
- {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;