CSM Installation Wizard:Disable Operator option for Powerflex and Unity

content/docs/deployment/csminstallationwizard/_index.md

@@ -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
 

content/docs/deployment/csminstallationwizard/src/index.html

@@ -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>
@@ -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>
@@ -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>

content/docs/deployment/csminstallationwizard/src/static/js/commands.js

@@ -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';

content/docs/deployment/csminstallationwizard/src/static/js/tests/ui-functions.test.js

@@ -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">
@@ -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");
@@ -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");
 	});
 });

content/docs/deployment/csminstallationwizard/src/static/js/ui-functions.js

@@ -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();
@@ -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();
@@ -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;
@@ -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
@@ -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();
 	}
 }
 

content/docs/deployment/csminstallationwizard/src/static/js/utility.js

@@ -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;