Instance status configuration

cypress/integration/systemStatus.js

@@ -6,7 +6,7 @@ describe('System Status', () => {
         cy.wait(500)
         cy.get('[data-attr=top-menu-toggle]').click()
         cy.get('[data-attr=system-status-badge]').click()
-        cy.get('h1').should('contain', 'System Status')
+        cy.get('h1').should('contain', 'Instance status')
         cy.get('table').should('contain', 'Events in ClickHouse')
     })
 })

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -17,6 +17,7 @@ import {
     IconPerson,
     IconPlus,
     IconRecording,
+    IconServer,
     IconSettings,
     IconTools,
 } from 'lib/components/icons'
@@ -137,6 +138,7 @@ function Pages(): JSX.Element {
     const { pinnedDashboards } = useValues(dashboardsModel)
     const { featureFlags } = useValues(featureFlagLogic)
     const { showGroupsOptions } = useValues(groupsModel)
+    const { user } = useValues(userLogic)
     const { hasAvailableFeature } = useValues(userLogic)
     const { preflight } = useValues(preflightLogic)
 
@@ -238,6 +240,17 @@ function Pages(): JSX.Element {
             )}
             <PageButton icon={<IconTools />} identifier={Scene.ToolbarLaunch} to={urls.toolbarLaunch()} />
             <PageButton icon={<IconSettings />} identifier={Scene.ProjectSettings} to={urls.projectSettings()} />
+            {user?.is_staff && (
+                <>
+                    <LemonSpacer />
+                    <PageButton
+                        title="Instance status & settings"
+                        icon={<IconServer />}
+                        identifier={Scene.SystemStatus}
+                        to={urls.instanceStatus()}
+                    />
+                </>
+            )}
         </div>
     )
 }

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -160,12 +160,12 @@ function SystemStatus(): JSX.Element {
                     {systemStatus ? 'All systems operational' : 'Potential system issue'}
                 </div>
                 <Link
-                    to={urls.systemStatus()}
+                    to={urls.instanceStatus()}
                     onClick={closeSitePopover}
                     className="SitePopover__side-link"
                     data-attr="system-status-badge"
                 >
-                    System status
+                    Instance status
                 </Link>
             </>
         </LemonRow>

frontend/src/layout/navigation/TopBar/TopBar.scss

@@ -132,7 +132,7 @@
 }
 
 .SitePopover {
-    width: 20rem;
+    max-width: 22rem;
 }
 
 .SitePopover__main-info {

frontend/src/lib/components/CommandPalette/commandPaletteLogic.ts

@@ -533,10 +533,10 @@ export const commandPaletteLogic = kea<
                     },
                     {
                         icon: DatabaseOutlined,
-                        display: 'Go to System status page',
+                        display: 'Go to Instance status & settings',
                         synonyms: ['redis', 'celery', 'django', 'postgres', 'backend', 'service', 'online'],
                         executor: () => {
-                            push(urls.systemStatus())
+                            push(urls.instanceStatus())
                         },
                     },
                     {

frontend/src/lib/components/InfoMessage/AlertMessage.scss

@@ -0,0 +1,26 @@
+@import '~/vars';
+
+.lemon-alert-message {
+    background-color: var(--radius-light);
+    border-radius: var(--radius);
+    padding: 0.5rem 1rem;
+    color: $primary_alt;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+
+    .lemon-alert-message__icon {
+        flex-shrink: 0;
+        font-size: 1.5rem;
+        margin-right: 0.5rem;
+    }
+
+    &.info {
+        background-color: rgba($primary_alt, 0.09);
+    }
+
+    &.warning {
+        background-color: rgba($warning, 0.09);
+        color: $warning;
+    }
+}

frontend/src/lib/components/InfoMessage/AlertMessage.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './AlertMessage.scss'
+import { WarningOutlined } from '@ant-design/icons'
+import { IconInfo } from '../icons'
+import clsx from 'clsx'
+
+export interface AlertMessageInterface {
+    children: string | JSX.Element
+    style?: React.CSSProperties
+    type?: 'info' | 'warning'
+}
+
+/** Generic alert message. Substitutes Ant's `Alert` component. */
+export function AlertMessage({ children, style, type = 'info' }: AlertMessageInterface): JSX.Element {
+    return (
+        <div className={clsx('lemon-alert-message', type)} style={style}>
+            <div className="lemon-alert-message__icon"> {type === 'warning' ? <WarningOutlined /> : <IconInfo />}</div>
+            <div>{children}</div>
+        </div>
+    )
+}

frontend/src/lib/components/InfoMessage/InfoMessage.tsx

@@ -1,19 +1,7 @@
 import React from 'react'
-import './InfoMessage.scss'
-import { IconInfo } from '../icons'
+import { AlertMessage, AlertMessageInterface } from './AlertMessage'
 
-/** An informative message. */
-export function InfoMessage({
-    children,
-    style,
-}: {
-    children: string | JSX.Element
-    style?: React.CSSProperties
-}): JSX.Element {
-    return (
-        <div className="info-message" style={style}>
-            <IconInfo className="info-message__icon" />
-            <div>{children}</div>
-        </div>
-    )
+/** DEPRECATED: Use `AlertMessage` instead with type = 'info' */
+export function InfoMessage(props: AlertMessageInterface): JSX.Element {
+    return <AlertMessage {...props} />
 }

frontend/src/lib/components/icons.tsx

@@ -321,6 +321,19 @@ export function IconSettings({ style }: { style?: CSSProperties }): JSX.Element
     )
 }
 
