title: Angular: Show Service Status (stopped/processing) in dropdown menu
body: <p>When a service is running or terminated, I need to modify the status in a dropdown menu. It uses Angular's &quot;select&quot; and uses GraphQL to access data. Here is a snippet of my code.</p>
  <p>header.html</p>
  <pre><code>&lt;li ng-hide=&quot;!vm.isAdmin&quot;&gt;
              &lt;div class=&quot;form-group&quot; style=&quot;margin-bottom: 0;&quot;&gt;
                  &lt;select class=&quot;form-control input-sm&quot;
                          ng-model=&quot;vm.currentServiceName&quot;
                          ng-change=&quot;vm.onServiceChange()&quot;
                          ng-options=&quot;item.database as item.code group by item.group for item in vm.services | orderBy:['-group','code']&quot;&gt;&lt;/select&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  <p>headerController.js</p>
  <pre><code>static mapState = (state) =&gt; {
  const services = getVirtualServices(state)
  
  return {
    isAdmin: authSelectors.isAdmin(state),
    services: map(services, s =&gt; ({ ...s, group: (s.isActive ? 'en' : 'dis') + 'abled' })),
    currentServiceName: authSelectors.getCurrentService(state),  
  }
  </code></pre>
  <p>selector.ts</p>
  <pre><code>export const getVirtualServices = (state: StoreShape) =&gt; getState(state).services.items
  </code></pre>
  <p>type.ts</p>
  <pre><code>export type InstanceInfoStoreShape = {
  services: {
  isLoading: boolean
  error: ApiExceptionData | null
  items: VirtualService[]
  }`
  interface VirtualService {
  code: string
  database: string
  isActive: boolean
  status: boolean
  }
  </code></pre>
  <p>`
  VirtualServicesStatus code in GraphQL type.ts</p>
  <pre><code>export enum VirtualServiceStatus {
  Ready = 'READY',
  Initialisation = 'INITIALISATION',
  Processing = 'PROCESSING',
  Stopping = 'STOPPING',
  Stopped = 'STOPPED',
  Faulted = 'FAULTED'
  }
  </code></pre>