fleet/frontend/pages/ManageControlsPage/Scripts/ScriptBatchDetailsPage/_styles.scss
jacobshandling 166e5ed663
UI: Batch script run detail page (#32333)
## For #31226 

New features:
- Dynamic header for each possible state of a batch script run: Started,
Scheduled, and Finished (corresponds to tabs at
`/controls/scripts/progress`
- Unique tabs for each possible status of hosts targeted by a batch
script run: Ran, Errored, Pending, Incompatible, Canceled.
- Within each tab, sortable, paginated host results with output preview
and execution time.
- View script/run details, cancel a batch, view manage hosts page
filtered for the script batch run and a status.
- Global script batch runs activities and and Scripts progress rows now
navigate to this details page.

Cleanups and improvements:
- Expand tab count badge options using “alert”/“pending” variants across
hosts, policies, and query results.
- Misc cleanups and improvements


![ezgif-1438d4041f694f](https://github.com/user-attachments/assets/2d93127b-dea4-4ca6-abcc-7c888b2e0b93)


- [x] Changes file added for user-visible changes in `changes/`,


- [x] Updated automated tests - new tests tracked for follow-up work
- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2025-08-29 09:37:05 -06:00

47 lines
831 B
SCSS

.script-batch-details-page {
display: flex;
flex-direction: column;
gap: 1rem;
&__header {
margin-bottom: 0;
h2 {
font-weight: $bold;
}
.section-header__sub-title {
display: flex;
align-items: center;
gap: $pad-large;
font-size: $x-small;
}
.when {
display: inline-flex;
align-items: center;
gap: $pad-xsmall;
}
}
&__tab-content {
&__header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: $x-small;
}
}
&__empty {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid $ui-fleet-black-10;
border-radius: 4px;
padding: 40px;
gap: 8px;
font-size: $small;
p {
margin: 0;
@include help-text;
}
}
}