Preview feature UI dialog popup (#571)

* add dialog for previews * add ability to open link
Azure · May 5, 2023 · 0b4e946 · 0b4e946
1 parent 1f2ac91
commit 0b4e946
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 6 deletions.
diff --git a/helper/src/components/addonsTab.js b/helper/src/components/addonsTab.js
@@ -1,7 +1,8 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from 'react';
-import { TextField, Link, Separator, Dropdown, Slider, Stack, Text, Label, ChoiceGroup, Checkbox, MessageBar, MessageBarType, SpinButton } from '@fluentui/react';
+import { TextField,Link, Separator, Dropdown, Slider, Stack, Text, Label, ChoiceGroup, Checkbox, MessageBar, MessageBarType, SpinButton } from '@fluentui/react';
 import { adv_stackstyle, hasError, getError } from './common'
+import { PreviewDialog } from  './previewDialog'
 
 
 export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
@@ -58,17 +59,23 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                     <MessageBar styles={{ root: { marginTop: '10px',width: '700px' } }} messageBarType={MessageBarType.info}>To enable client trust in AKS, leverage open source tooling eg. <a target="_new" href="https://github.com/sse-secure-systems/connaisseur">Connaisseur</a>  (<a target="_new" href="https://github.com/Gordonby/connaisseur-aks-acr">sample</a>)</MessageBar>
                 }
             </Stack.Item>
-
             <Stack.Item align="center" styles={{ root: { width: '700px' }}}>
-                <Checkbox disabled={addons.registry !== "Premium"} checked={addons.acrUntaggedRetentionPolicyEnabled} onChange={(ev, v) => updateFn("acrUntaggedRetentionPolicyEnabled", v)} label={<Text>Create untagged image retention policy (<a target="_new" href="https://docs.microsoft.com/azure/container-registry/container-registry-content-trust">docs</a>) (*preview)</Text>} />
+                <Checkbox
+                disabled={addons.registry !== "Premium"}
+                checked={addons.acrUntaggedRetentionPolicyEnabled}
+                onChange={(ev, v) => updateFn("acrUntaggedRetentionPolicyEnabled", v)}
+                label={<Text>Create untagged image retention policy (<a target="_new" href="https://docs.microsoft.com/azure/container-registry/container-registry-content-trust">docs</a>)
+                 </Text>} />
                 <MessageBar styles={{ root: { marginTop: '10px', width: '700px' } }} messageBarType={MessageBarType.warning}>Deleting untagged images will remove them from your ACR after a defined period (<a target="_new" href="https://docs.microsoft.com/en-us/azure/container-registry/container-registry-retention-policy">docs</a>) (*preview)</MessageBar>
-
                 {addons.acrUntaggedRetentionPolicyEnabled && (
+                    <div>
+                    <PreviewDialog previewLink={"https://docs.microsoft.com/azure/container-registry/container-registry-content-trust"} isDialogHidden={addons.acrUntaggedRetentionPolicyEnabled}/>
                     <Stack.Item style={{ marginTop: '10px', marginLeft: "50px"}}>
                         <Slider label="Days to retain untagged images for" min={0} max={365} step={1} defaultValue={addons.acrUntaggedRetentionPolicy} showValue={true}
                             onChange={(v) => updateFn("acrUntaggedRetentionPolicy", v)}
                             snapToStep />
                     </Stack.Item>
+                    </div>
                 )}
             </Stack.Item>
 
@@ -109,7 +116,10 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                     <MessageBar styles={{ root: { marginTop: '20px', marginLeft: '50px', width: '700px' } }} messageBarType={MessageBarType.error}>{getError(invalidArray, 'ingress')}</MessageBar>
                 }
             </Stack.Item>
