Skip to content
This repository has been archived by the owner on Jun 6, 2024. It is now read-only.

Commit

Permalink
[webportal]group plugin (#2967)
Browse files Browse the repository at this point in the history 
* add group, hide user management in aad schema(2)

* add group, hide user management in aad schema.3

* add group, hide user management in aad schema.4

* group manege plugin

* group manege plugin.2

* group manege plugin.2

* group manege plugin.2

* Update TopBar.jsx
  • Loading branch information
@fenghuajia
fenghuajia authored Jun 20, 2019
1 parent 81830df commit dd40f56
Show file tree
Hide file tree
Showing 5 changed files with 294 additions and 211 deletions.
17 changes: 0 additions & 17 deletions src/webportal/src/app/job/job-view/fabric/JobList/TopBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,3 @@
// Copyright (c) Microsoft Corporation
// All rights reserved.
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
// to permit persons to whom the Software is furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
// BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

import React, {useContext, useState, useEffect} from 'react';
const token = cookies.get('token');
import {getTheme, ColorClassNames} from '@uifabric/styling';
Expand Down
8 changes: 4 additions & 4 deletions src/webportal/src/app/layout/layout.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const userLogoutComponent = require('../user/user-logout/user-logout.component.j
const userLoginNavComponent = require('../user/user-login/user-login-nav.component.ejs');
const pluginComponent = require('./plugins.component.ejs');
const authnMethod = require('../config/webportal.config.js').authnMethod;
const isAdmin = cookies.get('admin');

const userLoginNavHtml = userLoginNavComponent({cookies});

Expand All @@ -42,12 +43,11 @@ if (!userAuthComponent.checkAdmin()) {
$('#sidebar-menu--cluster-view').hide();
}


if (authnMethod === 'OIDC') {
document.getElementById('sidebar-menu--cluster-view--user-management').style.display = 'none';
} else {
document.getElementById('sidebar-menu--cluster-view--user-management').style.display = 'block';
$('#sidebar-menu--cluster-view--user-management').hide();
}

if (Array.isArray(window.PAI_PLUGINS) && window.PAI_PLUGINS.length > 0) {
$('.sidebar-menu').append(pluginComponent({plugins: window.PAI_PLUGINS}));
$('.sidebar-menu').append(pluginComponent({plugins: window.PAI_PLUGINS, isAdmin}));
}
115 changes: 57 additions & 58 deletions src/webportal/src/app/vc/vc-modal-component.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,60 @@
<!-- Modal component for vc add -->
<div class="modal fade" id="virtualClustersList" tabindex="-1" role="dialog" aria-labelledby="virtualClustersAddTitle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="virtualClustersAddTitle">
Add New Virtual Cluster
</h3>
<h5 class="modal-title">The capacity of new virtual cluster will be split from the "default" virtual cluster</h5>
</div>
<div class="modal-body">
<div class="modal-vc-content row">
<div class="form-group">
<input name="vcname" class="add-vc-fild form-control" placeholder="Virtual Cluster Name">
</div>
<div class="form-group">
<input name="capacity" class="add-vc-fild form-control" placeholder="Virtual Cluster Capacity">
</div>
<button type="button" class="btn btn-lg btn-primary btn-block" id="virtualClustersListAdd">
Add Virtual Cluster
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="virtualClustersList" tabindex="-1" role="dialog" aria-labelledby="virtualClustersAddTitle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="virtualClustersAddTitle">
Add New Shared VC
</h3>
<h5 class="modal-title">The capacity of new virtual cluster will be split from the "default" virtual cluster</h5>
</div>
<div class="modal-body">
<div class="modal-vc-content row">
<div class="form-group">
<input name="vcname" class="add-vc-fild form-control" placeholder="Virtual Cluster Name">
</div>
<div class="form-group">
<input name="capacity" class="add-vc-fild form-control" placeholder="Virtual Cluster Capacity">
</div>
<button type="button" class="btn btn-lg btn-primary btn-block" id="virtualClustersListAdd">
Add Shared VC
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Modal component for vc edit -->
<div class="modal fade" id="virtualClustersEdit" tabindex="-1" role="dialog" aria-labelledby="virtualClustersEditTitle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="virtualClustersEditTitle">
Edit Virtual Cluster
</h3>
</div>
<div class="modal-body">
<div class="modal-vc-content">
<div class="form-group edit-group">
<label for="editName" class="edit-group-item">Name</label>
<input id="editName" name="nameEdit" class="add-vc-fild form-control" placeholder="Virtual Cluster Name" readonly>
</div>
<div class="form-group edit-group">
<label for="editCapacity" class="edit-group-item">Capacity</label>
<input id="editCapacity" name="capacityEdit" class="add-vc-fild form-control" placeholder="Virtual Cluster Capacity">
</div>
<div class="remarks">The new capacity can be set in range of 0%~<%= vcDefault.capacity %>%, the variation will be split from or return to default virtual cluster.</div>
<button type="button" class="btn btn-lg btn-primary btn-block" id="virtualClustersListEdit">
Update Virtual Cluster
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="virtualClustersEditTitle">
Edit Virtual Cluster
</h3>
</div>
<div class="modal-body">
<div class="modal-vc-content">
<div class="form-group edit-group">
<label for="editName" class="edit-group-item">Name</label>
<input id="editName" name="nameEdit" class="add-vc-fild form-control" placeholder="Virtual Cluster Name" readonly>
</div>
<div class="form-group edit-group">
<label for="editCapacity" class="edit-group-item">Capacity</label>
<input id="editCapacity" name="capacityEdit" class="add-vc-fild form-control" placeholder="Virtual Cluster Capacity">
</div>
<div class="remarks">The new capacity can be set in range of 0%~<%= vcDefault.capacity %>%, the variation will be split from or return to default virtual cluster.</div>
<button type="button" class="btn btn-lg btn-primary btn-block" id="virtualClustersListEdit">
Update Virtual Cluster
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
198 changes: 133 additions & 65 deletions src/webportal/src/app/vc/vc.component.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,139 @@
<section class='content-header'>
<%= breadcrumb({ breadcrumbTitle: "Virtual Clusters" }) %>
</section>

<section class='content'>
<div class='box'>
<div class='box-body'>
<% if (isAdmin === 'true') { %>
<button class="btn btn-success btn-lg add-vc-btn" id="virtualClustersBtn" onclick="virtualClusterShow()">Add Virtual Cluster</button>
<% } %>
<table id='vc-table' class='table table-bordered table-hover table-condensed' style='vertical-align:middle'>
<thead>
<tr>
<th>Name</th>
<th>Capacity</th>
<th>Utilization</th>
<th>Memory</th>
<th>CPUs</th>
<th>GPUs</th>
<th>Active Jobs</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% for (let vcName in data) { %>
<% if (specifiedVc && vcName !== specifiedVc) continue; %>
<tr>
<td>
<a href="virtual-clusters.html?vcName=<%= vcName %>"><%= vcName %></a>
</td>
<td>
<%= formatNumber(data[vcName]['capacity'], 2) %> %
</td>
<td>
<%= formatNumber(data[vcName]['capacity'] === 0 ? 0 : data[vcName]['usedCapacity'] / data[vcName]['capacity'] * 100, 2) %> %
</td>
<td>
<%= data[vcName]['resourcesUsed']['memory'] %> MB
</td>
<td>
<%= data[vcName]['resourcesUsed']['vCores'] %>
</td>
<td>
<%= data[vcName]['resourcesUsed']['GPUs'] %>
</td>
<td>
<%= data[vcName]['numJobs'] %>
</td>
<td width="8%">
<%= convertState(vcName, data[vcName]['status']) %>
</td>
<td>
<a href="job-list.html?vcName=<%= vcName %>">View Jobs</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="<%= yarnWebPortalUri %>/cluster/scheduler?openQueues=<%= vcName %>" target="_blank">Go to Yarn Page</a>
<% if (isAdmin === 'true') { %>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a onclick="deleteVcItem('<%= vcName %>'), deleteGroup('<%= vcName %>')" class="<%= vcName === 'default' ? 'default' : 'item-btn' %>">Delete</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a onclick="editVcItem('<%= vcName %>', '<%= formatNumber(data[vcName]['capacity'], 2) %> %')" class="<%= vcName === 'default' ? 'default' : 'item-btn' %>">Edit</a>
<% } %>
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#sharedvc" role="tab" data-toggle="tab">Shared vc</a></li>
<li role="presentation"><a href="#dedicatedvc" role="tab" data-toggle="tab">Dedicated VC</a></li>
</ul>
</div>
<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>
<% if (isAdmin === 'true') { %>
<button class="btn btn-success btn-xl add-vc-btn" id="virtualClustersBtn" onclick="virtualClusterShow()">Add Shared VC</button>
<% } %>
<table id='common-table' class='table table-bordered table-hover table-condensed' style='vertical-align:middle'>
<thead>
<tr>
<th>Name</th>
<th>Capacity</th>
<th title="Bonus is an ability to use other shared VCs' resource">Bonus</th>
<th>Utilization</th>
<th>Memory</th>
<th>CPUs</th>
<th>GPUs</th>
<th>Active Jobs</th>
<th>State</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% for (let vcName in data) { %>
<% if (specifiedVc && vcName !== specifiedVc) continue; %>
<% if (data[vcName]['dedicated'] === false) { %>
<tr>
<td>
<%= vcName %>
</td>
<td>
<%= formatNumber(data[vcName]['capacity'], 2) %> %
</td>
<td>
<%= data[vcName]['capacity'] < data[vcName]['maxCapacity'] || data[vcName]['maxCapacity'] === 100 ? 'enabled' : 'disabled' %>
</td>
<td>
<%= formatNumber(data[vcName]['capacity'] === 0 ? 0 : data[vcName]['usedCapacity'] / data[vcName]['capacity'] * 100, 2) %> %
</td>
<td>
<%= Math.floor(data[vcName]['resourcesUsed']['memory']) %> / <%= Math.floor(data[vcName]['resourcesTotal']['memory']) %> MB
</td>
<td>
<%= Math.floor(data[vcName]['resourcesUsed']['vCores']) %> / <%= Math.floor(data[vcName]['resourcesTotal']['vCores']) %>
</td>
<td>
<%= Math.floor(data[vcName]['resourcesUsed']['GPUs']) %> / <%= Math.floor(data[vcName]['resourcesTotal']['GPUs']) %>
</td>
<td>
<%= data[vcName]['numJobs'] %>
</td>
<td width="8%">
<%= convertState(vcName, data[vcName]['status']) %>
</td>
<td>
<a href="job-list.html?vcName=<%= vcName %>">View Jobs</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="<%= yarnWebPortalUri %>/cluster/scheduler?openQueues=<%= vcName %>" target="_blank">Go to Yarn Page</a>
<% if (isAdmin === 'true') { %>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a onclick="deleteVcItem('<%= vcName %>')" class="<%= vcName === 'default' ? 'default' : 'item-btn' %>">Delete</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a onclick="editVcItem('<%= vcName %>', '<%= formatNumber(data[vcName]['capacity'], 2) %> %')" class="<%= vcName === 'default' ? 'default' : 'item-btn' %>">Edit</a>
<% } %>
</td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane box" id="dedicatedvc">
<div class='box-body'>
<div class="message-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.</div>
<table id='dedicated-table' class='table table-bordered table-hover table-condensed' style='vertical-align:middle'>
<thead>
<tr>
<th>Name</th>
<th>Utilization</th>
<th>Memory</th>
<th>CPUs</th>
<th>GPUs</th>
<th>Active Jobs</th>
<th>State</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% for (let vcName in data) { %>
<% if (specifiedVc && vcName !== specifiedVc) continue; %>
<% if (data[vcName]['dedicated'] === true) { %>
<tr>
<td>
<%= vcName %>
</td>
<td>
<%= formatNumber(data[vcName]['capacity'] === 0 ? 0 : data[vcName]['usedCapacity'] / data[vcName]['capacity'] * 100, 2) %> %
</td>
<td>
<%= Math.floor(data[vcName]['resourcesUsed']['memory']) %> / <%= Math.floor(data[vcName]['resourcesTotal']['memory']) %> MB
</td>
<td>
<%= Math.floor(data[vcName]['resourcesUsed']['vCores']) %> / <%= Math.floor(data[vcName]['resourcesTotal']['vCores']) %>
</td>
<td>
<%= Math.floor(data[vcName]['resourcesUsed']['GPUs']) %> / <%= Math.floor(data[vcName]['resourcesTotal']['GPUs']) %>
</td>
<td>
<%= data[vcName]['numJobs'] %>
</td>
<td width="8%">
<%= convertState(vcName, data[vcName]['status']) %>
</td>
<td>
<a href="job-list.html?vcName=<%= vcName %>">View Jobs</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="<%= yarnWebPortalUri %>/cluster/scheduler?openQueues=<%= vcName %>" target="_blank">Go to Yarn Page</a>
</td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</div>
</div>
</div>
<%= modal({'vcDefault': data.default}) %>
</section>
</section>
Loading

0 comments on commit dd40f56

Please sign in to comment.