text: import React from 'react';
  import Base from '../components/base';
  import Filter from '../components/filter';
  import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listViewHelpers';
  import {defaultSortInfo} from '../components/sorter';
  import api from '../services/api';
  import test from '../utils/filterHelper';
  
  export default class ServiceAccounts extends Base {
      state = {
          filter: '',
          sort: defaultSortInfo(this),
      };
  
      setNamespace(namespace) {
          this.setState({items: null});
  
          this.registerApi({
              items: api.serviceAccount.list(namespace, items => this.setState({items})),
          });
      }
  
      render() {
          const {items, sort, filter} = this.state;
          const filtered = items && items.filter(x => test(filter, x.metadata.name));
  
          return (
              <div id='content'>
                  <Filter
                      text='Service Accounts'
                      filter={filter}
                      onChange={x => this.setState({filter: x})}
                      onNamespaceChange={x => this.setNamespace(x)}
                  />
  
                  <div className='contentPanel'>
                      <table>
                          <thead>
                              <tr>
                                  <MetadataHeaders sort={sort} includeNamespace={true} />
                              </tr>
                          </thead>
  
                          <TableBody items={filtered} filter={filter} sort={sort} colSpan='9' row={x => (
                              <tr key={x.metadata.uid}>
                                  <MetadataColumns
                                      item={x}
                                      includeNamespace={true}
                                      href={`#!serviceaccount/${x.metadata.namespace}/${x.metadata.name}`}
                                  />
                              </tr>
                          )} />
                      </table>
                  </div>
              </div>
          );
      }
  }
  