-
+            { addons.ingress === "warNginx" &&
+                (
+                <PreviewDialog previewLink={"https://docs.microsoft.com/en-us/azure/aks/web-app-routing"}/>
+                )}
             <Stack.Item align="center" styles={{ root: { maxWidth: '700px', display: (addons.ingress === "none" ? "none" : "block") } }} >
                 <Stack tokens={{ childrenGap: 15 }}>
                     {addons.ingress === "nginx" && false &&
@@ -283,11 +293,22 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                         styles={{ root: { marginTop: '15px'}}}
                     />
                     <Checkbox styles={{ root: { marginTop: '10px', marginBottom: '10px'}}} checked={addons.containerLogsV2} onChange={(ev, v) => setContainerLogsV2(v)} label={<Text>Enable the ContainerLogV2 schema (<Link target="_target" href="https://learn.microsoft.com/en-us/azure/azure-monitor/containers/container-insights-logging-v2">docs</Link>) (*preview)</Text>} />
+                    {
+                        addons.containerLogsV2 &&
+                        (
+                            <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/azure-monitor/containers/container-insights-logging-v2"} isDialogHidden={addons.acrUntaggedRetentionPolicyEnabled}/>
+                        )
+                    }
 
                     <MessageBar messageBarType={MessageBarType.warning}>Enable the ContainerLogV2 (successor for ContainerLog) schema for additional data capture and friendlier schema. Disabling this feature will also disable features that are dependent on it (e.g. Basic Logs).</MessageBar>
 
                     <Checkbox styles={{ root: { marginTop: '10px', marginBottom: '10px'}}} checked={addons.containerLogsV2BasicLogs} onChange={(ev, v) => setContainerLogV2BasicLogs(v)} label={<Text>Set Basic Logs for ContainerLogV2 (<Link target="_target" href="https://learn.microsoft.com/en-us/azure/azure-monitor/logs/basic-logs-configure?tabs=portal-1%2Cportal-2">docs</Link>) (*preview)</Text>} />
-
+                    {
+                        addons.containerLogsV2BasicLogs &&
+                        (
+                            <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/azure-monitor/logs/basic-logs-configure?tabs=portal-1%2Cportal-2"}/>
+                        )
+                    }
                     <MessageBar messageBarType={MessageBarType.warning}>Enable the Basic log data plan to cost optimise on log ingestion at the cost of a lower retention period, some log query operations that are no longer available and no alerts. Enabling Basic Logs for ContainerLogsV2 has a dependency on the ContainerLogsV2 schema and thus enabling this capability will automatically enable ContainerLogsV2. In addition, the ContainerLogsV2 table's retention is fixed at eight days. More information available via the provided docs link.</MessageBar>
 
                     <Checkbox styles={{ root: { marginTop: '10px'}}} checked={addons.createAksMetricAlerts} onChange={(ev, v) => updateFn("createAksMetricAlerts", v)} label={<Text>Create recommended metric alerts, enable you to monitor your system resource when it's running on peak capacity or hitting failure rates (<Link target="_target" href="https://azure.microsoft.com/en-us/updates/ci-recommended-alerts/">docs</Link>) </Text>} />
@@ -472,6 +493,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                     (<a target="_new" href="https://docs.microsoft.com/en-us/azure/aks/keda-about">docs</a>)
                 </Label>
                 <Checkbox styles={{ root: { marginLeft: '50px' } }} checked={addons.kedaAddon} onChange={(ev, v) => updateFn("kedaAddon", v, 'https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites')} label="Install the KEDA AddOn" />
+                {
+                    addons.kedaAddon &&
+                    (
+                        <PreviewDialog previewLink={"https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites"}/>
+                    )
+                }
             </Stack.Item>
 
             <Separator className="notopmargin" />
@@ -493,6 +520,10 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
                     (<a target="_new" href="https://github.com/Azure/azure-workload-identity">project</a>)
                 </Label>
                 <Checkbox styles={{ root: { marginLeft: '50px' } }} inputProps={{ "data-testid": "addons-workloadIdentity-Checkbox"}} checked={addons.workloadIdentity} onChange={(ev, v) => updateFn("workloadIdentity", v)} label="Install Workload Identity" />
+                {
+                    addons.workloadIdentity &&
+                    ( <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/workload-identity-deploy-cluster"}/> )
+                }
             </Stack.Item>
 
             <Separator className="notopmargin" />

diff --git a/helper/src/components/networkTab.js b/helper/src/components/networkTab.js
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { Image, ImageFit, Link, Separator, TextField, DirectionalHint, Callout, Stack, Text, Label, ChoiceGroup, Checkbox, MessageBar, MessageBarType, Slider, Dropdown } from '@fluentui/react';
 import { adv_stackstyle, hasError, getError } from './common'
+import { PreviewDialog } from './previewDialog';
 
 const columnProps = {
     tokens: { childrenGap: 20 },
@@ -98,6 +99,13 @@ export default function NetworkTab ({ defaults, tabValues, updateFn, invalidArra
                             checked={net.networkPluginMode}
                             onChange={(ev, v) => UpdateCniOverlay(v)}
                             label="CNI Overlay Network" />
+                            {
+                                net.networkPluginMode &&
+                                (
+                                    <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/azure-cni-overlay#steps-to-set-up-overlay-clusters"} />
+                                )
+
+                            }
                     </Stack.Item>
                     <Stack.Item>
                         <MessageBar messageBarType={MessageBarType.info}>Powered by Cilium is a <a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/azure-cni-powered-by-cilium#prerequisites">preview feature</a> that leverages more efficient use of the linux kernel and other networking features.</MessageBar>
@@ -107,6 +115,12 @@ export default function NetworkTab ({ defaults, tabValues, updateFn, invalidArra
                             checked={net.ebpfDataplane}
                             onChange={(ev, v) => updateFn("ebpfDataplane", v)}
                             label="Cilium powered dataplane" />
+                            {
+                                net.ebpfDataplane &&
+                                (
+                                    <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/azure-cni-powered-by-cilium#prerequisites"} />
+                                )
+                            }
                     </Stack.Item>
                 </Stack>
             </Stack.Item>

diff --git a/helper/src/components/previewDialog.js b/helper/src/components/previewDialog.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { useBoolean } from "@fluentui/react-hooks";
+import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
+import { PrimaryButton,DefaultButton } from '@fluentui/react/lib/Button';
+
+export function PreviewDialog({previewLink}) {
+
+  const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(false);
+    const dialogContentProps = {
+      type: DialogType.normal,
+      title: 'Preview Feature',
+      closeButtonAriaLabel: 'Close',
+      subText: `Review the instructions on this page ${previewLink} to enable the feature `,
+    };
+    function _openLink() {
+      window.open(`${previewLink}`, '_blank', 'noreferrer');
+    }
+
+  return (
+    <div>
+      <Dialog
+      hidden={hideDialog}
+      onDismiss={toggleHideDialog}
+      dialogContentProps={dialogContentProps}
+      >
+      <DialogFooter>
+      <PrimaryButton onClick={toggleHideDialog} text="Close" />
+      <DefaultButton onClick={_openLink} text="Open Link in New Tab" />
+    </DialogFooter>
+      </Dialog>
+    </div>
+  );
+}