foreman_remote_execution 14.1.4 → 15.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a300266f1fb00313f0bc59f37573802bbcf230fca5e9867bcee11bdc8279a93
-  data.tar.gz: bc52a77d346cd77c834fd134a872fab19c8b12fc98c30f27deba4a7a64a776b0
+  metadata.gz: f4dc9acfc2bf412af59bead68426f726248f020964fa433156bb341eefcee3ec
+  data.tar.gz: cf88f8f262a83fb638e855043be9f5f5d9bd7f3c1b365131b1906ace271eb288
 SHA512:
-  metadata.gz: ba0a20114b7d30cf6cc7fe236b34794ab98163cc9bbd6d78a02e3573c996b2fb0eaccdf96af081cfc96afb0c8a95af8ad9ec906d2b8e103806ebe6d1d74bc413
-  data.tar.gz: fe6aa4f48b414729aa0678589b4dc55eab153b5c6505edb21700601d7bb993b4cae2465ccb33eeb24becb12c7b68be45d7a88bea67507b8917b2ad23acf738ba
+  metadata.gz: a50e49596517959f17ba39dd99b4729942051991ae3488f6a56e28505464dd422fd952ad1a98e3c5174d6b36c8a0658b827a69f4b8833c40707119414c39aca4
+  data.tar.gz: a50742f65d872373f2b1bc1a7aee03323adc42c6a667a18d12b40b0895c3ffc711658d3a300dab05163688f999f7d7c7b2546ea3219107ba8a0b2897c02f4923

data/app/controllers/api/v2/job_invocations_controller.rb

@@ -22,6 +22,8 @@ module Api
       param :host_status, :bool, required: false, desc: N_('Show Job status for the hosts')
       def show
         set_hosts_and_template_invocations
+        @job_organization = Taxonomy.find_by(id: @job_invocation.task.input[:current_organization_id])
+        @job_location = Taxonomy.find_by(id: @job_invocation.task.input[:current_location_id])
         if params[:host_status] == 'true'
           set_statuses_and_smart_proxies
         end
@@ -266,7 +268,13 @@ module Api
       end
 
       def set_hosts_and_template_invocations
+        @pattern_template_invocations = @job_invocation.pattern_template_invocations.includes(:input_values)
         @hosts = @job_invocation.targeting.hosts.authorized(:view_hosts, Host)
+
+        unless params[:search].nil?
+          @hosts = @hosts.joins(:template_invocations)
+                         .where(:template_invocations => { :job_invocation_id => @job_invocation.id})
+        end
         @template_invocations = @job_invocation.template_invocations
                                                .where(host: @hosts)
                                                .includes(:input_values)

data/app/controllers/template_invocations_controller.rb

@@ -1,5 +1,10 @@
 class TemplateInvocationsController < ApplicationController
   include Foreman::Controller::AutoCompleteSearch
+  include RemoteExecutionHelper
+  include JobInvocationsHelper
+
+  before_action :find_job_invocation, :only => %w{show_template_invocation_by_host}
+  before_action :find_host, :only => %w{show_template_invocation_by_host}
 
   def controller_permission
     'job_invocations'
@@ -17,4 +22,56 @@ class TemplateInvocationsController < ApplicationController
     @line_sets = @line_sets.drop_while { |o| o['timestamp'].to_f <= @since } if @since
     @line_counter = params[:line_counter].to_i
   end
