DOCS-543 - Berry widget demo

.github/workflows/pr.yml

@@ -32,6 +32,17 @@ jobs:
           env:
             NODE_OPTIONS: "--max-old-space-size=8192 --max-http-header-size=8192"
           run: yarn build
+    deploy-to-review:
+      uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main
+      with:
+        hostname: https://d2t1s0ah22jxsa.cloudfront.net
+        base_url: /${{ github.ref_name }}/
+        environment: review/${{ github.ref_name }}
+      secrets:
+        S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }}
+        CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }}
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
     spellcheck:
       runs-on: ubuntu-latest
       steps:

.github/workflows/review.yml

@@ -0,0 +1,16 @@
+name: deploy-to-review
+
+on: workflow_dispatch
+
+jobs:
+  deploy-to-review:
+    uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main
+    with:
+      hostname: https://d2t1s0ah22jxsa.cloudfront.net
+      base_url: /${{ github.ref_name }}/
+      environment: review/${{ github.ref_name }}
+    secrets:
+      S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }}
+      CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

docs/alerts/index.md

@@ -11,19 +11,19 @@ Sumo Logic offers several alerting features. See the topics below for details on
 <div className="box-wrapper" markdown="1">
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors"><img src={useBaseUrl('img/icons/alerts.png')} alt="icon" width="40"/><h4>Monitors</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors')}><img src={useBaseUrl('img/icons/alerts.png')} alt="icon" width="40"/><h4>Monitors</h4></a>
   <p>Configure alerting policies notify you about critical changes or issues affecting your production applications.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches"><img src={useBaseUrl('img/icons/alerts.png')} alt="icon" width="40"/><h4>Scheduled Searches</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches')}><img src={useBaseUrl('img/icons/alerts.png')} alt="icon" width="40"/><h4>Scheduled Searches</h4></a>
   <p>Create saved searches that are executed continuously on a schedule you set, monitoring your stack.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/difference-from-scheduled-searches"><img src={useBaseUrl('img/icons/alerts.png')} alt="icon" width="40"/><h4>Monitors vs. Scheduled Searches</h4></a>
+  <a href={useBaseUrl('docs/alerts/difference-from-scheduled-searches')}><img src={useBaseUrl('img/icons/alerts.png')} alt="icon" width="40"/><h4>Monitors vs. Scheduled Searches</h4></a>
   <p>Learn about the feature differences between Monitors and Scheduled Searches.</p>
   </div>
 </div>

docs/alerts/monitors/index.md

@@ -14,67 +14,67 @@ In this section, we'll introduce the following concepts:
 <div className="box-wrapper" markdown="1">
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/overview"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Overview</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/overview')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Overview</h4></a>
   <p>Set up monitors to continuously query your logs or metrics and send notifications when specific events occur.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/create-monitor"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Create a Monitor</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/create-monitor')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Create a Monitor</h4></a>
   <p>Learn how to create a monitor.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/settings"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Monitor Settings</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/settings')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Monitor Settings</h4></a>
   <p>Learn how to view, create, manage, and organize Monitors.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-    <a href="/docs/alerts/monitors/monitor-faq"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Monitors FAQ</h4></a>