+/** Material Design Dns icon. */
+export function IconServer({ style }: { style?: CSSProperties }): JSX.Element {
+    return (
+        <svg fill="none" width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={style}>
+            <path d="m0 0h24v24h-24z" fill="none" />
+            <path
+                d="m19 15v4h-14v-4zm1-2h-16c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zm-13 5.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm12-13.5v4h-14v-4zm1-2h-16c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zm-13 5.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.68 1.5 1.5-.67 1.5-1.5 1.5z"
+                fill="currentColor"
+            />
+        </svg>
+    )
+}
+
 /** Material Design Menu icon. */
 export function IconMenu(): JSX.Element {
     return (

frontend/src/scenes/PreflightCheck/logic.ts

@@ -7,7 +7,13 @@ import { getAppContext } from 'lib/utils/getAppContext'
 
 type PreflightMode = 'experimentation' | 'live'
 
-export const preflightLogic = kea<preflightLogicType<PreflightMode>>({
+export interface EnvironmentConfigOption {
+    key: string
+    metric: string
+    value: string
+}
+
+export const preflightLogic = kea<preflightLogicType<EnvironmentConfigOption, PreflightMode>>({
     path: ['scenes', 'PreflightCheck', 'preflightLogic'],
     loaders: {
         preflight: [
@@ -52,22 +58,25 @@ export const preflightLogic = kea<preflightLogicType<PreflightMode>>({
         ],
         configOptions: [
             (s) => [s.preflight],
-            (preflight): Record<string, string>[] => {
+            (preflight): EnvironmentConfigOption[] => {
                 // Returns the preflight config options to display in the /instance/status page
 
                 const RELEVANT_CONFIGS = [
                     {
                         key: 'site_url',
                         label: 'Site URL',
                     },
-                    { key: 'email_service_available', label: 'Email service available' },
                 ]
 
                 if (!preflight) {
                     return []
                 }
                 // @ts-ignore
-                return RELEVANT_CONFIGS.map((config) => ({ metric: config.label, value: preflight[config.key] }))
+                return RELEVANT_CONFIGS.map((config) => ({
+                    key: config.key,
+                    metric: config.label,
+                    value: preflight[config.key],
+                }))
             },
         ],
     },

frontend/src/scenes/instance/AsyncMigrations/asyncMigrationsLogic.ts

@@ -172,6 +172,7 @@ export const asyncMigrationsLogic = kea<
             }
         },
         updateSetting: async ({ settingKey, newValue }) => {
+            // TODO: Use systemStatusLogic.ts for consistency
             try {
                 await api.update(`/api/instance_settings/${settingKey}`, {
                     value: newValue,

frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx

@@ -0,0 +1,91 @@
+import { Modal } from 'antd'
+import { useActions, useValues } from 'kea'
+import { AlertMessage } from 'lib/components/InfoMessage/AlertMessage'
+import { pluralize } from 'lib/utils'
+import React from 'react'
+import { RenderMetricValue } from './RenderMetricValue'
+import { MetricRow, systemStatusLogic } from './systemStatusLogic'
+
+interface ChangeRowInterface extends Pick<MetricRow, 'value'> {
+    oldValue: any
+    metricKey: string
+}
+
+function ChangeRow({ metricKey, oldValue, value }: ChangeRowInterface): JSX.Element | null {
+    if (value.toString() === oldValue.toString()) {
+        return null
+    }
+
+    return (
+        <div
+            style={{ backgroundColor: 'var(--border-light)', borderRadius: 'var(--radius)', padding: 8, marginTop: 16 }}
+        >
+            <div>
+                <code>{metricKey}</code>
+            </div>
+            <div style={{ color: 'var(--text-muted)' }}>
+                Value will be changed from{' '}
+                <span style={{ color: 'var(--text-default)', fontWeight: 'bold' }}>
+                    {RenderMetricValue({ key: metricKey, value: oldValue })}
+                </span>{' '}
+                to{' '}
+                <span style={{ color: 'var(--text-default)', fontWeight: 'bold' }}>
+                    {RenderMetricValue({ key: metricKey, value })}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+export function InstanceConfigSaveModal({ onClose }: { onClose: () => void }): JSX.Element {
+    const { instanceConfigEditingState, editableInstanceSettings, updatedInstanceConfigCount } =
+        useValues(systemStatusLogic)
+    const { saveInstanceConfig } = useActions(systemStatusLogic)
+    const loading = updatedInstanceConfigCount !== null
+    return (
+        <Modal
+            title="Confirm new changes"
+            visible
+            okText="Apply changes"
+            okType="danger"
+            onCancel={onClose}
+            maskClosable={false}
+            onOk={saveInstanceConfig}
+            okButtonProps={{ loading }}
+            cancelButtonProps={{ loading }}
+            closable={!loading}
+        >
+            {Object.keys(instanceConfigEditingState).find((key) => key.startsWith('EMAIL')) && (
+                <AlertMessage style={{ marginBottom: 16 }}>
+                    <>
+                        As you are changing email settings, we'll attempt to send a <b>test email</b> so you can verify
+                        everything works (unless you are turning email off).
+                    </>
+                </AlertMessage>
+            )}
+            {Object.keys(instanceConfigEditingState).includes('RECORDINGS_TTL_WEEKS') && (
+                <AlertMessage style={{ marginBottom: 16 }} type="warning">
+                    <>
+                        Changing your recordings TTL requires ClickHouse to have enough free space to perform the
+                        operation (even when reducing this value). In addition, please mind that removing old recordings
+                        will be removed asynchronously, not immediately.
+                    </>
+                </AlertMessage>
+            )}
+            <div>The following changes will be immediately applied to your instance.</div>
+            {Object.keys(instanceConfigEditingState).map((key) => (
+                <ChangeRow
+                    key={key}
+                    metricKey={key}
+                    value={instanceConfigEditingState[key]}
+                    oldValue={editableInstanceSettings.find((record) => record.key === key)?.value}
+                />
+            ))}
+            {loading && (
+                <div className="mt text-success">
+                    <b>{pluralize(updatedInstanceConfigCount || 0, 'change')} updated successfully.</b>
+                </div>
+            )}
+        </Modal>
+    )
+}