open-consul/ui/packages/consul-ui/app/templates/settings.hbs

<Route
  @name={{routeName}}
as |route|>
  <DataLoader
  @src={{uri 'settings://consul:client'}}
  as |loader|>

    <BlockSlot @name="error">
      <AppError
        @error={{loader.error}}
        @login={{route.model.app.login.open}}
      />
    </BlockSlot>

    <BlockSlot @name="loaded">
{{#let
  (or loader.data (hash
      blocking=true
    )
  )
as |item|}}
  <AppView>
    <BlockSlot @name="header">
      <h1>
        <route.Title @title="Settings" />
      </h1>
    </BlockSlot>
    <BlockSlot @name="content">
      <Notice
        @type="info"
      as |notice|>
        <notice.Header>
          <h2>Local Storage</h2>
        </notice.Header>
        <notice.Body>
          <p>
            These settings are immediately saved to local storage and persisted through browser usage.
          </p>
        </notice.Body>
      </Notice>
      <form>
      {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
      <Disclosure as |disclosure|>
        <disclosure.Details>
          <DataSink
            @data={{item}}
            @sink='settings://consul:client'
            @onchange={{action (fn disclosure.close)}}
          />
        </disclosure.Details>
        <fieldset data-test-blocking-queries>
          <h2>Blocking Queries</h2>
          <p>Keep catalog info up-to-date without refreshing the page. Any changes made to services, nodes and intentions would be reflected in real time.</p>
          <div class="type-toggle">
            <label>
              <input
                {{on 'change' (queue
                  (set item 'blocking' (not item.blocking))
                  (fn disclosure.open)
                )}}
                type="checkbox"
                name="client[blocking]"
                checked={{if item.blocking 'checked'}}
              />
              <span>{{if item.blocking 'On' 'Off'}}</span>
            </label>
          </div>
        </fieldset>
      </Disclosure>
      {{/if}}
      </form>
    </BlockSlot>
  </AppView>
{{/let}}
  </BlockSlot>
</DataLoader>
</Route>