Skip to content

Commit

Permalink
bugfix for preview modal (#601)
Browse files Browse the repository at this point in the history
* resolve merge conflicts

* bugfix for preview dialog popup

* bugfix for preview dialog popup

* review comments

* review comments

---------

Co-authored-by: Keith Howling <[email protected]>
  • Loading branch information
nellyk and khowling authored Jun 30, 2023
1 parent 5e360b5 commit 7e4eb18
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 60 deletions.
44 changes: 10 additions & 34 deletions helper/src/components/addonsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@
import React from '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 }) {
export default function ({ tabValues, updateFn, featureFlag, invalidArray,showPreviewModal }) {
const { cluster, addons, net } = tabValues
const osmFeatureFlag = featureFlag.includes('osm')
const wiFeatureFlag = featureFlag.includes('workloadId')
Expand Down Expand Up @@ -63,13 +61,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
<Checkbox
disabled={addons.registry !== "Premium"}
checked={addons.acrUntaggedRetentionPolicyEnabled}
onChange={(ev, v) => updateFn("acrUntaggedRetentionPolicyEnabled", v)}
onChange={(ev, v) => {updateFn("acrUntaggedRetentionPolicyEnabled", v); showPreviewModal(ev,"https://learn.microsoft.com/en-us/azure/container-registry/container-registry-retention-policy"); }}
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)}
Expand Down Expand Up @@ -110,16 +107,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
{ key: 'nginx', text: 'Nginx ingress controller' },
{ key: 'traefik', text: 'Traefik ingress controller' }
]}
onChange={(ev, { key }) => updateFn("ingress", key)}
onChange={(ev, { key }) => {updateFn("ingress", key); key === "warNginx" && showPreviewModal(ev,"https://docs.microsoft.com/en-us/azure/aks/web-app-routing"); }}
/>
{hasError(invalidArray, 'ingress') &&
<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 &&
Expand Down Expand Up @@ -292,16 +285,12 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
decrementButtonAriaLabel="Decrease value by 1"
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>)</Text>} />

<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>} />

<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>)</Text>}
/>
<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>)</Text>} />
<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>} />
Expand Down Expand Up @@ -520,13 +509,7 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
KEDA : Enable Kubernetes Event-driven Autoscaling (KEDA) on the AKS Cluster (<a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/keda-deploy-add-on-arm#prerequisites">*preview</a>)
(<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"}/>
)
}
<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'); showPreviewModal(ev,"https://learn.microsoft.com/azure/aks/keda-deploy-add-on-arm#prerequisites")}} label="Install the KEDA AddOn" />
</Stack.Item>