+
+  def show_template_invocation_by_host
+    @template_invocation = @job_invocation.template_invocations.find { |template_inv| template_inv.host_id == @host.id }
+    if @template_invocation.nil?
+      render :json => { :error => _('Template invocation not found') }, :status => :not_found
+    end
+    @template_invocation_task = @template_invocation.run_host_job_task
+
+    lines = normalize_line_sets(@template_invocation_task.main_action.live_output)
+    transformed_input_values = @template_invocation.input_values.joins(:template_input).map do |input_value|
+      {
+        name: input_value&.template_input&.name,
+        value: input_safe_value(input_value),
+      }
+    end
+
+    auto_refresh = @job_invocation.task.try(:pending?)
+    finished = @job_invocation.status_label == 'failed' || @job_invocation.status_label == 'succeeded' || @job_invocation.status_label == 'cancelled'
+    render :json => { :output => lines, :preview => template_invocation_preview(@template_invocation, @host), :input_values => transformed_input_values, :job_invocation_description => @job_invocation.description, :task_id => @template_invocation_task.id, :task_cancellable => @template_invocation_task.cancellable?, :host_name => @host.name, :permissions => {
+      :view_foreman_tasks => User.current.allowed_to?(:view_foreman_tasks),
+      :cancel_job_invocations => User.current.allowed_to?(:cancel_job_invocations),
+      :execute_jobs => User.current.allowed_to?(:create_job_invocations) && (!@host.infrastructure_host? || User.current.can?(:execute_jobs_on_infrastructure_hosts)),
+
+    },
+    :auto_refresh => auto_refresh, :finished => finished}, status: :ok
+  end
+
+  private
+
+  def find_job_invocation
+    @job_invocation = JobInvocation.find(params[:id])
+  rescue ActiveRecord::RecordNotFound
+    render :json => { :error => { :message => format(_("Job with id '%{id}' was not found"), :id => params['id']) } }, :status => :not_found
+  end
+
+  def find_host
+    @host = Host.find(params[:host_id])
+  rescue ActiveRecord::RecordNotFound
+    render :json => { :error => { :message => format(_("Host with id '%{id}' was not found"), :id => params['host_id']) } }, :status => :not_found
+  end
+
+  def template_invocation_preview(template_invocation, host)
+    renderer = InputTemplateRenderer.new(template_invocation.template, host, template_invocation)
+    output = load_template_from_task(template_invocation, host) || renderer.preview
+    if output
+      {:plain => output}
+    else
+      {status: :bad_request,
+        plain: renderer.error_message }
+    end
+  end
+
 end

data/app/controllers/ui_job_wizard_controller.rb

@@ -55,9 +55,12 @@ class UIJobWizardController < Api::V2::BaseController
 
   def resources
     resource_type = params[:resource]
-    resource_list = resource_type.constantize.authorized("view_#{resource_type.underscore.pluralize}").all.map { |r| {:name => r.to_s, :id => r.id } }.select { |v| v[:name] =~ /#{params[:name]}/ }
-    render :json => { :results =>
-      resource_list.sort_by { |r| r[:name] }.take(100), :subtotal => resource_list.count}
+    attribute_name = resource_type.constantize.attribute_name
+    resource_list = resource_type.constantize.authorized("view_#{resource_type.underscore.pluralize}")
+                                 .search_for("#{attribute_name} ~ \"#{params[:name]}\"")
+                                 .reorder(attribute_name)
+                                 .limit(Setting[:entries_per_page] + 1).pluck(attribute_name, :id).map { |name, id| { name: name, id: id } }
+    render :json => { :results => resource_list, :subtotal => resource_list.count }
   end
 
   def job_invocation

data/app/helpers/remote_execution_helper.rb

@@ -99,12 +99,11 @@ module RemoteExecutionHelper
         :disabled => !task.cancellable?,
         :method => :post)
     end
-    if Setting[:lab_features]
-      buttons << link_to(_('New UI'), new_job_invocation_detail_path(:id => job_invocation.id),
-        class: 'btn btn-default',
-        title: _('Switch to the new job invocation detail UI'))
-    end
-    return buttons
+    buttons << link_to(_('New UI'), new_job_invocation_detail_path(:id => job_invocation.id),
+      class: 'btn btn-default',
+      title: _('Switch to the new job invocation detail UI'))
+
+    buttons
   end
 
   def template_invocation_task_buttons(task, invocation)

data/app/views/api/v2/job_invocations/base.json.rabl

@@ -1,6 +1,6 @@
 object @job_invocation
 
-attributes :id, :description, :job_category, :targeting_id, :status, :start_at, :status_label, :ssh_user, :time_to_pickup
+attributes :id, :description, :job_category, :targeting_id, :status, :start_at, :status_label, :ssh_user, :time_to_pickup, :concurrency_level, :execution_timeout_interval
 
 node do |invocation|
   pattern_template = invocation.pattern_template_invocations.first

data/app/views/api/v2/job_invocations/hosts.json.rabl

