open-nomad/ui/app/templates/components/job-editor/read.hbs

<div class="boxed-section">
    <div class="boxed-section-head">
    Job Definition
    <div class="pull-right" style="display: flex">
        <Tooltip @condition={{unless @data.hasSpecification true false}} @isFullText={{true}} @text="A jobspec file was not submitted when this job was run. You can still view and edit the expanded JSON format.">
            <div class="job-definition-select {{unless @data.hasSpecification " disabled"}}" data-test-select={{@data.view}}>
                <button 
                    class="button is-small is-borderless {{if (eq @data.view "job-spec") "is-active"}}"
                    type="button"
                    {{on "click" (fn @fns.onSelect "job-spec")}}
                >
                    Job Spec
                </button>
                <button 
                    class="button is-small is-borderless {{if (eq @data.view "full-definition") "is-active"}}"
                    type="button"
                    {{on "click" (fn @fns.onSelect "full-definition")}}
                    data-test-select-full
                >
                    Full Definition
                </button>
            </div>        
        </Tooltip>
        <button
            class="button is-light is-compact"
            type="button"
            {{on "click" @fns.onEdit}}
            data-test-edit-job
        >
            Edit
        </button>
        </div>
    </div>
    <div class="boxed-section-body is-full-bleed">
    {{#if (eq @data.view "job-spec")}}
        <div 
            data-test-job-spec-view 
            {{code-mirror
            content=@data.definition
            mode=(if (eq @data.format "json") "javascript" "ruby")
            readOnly=true
            screenReaderLabel="Job specification"          
            theme="hashi-read-only"
            }} 
        />
    {{else}}
        <div
            data-test-json-viewer
            {{code-mirror
            content=@data.definition
            theme="hashi-read-only"
            readOnly=true
            screenReaderLabel="JSON Viewer"
            }}
        />
    {{/if}}
    </div>
    {{#if (and (eq @data.view "job-spec") @data.hasVariables)}}
    <div class="boxed-section" style="margin-top: 10px">
        <div class="boxed-section-head">
            HCL Variable Values
        </div>
        <div class="boxed-section-body is-full-bleed">
            <div
                class="json-viewer is-variable-editor"
                data-test-variable-editor
                {{code-mirror
                    screenReaderLabel="HLC Variables for Job Spec"
                    content=@data.job._newDefinitionVariables
                    mode="ruby"
                    theme="hashi-read-only"
                    readOnly=true
                }}
            />
        </div>
    </div>
    {{/if}}
</div>