Add providers to app.

web/src/ApplicationEditPage.js

@@ -1,8 +1,11 @@
 import React from "react";
-import {Button, Card, Col, Input, Row} from 'antd';
+import {Button, Card, Col, Input, Row, Select} from 'antd';
 import {LinkOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as Setting from "./Setting";
+import * as ProviderBackend from "./backend/ProviderBackend";
+
+const { Option } = Select;
 
 class ApplicationEditPage extends React.Component {
   constructor(props) {
@@ -11,13 +14,13 @@ class ApplicationEditPage extends React.Component {
       classes: props,
       applicationName: props.match.params.applicationName,
       application: null,
-      tasks: [],
-      resources: [],
+      providers: [],
     };
   }
 
   componentWillMount() {
     this.getApplication();
+    this.getProviders();
   }
 
   getApplication() {
@@ -29,6 +32,15 @@ class ApplicationEditPage extends React.Component {
       });
   }
 
+  getProviders() {
+    ProviderBackend.getProviders("admin")
+      .then((res) => {
+        this.setState({
+          providers: res,
+        });
+      });
+  }
+
   parseApplicationField(key, value) {
     // if ([].includes(key)) {
     //   value = Setting.myParseInt(value);
@@ -79,9 +91,15 @@ class ApplicationEditPage extends React.Component {
             Providers:
           </Col>
           <Col span={22} >
-            <Input value={this.state.application.providers} onChange={e => {
-              this.updateApplicationField('providers', e.target.value);
-            }} />
+            <Select mode="tags" style={{width: '100%'}}
+                    value={this.state.application.providers}
+                    onChange={value => {
+                      this.updateApplicationField('providers', value);
+                    }} >
+              {
+                this.state.providers.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
+              }
+            </Select>
           </Col>
         </Row>
       </Card>

web/src/ApplicationListPage.js

@@ -100,7 +100,7 @@ class ApplicationListPage extends React.Component {
         title: 'Providers',
         dataIndex: 'providers',
         key: 'providers',
-        width: '150px',
+        width: '300px',
         sorter: (a, b) => a.providers.localeCompare(b.providers),
       },
       {

web/src/OrganizationEditPage.js

@@ -11,8 +11,6 @@ class OrganizationEditPage extends React.Component {
       classes: props,
       organizationName: props.match.params.organizationName,
       organization: null,
-      tasks: [],
-      resources: [],
     };
   }
 

web/src/ProviderEditPage.js

@@ -11,8 +11,6 @@ class ProviderEditPage extends React.Component {
       classes: props,
       providerName: props.match.params.providerName,
       provider: null,
-      tasks: [],
-      resources: [],
     };
   }
 

web/src/UserEditPage.js

@@ -11,8 +11,6 @@ class UserEditPage extends React.Component {
       classes: props,
       userName: props.match.params.userName,
       user: null,
-      tasks: [],
-      resources: [],
     };
   }