@@ -1,6 +1,6 @@
 collection @hosts
 
-attribute :name, :operatingsystem_id, :operatingsystem_name, :hostgroup_id, :hostgroup_name
+attribute :name, :operatingsystem_id, :operatingsystem_name, :hostgroup_id, :hostgroup_name, :id
 
 node :job_status do |host|
   @host_statuses[host.id]

data/app/views/api/v2/job_invocations/main.json.rabl

@@ -16,7 +16,7 @@ node do |invocation|
 end
 
 child :targeting do
-  attributes :bookmark_id, :search_query, :targeting_type, :user_id, :status, :status_label,
+  attributes :bookmark_id, :bookmark_name, :search_query, :targeting_type, :user_id, :status, :status_label,
     :randomized_ordering
 
   child @hosts => :hosts do

data/app/views/api/v2/job_invocations/show.json.rabl

@@ -1,3 +1,21 @@
 object @job_invocation
 
+child @pattern_template_invocations => :pattern_template_invocations do
+  attributes :template_id, :template_name, :host_id
+  child :input_values do
+    attributes :template_input_name, :template_input_id
+    node :value do |iv|
+      iv.template_input.respond_to?(:hidden_value) && iv.template_input.hidden_value? ? '*' * 5 : iv.value
+    end
+  end
+end
+
 extends 'api/v2/job_invocations/main'
+
+node :job_organization do
+  @job_organization
+end
+
+node :job_location do
+  @job_location
+end

data/app/views/templates/script/convert2rhel_analyze.erb

@@ -7,17 +7,17 @@ provider_type: script
 kind: job_template
 template_inputs:
 - name: ELS
-  required: true
+  required: false
   input_type: user
   description: Use an Extended Lifecycle Support (ELS) add-on subscription
   advanced: false
   value_type: plain
-  options: "true\nfalse"
-  default: "true"
+  options: "yes\r\nno"
+  default: "no"
   hidden_value: false
 %>
 <%-
-  els = input('ELS') == "true" ? "--els" : ""
+  els = input('ELS') == "yes" ? "--els" : ""
 -%>
 <% if @host.operatingsystem.family == 'Redhat' -%>
 if ! [ $(id -u) -eq 0 ]; then

data/config/routes.rb

@@ -23,6 +23,8 @@ Rails.application.routes.draw do
   match 'old/job_invocations/new', to: 'job_invocations#new', via: [:get], as: 'form_new_job_invocation'
   match 'old/job_invocations/:id/rerun', to: 'job_invocations#rerun', via: [:get, :post], as: 'form_rerun_job_invocation'
   match 'experimental/job_invocations_detail/:id', to: 'react#index', :via => [:get], as: 'new_job_invocation_detail'
+  match 'job_invocations_detail/:id/host_invocation/:host_id', to: 'react#index', :via => [:get], as: 'new_job_invocation_detail_by_host'
+  get 'show_template_invocation_by_host/:host_id/job_invocation/:id', to: 'template_invocations#show_template_invocation_by_host'
 
   resources :job_invocations, :only => [:create, :show, :index] do
     collection do

data/lib/foreman_remote_execution/engine.rb

@@ -35,7 +35,7 @@ module ForemanRemoteExecution
     initializer 'foreman_remote_execution.register_plugin', before: :finisher_hook do |app|
       app.reloader.to_prepare do
         Foreman::Plugin.register :foreman_remote_execution do
-          requires_foreman '>= 3.13'
+          requires_foreman '>= 3.14'
           register_global_js_file 'global'
           register_gettext
 
@@ -170,9 +170,9 @@ module ForemanRemoteExecution
             permission :lock_job_templates, { :job_templates => [:lock, :unlock] }, :resource_type => 'JobTemplate'
             permission :create_job_invocations, { :job_invocations => [:new, :create, :legacy_create, :refresh, :rerun, :preview_hosts],
                                                   'api/v2/job_invocations' => [:create, :rerun] }, :resource_type => 'JobInvocation'
