Skip to content

Commit

Permalink
Fixing tail styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexisSouquiere
AlexisSouquiere committed Mar 11, 2024
1 parent 510967b commit cff4632
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 161 deletions.
1 change: 0 additions & 1 deletion client/src/containers/SideBar/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ $sidebarTransition: 0.5s;
color: $gray-100;
}
.active {
color: #005f81;
font-weight: bold;
}
}
Expand Down
318 changes: 158 additions & 160 deletions client/src/containers/Tail/Tail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,179 +219,177 @@ class Tail extends Root {
return (
<div>
<Header title="Live Tail" history={this.props.history} />
<div className="navbar navbar-expand-lg mr-auto khq-data-filter khq-sticky khq-nav">
<BootstrapForm className="form-inline mr-auto khq-form-get">
<Row>
<Col>
<Input
type="text"
name="search"
id="search"
value={search}
label={''}
placeholder={'Search...'}
onChange={e => {
this.onStop();
this.setState({ data: [] });
this.handleChange(e);
}}
wrapperClass={'tail-search-wrapper'}
inputClass={'tail-search-input'}
/>
</Col>
<Col>
<Dropdown className="form-group dropdown bootstrap-select show-tick khq-select show">
<Dropdown.Toggle className="btn dropdown-toggle btn-white">
{selectedTopics.length === 0
? 'Topics'
: selectedTopics.length === 1
? selectedTopics[0]
: `${selectedTopics.length} Topics Selected`}
</Dropdown.Toggle>
<Dropdown.Menu
style={{ maxHeight: '771px', overflow: 'hidden', minHeight: '182px' }}
>
<div className="bs-searchbox">
<input
type="text"
name="dropdownSearch"
id="dropdownSearch"
className="form-control"
autoComplete="off"
role="combobox"
aria-label="Search"
aria-controls="bs-select-1"
aria-autocomplete="list"
aria-expanded="false"
placeholder={'search'}
onChange={this.handleChange}
value={dropdownSearch}
/>
<BootstrapForm>
<Row>
<Col xs={2}>
<Input
type="text"
name="search"
id="search"
value={search}
label={''}
placeholder={'Search...'}
onChange={e => {
this.onStop();
this.setState({ data: [] });
this.handleChange(e);
}}
wrapperClass={'tail-search-wrapper'}
inputClass={'tail-search-input'}
/>
</Col>
<Col xs="auto">
<Dropdown className="form-group dropdown bootstrap-select show-tick khq-select show">
<Dropdown.Toggle className="btn dropdown-toggle btn-white">
{selectedTopics.length === 0
? 'Topics'
: selectedTopics.length === 1
? selectedTopics[0]
: `${selectedTopics.length} Topics Selected`}
</Dropdown.Toggle>
<Dropdown.Menu
style={{ maxHeight: '771px', overflow: 'hidden', minHeight: '182px' }}
>
<div className="bs-searchbox">
<input
type="text"
name="dropdownSearch"
id="dropdownSearch"
className="form-control"
autoComplete="off"
role="combobox"
aria-label="Search"
aria-controls="bs-select-1"
aria-autocomplete="list"
aria-expanded="false"
placeholder={'search'}
onChange={this.handleChange}
value={dropdownSearch}
/>
</div>
<div className="bs-actionsbox">
<div className="btn-group btn-group-sm btn-block">
<button
onClick={() => {
this.onStop();

this.setState({
data: [],
selectedTopics: JSON.parse(JSON.stringify(topics)).filter(topic => {
if (dropdownSearch.length > 0) {
return topic.includes(dropdownSearch);
}
return topic;
})
});
}}
type="button"
className="actions-btn bs-select-all btn btn-light"
>
Select All
</button>
<button
onClick={() => {
this.onStop();
this.setState({ data: [], selectedTopics: [] });
}}
type="button"
className="actions-btn bs-deselect-all btn btn-light"
>
Deselect All
</button>
</div>
<div className="bs-actionsbox">
<div className="btn-group btn-group-sm btn-block">
<button
onClick={() => {
this.onStop();
</div>
{this.renderTopicList()}
</Dropdown.Menu>
</Dropdown>
</Col>

this.setState({
data: [],
selectedTopics: JSON.parse(JSON.stringify(topics)).filter(topic => {
if (dropdownSearch.length > 0) {
return topic.includes(dropdownSearch);
}
return topic;
})
});
}}
type="button"
className="actions-btn bs-select-all btn btn-light"
>
Select All
</button>
<button
<Col xs="auto">
<Dropdown className="form-group dropdown bootstrap-select show-tick khq-select show">
<Dropdown.Toggle className="btn dropdown-toggle btn-white">
Max Records: {maxRecords}
</Dropdown.Toggle>
<Dropdown.Menu
style={{ maxHeight: '771px', overflow: 'hidden', minHeight: '182px' }}
>
{MAX_RECORDS.map(maxRecord => {
return (
<li key={`record_${maxRecord}`}>
<div
onClick={() => {
this.onStop();
this.setState({ data: [], selectedTopics: [] });
this.setState({ maxRecords: maxRecord, data: [] });
}}
type="button"
className="actions-btn bs-deselect-all btn btn-light"
role="option"
className="dropdown-item"
aria-selected="false"
>
Deselect All
</button>
</div>
</div>
{this.renderTopicList()}
</Dropdown.Menu>
</Dropdown>
</Col>

<Col>
<Dropdown className="form-group dropdown bootstrap-select show-tick khq-select show">
<Dropdown.Toggle className="btn dropdown-toggle btn-white">
Max Records: {maxRecords}
</Dropdown.Toggle>
<Dropdown.Menu
style={{ maxHeight: '771px', overflow: 'hidden', minHeight: '182px' }}
>
{MAX_RECORDS.map(maxRecord => {
return (
<li key={`record_${maxRecord}`}>
<div
onClick={() => {
this.onStop();
this.setState({ maxRecords: maxRecord, data: [] });
}}
role="option"
className="dropdown-item"
aria-selected="false"
>
{maxRecord}
</div>
</li>
);
})}
</Dropdown.Menu>
</Dropdown>
</Col>
{maxRecord}
</div>
</li>
);
})}
</Dropdown.Menu>
</Dropdown>
</Col>

<Col xs="auto">
<Col xs="auto">
<button
onClick={() => {
this.onStop();
this.setState({ selectedStatus: STATUS.STARTED }, () => {
this.onStart();
});
}}
className="btn btn-primary"
type="submit"
>
<span className="d-md-none">Search </span>
<i className="fa fa-search" />
</button>
</Col>
<Col xs="auto">
<div className="btn-group actions" role="group">
<button
className={`btn btn-secondary pause ${
selectedStatus === STATUS.STARTED ? '' : 'd-none'
}`}
onClick={() => {
this.onStop();
this.setState({ selectedStatus: STATUS.STARTED }, () => {
this.onStart();
});
this.setState({ selectedStatus: STATUS.PAUSED });
}}
className="btn btn-primary"
type="submit"
>
<span className="d-md-none">Search </span>
<i className="fa fa-search" />
<i className={'fa fa-pause'} />
<span> Pause</span>
</button>
</Col>
<Col>
<div className="btn-group actions" role="group">
<button
className={`btn btn-secondary pause ${
selectedStatus === STATUS.STARTED ? '' : 'd-none'
}`}
onClick={() => {
this.onStop();
this.setState({ selectedStatus: STATUS.PAUSED });
}}
>
<i className={'fa fa-pause'} />
<span> Pause</span>
</button>
<button
className={`btn btn-secondary resume ${
selectedStatus === STATUS.PAUSED ? '' : 'd-none'
}`}
onClick={() => {
this.onStart();
this.setState({ selectedStatus: STATUS.STARTED });
}}
>
<i className="fa fa-play" /> <span> Resume</span>
</button>
<button
className={`btn btn-secondary empty ${
selectedStatus === STATUS.STARTED || selectedStatus === STATUS.PAUSED
? ''
: 'd-none'
}`}
onClick={() => {
this.setState({ data: [] });
}}
>
<i className="fa fa-remove" /> <span> Clear</span>
</button>
</div>
</Col>
</Row>
</BootstrapForm>
</div>
<button
className={`btn btn-secondary resume ${
selectedStatus === STATUS.PAUSED ? '' : 'd-none'
}`}
onClick={() => {
this.onStart();
this.setState({ selectedStatus: STATUS.STARTED });
}}
>
<i className="fa fa-play" /> <span> Resume</span>
</button>
<button
className={`btn btn-secondary empty ${
selectedStatus === STATUS.STARTED || selectedStatus === STATUS.PAUSED
? ''
: 'd-none'
}`}
onClick={() => {
this.setState({ data: [] });
}}
>
<i className="fa fa-remove" /> <span> Clear</span>
</button>
</div>
</Col>
</Row>
</BootstrapForm>
{selectedStatus !== STATUS.STOPPED && (
<Table
history={this.props.history}
Expand Down

0 comments on commit cff4632

Please sign in to comment.