Merge "Add function to upload image from local/url in GUI"

4 files changed, 84 insertions, 34 deletions

diff --git a/gui/app/views/modal/environmentDialog.html b/gui/app/views/modal/environmentDialog.html
index 389de8340..4c539fc33 100644
--- a/gui/app/views/modal/environmentDialog.html
+++ b/gui/app/views/modal/environmentDialog.html
@@ -133,16 +133,17 @@
                     <table class="table table-striped">
 
                         <tr>
+                            <th>choose</th>
                             <th>name</th>
-                            <th>size</th>
+                            <th>description</th>
                             <th>status</th>
-                            <th>time</th>
                         </tr>
-                        <tr ng-repeat="image in imageListData">
-                            <td>{{image.name}}</td>
-                            <td>{{image.size/1024}} mb</td>
-                            <td>{{image.status}}</td>
-                            <td>{{image.time}}</td>
+                        <tr ng-repeat="(name, value) in yardstickImage">
+                            <td ng-if="selectImageList.indexOf(name) > -1"><img src="images/checkyes.png" style="height:12px;cursor:pointer" ng-click="unselectImage(name)" /></td>
+                            <td ng-if="selectImageList.indexOf(name) == -1"><img src="images/checkno.png" style="height:12px;cursor:pointer" ng-click="selectImage(name)" /></td>
+                            <td>{{name}}</td>
+                            <td>{{value.description}}</td>
+                            <td>{{value.status}}</td>
 
                         </tr>
 
diff --git a/gui/app/views/modal/imageDialog.html b/gui/app/views/modal/imageDialog.html
new file mode 100644
index 000000000..c568f2aba
--- /dev/null
+++ b/gui/app/views/modal/imageDialog.html
@@ -0,0 +1,19 @@
+<div>
+
+    <h4>Enter Remote Image Url</h4>
+    <input type="text" ng-model="url" />
+
+    <div style="text-align:center;margin-top:20px;">
+        <button class="btn btn-default" ng-disabled=" url==null || url==''" ng-click="uploadCustomImageByUrl(url)">Upload</button>
+    </div>
+
+</div>
+
+
+<style>
+    input {
+        border-radius: 10px;
+        border: 1px solid #eeeeee;
+        width: 100%;
+    }
+</style>
diff --git a/gui/app/views/podupload.html b/gui/app/views/podupload.html
index 99e83aca2..d6d7c0c6e 100644
--- a/gui/app/views/podupload.html
+++ b/gui/app/views/podupload.html
@@ -13,7 +13,7 @@
 
             <hr/>
 
-            <button class="btn btn-default" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-size="5MB">
+            <button class="btn btn-default" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-size="1024MB">
                                     <div ng-show="!loadingOPENrc">Upload</div>
                                      <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" />
             </button>
diff --git a/gui/app/views/uploadImage.html b/gui/app/views/uploadImage.html
index 17ccfdb8b..0c337feeb 100644
--- a/gui/app/views/uploadImage.html
+++ b/gui/app/views/uploadImage.html
@@ -4,56 +4,86 @@
     <div style="display:flex;flex-direction:row;">
         <div style="width:750px;">
 
-            <h3>{{baseElementInfo.name}} -- Image
+            <h3>{{environmentInfo.name}} -- Image
                 <button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button>
             </h3>
             <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>-->
 
-            <hr/>
-            <button class="btn btn-default" ng-click="uploadImage()">
-                 <div ng-if="!showloading">Load Image</div>
-                 <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />
-            </button>
-            <i class="fa fa-check" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==1&&ifshowStatus==1">done</i>
-            <i class="fa fa-spinner" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==0&&ifshowStatus==1">loading</i>
-            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: red;" ng-show="imageStatus==2&&ifshowStatus==1">error</i>
-
             <hr>
-            <h4>Current Images</h4>
-
+            <h4>Alternative Images</h4>
             <div>
                 <table class="table table-striped">
 
                     <tr>
                         <th>name</th>
+                        <th>description</th>
                         <th>size</th>
                         <th>status</th>
                         <th>time</th>
+                        <th>action</th>
                     </tr>
-                    <tr ng-repeat="image in imageListData">
+                    <tr ng-repeat="image in yardstickImage">
                         <td>{{image.name}}</td>
-                        <td>{{image.size/1024}} MB</td>
+                        <td>{{image.description}}</td>
+                        <td>{{image.size | number:2}} MB</td>
                         <td>{{image.status}}</td>
                         <td>{{image.time}}</td>
-
+                        <td>
+                            <div class="btn-group" uib-dropdown>
+                                <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle>
+                                    action<span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+                                    <li role="menuitem" ng-show="image.status == 'N/A'"><a ng-click="loadYardstickImage(image.name)">load</a></li>
+                                    <li role="menuitem" ng-show="image.status != 'N/A'"><a ng-click="deleteYardstickImage(image.name)">delete</a></li>
+                                </ul>
+                            </div>
+                        </td>
                     </tr>
-
-
-
                 </table>
             </div>
 
+            <hr>
+            <h4 style="display:inline">Custom Images</h4>
+            <div class="btn-group button-margin" style="float:right;margin-top:-10px;margin-bottom:5px">
+                <button class="btn btn-default" style="width:60px" ngf-select="uploadCustomImage($file, $invalidFiles)" ngf-max-size="2048MB">
+                        <div ng-show="!showloading">Local</div>
+                        <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />
+                </button>
+                <button class="btn btn-default" style="width:60px" ng-click="openImageDialog()">Url</button>
+            </div>
+            <div>
+                <table class="table table-striped">
 
-
-
-
-
-
-
+                    <tr>
+                        <th>name</th>
+                        <th>description</th>
+                        <th>size</th>
+                        <th>status</th>
+                        <th>time</th>
+                        <th>action</th>
+                    </tr>
+                    <tr ng-repeat="image in customImage">
+                        <td>{{image.name}}</td>
+                        <td>{{image.description}}</td>
+                        <td>{{image.size | number:2}} MB</td>
+                        <td>{{image.status}}</td>
+                        <td>{{image.time}}</td>
+                        <td>
+                            <div class="btn-group" uib-dropdown>
+                                <button id="single-button" type="button" class="btn btn-default btn-sm" uib-dropdown-toggle>
+                                    action<span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+                                    <li role="menuitem" ><a ng-click="deleteCustomImage(image.id)">delete</a></li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
 
         </div>
-
-
     </div>
 
 </div>