Skip to content

feat: add advanced schedule settings #7061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 12, 2023
Merged

feat: add advanced schedule settings #7061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
956a578
feat: add advanced schedule settings
rodrimaia Apr 10, 2023
7093c21
Update site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
rodrimaia Apr 11, 2023
f5916cf
rename variable
rodrimaia Apr 11, 2023
338a5bc
fix optionText css
rodrimaia Apr 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 59 additions & 8 deletions site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,26 +105,28 @@ const defaultInitialValues: CreateTemplateData = {
// you are not licensed. We hide the form value based on entitlements.
max_ttl_hours: 24 * 7,
allow_user_cancel_workspace_jobs: false,
allow_user_autostart: false,
allow_user_autostop: false,
}

type GetInitialValuesParams = {
fromExample?: TemplateExample
fromCopy?: Template
parameters?: ParameterSchema[]
variables?: TemplateVersionVariable[]
canSetMaxTTL: boolean
allowAdvancedScheduling: boolean
}

const getInitialValues = ({
fromExample,
fromCopy,
canSetMaxTTL,
allowAdvancedScheduling,
variables,
parameters,
}: GetInitialValuesParams) => {
let initialValues = defaultInitialValues

if (!canSetMaxTTL) {
if (!allowAdvancedScheduling) {
initialValues = {
...initialValues,
max_ttl_hours: 0,
Expand Down Expand Up @@ -188,7 +190,7 @@ export interface CreateTemplateFormProps {
error?: unknown
jobError?: string
logs?: ProvisionerJobLog[]
canSetMaxTTL: boolean
allowAdvancedScheduling: boolean
copiedTemplate?: Template
}

Expand All @@ -204,12 +206,12 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
error,
jobError,
logs,
canSetMaxTTL,
allowAdvancedScheduling,
}) => {
const styles = useStyles()
const form = useFormik<CreateTemplateData>({
initialValues: getInitialValues({
canSetMaxTTL,
allowAdvancedScheduling,
fromExample: starterTemplate,
fromCopy: copiedTemplate,
variables,
Expand Down Expand Up @@ -319,7 +321,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
<TextField
{...getFieldHelpers(
"max_ttl_hours",
canSetMaxTTL ? (
allowAdvancedScheduling ? (
<TTLHelperText
translationName="form.helperText.maxTTLHelperText"
ttl={form.values.max_ttl_hours}
Expand All @@ -334,13 +336,62 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
</>
),
)}
disabled={isSubmitting || !canSetMaxTTL}
disabled={isSubmitting || !allowAdvancedScheduling}
fullWidth
label={t("form.fields.maxTTL")}
variant="outlined"
type="number"
/>
</Stack>
<Stack direction="column">
<Stack direction="row" alignItems="center">
<Checkbox
id="allow_user_autostart"
size="small"
color="primary"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostart",
!form.values.allow_user_autostart,
)
}}
name="allow_user_autostart"
checked={form.values.allow_user_autostart}
/>
<Stack spacing={0.5}>
<strong>
Allow users to autostart workspaces on a schedule.
</strong>
</Stack>
</Stack>
<Stack direction="row" alignItems="center">
<Checkbox
id="allow-user-autostop"
size="small"
color="primary"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostop",
!form.values.allow_user_autostop,
)
}}
name="allow-user-autostop"
checked={form.values.allow_user_autostop}
/>
<Stack spacing={0.5}>
<strong>
Allow users to customize autostop duration for workspaces.
</strong>
<span className={styles.optionHelperText}>
Workspaces will always use the default TTL if this is set.
Regardless of this setting, workspaces can only stay on for
the max TTL.
</span>
</Stack>
</Stack>
</Stack>
</FormFields>
</FormSection>

Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const CreateTemplatePage: FC = () => {
} = state.context
const shouldDisplayForm = !state.hasTag("loading")
const { entitlements } = useDashboard()
const canSetMaxTTL =
const allowAdvancedScheduling =
entitlements.features["advanced_template_scheduling"].enabled

const onCancel = () => {
Expand All @@ -70,7 +70,7 @@ const CreateTemplatePage: FC = () => {
{shouldDisplayForm && (
<CreateTemplateForm
copiedTemplate={state.context.copiedTemplate}
canSetMaxTTL={canSetMaxTTL}
allowAdvancedScheduling={allowAdvancedScheduling}
error={error}
starterTemplate={starterTemplate}
isSubmitting={state.hasTag("submitting")}
Expand Down
125 changes: 96 additions & 29 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import TextField from "@material-ui/core/TextField"
import { Template, UpdateTemplateMeta } from "api/typesGenerated"
import { FormikContextType, FormikTouched, useFormik } from "formik"
import { FormikTouched, useFormik } from "formik"
import { FC } from "react"
import { getFormHelpers } from "util/formUtils"
import * as Yup from "yup"
Expand All @@ -11,6 +11,7 @@ import { FormSection, HorizontalForm, FormFooter } from "components/Form/Form"
import { Stack } from "components/Stack/Stack"
import { makeStyles } from "@material-ui/core/styles"
import Link from "@material-ui/core/Link"
import Checkbox from "@material-ui/core/Checkbox"

const TTLHelperText = ({
ttl,
Expand Down Expand Up @@ -48,6 +49,8 @@ export const getValidationSchema = (): Yup.AnyObjectSchema =>
24 * MAX_TTL_DAYS /* 7 days in hours */,
i18next.t("maxTTLMaxError", { ns: "templateSettingsPage" }),
),
allow_user_autostart: Yup.boolean(),
allow_user_autostop: Yup.boolean(),
})

export interface TemplateScheduleForm {
Expand All @@ -56,7 +59,7 @@ export interface TemplateScheduleForm {
onCancel: () => void
isSubmitting: boolean
error?: unknown
canSetMaxTTL: boolean
allowAdvancedScheduling: boolean
// Helpful to show field errors on Storybook
initialTouched?: FormikTouched<UpdateTemplateMeta>
}
Expand All @@ -66,35 +69,40 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
onSubmit,
onCancel,
error,
canSetMaxTTL,
allowAdvancedScheduling,
isSubmitting,
initialTouched,
}) => {
const { t: commonT } = useTranslation("common")
const validationSchema = getValidationSchema()
const form: FormikContextType<UpdateTemplateMeta> =
useFormik<UpdateTemplateMeta>({
initialValues: {
// on display, convert from ms => hours
default_ttl_ms: template.default_ttl_ms / MS_HOUR_CONVERSION,
// the API ignores this value, but to avoid tripping up validation set
// it to zero if the user can't set the field.
max_ttl_ms: canSetMaxTTL ? template.max_ttl_ms / MS_HOUR_CONVERSION : 0,
},
validationSchema,
onSubmit: (formData) => {
// on submit, convert from hours => ms
onSubmit({
default_ttl_ms: formData.default_ttl_ms
? formData.default_ttl_ms * MS_HOUR_CONVERSION
: undefined,
max_ttl_ms: formData.max_ttl_ms
? formData.max_ttl_ms * MS_HOUR_CONVERSION
: undefined,
})
},
initialTouched,
})
const form = useFormik<UpdateTemplateMeta>({
initialValues: {
// on display, convert from ms => hours
default_ttl_ms: template.default_ttl_ms / MS_HOUR_CONVERSION,
// the API ignores this value, but to avoid tripping up validation set
// it to zero if the user can't set the field.
max_ttl_ms: allowAdvancedScheduling
? template.max_ttl_ms / MS_HOUR_CONVERSION
: 0,
allow_user_autostart: template.allow_user_autostart,
allow_user_autostop: template.allow_user_autostop,
},
validationSchema,
onSubmit: (formData) => {
// on submit, convert from hours => ms
onSubmit({
default_ttl_ms: formData.default_ttl_ms
? formData.default_ttl_ms * MS_HOUR_CONVERSION
: undefined,
max_ttl_ms: formData.max_ttl_ms
? formData.max_ttl_ms * MS_HOUR_CONVERSION
: undefined,
allow_user_autostart: formData.allow_user_autostart,
allow_user_autostop: formData.allow_user_autostop,
})
},
initialTouched,
})
const getFieldHelpers = getFormHelpers<UpdateTemplateMeta>(form, error)
const { t } = useTranslation("templateSettingsPage")
const styles = useStyles()
Expand Down Expand Up @@ -128,7 +136,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
<TextField
{...getFieldHelpers(
"max_ttl_ms",
canSetMaxTTL ? (
allowAdvancedScheduling ? (
<TTLHelperText
translationName="maxTTLHelperText"
ttl={form.values.max_ttl_ms}
Expand All @@ -143,7 +151,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
</>
),
)}
disabled={isSubmitting || !canSetMaxTTL}
disabled={isSubmitting || !allowAdvancedScheduling}
fullWidth
inputProps={{ min: 0, step: 1 }}
label={t("maxTtlLabel")}
Expand All @@ -153,13 +161,72 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
</Stack>
</FormSection>

<FormSection
title="Allow users scheduling"
description="Allow users to set custom autostart and autostop scheduling options for workspaces created from this template."
>
<Stack direction="column">
<Stack direction="row" alignItems="center">
<Checkbox
id="allow_user_autostart"
size="small"
color="primary"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostart",
!form.values.allow_user_autostart,
)
}}
name="allow_user_autostart"
checked={form.values.allow_user_autostart}
/>
<Stack spacing={0.5}>
<strong>
Allow users to autostart workspaces on a schedule.
</strong>
</Stack>
</Stack>
<Stack direction="row" alignItems="center">
<Checkbox
id="allow-user-autostop"
size="small"
color="primary"
disabled={isSubmitting || !allowAdvancedScheduling}
onChange={async () => {
await form.setFieldValue(
"allow_user_autostop",
!form.values.allow_user_autostop,
)
}}
name="allow_user_autostop"
checked={form.values.allow_user_autostop}
/>
<Stack spacing={0.5}>
<strong>
Allow users to customize autostop duration for workspaces.
</strong>
<span className={styles.optionDescription}>
Workspaces will always use the default TTL if this is set.
Regardless of this setting, workspaces can only stay on for the
max lifetime.
</span>
</Stack>
</Stack>
</Stack>
</FormSection>

<FormFooter onCancel={onCancel} isLoading={isSubmitting} />
</HorizontalForm>
)
}

const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
ttlFields: {
width: "100%",
},
optionDescription: {
fontSize: 12,
color: theme.palette.text.secondary,
},
}))
4 changes: 2 additions & 2 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const TemplateSchedulePage: FC = () => {
const navigate = useNavigate()
const { template } = useTemplateSettingsContext()
const { entitlements } = useDashboard()
const canSetMaxTTL =
const allowAdvancedScheduling =
entitlements.features["advanced_template_scheduling"].enabled
const {
mutate: updateTemplate,
Expand All @@ -36,7 +36,7 @@ const TemplateSchedulePage: FC = () => {
<title>{pageTitle([template.name, "Schedule"])}</title>
</Helmet>
<TemplateSchedulePageView
canSetMaxTTL={canSetMaxTTL}
allowAdvancedScheduling={allowAdvancedScheduling}
isSubmitting={isSubmitting}
template={template}
submitError={submitError}
Expand Down
4 changes: 2 additions & 2 deletions .../src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default {
title: "pages/TemplateSchedulePageView",
component: TemplateSchedulePageView,
args: {
canSetMaxTTL: true,
allowAdvancedScheduling: true,
template: MockTemplate,
onSubmit: action("onSubmit"),
onCancel: action("cancel"),
Expand All @@ -26,5 +26,5 @@ Example.args = {}

export const CantSetMaxTTL = Template.bind({})
CantSetMaxTTL.args = {
canSetMaxTTL: false,
allowAdvancedScheduling: false,
}
6 changes: 3 additions & 3 deletions site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ export interface TemplateSchedulePageViewProps {
isSubmitting: boolean
submitError?: unknown
initialTouched?: ComponentProps<typeof TemplateScheduleForm>["initialTouched"]
canSetMaxTTL: boolean
allowAdvancedScheduling: boolean
}

export const TemplateSchedulePageView: FC<TemplateSchedulePageViewProps> = ({
template,
onCancel,
onSubmit,
isSubmitting,
canSetMaxTTL,
allowAdvancedScheduling,
submitError,
initialTouched,
}) => {
Expand All @@ -32,7 +32,7 @@ export const TemplateSchedulePageView: FC<TemplateSchedulePageViewProps> = ({
</PageHeader>

<TemplateScheduleForm
canSetMaxTTL={canSetMaxTTL}
allowAdvancedScheduling={allowAdvancedScheduling}
initialTouched={initialTouched}
isSubmitting={isSubmitting}
template={template}
Expand Down
Loading