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

[webportal]add group #2945

Merged
merged 3 commits into from
Jun 19, 2019
Merged

[webportal]add group #2945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86f73e6
add group, hide user management in aad schema(2)
fenghuajia Jun 14, 2019
eef9bbb
add group, hide user management in aad schema.3
fenghuajia Jun 14, 2019
1498cad
add group, hide user management in aad schema.4
fenghuajia Jun 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/webportal/config/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const helpers = require('./helpers');

const title = 'Platform for AI';
const version = require('../package.json').version;
const authnMethod = require('../server/config/index.js').authnMethod;
const FABRIC_DIR = [
path.resolve(__dirname, '../src/app/job/job-view/fabric'),
path.resolve(__dirname, '../src/app/home'),
Expand All @@ -41,7 +40,6 @@ function generateHtml(opt) {
return new HtmlWebpackPlugin(Object.assign({
title: title,
version: version,
authnMethod: authnMethod,
template: './src/app/layout/layout.component.ejs',
minify: {
collapseWhitespace: true,
Expand Down
6 changes: 1 addition & 5 deletions src/webportal/server/config/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ let config = {
env: process.env.NODE_ENV,
logLevel: process.env.LOG_LEVEL,
serverPort: process.env.SERVER_PORT,
authnMethod: process.env.AUTHN_METHOD,
};

// define config schema
Expand All @@ -44,9 +43,6 @@ const configSchema = Joi.object().keys({
.min(8000)
.max(65535)
.default(9286),
authnMethod: Joi.string()
.allow(['basic', 'OIDC'])
.default('basic'),
}).required();

const {error, value} = Joi.validate(config, configSchema);
Expand All @@ -56,4 +52,4 @@ if (error) {
config = value;

// module exports
module.exports = config;
module.exports = config;
12 changes: 5 additions & 7 deletions src/webportal/src/app/layout/layout.component.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,11 @@
<span>&bull;&nbsp;&nbsp;&nbsp; K8s Dashboard</span>
</a>
</li>
<% if (htmlWebpackPlugin.options.authnMethod !== 'OIDC') { %>
<li id="sidebar-menu--cluster-view--user-management">
<a href="/user-view.html">
<span>&bull;&nbsp;&nbsp;&nbsp; User Management</span>
</a>
</li>
<% } %>
<li id="sidebar-menu--cluster-view--user-management">
<a href="/user-view.html">
<span>&bull;&nbsp;&nbsp;&nbsp; User Management</span>
</a>
</li>
</ul>
</li>
<li class="treeview" id="sidebar-menu--documents">
Expand Down
8 changes: 7 additions & 1 deletion src/webportal/src/app/layout/layout.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const userAuthComponent = require('../user/user-auth/user-auth.component.js');
const userLogoutComponent = require('../user/user-logout/user-logout.component.js');
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 userLoginNavHtml = userLoginNavComponent({cookies});

Expand All @@ -42,6 +42,12 @@ 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';
}

if (Array.isArray(window.PAI_PLUGINS) && window.PAI_PLUGINS.length > 0) {
$('.sidebar-menu').append(pluginComponent({plugins: window.PAI_PLUGINS}));
}
196 changes: 64 additions & 132 deletions src/webportal/src/app/vc/vc.component.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,71 @@
<section class='content-header'>
<%= breadcrumb({ breadcrumbTitle: "Virtual Clusters" }) %>
</section>

<section class='content'>
<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 %>'), 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>
<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>
<% } %>
<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>
<% } %>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
<%= modal({'vcDefault': data.default}) %>
</section>
</section>
50 changes: 8 additions & 42 deletions src/webportal/src/app/vc/vc.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +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.

//

require('bootstrap/js/modal.js');
require('datatables.net/js/jquery.dataTables.js');
require('datatables.net-bs/js/dataTables.bootstrap.js');
Expand All @@ -33,8 +14,7 @@ const webportalConfig = require('../config/webportal.config.js');
const userAuth = require('../user/user-auth/user-auth.component');

//
let commonTable = null;
let dedicateTable = null;
let table = null;
let isAdmin = cookies.get('admin');
//

Expand All @@ -54,14 +34,7 @@ const loadData = (specifiedVc) => {
modal: vcModelComponent,
});
$('#content-wrapper').html(vcHtml);
commonTable = $('#common-table').dataTable({
scrollY: (($(window).height() - 265)) + 'px',
lengthMenu: [[20, 50, 100, -1], [20, 50, 100, 'All']],
columnDefs: [
{type: 'natural', targets: [0, 1, 2, 3, 4, 5, 6]},
],
}).api();
dedicateTable = $('#dedicated-table').dataTable({
table = $('#vc-table').dataTable({
scrollY: (($(window).height() - 265)) + 'px',
lengthMenu: [[20, 50, 100, -1], [20, 50, 100, 'All']],
columnDefs: [
Expand All @@ -87,13 +60,9 @@ const formatNumber = (x, precision) => {

const resizeContentWrapper = () => {
$('#content-wrapper').css({'height': $(window).height() + 'px'});
$('#sharedvc .dataTables_scrollBody').css('height', (($(window).height() - (isAdmin === 'true' ? 410 : 366))) + 'px');
$('#dedicatedvc .dataTables_scrollBody').css('height', (($(window).height() - 386)) + 'px');
if (commonTable != null) {
commonTable.columns.adjust().draw();
}
if (dedicateTable != null) {
dedicateTable.columns.adjust().draw();
if (table != null) {
$('.dataTables_scrollBody').css('height', (($(window).height() - (isAdmin === 'true' ? 335 : 265))) + 'px');
table.columns.adjust().draw();
}
};

Expand Down Expand Up @@ -281,11 +250,11 @@ const addGroup = () => {
return false;
}
$.ajax({
url: `${webportalConfig.restServerUri}/api/v2/user/create/`,
url: `${webportalConfig.restServerUri}/api/v2/group/create`,
data: JSON.stringify({
'groupname': vcName,
'description': `This group of the same name is created by creating a Virtual Cluster named ${vcName}`,
'externalName': `No extensions yet`,
'description': ``,
'externalName': ``,
}),
headers: {
Authorization: `Bearer ${token}`,
Expand Down Expand Up @@ -340,9 +309,6 @@ $(document).ready(() => {
window.onresize = function(envent) {
resizeContentWrapper();
};
$(document).on('click', '.nav li', () => {
resizeContentWrapper();
});
resizeContentWrapper();
loadData(url.parse(window.location.href, true).query['vcName']);

Expand Down
Loading