diff --git a/ui/app/components/job-page/parts/job-status-panel.hbs b/ui/app/components/job-page/parts/job-status-panel.hbs new file mode 100644 index 000000000000..27002a447a0e --- /dev/null +++ b/ui/app/components/job-page/parts/job-status-panel.hbs @@ -0,0 +1,32 @@ +
+
+

Status

+
+ + +
+
+
+ {{#if (eq this.mode "current")}} +

{{@job.latestDeployment.placedAllocs}}/{{@job.latestDeployment.desiredTotal}} Allocations Running

+
+ {{#each (range 0 @job.latestDeployment.desiredTotal) as |alloc|}} + + {{/each}} +
+ {{/if}} + {{#if (eq this.mode "historical")}} + But what about before? + {{/if}} + {{log @job}} +
+
\ No newline at end of file diff --git a/ui/app/components/job-page/parts/job-status-panel.js b/ui/app/components/job-page/parts/job-status-panel.js new file mode 100644 index 000000000000..64666563cca9 --- /dev/null +++ b/ui/app/components/job-page/parts/job-status-panel.js @@ -0,0 +1,11 @@ +// @ts-check +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; + + +export default class JobPagePartsJobStatusPanelComponent extends Component { + /** + * @type {('current'|'historical')} + */ + @tracked mode = "current" // can be either "current" or "historical" +} \ No newline at end of file diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss index 5eed138687d3..47fbe845686c 100644 --- a/ui/app/styles/components.scss +++ b/ui/app/styles/components.scss @@ -53,3 +53,4 @@ @import './components/authorization'; @import './components/policies'; @import './components/metadata-editor'; +@import './components/job-status-panel'; diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss new file mode 100644 index 000000000000..8bfa5b17e3a6 --- /dev/null +++ b/ui/app/styles/components/job-status-panel.scss @@ -0,0 +1,45 @@ +.job-status-panel { + .select-mode { + border: 1px solid $grey-blue; + background: rgba(0,0,0,0.05); + border-radius: 2px; + display: grid; + gap: 0.5rem; + grid-template-columns: 1fr 1fr; + padding: 0.25rem 0.5rem; + margin-left: 1rem; + + button { + height: auto; + padding: 0 0.5rem; + background: transparent; + transition: 0.1s; + + &:hover { + background: rgba(255,255,255,0.5); + } + + &.is-active { + background: $white; + } + } + } + + .running-allocs-title { + strong { + font-weight: 800; + } + } + + .alloc-representation { + display: grid; + gap: 0.5rem; + grid-template-columns: repeat( auto-fit, minmax(auto, 20px) ); + .represented-allocation { + background: $green; + width: 20px; + height: 20px; + border-radius: 4px; + } + } +} \ No newline at end of file diff --git a/ui/app/templates/components/job-page.hbs b/ui/app/templates/components/job-page.hbs index 2b094a903380..5f42561d5090 100644 --- a/ui/app/templates/components/job-page.hbs +++ b/ui/app/templates/components/job-page.hbs @@ -28,6 +28,11 @@ "job-page/parts/job-client-status-summary" job=@job ) Children=(component "job-page/parts/children" job=@job) + + StatusPanel=(component + "job-page/parts/job-status-panel" job=@job + ) + ) ) }} \ No newline at end of file diff --git a/ui/app/templates/components/job-page/service.hbs b/ui/app/templates/components/job-page/service.hbs index 2927e64233eb..36619f8e26fc 100644 --- a/ui/app/templates/components/job-page/service.hbs +++ b/ui/app/templates/components/job-page/service.hbs @@ -4,6 +4,7 @@ +