<Separator className="notopmargin" />
Expand All @@ -540,12 +523,8 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
styles={{ root: { marginLeft: '50px' } }}
inputProps={{ "data-testid": "addons-asm-Checkbox"}}
checked={addons.serviceMeshProfile}
onChange={(ev, v) => updateFn("serviceMeshProfile", v ? "Istio" : "")}
onChange={(ev, v) => { updateFn("serviceMeshProfile", v ? "Istio" : ""); showPreviewModal(ev, "https://learn.microsoft.com/en-us/azure/aks/istio-deploy-addon");}}
label="Install the Istio Service Mesh AddOn (Preview)" />
{
addons.serviceMeshProfile &&
( <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/istio-deploy-addon"}/> )
}
</Stack.Item>

<Separator className="notopmargin" />
Expand All @@ -556,11 +535,8 @@ export default function ({ tabValues, updateFn, featureFlag, invalidArray }) {
(<a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/workload-identity-deploy-cluster">*preview</a>)
(<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"}/> )
}
<Checkbox styles={{ root: { marginLeft: '50px' } }} inputProps={{ "data-testid": "addons-workloadIdentity-Checkbox"}} checked={addons.workloadIdentity} onChange={(ev, v) => {updateFn("workloadIdentity", v);showPreviewModal(ev,"https://learn.microsoft.com/en-us/azure/aks/workload-identity-deploy-cluster")}} label="Install Workload Identity" />

</Stack.Item>

<Separator className="notopmargin" />
Expand Down
12 changes: 11 additions & 1 deletion helper/src/components/portalnav.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import AppsTab from './appsTab'

import { appInsights } from '../index.js'
import { initializeIcons } from '@fluentui/react/lib/Icons';
import { PreviewDialog } from './previewDialog';
initializeIcons();


Expand Down Expand Up @@ -118,6 +119,14 @@ export default function PortalNav({ config }) {
const [tabValues, setTabValues] = useState(initTabValues(selected, defaults, true))
// Field Selections - Used to keep track of the last FieldSelections monitored by App Insights to prevent logging the same entry continuously
const [lastAIUpdated, setLastAIUpdated] = useState ({tab: null, field: null})
const [show, setShow] = useState(false)
const [previewLink, setPreviewLink] = useState("")

const showPreviewModal = (e,previewLink) => {
if (!e.currentTarget.checked) return;
setShow(true);
setPreviewLink(previewLink)
};

function initSelected (currentPreset) {
return {
Expand Down Expand Up @@ -435,6 +444,7 @@ export default function PortalNav({ config }) {
return (
<ThemeProvider theme={{ semanticColors, palette }}>
<main id="mainContent" className="wrapper">
<PreviewDialog onClose={ ()=> setShow(false)} show={show} previewLink={previewLink}></PreviewDialog>
<Header presets={presets} selectedPreset={selected.preset} setPresets={presetChanged} featureFlag={featureFlag} />

<Stack verticalFill styles={{ root: { width: '960px', margin: '0 auto', color: 'grey' } }}>
Expand All @@ -451,7 +461,7 @@ export default function PortalNav({ config }) {
<ClusterTab defaults={defaults} tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value) => mergeState("cluster", field, value)} invalidArray={invalidArray['cluster']} />
</PivotItem>
<PivotItem headerText={tabLabels.addons} itemKey="addons" onRenderItemLink={(a, b) => _customRenderer('addons', a, b)} >
<AddonsTab tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value, previewLink) => mergeState("addons", field, value, previewLink)} invalidArray={invalidArray['addons']} />
<AddonsTab tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value) => mergeState("addons", field, value)} invalidArray={invalidArray['addons']} showPreviewModal={showPreviewModal} />
</PivotItem>
<PivotItem headerText={tabLabels.net} itemKey="net" onRenderItemLink={(a, b) => _customRenderer('net', a, b)}>
<NetworkTab defaults={defaults} tabValues={tabValues} featureFlag={featureFlag} updateFn={(field, value) => mergeState("net", field, value)} invalidArray={invalidArray['net']} />
Expand Down
44 changes: 19 additions & 25 deletions helper/src/components/previewDialog.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,28 @@
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';
import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
import { PrimaryButton} from "@fluentui/react/lib/Button";

export function PreviewDialog({previewLink}) {

const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(false);
export function PreviewDialog({ previewLink, onClose, show}) {

const dialogContentProps = {
type: DialogType.normal,
title: 'Preview Feature',
closeButtonAriaLabel: 'Close',
subText: `Review the instructions on this page ${previewLink} to enable the feature `,
title: "Preview Feature",
closeButtonAriaLabel: "Close",
};

function _openLink() {
window.open(`${previewLink}`, '_blank', 'noreferrer');
}

if(!show){
return null;
}
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>
<>
<Dialog
hidden={false}
onDismiss={onClose}
dialogContentProps={dialogContentProps} >
<div>Review the instructions on this <a href={previewLink} target='_blank' rel="noreferrer" >page</a> to enable the feature</div>
<DialogFooter>
<PrimaryButton onClick={onClose} text="Close" />
</DialogFooter>
</Dialog>
</>
);
}

0 comments on commit 7e4eb18

Please sign in to comment.