+    <a href={useBaseUrl('docs/alerts/monitors/monitor-faq')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Monitors FAQ</h4></a>
   <p>This topic lists the common FAQs regarding Monitors.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-    <a href="/docs/alerts/monitors/alert-variables"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Variables</h4></a>
+    <a href={useBaseUrl('docs/alerts/monitors/alert-variables')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Variables</h4></a>
   <p>Use Alert Variables as parameters to customize the JSON payload object of your alert notifications.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-    <a href="/docs/alerts/monitors/alert-response"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Response</h4></a>
+    <a href={useBaseUrl('docs/alerts/monitors/alert-response')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Response</h4></a>
   <p>Get contextual insights about triggered alerts to minimize the time needed to investigate and resolve application failures.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/alert-response-faq"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Response FAQ</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/alert-response-faq')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Response FAQ</h4></a>
   <p>This topic lists the common FAQs regarding Alert Response.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/alert-grouping"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Grouping</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/alert-grouping')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Alert Grouping</h4></a>
 <p>Customize how your alerts are generated from monitors by specifying a grouping condition based on specific fields.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/muting-schedules"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Muting Schedules</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/muting-schedules')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Muting Schedules</h4></a>
   <p>Pause alert notifications from monitors according to the schedule that you define.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/manage/ingestion-volume/monitor-ingestion-receive-alerts"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Monitor Log Ingestion and Alerts</h4></a>
+  <a href={useBaseUrl('docs/manage/ingestion-volume/monitor-ingestion-receive-alerts')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Monitor Log Ingestion and Alerts</h4></a>
   <p>Add Scheduled Searches that monitor log ingestion and send alerts.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/monitors/use-playbooks-with-monitors"><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Automated Playbooks in Monitors</h4></a>
+  <a href={useBaseUrl('docs/alerts/monitors/use-playbooks-with-monitors')}><img src={useBaseUrl('img/icons/operations/monitor-and-visualize.png')} alt="icon" width="40"/><h4>Automated Playbooks in Monitors</h4></a>
   <p>Learn how to use Automation Service playbooks with monitors.</p>
   </div>
 </div>

docs/alerts/scheduled-searches/index.md

@@ -11,49 +11,49 @@ A _Scheduled Search_ is a standard [Log Search](/docs/search) that you save and
 <div className="box-wrapper">
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/schedule-search"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Create a Scheduled Search</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/schedule-search')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Create a Scheduled Search</h4></a>
   <p>Learn how to add alerts and schedule search to run it at a regular scheduled time.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/create-email-alert"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Create a Scheduled Search Email Alert</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/create-email-alert')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Create a Scheduled Search Email Alert</h4></a>
   <p>Learn how to create a Scheduled Search email alert.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/create-real-time-alert"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Create a Scheduled Search Real-Time Alert</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/create-real-time-alert')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Create a Scheduled Search Real-Time Alert</h4></a>
   <p>Learn how to create an alert to get notified in real-time when error conditions exist.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/edit-cancel"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Edit or Cancel a Scheduled Search</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/edit-cancel')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Edit or Cancel a Scheduled Search</h4></a>
   <p>Learn how to edit or cancel a Scheduled Search at any time.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/save-to-index"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Save to Index</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/save-to-index')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Save to Index</h4></a>
   <p>Learn how to save the results to an Index after creating a Scheduled Search email alert.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/save-to-lookup"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Save to Lookup</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/save-to-lookup')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Save to Lookup</h4></a>
   <p>Learn how to save the results of a Scheduled Search to a Lookup Table.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/generate-cse-signals"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Generate Cloud SIEM Signals with a Scheduled Search</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/generate-cse-signals')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>Generate Cloud SIEM Signals with a Scheduled Search</h4></a>
   <p>Learn how to create a Scheduled Search that will trigger a Cloud SIEM Signal.</p>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
-  <a href="/docs/alerts/scheduled-searches/faq"><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>FAQ</h4></a>
+  <a href={useBaseUrl('docs/alerts/scheduled-searches/faq')}><img src={useBaseUrl('img/icons/general/calendar.png')} alt="icon" width="40"/><h4>FAQ</h4></a>
   <p>Review frequently asked questions about Scheduled Searches and troubleshooting tips.</p>
   </div>
 </div>

docs/alerts/webhook-connections/index.md

@@ -23,55 +23,55 @@ In this section, we'll introduce the following concepts and more:
 <div className="box smallbox card">
   <div className="container">
   <img src={useBaseUrl('img/alerts/webhooks.png')} alt="icon" width="60"/>
-  <h4><a href="/docs/alerts/webhook-connections/set-up-webhook-connections">Set Up Webhook Connections</a></h4>
+  <h4><a href={useBaseUrl('docs/alerts/webhook-connections/set-up-webhook-connections')}>Set Up Webhook Connections</a></h4>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
   <img src={useBaseUrl('img/connection-and-integration/aws-lambda.svg')} alt="Thumbnail icon" width="45"/>
-  <h4><a href="/docs/alerts/webhook-connections/aws-lambda/">AWS Lambda</a></h4>
+  <h4><a href={useBaseUrl('docs/alerts/webhook-connections/aws-lambda/')}>AWS Lambda</a></h4>
   </div>
 </div>
 <div className="box smallbox card">
   <div className="container">
   <img src={useBaseUrl('img/connection-and-integration/azure-functions.png')} alt="Thumbnail icon" width="80"/>
-  <h4><a href="/docs/alerts/webhook-connections/microsoft-azure-functions">Azure Functions</a></h4>
+  <h4><a href={useBaseUrl('docs/alerts/webhook-connections/microsoft-azure-functions')}>Azure Functions</a></h4>
   </div>
 </div>
   <div className="box smallbox card">
     <div className="container">
     <img src={useBaseUrl('img/integrations/microsoft-azure/MSTeams.png')} alt="thumbnail icon" width="55"/>
-    <h4><a href="/docs/alerts/webhook-connections/microsoft-teams">MS Teams</a></h4>
+    <h4><a href={useBaseUrl('docs/alerts/webhook-connections/microsoft-teams')}>MS Teams</a></h4>
     </div>
   </div>
   <div className="box smallbox card">
     <div className="container">
     <img src={useBaseUrl('img/integrations/saas-cloud/pagerduty.png')} alt="Thumbnail icon" width="50"/>
-    <h4><a href="/docs/alerts/webhook-connections/pagerduty">PagerDuty</a></h4>
+    <h4><a href={useBaseUrl('docs/alerts/webhook-connections/pagerduty')}>PagerDuty</a></h4>
     </div>
   </div>
   <div className="box smallbox card">
     <div className="container">
     <img src={useBaseUrl('img/integrations/saas-cloud/slack.png')} alt="Thumbnail icon" width="50"/>
-    <h4><a href="/docs/alerts/webhook-connections/slack">Slack</a></h4>
+    <h4><a href={useBaseUrl('docs/alerts/webhook-connections/slack')}>Slack</a></h4>
     </div>
   </div>
   <div className="box smallbox card">
     <div className="container">
     <img src={useBaseUrl('img/integrations/saas-cloud/opsgenie.png')} alt="Thumbnail icon" width="50"/>
-    <h4><a href="/docs/alerts/webhook-connections/opsgenie">Opsgenie</a></h4>
+    <h4><a href={useBaseUrl('docs/alerts/webhook-connections/opsgenie')}>Opsgenie</a></h4>
     </div>
   </div>
   <div className="box smallbox card">
     <div className="container">
     <img src='https://companieslogo.com/img/orig/NOW-6d5a01eb.png?t=1647966832' alt="icon" width="60"/>
-    <h4><a href="/docs/alerts/webhook-connections/servicenow">ServiceNow</a></h4>
+    <h4><a href={useBaseUrl('docs/alerts/webhook-connections/servicenow')}>ServiceNow</a></h4>
     </div>
   </div>
   <div className="box smallbox card">
     <div className="container">
     <img src={useBaseUrl('img/integrations/app-development/jira.png')} alt="Thumbnail icon" width="60"/>
-    <h4><a href="/docs/alerts/webhook-connections/jira-cloud">Jira</a></h4>
+    <h4><a href={useBaseUrl('docs/alerts/webhook-connections/jira-cloud')}>Jira</a></h4>
     </div>
   </div>
 </div>