Add scheduled install/uninstall feature to APPM store ui

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -42,7 +42,7 @@ class ReleaseView extends React.Component {
         }
     }
 
-    appOperation = (type, payload, operation) => {
+    appOperation = (type, payload, operation, timestamp=null) => {
         const config = this.props.context;
         const release = this.props.app.applicationReleases[0];
         const {uuid} = release;
@@ -50,7 +50,11 @@ class ReleaseView extends React.Component {
         this.setState({
             loading: true,
         });
-        const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/" + operation;
+        let url = window.location.origin+ config.serverConfig.invoker.uri +
+            config.serverConfig.invoker.store + "/subscription/" + uuid + "/" + type + "/" + operation;
+        if(timestamp!= null){
+            url += `?timestamp=${timestamp}`;
+        }
         axios.post(
             url,
             payload,
@@ -61,7 +65,8 @@ class ReleaseView extends React.Component {
             if (res.status === 200) {
                 this.setState({
                     loading: false,
-                    appInstallModalVisible: false
+                    appInstallModalVisible: false,
+                    appUnInstallModalVisible: false,
                 });
                 notification["success"]({
                     message: 'Done!',

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js

@@ -18,13 +18,14 @@
 
 import React from "react";
 import axios from "axios";
-import {Button, message, notification, Table, Typography} from "antd";
+import {Button, message, DatePicker, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en'
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const columns = [
@@ -109,7 +110,9 @@ class DeviceInstall extends React.Component {
             data: [],
             pagination: {},
             loading: false,
-            selectedRows: []
+            selectedRows: [],
+            scheduledTime: null,
+            isScheduledInstallVisible: false
         };
     }
 
@@ -163,7 +166,6 @@ class DeviceInstall extends React.Component {
                     data: res.data.data.devices,
                     pagination,
                 });
-
             }
 
         }).catch((error) => {
@@ -187,7 +189,7 @@ class DeviceInstall extends React.Component {
         });
     };
 
-    install = () => {
+    install = (timestamp=null) => {
         const {selectedRows} = this.state;
         const payload = [];
         selectedRows.map(device => {
@@ -196,11 +198,11 @@ class DeviceInstall extends React.Component {
                 type: device.type
             });
         });
-        this.props.onInstall("devices", payload, "install");
+        this.props.onInstall("devices", payload, "install",timestamp);
     };
 
     render() {
-        const {data, pagination, loading, selectedRows} = this.state;
+        const {data, pagination, loading, selectedRows, scheduledTime,isScheduledInstallVisible} = this.state;
         return (
             <div>
                 <Text>
@@ -224,12 +226,7 @@ class DeviceInstall extends React.Component {
                     rowSelection={this.rowSelection}
                     scroll={{x: 1000}}
                 />
-                <div style={{paddingTop: 10, textAlign: "right"}}>
+                <InstallModalFooter type="Install" operation={this.install} disabled={selectedRows.length === 0}/>
-                    <Button disabled={selectedRows.length === 0} htmlType="button" type="primary"
-                            onClick={this.install}>
-                        Install
-                    </Button>
-                </div>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceUninstall.js

@@ -18,13 +18,14 @@
 
 import React from "react";
 import axios from "axios";
-import {Button,Table, Typography} from "antd";
+import {Button, Select, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en'
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const columns = [
@@ -183,7 +184,7 @@ class DeviceUninstall extends React.Component {
         });
     };
 
-    uninstall = () => {
+    uninstall = (timestamp = null) => {
         const {selectedRows} = this.state;
         const payload = [];
         selectedRows.map(device => {
@@ -192,7 +193,7 @@ class DeviceUninstall extends React.Component {
                 type: device.type
             });
         });
-        this.props.onUninstall("devices", payload, "uninstall");
+        this.props.onUninstall("devices", payload, "uninstall", null);
     };
 
     render() {
@@ -218,12 +219,7 @@ class DeviceUninstall extends React.Component {
                     rowSelection={this.rowSelection}
                     scroll={{x: 1000}}
                 />
-                    <div style={{paddingTop: 10, textAlign: "right"}}>
+                <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={selectedRows.length === 0}/>
-                        <Button disabled={selectedRows.length === 0} htmlType="button" type="primary"
-                                onClick={this.uninstall}>
-                            Uninstall
-                        </Button>
-                    </div>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js

@@ -22,6 +22,7 @@ import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -112,9 +113,7 @@ class GroupInstall extends React.Component {
                         <Option key={d.value}>{d.text}</Option>
                     ))}
                 </Select>
-                <div style={{paddingTop:10, textAlign:"right"}}>
+                <InstallModalFooter type="Install" operation={this.install} disabled={value.length===0}/>
-                    <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
-                </div>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupUninstall.js

@@ -22,6 +22,7 @@ import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -81,13 +82,13 @@ class GroupUninstall extends React.Component {
         });
     };
 
-    install = () =>{
+    uninstall = (timestamp=null) =>{
         const {value} = this.state;
         const data = [];
         value.map(val=>{
             data.push(val.key);
         });
-        this.props.onInstall("group", data, "uninstall");
+        this.props.onUninstall("group", data, "uninstall",null);
     };
 
     render() {
@@ -108,15 +109,12 @@ class GroupUninstall extends React.Component {
                             filterOption={false}
                             onSearch={this.fetchUser}
                             onChange={this.handleChange}
-                            style={{width: '100%'}}
+                            style={{width: '100%'}}>
-                    >
                         {data.map(d => (
                                 <Option key={d.value}>{d.text}</Option>
                         ))}
                     </Select>
-                    <div style={{paddingTop:10, textAlign:"right"}}>
+                    <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
-                        <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
-                    </div>
                 </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js

@@ -22,6 +22,7 @@ import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -79,13 +80,13 @@ class RoleInstall extends React.Component {
         });
     };
 
-    install = () =>{
+    install = (timestamp=null) =>{
         const {value} = this.state;
         const data = [];
         value.map(val=>{
             data.push(val.key);
         });
-        this.props.onInstall("role", data, "install");
+        this.props.onInstall("role", data, "install", timestamp);
     };
 
     render() {
@@ -112,9 +113,7 @@ class RoleInstall extends React.Component {
                         <Option key={d.value}>{d.text}</Option>
                     ))}
                 </Select>
-                <div style={{paddingTop:10, textAlign:"right"}}>
+                <InstallModalFooter type="Install" operation={this.install} disabled={value.length===0}/>
-                    <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
-                </div>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleUninstall.js

@@ -22,6 +22,7 @@ import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -80,17 +81,16 @@ class RoleUninstall extends React.Component {
                       });
     };
 
-    install = () =>{
+    uninstall = (timestamp=null) =>{
         const {value} = this.state;
         const data = [];
         value.map(val=>{
             data.push(val.key);
         });
-        this.props.onInstall("role", data, "uninstall");
+        this.props.onUninstall("role", data, "uninstall",null);
     };
 
     render() {
-
         const {fetching, data, value} = this.state;
 
         return (
@@ -113,9 +113,7 @@ class RoleUninstall extends React.Component {
                                 <Option key={d.value}>{d.text}</Option>
                         ))}
                     </Select>
-                    <div style={{paddingTop:10, textAlign:"right"}}>
+                    <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
-                        <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
-                    </div>
                 </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js

@@ -22,6 +22,7 @@ import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -81,13 +82,13 @@ class UserInstall extends React.Component {
         });
     };
 
-    install = () => {
+    install = (timestamp=null) => {
         const {value} = this.state;
         const data = [];
         value.map(val => {
             data.push(val.key);
         });
-        this.props.onInstall("user", data, "install");
+        this.props.onInstall("user", data, "install",timestamp);
     };
 
     render() {
@@ -112,9 +113,7 @@ class UserInstall extends React.Component {
                         <Option key={d.value}>{d.text}</Option>
                     ))}
                 </Select>
-                <div style={{paddingTop: 10, textAlign: "right"}}>
+                <InstallModalFooter type="Install" operation={this.install} disabled={value.length===0}/>
-                    <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.install}>Install</Button>
-                </div>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserUninstall.js

@@ -22,6 +22,7 @@ import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import InstallModalFooter from "./installModalFooter/InstallModalFooter";
 
 const {Text} = Typography;
 const {Option} = Select;
@@ -51,7 +52,6 @@ class UserUninstall extends React.Component {
         axios.get(
             window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
             "/USER?",
-
         ).then(res => {
             if (res.status === 200) {
                 if (fetchId !== this.lastFetchId) {
@@ -80,13 +80,13 @@ class UserUninstall extends React.Component {
         });
     };
 
-    uninstall = () => {
+    uninstall = (timestamp=null) => {
         const {value} = this.state;
         const data = [];
         value.map(val => {
             data.push(val.key);
         });
-        this.props.onUninstall("user", data, "uninstall");
+        this.props.onUninstall("user", data, "uninstall",null);
     };
 
     render() {
@@ -94,7 +94,9 @@ class UserUninstall extends React.Component {
 
         return (
             <div>
-                    <Text>Start uninstalling the application for one or more users by entering the corresponding user name. Select uninstall to automatically start uninstalling the application for the respective user/users. </Text>
+                <Text>Start uninstalling the application for one or more users by entering the corresponding user name.
+                    Select uninstall to automatically start uninstalling the application for the respective
+                    user/users. </Text>
                 <p>Select users</p>
                 <Select
                     mode="multiple"
@@ -105,15 +107,12 @@ class UserUninstall extends React.Component {
                     filterOption={false}
                     onSearch={this.fetchUser}
                     onChange={this.handleChange}
-                            style={{width: '100%'}}
+                    style={{width: '100%'}}>
-                    >
                     {data.map(d => (
                         <Option key={d.value}>{d.text}</Option>
                     ))}
                 </Select>
-                    <div style={{paddingTop: 10, textAlign: "right"}}>
+                <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
-                        <Button disabled={value.length===0} htmlType="button" type="primary" onClick={this.uninstall}>Uninstall</Button>
-                    </div>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/installModalFooter/InstallModalFooter.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import {Button, DatePicker} from "antd";
+
+class InstallModalFooter extends React.Component{
+    constructor(props) {
+        super(props);
+        this.state={
+            scheduledTime: null,
+            isScheduledInstallVisible: false
+        }
+    }
+
+    onDateTimeChange = (value, dateString) => {
+        this.setState({
+            scheduledTime: dateString
+        });
+    };
+
+    showScheduledInstall = ()=>{
+        this.setState({
+            isScheduledInstallVisible: true
+        })
+    };
+
+    hideScheduledInstall = ()=>{
+        this.setState({
+            isScheduledInstallVisible: false
+        })
+    };
+
+    render() {
+        const {scheduledTime,isScheduledInstallVisible} =this.state;
+        const {disabled, type} = this.props;
+        return (
+          <div>
+              <div style={{
+                  textAlign: "right",
+                  display: (!isScheduledInstallVisible)?'block':'none'
+              }}>
+                  <Button style={{margin: 5}} disabled={disabled} htmlType="button" type="primary"
+                          onClick={this.props.operation}>
+                      {type}
+                  </Button>
+                  <Button style={{margin: 5}} disabled={disabled} htmlType="button"
+                          onClick={this.showScheduledInstall}>
+                      Scheduled {type}
+                  </Button>
+              </div>
+              <div style={{
+                  textAlign: "right",
+                  display: (isScheduledInstallVisible)?'block':'none'
+              }}>
+                  <DatePicker showTime
+                              placeholder="Select Time"
+                              format="YYYY-MM-DDTHH:mm"
+                              onChange={this.onDateTimeChange}/>
+                  <Button disabled={scheduledTime == null}
+                          style={{margin: 5}}
+                          htmlType="button"
+                          type="primary"
+                          onClick={()=>{
+                              this.props.operation(scheduledTime);
+                          }}>
+                      Schedule
+                  </Button>
+                  <Button style={{margin: 5}} htmlType="button"
+                          onClick={this.hideScheduledInstall}>
+                      Cancel
+                  </Button>
+              </div>
+          </div>
+        );
+    }
+}
+
+export default InstallModalFooter;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/Utils.js

@@ -25,7 +25,7 @@ export const handleApiError = (error, message) => {
     } else {
         notification["error"]({
             message: "There was a problem",
-            duration: 10,
+            duration: 2,
             description: message,
         });
     }