fleet/frontend/pages/ManageControlsPage/Scripts/cards/ScriptBatchProgress/_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

56 lines
960 B
SCSS

.script-batch-progress {
&__status-count {
font-weight: $bold;
margin: $pad-medium 0;
}
.paginated-list__row {
padding: 16px 24px;
}
&__row-left {
display: flex;
flex-direction: column;
gap: 4px;
}
&__row-when {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
@include help-text;
}
&__row-right {
display: flex;
gap: 16px;
align-items: center;
}
&__row-errors {
display: flex;
gap: 4px;
align-items: center;
@include help-text;
}
&__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;
}
}
.paginated-list .loading-overlay {
position: initial;
top: initial;
bottom: initial;
left: initial;
right: initial;
}
}