-            permission :view_job_invocations, { :job_invocations => [:index, :chart, :show, :auto_complete_search, :preview_job_invocations_per_host], :template_invocations => [:show],
+            permission :view_job_invocations, { :job_invocations => [:index, :chart, :show, :auto_complete_search, :preview_job_invocations_per_host], :template_invocations => [:show, :show_template_invocation_by_host],
                                                 'api/v2/job_invocations' => [:index, :show, :output, :raw_output, :outputs, :hosts] }, :resource_type => 'JobInvocation'
-            permission :view_template_invocations, { :template_invocations => [:show],
+            permission :view_template_invocations, { :template_invocations => [:show, :template_invocation_preview, :show_template_invocation_by_host],
                                                     'api/v2/template_invocations' => [:template_invocations], :ui_job_wizard => [:job_invocation] }, :resource_type => 'TemplateInvocation'
             permission :create_template_invocations, {}, :resource_type => 'TemplateInvocation'
             permission :execute_jobs_on_infrastructure_hosts, {}, :resource_type => 'JobInvocation'

data/lib/foreman_remote_execution/version.rb

@@ -1,3 +1,3 @@
 module ForemanRemoteExecution
-  VERSION = '14.1.4'.freeze
+  VERSION = '15.0.0'.freeze
 end

data/webpack/JobInvocationDetail/JobAdditionInfo.js

@@ -0,0 +1,214 @@
+/* eslint-disable max-lines */
+/* eslint-disable camelcase */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ExpandableSection,
+  DataList,
+  DataListCell,
+  DataListItemCells,
+  DataListItem,
+  DataListItemRow,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { TARGETING_TYPES } from './JobInvocationConstants';
+
+const ItemsParser = ({ items }) => (
+  <>
+    {items.map(
+      ({ title, value, wrappedValue }, index) =>
+        value && (
+          <DataListItem key={index}>
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={1} key={0}>
+                    {title}
+                  </DataListCell>,
+                  <DataListCell width={4} key={1}>
+                    {wrappedValue || value}
+                  </DataListCell>,
+                ]}
+              />
+            </DataListItemRow>
+          </DataListItem>
+        )
+    )}
+  </>
+);
+const Schedule = ({ data }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const {
+    concurrency_level,
+    scheduling,
+    time_to_pickup,
+    execution_timeout_interval,
+  } = data;
+  if (
+    !concurrency_level &&
+    !scheduling &&
+    !time_to_pickup &&
+    !execution_timeout_interval
+  )
+    return null;
+  const items = [
+    { title: __('Concurrency level limited to'), value: concurrency_level },
+    { title: __('Scheduled to start before'), value: scheduling?.start_before },
+    { title: __('Scheduled to start at'), value: scheduling?.start_at },
+    {
+      title: __('Timeout to kill after'),
+      value: execution_timeout_interval,
+      wrappedValue: `${execution_timeout_interval} ${__('seconds')}`,
+    },
+    {
+      title: __('Time to pickup'),
+      value: time_to_pickup,
+      wrappedValue: `${time_to_pickup} ${__('seconds')}`,
+    },
+  ];
+  return (
+    <ExpandableSection
+      toggleText={__('Schedule')}
+      onToggle={setIsExpanded}
+      isExpanded={isExpanded}
+    >
+      <DataList isCompact>
+        <ItemsParser items={items} />
+      </DataList>
+    </ExpandableSection>
+  );
+};
+const Recurring = ({ data }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { recurrence } = data;
+
+  if (!recurrence) return null;
+  const items = [
+    {
+      title: __('ID'),
+      value: recurrence.id,
+      wrappedValue: (
+        <a href={`/foreman_tasks/recurring_logics/${recurrence.id}`}>
+          {recurrence.id}
+        </a>
+      ),
+    },
+    { title: __('Cron line'), value: recurrence.cron_line },
+    // TODO { title:__('Action') , value: {format_task_input(recurring_logic.tasks.last)} },
+    { title: __('Last occurrence'), value: recurrence.last_occurrence },
+    { title: __('Next occurrence'), value: recurrence.next_occurrence },
+    { title: __('Current iteration'), value: recurrence.iteration },
+    { title: __('Iteration limit'), value: recurrence.max_iteration },
+    { title: __('Repeat until'), value: recurrence.end_time },
+    // TODO { title:__('State') , value: {recurring_logic_state(recurring_logic)}  },
+    { title: __('Purpose'), value: recurrence.purpose },
+    { title: __('Task count'), value: recurrence.task_count },
+  ];
+  return (
+    <ExpandableSection
+      toggleText={__('Recurring logic')}
+      onToggle={setIsExpanded}
+      isExpanded={isExpanded}
+    >
+      <DataList isCompact>
+        <ItemsParser items={items} />
+      </DataList>
+    </ExpandableSection>
+  );
+};
+const TargetHosts = ({ data }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const {
+    targeting,
+    job_location: location,
+    job_organization: organization,
+  } = data;
+
+  const targetingSelectioning = targeting.bookmark_name
+    ? `${__('Bookmark')} ${targeting.bookmark_name}`
+    : __('Manual selection');
+  const items = [
+    {
+      title: __('Organization'),
+      value: true,
+      wrappedValue: organization || __('Any organization'),
+    },
+    {
+      title: __('Location'),
+      value: true,
+      wrappedValue: location || __('Any location'),
+    },
+    {
+      title: __('Execution order'),
+      value: true,
+      wrappedValue: targeting.randomized_ordering
+        ? __('Randomized')
+        : __('Alphabetical'),
+    },
+  ];
+  return (
+    <ExpandableSection
+      toggleText={__('Target Hosts')}
+      onToggle={setIsExpanded}
+      isExpanded={isExpanded}
+    >
+      <span>{targetingSelectioning}</span>{' '}
+      <span>
+        {__('using ')}
+        <b>{TARGETING_TYPES[targeting.targeting_type].toLowerCase()}</b>
+      </span>
+      <pre>{targeting.search_query}</pre>
+      <DataList isCompact>
+        <ItemsParser items={items} />
+      </DataList>
+    </ExpandableSection>
+  );
+};
+const Inputs = ({ data }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const inputs =
+    data?.pattern_template_invocations?.[0]?.template_invocation_input_values;
+
+  if (!inputs) return null;
+  return (
+    <ExpandableSection
+      toggleText={__('User Inputs')}
+      onToggle={setIsExpanded}
+      isExpanded={isExpanded}
+    >
+      <DataList isCompact>
+        <ItemsParser
+          items={inputs.map(({ template_input_name: title, value }) => ({
+            title,
+            value: true,
+            wrappedValue: value,
+          }))}
+        />
+      </DataList>
+    </ExpandableSection>
+  );
+};
+export const JobAdditionInfo = ({ data }) => (
+  <>
+    <Recurring data={data} />
+    <TargetHosts data={data} />
+    <Inputs data={data} />
+    <Schedule data={data} />
+  </>
+);
+
+JobAdditionInfo.propTypes = {
+  data: PropTypes.shape({
+    recurrence: PropTypes.object,
+    targeting: PropTypes.object,
+  }).isRequired,
+};
+
+Recurring.propTypes = JobAdditionInfo.propTypes;
+TargetHosts.propTypes = JobAdditionInfo.propTypes;
+Inputs.propTypes = JobAdditionInfo.propTypes;
+Schedule.propTypes = JobAdditionInfo.propTypes;
+
+ItemsParser.propTypes = {
+  items: PropTypes.array.isRequired,
+};

