diff --git a/ui/app/controllers/jobs/job/index.js b/ui/app/controllers/jobs/job/index.js
index 5129445b062..25b37f4aeeb 100644
--- a/ui/app/controllers/jobs/job/index.js
+++ b/ui/app/controllers/jobs/job/index.js
@@ -5,12 +5,15 @@ import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 import { action } from '@ember/object';
 import classic from 'ember-classic-decorator';
+import jobClientStatus from 'nomad-ui/utils/properties/job-client-status';
 
 @classic
 export default class IndexController extends Controller.extend(WithNamespaceResetting) {
   @service system;
   @service store;
 
+  @jobClientStatus('nodes', 'job.status', 'job.allocations') jobClientStatus;
+
   @computed('job')
   get uniqueNodes() {
     // add datacenter filter
@@ -34,6 +37,10 @@ export default class IndexController extends Controller.extend(WithNamespaceRese
     return this.store.peekAll('node').toArray().length;
   }
 
+  get nodes() {
+    return this.store.peekAll('node');
+  }
+
   queryParams = [
     {
       currentPage: 'page',
diff --git a/ui/app/templates/components/job-page/parts/summary.hbs b/ui/app/templates/components/job-page/parts/summary.hbs
index 11130804d60..fae0669c700 100644
--- a/ui/app/templates/components/job-page/parts/summary.hbs
+++ b/ui/app/templates/components/job-page/parts/summary.hbs
@@ -25,7 +25,7 @@
                 <em class="is-faded">No Children</em>
               {{/if}}
             {{else}}
-              <ClientStatusBar @nodes={{this.nodes}} @allocationContainer={{a.item}} @isNarrow={{true}} />
+              <ClientStatusBar @jobClientStatus={{this.jobClientStatus}} @nodes={{this.nodes}} @allocationContainer={{a.item}} @isNarrow={{true}} />
             {{/if}}
           </div>
         </div>
@@ -38,6 +38,7 @@
     job=a.item.summary
     nodes=this.nodes
     totalNodes=this.totalNodes
+    jobClientStatus=this.jobClientStatus
     class="split-view" as |chart|}}
     <ol data-test-legend class="legend">
       {{#each chart.data as |datum index|}}
@@ -109,4 +110,3 @@
   {{/component}}
   </a.body>
 </ListAccordion>
-
diff --git a/ui/app/templates/components/job-page/service.hbs b/ui/app/templates/components/job-page/service.hbs
index 915e88bab96..0e06c5a937e 100644
--- a/ui/app/templates/components/job-page/service.hbs
+++ b/ui/app/templates/components/job-page/service.hbs
@@ -19,7 +19,7 @@
     {{/each}}
   {{/if}}
 
-  <JobPage::Parts::Summary @job={{this.job}} @totalNodes={{this.totalNodes}} @nodes={{this.nodes}} />
+  <JobPage::Parts::Summary @job={{this.job}} @totalNodes={{this.totalNodes}} @nodes={{this.nodes}} @jobClientStatus={{this.jobClientStatus}} />
 
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
 
diff --git a/ui/app/templates/jobs/job/index.hbs b/ui/app/templates/jobs/job/index.hbs
index 82d97770fbe..e1b7bc80172 100644
--- a/ui/app/templates/jobs/job/index.hbs
+++ b/ui/app/templates/jobs/job/index.hbs
@@ -3,6 +3,7 @@
   job=this.model
   nodes=this.uniqueNodes
   totalNodes=this.totalNodes
+  jobClientStatus=this.jobClientStatus
   sortProperty=this.sortProperty
   sortDescending=this.sortDescending
   currentPage=this.currentPage
diff --git a/ui/app/utils/properties/job-client-status.js b/ui/app/utils/properties/job-client-status.js
new file mode 100644
index 00000000000..f050335489d
--- /dev/null
+++ b/ui/app/utils/properties/job-client-status.js
@@ -0,0 +1,23 @@
+import { computed } from '@ember/object';
+
+// An Ember.Computed property that persists set values in localStorage
+// and will attempt to get its initial value from localStorage before
+// falling back to a default.
+//
+// ex. showTutorial: localStorageProperty('nomadTutorial', true),
+export default function jobClientStatus(nodesKey, jobStatusKey, jobAllocsKey) {
+  return computed(nodesKey, jobStatusKey, jobAllocsKey, function() {
+    const allocs = this.get(jobAllocsKey);
+    const jobStatus = this.get(jobStatusKey);
+    const nodes = this.get(nodesKey);
+
+    return {
+      byNode: {
+        '123': 'running',
+      },
+      byStatus: {
+        running: ['123'],
+      },
+    };
+  });
+}
diff --git a/ui/mirage/factories/job.js b/ui/mirage/factories/job.js
index 1c914c7a991..ce57711580b 100644
--- a/ui/mirage/factories/job.js
+++ b/ui/mirage/factories/job.js
@@ -6,7 +6,7 @@ import { DATACENTERS } from '../common';
 
 const REF_TIME = new Date();
 const JOB_PREFIXES = provide(5, faker.hacker.abbreviation);
-const JOB_TYPES = ['service', 'batch', 'system'];
+const JOB_TYPES = ['service', 'batch', 'system', 'sysbatch'];
 const JOB_STATUSES = ['pending', 'running', 'dead'];
 
 export default Factory.extend({
diff --git a/ui/mirage/scenarios/default.js b/ui/mirage/scenarios/default.js
index 8d2423f86d5..1128b7a884a 100644
--- a/ui/mirage/scenarios/default.js
+++ b/ui/mirage/scenarios/default.js
@@ -1,5 +1,6 @@
 import config from 'nomad-ui/config/environment';
 import * as topoScenarios from './topo';
+import * as sysbatchScenarios from './sysbatch';
 import { pickOne } from '../utils';
 
 const withNamespaces = getConfigValue('mirageWithNamespaces', false);
@@ -16,6 +17,7 @@ const allScenarios = {
   everyFeature,
   emptyCluster,
   ...topoScenarios,
+  ...sysbatchScenarios,
 };
 
 const scenario = getScenarioQueryParameter() || getConfigValue('mirageScenario', 'emptyCluster');
diff --git a/ui/mirage/scenarios/sysbatch.js b/ui/mirage/scenarios/sysbatch.js
new file mode 100644
index 00000000000..7ffae26a35e
--- /dev/null
+++ b/ui/mirage/scenarios/sysbatch.js
@@ -0,0 +1,18 @@
+export function sysbatchSmall(server) {
+  server.createList('agent', 3);
+  server.createList('node', 12, {
+    datacenter: 'dc1',
+    status: 'ready',
+  });
+
+  const jobConstraints = [[], [], [], [], [], []];
+
+  jobConstraints.forEach(spec => {
+    server.create('job', {
+      status: 'running',
+      datacenters: ['dc1'],
+      type: 'sysbatch',
+      createAllocations: true,
+    });
+  });
+}
diff --git a/ui/package.json b/ui/package.json
index 3fac4031abe..6ef08394a53 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -153,6 +153,7 @@
     ]
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "lru_map": "^0.3.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3"
diff --git a/ui/yarn.lock b/ui/yarn.lock
index d8fbfad2444..3d0702ef6b7 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -11746,7 +11746,7 @@ lodash.values@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
   integrity sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=
 
-lodash@^4.0.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.5.1:
+lodash@^4.0.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.5.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==