serach bar is added

webui/src/components/Base/Login.js

@@ -54,12 +54,12 @@ const ErrorClose = styled.div`
   right: 1rem;
 `;
 
-const ErrorBar = ({ visible, message, onClick }) => visible ? (
+const ErrorBar = ({ visible, message, onClose }) => visible ? (
   <ErrorWrapper>
     <ErrorMessage>
       {message}
     </ErrorMessage>
-    <ErrorClose onClick={onClick}>
+    <ErrorClose onClick={onClose}>
       <CloseIcon/>
     </ErrorClose>
   </ErrorWrapper>
@@ -68,7 +68,7 @@ const ErrorBar = ({ visible, message, onClick }) => visible ? (
 ErrorBar.propTypes = {
   visible: PropTypes.bool,
   message: PropTypes.string,
-  onClick: PropTypes.func
+  onClose: PropTypes.func
 };
 
 const Thumbnail = styled.div`
@@ -173,7 +173,7 @@ const Login = ({
       <ErrorBar 
         visible={error !== null}
         message={error && error.message}
-        onClick={onErrorReset} />
+        onClose={onErrorReset} />
       <Thumbnail>
         <ThumbnailIcon size='8rem' color={oc['blue'][6]} />
       </Thumbnail>

webui/src/components/Subscriber/List.js

@@ -30,10 +30,19 @@ const propTypes = {
   subscribers: PropTypes.arrayOf(PropTypes.object)
 }
 
-const List = ({ subscribers }) => {
+const List = ({ subscribers, search }) => {
-  const subscriberList = subscribers.map(subscriber =>
+  const subscriberList = subscribers
-    <Item key={subscriber.imsi} subscriber={subscriber} />
+    .filter(s => s.imsi.indexOf(search) !== -1)
-  );
+    .sort( 
+      (a,b) => {
+        if(a.imsi > b.imsi) return 1;
+        if (a.imsi < b.imsi) return -1;
+        return 0;
+      }
+    )
+    .map(subscriber =>
+      <Item key={subscriber.imsi} subscriber={subscriber} />
+    );
 
   return (
     <Wrapper>

webui/src/components/Subscriber/Search.js

@@ -1,33 +1,84 @@
-import styled from 'styled-components';
-import oc from 'open-color';
 import PropTypes from 'prop-types';
 
-const Search = styled.input`
+import styled from 'styled-components';
-  width: 100%;
+import oc from 'open-color';
-  padding: 0.5rem;
+import { media } from 'helpers/style-utils';
 
-  border: 1px solid ${oc.gray[2]};
+import SearchIcon from 'react-icons/lib/md/search';
+import ClearIcon from 'react-icons/lib/md/clear';
 
-  font-size: 1.5rem;
+const Wrapper = styled.div`
-  line-height: 2rem;
+  display: flex;
-  transition: all .25s;
+  align-items: center;
 
-  &:focus {
+  width: 700px;
-    outline: none;
+  margin: 0 auto 1rem auto;
-    border: 1px solid ${oc.pink[3]};
+
-    color: ${oc.pink[6]};
+  background: white;
+  color: ${oc.gray[6]};
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+      
+  &:hover {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
   }
 
-  & + & {
+  ${media.tablet`
-    margin-top: 1rem;
+    width: 500px;
-  }
+  `}
+
+  ${media.mobile`
+    width: 100%;
+    margin: 0 auto;
+  `}
 `;
 
+const SearchIconWrapper = styled.div`
+  display: inline-flex;
+  margin-left: 1rem;
+  font-size: 1.5rem;
+`
+
+const Input = styled.input`
+  padding : 1rem;
+  margin: 0 auto;
+  width: 100%;
+
+  font-size: 1.2rem;
+  font-weight: 300;
+
+  cursor: text;
+
+  border: none;
+  outline: none;
+`
+const ClearIconWrapper = styled.div`
+  display: inline-flex;
+  margin-right: 1rem;
+  font-size: 1.5rem;
+
+  cursor: pointer;
+`
+
+const Search = ({ value, onChange, onClear }) => (
+  <Wrapper>
+    <SearchIconWrapper><SearchIcon/></SearchIconWrapper>
+    <Input 
+      value={value}
+      onChange={onChange}/>
+    {value !== '' && 
+      <ClearIconWrapper onClick={onClear}>
+        <ClearIcon/>
+      </ClearIconWrapper>
+    }
+  </Wrapper>
+
+)
+
 Search.propTypes = {
-  name: PropTypes.string,
   value: PropTypes.string,
-  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
-  onChange: PropTypes.func
+  onClear: PropTypes.func
 };
 
 export default Search;

webui/src/containers/App.js

@@ -37,9 +37,7 @@ class App extends Component {
     return (
       <Layout>
         <Layout.Container visible={view === "subscriber"}>
-          <Layout.Content background="#e9ecef">
+          <SubscriberContainer/>
-            <SubscriberContainer/>
-          </Layout.Content>
         </Layout.Container>
         <Layout.Container visible={view === "pdn"}>
           <Layout.Content><PdnContainer/></Layout.Content>

webui/src/containers/SubscriberContainer.js

@@ -5,10 +5,29 @@ import { connect } from 'react-redux';
 import { fetchSubscribers } from 'modules/crud/subscriber';
 import { select } from 'modules/crud/selectors';
 
+import styled from 'styled-components';
 import oc from 'open-color';
+import { media } from 'helpers/style-utils';
+
 import { Spinner, Subscriber } from 'components';
 
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  padding-top: 2rem;
+
+  background: #e9ecef;
+
+  ${media.mobile`
+     padding-top: 0rem;
+  `}
+`
+
 class SubscriberContainer extends Component {
+  state = {
+    search: ''
+  };
+
   componentWillMount() {
     const { subscribers, dispatch } = this.props
     if (subscribers.needsFetch) {
@@ -24,15 +43,44 @@ class SubscriberContainer extends Component {
     }
   }
 
+  handleSearchChange = (e) => {
+    this.setState({
+      search: e.target.value
+    });
+  }
+
+  handleSearchClear = (e) => {
+    this.setState({
+      search: ''
+    });
+  }
+
   render() {
-    const { subscribers } = this.props
+    const {
+      handleSearchChange,
+      handleSearchClear
+    } = this;
+
+    const { 
+      search
+    } = this.state;
+
+    const { 
+      subscribers 
+    } = this.props
 
     return (
-      <div>
+      <Wrapper>
-        <Subscriber.Search />
+        <Subscriber.Search 
-        <Subscriber.List subscribers={subscribers.data} />
+          onChange={handleSearchChange}
+          value={search}
+          onClear={handleSearchClear} />
+        <Subscriber.List
+          subscribers={subscribers.data}
+          search={search}
+        />
         {subscribers.isLoading && <Spinner md color={oc.indigo[9]} />}
-      </div>
+      </Wrapper>
     )
   }
 }