data/webpack/JobInvocationDetail/JobInvocationConstants.js

@@ -19,6 +19,15 @@ export const JOB_INVOCATION_HOSTS = 'JOB_INVOCATION_HOSTS';
 export const currentPermissionsUrl = foremanUrl(
   '/api/v2/permissions/current_permissions'
 );
+export const GET_TEMPLATE_INVOCATION = 'GET_TEMPLATE_INVOCATION';
+export const showTemplateInvocationUrl = (hostID, jobID) =>
+  `/show_template_invocation_by_host/${hostID}/job_invocation/${jobID}`;
+
+export const templateInvocationPageUrl = (hostID, jobID) =>
+  `/job_invocations_detail/${jobID}/host_invocation/${hostID}`;
+
+export const jobInvocationDetailsUrl = id =>
+  `/experimental/job_invocations_detail/${id}`;
 
 export const STATUS = {
   PENDING: 'pending',
@@ -33,6 +42,14 @@ export const STATUS_UPPERCASE = {
   PENDING: 'PENDING',
 };
 
+export const STATUS_TITLES = {
+  ALL_STATUSES: { id: 'all_statuses', title: __('All statuses') },
+  SUCCESS: { id: 'success', title: __('Succeeded') },
+  FAILED: { id: 'failed', title: __('Failed') },
+  PENDING: { id: 'pending', title: __('In Progress') },
+  CANCELLED: { id: 'cancelled', title: __('Cancelled') },
+};
+
 export const DATE_OPTIONS = {
   day: 'numeric',
   month: 'short',
@@ -52,7 +69,7 @@ const Columns = () => {
         return { title: __('Failed'), status: 1 };
       case 'planned':
         return { title: __('Scheduled'), status: 2 };
-      case 'running':
+      case 'running' || 'pending':
         return { title: __('Pending'), status: 3 };
       case 'cancelled':
         return { title: __('Cancelled'), status: 4 };
@@ -65,18 +82,25 @@ const Columns = () => {
   const hostDetailsPageUrl = useForemanHostDetailsPageUrl();
 
   return {
+    expand: {
+      title: '',
+      weight: 0,
+      wrapper: () => null,
+    },
     name: {
       title: __('Name'),
       wrapper: ({ name }) => (
         <a href={`${hostDetailsPageUrl}${name}`}>{name}</a>
       ),
+      isSorted: true,
       weight: 1,
     },
-    groups: {
+    hostgroup: {
       title: __('Host group'),
       wrapper: ({ hostgroup_id, hostgroup_name }) => (
         <a href={`/hostgroups/${hostgroup_id}/edit`}>{hostgroup_name}</a>
       ),
+      isSorted: true,
       weight: 2,
     },
     os: {
@@ -86,6 +110,7 @@ const Columns = () => {
           {operatingsystem_name}
         </a>
       ),
+      isSorted: true,
       weight: 3,
     },
     smart_proxy: {
@@ -93,6 +118,7 @@ const Columns = () => {
       wrapper: ({ smart_proxy_name, smart_proxy_id }) => (
         <a href={`/smart_proxies/${smart_proxy_id}`}>{smart_proxy_name}</a>
       ),
+      isSorted: true,
       weight: 4,
     },
     status: {
@@ -109,7 +135,19 @@ const Columns = () => {
       },
       weight: 5,
     },
+    actions: {
+      title: '',
+      weight: 6,
+      wrapper: () => null,
+    },
   };
 };
 
 export default Columns;
+
+const STATIC_TYPE = 'static_query';
+const DYNAMIC_TYPE = 'dynamic_query';
+export const TARGETING_TYPES = {
+  [STATIC_TYPE]: __('Static Query'),
+  [DYNAMIC_TYPE]: __('Dynamic Query'),
+};

data/webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -38,3 +38,73 @@
     height: $chart_size;
   }
 }
+.job-additional-info {
+  padding: 0;
+  margin-bottom: -10px;
+}
+.job-details-table-section {
+  section:nth-child(1) {
+    padding: 0;
+  }
+}
+
+.template-invocation {
+  &.output-in-table-view {
+    div.invocation-output {
+      overflow: auto;
+      max-height: 25em;
+    }
+  }
+  div.invocation-output {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 12px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    background-color: rgba(47, 47, 47, 1);
+    border: 1px solid #000000;
+    border-radius: 0px;
+    font-family: Menlo, Monaco, Consolas, monospace;
+
+    div.printable {
+      min-height: 50px;
+    }
+
+    div.line.stderr,
+    div.line.error,
+    div.line.debug {
+      color: red;
+    }
+
+    div.line span.counter {
+      float: left;
+      clear: left;
+    }
+
+    div.line div.content {
+      position: relative;
+      margin-left: 50px;
+      white-space: pre-wrap;
+    }
+
+    a {
+      color: #ffffff;
+    }
+
+    a.scroll-link{
+      position: relative;
+      bottom: 10px;
+      float: right;
+    }
+  }
+
+  .template-invocation-preview {
+    margin-top: 10px;
+  }
+
+  .pf-c-toggle-group {
+    margin-bottom: 10px;
+  }
+}