Skip to content

Commit

Permalink
CSM Installation Wizard:Disable Operator option for Powerflex and Uni…
Browse files Browse the repository at this point in the history 
…ty (#784)

* disabled operator support for powerflex & unity, added operator prerequiste note

* minor change

* fixed linter issues

* fixed minor bug

* fixed linter issue

* fixed linter issue

* fixed linter issue
  • Loading branch information
@niranjan-n1
niranjan-n1 authored Aug 30, 2023
1 parent 5fea27d commit 1e50697
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 15 deletions.
2 changes: 1 addition & 1 deletion content/docs/deployment/csminstallationwizard/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The [Dell Container Storage Modules Installation Wizard](./src/index.html) is a
| CSI Unity XT | 2.8.0 |✔️ |❌ |
| CSI Unity XT | 2.7.0 |✔️ |❌ |

>NOTE: The Installation Wizard currently does not support operator-based manifest file generation for Unity and PowerFlex drivers.
>NOTE: The Installation Wizard currently does not support operator-based manifest file generation for Unity XT and PowerFlex drivers.
## Supported Dell CSM Modules

Expand Down
8 changes: 6 additions & 2 deletions content/docs/deployment/csminstallationwizard/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
<option value="powermax">PowerMax</option>
<option value="isilon">PowerScale</option>
<option value="vxflexos">PowerFlex</option>
<option value="unity">Unity</option>
<option value="unity">Unity XT</option>
</select>
</div>
</div>
Expand Down Expand Up @@ -668,6 +668,10 @@
</button>
</div>
</div>
<div class="mt-3 mx-1 py-2 note" id="csm-operator-note-wrapper">
<i class="icon dds__icon dds__icon--alert-info-cir"></i>
<span class="h6" id="csm-operator-note"></span>
</div>
<div class="mt-3 mx-1 py-2 note">
<i class="icon dds__icon dds__icon--alert-info-cir"></i>
<span class="h6" id="command-note"></span>
Expand All @@ -678,7 +682,7 @@
<div class="mt-3 mx-1" id="command2-wrapper">
<span id="command2"></span>
</div>
<div class="mt-3 mx-1 py-2 note" id="reverseProxyNote">
<div class="mt-3 mx-1 py-2 note" id="reverse-proxy-note">
<i class="icon dds__icon dds__icon--alert-info-cir"></i>
<span class="h6">Click on the <a href="https://dell.github.io/csm-docs/docs/csidriver/features/powermax/#prerequisite" target="_blank">documentation link</a> for the steps to generate the certificates</span>
</div>
Expand Down
2 changes: 2 additions & 0 deletions content/docs/deployment/csminstallationwizard/src/static/js/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
*/
var commandTitle = 'Run the following commands to install';
var commandNote = 'Ensure that the namespaces and secrets are created before installing the driver';
var commandNoteOperator = 'Ensure that the namespaces, secrets and config.yaml (if applicable) are created before installing the driver';
var csmOperatorNote = 'Prerequisite: Ensure that the CSM Operator is installed';
var command1 = 'helm repo add dell https://dell.github.io/helm-charts';
var command2 = 'helm install $release-name dell/container-storage-modules -n $namespace --version $version -f values.yaml';
var command3 = 'kubectl create -f values.yaml';
Expand Down
14 changes: 9 additions & 5 deletions content/docs/deployment/csminstallationwizard/src/static/js/tests/ui-functions.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -705,11 +705,13 @@ describe("GIVEN hideFields function", () => {
describe("GIVEN displayCommands function", () => {
const commandTitleValue = "Run the following commands to install";
const commandNoteValue = "Ensure that the namespaces and secrets are created before installing the helm chart";
const csmOperatorNoteValue = "Prerequisite: Ensure that the CSM Operator is installed";
const commandNoteOperatorValue = "Ensure that the namespaces, secrets and config.yaml (if applicable) are created before installing the driver";
const command1Value = "helm repo add dell https://dell.github.io/helm-charts";
const command2Value = "helm install $release-name dell/container-storage-modules -n $namespace --version $version -f values.yaml";
const command3Value = "kubectl create -f values.yaml";

test("SHOULD show expected commands", () => {
test("SHOULD show expected commands: Installation Type: Helm", () => {
document.body.innerHTML = `
<input id="array" value="powerstore">
<input id="installation-type" value="helm">
Expand All @@ -723,7 +725,7 @@ describe("GIVEN displayCommands function", () => {
</div>
`;

displayCommands("powerstore", commandTitleValue, commandNoteValue, command1Value, command2Value, command3Value, CONSTANTS);
displayCommands("powerstore", commandTitleValue, commandNoteValue, commandNoteOperatorValue, csmOperatorNoteValue, command1Value, command2Value, command3Value, CONSTANTS);

expect($("#command-text-area").css("display")).toEqual("block");
expect($("#command-title").text()).toEqual("Run the following commands to install");
Expand All @@ -732,25 +734,27 @@ describe("GIVEN displayCommands function", () => {
expect($("#command2").text()).toEqual("helm install powerstore dell/container-storage-modules -n csi-powerstore --version 1.0.0 -f values.yaml");
});

test("SHOULD show expected commands", () => {
test("SHOULD show expected commands: Installation Type: Operator", () => {
document.body.innerHTML = `
<input id="array" value="powerstore">
<input id="installation-type" value="operator">
<input type="text" id="driver-namespace" value="csi-powerstore">
<input type="text" id="csm-version" value="1.7.0">
<div id="command-text-area" style="display:none">
<div id="command-title"></div>
<span id="csm-operator-note" style="display:none"></span>
<span id="command-note" style="display:none"></span>
<span id="command1"></span>
<span id="command2"></span>
</div>
`;

displayCommands("powerstore", commandTitleValue, commandNoteValue, command1Value, command2Value, command3Value, CONSTANTS);
displayCommands("powerstore", commandTitleValue, commandNoteValue, commandNoteOperatorValue, csmOperatorNoteValue, command1Value, command2Value, command3Value, CONSTANTS);

expect($("#command-text-area").css("display")).toEqual("block");
expect($("#csm-operator-note").text()).toEqual("Prerequisite: Ensure that the CSM Operator is installed");
expect($("#command-title").text()).toEqual("Run the following commands to install");
expect($("#command-note").text()).toEqual("Ensure that the namespaces and secrets are created before installing the helm chart");
expect($("#command-note").text()).toEqual("Ensure that the namespaces, secrets and config.yaml (if applicable) are created before installing the driver");
expect($("#command1").text()).toEqual("kubectl create -f values.yaml");
});
});
Expand Down
53 changes: 46 additions & 7 deletions content/docs/deployment/csminstallationwizard/src/static/js/ui-functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,43 @@ const setupTooltipStyle = () => {
[...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
};

$(function() {

$("#installation-type, #array").focus(function() {
var installationType = $("#installation-type").val();
var array = $("#array").val();

if (installationType === CONSTANTS.OPERATOR){
if (array === CONSTANTS.POWERFLEX || array === CONSTANTS.UNITY) {
$("option[value='vxflexos'], option[value='unity'],option[value='operator']").prop("disabled", true);
}
} else if (array === CONSTANTS.POWERFLEX || array === CONSTANTS.UNITY){
$("option[value='operator']").prop("disabled", true);
} else {
$("option").prop("disabled", false);
}
});
});

function disableDriver(){
var installationType = $("#installation-type").val();
var array = $("#array").val();
if (installationType === CONSTANTS.OPERATOR){
$("option[value='vxflexos'], option[value='unity']").prop("disabled", true);
}
else if (array === CONSTANTS.POWERFLEX || array === CONSTANTS.UNITY){
$("option[value='operator']").prop("disabled", true);
}
else {
$("option").prop("disabled", false);
}
}

function onInstallationTypeChange(){
driver = document.getElementById("array").value
driver = document.getElementById("array").value;
driver === "" ? $("#main").hide() : $("#main").show();
installationType = document.getElementById("installation-type").value
installationType = document.getElementById("installation-type").value;
disableDriver();
displayModules(installationType, driver, CONSTANTS)
$("#command-text-area").hide();
onOperatorResiliencyChange();
Expand All @@ -36,6 +69,7 @@ function onInstallationTypeChange(){

function onArrayChange() {
$('#array').on('change', function() {
disableDriver();
$("#command-text-area").hide();
driver = $(this).val();
driver === "" ? $("#main").hide() : $("#main").show();
Expand Down Expand Up @@ -261,7 +295,7 @@ const downloadFile = (validateFormFunc, generateYamlFileFunc, displayCommandsFun
var link = document.getElementById('download-file');
link.href = generateYamlFileFunc(template);
link.style.display = 'inline-block';
displayCommandsFunc(releaseName, commandTitle, commandNote, command1, command2, command3, CONSTANTS_PARAM)
displayCommandsFunc(releaseName, commandTitle, commandNote, commandNoteOperator, csmOperatorNote, command1, command2, command3, CONSTANTS_PARAM)
validateInputFunc(validateFormFunc, CONSTANTS_PARAM)

return true;
Expand Down Expand Up @@ -403,7 +437,7 @@ function displayModules(installationType, driverName, CONSTANTS_PARAM) {
}
}

function displayCommands(releaseNameValue, commandTitleValue, commandNoteValue, command1Value, command2Value, command3Value, CONSTANTS) {
function displayCommands(releaseNameValue, commandTitleValue, commandNoteValue, commandNoteOperatorValue, csmOperatorNoteValue, command1Value, command2Value, command3Value, CONSTANTS) {
driverNamespace = document.getElementById("driver-namespace").value;
csmVersion = document.getElementById("csm-version").value;
installationType = document.getElementById("installation-type").value
Expand All @@ -420,23 +454,28 @@ function displayCommands(releaseNameValue, commandTitleValue, commandNoteValue,
break;
}
$("#command-text-area").show();
$("#reverseProxyNote").hide();
$("#reverse-proxy-note").hide();
$("#csm-operator-note-wrapper").hide();
$("#command-title").html(commandTitleValue);
$("#command-note").show();
$("#command-note").html(commandNoteValue);

if (installationType === 'helm'){
$("#command1").html(command1Value);
$("#command-note").html(commandNoteValue);

$("#command2-wrapper").show();
var command2 = command2Value.replace("$release-name", releaseNameValue).replace("$namespace", driverNamespace).replace("$version", helmChartVersion);
$("#command2").html(command2);
} else {
$("#csm-operator-note-wrapper").show();
$("#csm-operator-note").html(csmOperatorNoteValue);
$("#command1").html(command3Value);
$("#command-note").html(commandNoteOperatorValue);
$("#command2-wrapper").hide();

}
if (document.getElementById("array").value === CONSTANTS.POWERMAX) {
$("#reverseProxyNote").show();
$("#reverse-proxy-note").show();
}
}

Expand Down
4 changes: 4 additions & 0 deletions content/docs/deployment/csminstallationwizard/src/static/js/utility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ function validateForm(CONSTANTS_PARAM) {
return false;
}

if ($("#installation-type").val() === CONSTANTS_PARAM.OPERATOR && ($("#array").val() === CONSTANTS_PARAM.POWERFLEX || $("#array").val() === CONSTANTS_PARAM.UNITY)) {
return false;
}

const powermaxSelected = document.getElementById('array').value.trim() === CONSTANTS_PARAM.POWERMAX;
const vSphereEnabled = $("#vSphere").prop('checked') ? true : false;

Expand Down

0 comments on commit 1e50697

Please sign in to comment.