return to the vc style with the icon

microsoft · Jun 13, 2019 · 85b4f88 · 85b4f88
1 parent 7fc2861
commit 85b4f88
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 78 deletions.
diff --git a/src/webportal/src/app/vc/vc.component.ejs b/src/webportal/src/app/vc/vc.component.ejs
@@ -11,7 +11,17 @@
   <div class="tab-content">
       <div role="tabpanel" class="tab-pane active box" id="sharedvc">
           <div class='box-body'>
-            <div class="message-text">Shared VCs share the physical cluster's GPU, CPU and Memory resources by percentage. It provides cluster the flexibility to allocate resources in different nodes in a transparent manner. We support users to add new shared VC from WebUI, the new shared VC's capacity will be allocated from the current default shared VC.</div>
+              <div class="ms-MessageBar">
+                <div class="ms-MessageBar-content">
+                  <div class="ms-MessageBar-icon">
+                    <i class="ms-Icon ms-Icon--Info"></i>
+                  </div>
+                  <div class="ms-MessageBar-text">
+                      Shared VCs share the physical cluster's GPU, CPU and Memory resources by percentage. It provides cluster the flexibility to allocate resources in different nodes in a transparent manner. We support users to add new shared VC from WebUI, the new shared VC's capacity will be allocated from the current default shared VC.
+                    <br />
+                  </div>
+                </div>
+              </div>
               <% if (isAdmin === 'true') { %>
                 <button class="btn btn-success btn-xl add-vc-btn" id="virtualClustersBtn" onclick="virtualClusterShow()">Add Shared VC</button>
                 <% } %>
@@ -82,7 +92,17 @@
         </div>
       <div role="tabpanel" class="tab-pane box" id="dedicatedvc">
           <div class='box-body'>
-            <div class="message-text ded-message">Dedicated VCs are designed for jobs need dedicated compute resource, a dedicated VC is binding to 1 or more physical nodes. When creating a dedicated VC, currently only supported in <a href="https://github.com/microsoft/pai/blob/master/docs/tools/dedicated_vc.md" class="ms-Link">cmdline tool</a>, we will allocate the nodes from the Shared VC pool and isolate these node(s) for jobs submitting to this new created dedicated VC only. Once the dedicated VC is created, shared VCs are no longer allowed to use compute resources on this dedicated VC.</div>
+              <div class="ms-MessageBar discription-dedvc">
+                <div class="ms-MessageBar-content">
+                  <div class="ms-MessageBar-icon">
+                    <i class="ms-Icon ms-Icon--Info"></i>
+                  </div>
+                  <div class="ms-MessageBar-text">
+                      Dedicated VCs are designed for jobs need dedicated compute resource, a dedicated VC is binding to 1 or more physical nodes. When creating a dedicated VC, currently only supported in <a href="https://github.com/microsoft/pai/blob/master/docs/tools/dedicated_vc.md" class="ms-Link">cmdline tool</a>, we will allocate the nodes from the Shared VC pool and isolate these node(s) for jobs submitting to this new created dedicated VC only. Once the dedicated VC is created, shared VCs are no longer allowed to use compute resources on this dedicated VC.
+                    <br />
+                  </div>
+                </div>
+              </div>
               <table id='dedicated-table' class='table table-bordered table-hover table-condensed' style='vertical-align:middle'>
                 <thead>
                   <tr>

diff --git a/src/webportal/src/app/vc/vc.component.js b/src/webportal/src/app/vc/vc.component.js
@@ -4,6 +4,8 @@ require('datatables.net-bs/js/dataTables.bootstrap.js');
 require('datatables.net-bs/css/dataTables.bootstrap.css');
 require('datatables.net-plugins/sorting/natural.js');
 require('datatables.net-plugins/sorting/title-numeric.js');
+require('office-ui-fabric-js/dist/css/fabric.min.css');
+require('office-ui-fabric-js/dist/css/fabric.components.min.css');
 const url = require('url');
 //
 require('./vc.component.scss');
@@ -125,72 +127,6 @@ const virtualClustersAdd = () => {
   });
 };
 
-//
-const addGroup = () => {
-  userAuth.checkToken((token) => {
-    let vcName = $('#virtualClustersList input[name="vcname"]').val();
-    let capacity = $('#virtualClustersList input[name="capacity"]').val();
-    if (!vcName) {
-      $('#virtualClustersList input[name="vcname"]').focus();
-      return false;
-    }
-    if (!capacity) {
-      $('#virtualClustersList input[name="capacity"]').focus();
-      return false;
-    }
-    $.ajax({
-      url: `${webportalConfig.restServerUri}/api/v2/user/create/${vcName}`,
-      data: JSON.stringify({
-        'description': `This group of the same name is created by creating a Virtual Cluster named ${vcName}`,
-        'externalName': ``,
-      }),
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      contentType: 'application/json; charset=utf-8',
-      type: 'PUT',
-      dataType: 'json',
-      success: (data) => {
-        alert(data.message);
-      },
-      error: (xhr, textStatus, error) => {
-        const res = JSON.parse(xhr.responseText);
-        alert(res.message);
-        if (res.code === 'UnauthorizedUserError') {
-          userLogout();
-        }
-      },
-    });
-  });
-};
-
-//
-const deleteGroup = (groupname) => {
-  if (name == 'default') return false;
-  console.log(groupname);
-  userAuth.checkToken((token) => {
-    $.ajax({
-      url: `${webportalConfig.restServerUri}/api/v2/group/delete/${groupname}`,
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      contentType: 'application/json; charset=utf-8',
-      type: 'DELETE',
-      dataType: 'json',
-      success: (data) => {
-        alert(data.message);
-      },
-      error: (xhr, textStatus, error) => {
-        const res = JSON.parse(xhr.responseText);
-        alert(res.message);
-        if (res.code === 'UnauthorizedUserError') {
-          userLogout();
-        }
-      },
-    });
-  });
-};
-
 //
 const deleteVcItem = (name) => {
   if (name == 'default') return false;
@@ -322,8 +258,6 @@ window.deleteVcItem = deleteVcItem;
 window.editVcItem = editVcItem;
 window.changeVcState = changeVcState;
 window.convertState = convertState;
-window.addGroup = addGroup;
-window.deleteGroup = deleteGroup;
 
 $(document).ready(() => {
   $('#sidebar-menu--vc').addClass('active');
@@ -339,7 +273,6 @@ $(document).ready(() => {
   // add VC
   $(document).on('click', '#virtualClustersListAdd', () => {
     virtualClustersAdd();
-    addGroup();
   });
 
   $(document).on('click', '#virtualClustersListEdit', () => {

diff --git a/src/webportal/src/app/vc/vc.component.scss b/src/webportal/src/app/vc/vc.component.scss
@@ -109,10 +109,3 @@ ul, li{
 .discription-dedvc {
   margin-bottom: 10px;
 }
-.message-text {
-  background-color: rgb(244, 244, 244);
-  padding: 5px;
-  &.ded-message {
-    margin-bottom: 10px;
-  }
-}