From 494aa507812f122412c86811428d40d3e3c511c4 Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Mon, 26 Jul 2021 19:03:12 +0200
Subject: [PATCH] F OpenNebula/one#5422: Add sched actions tab (#1379)

---
 src/fireedge/etc/sunstone/admin/vm-tab.yaml   |   1 +
 src/fireedge/etc/sunstone/user/vm-tab.yaml    |   1 +
 .../components/Tabs/Vm/Network/index.js       |   2 +-
 .../components/Tabs/Vm/SchedActions/Item.js   | 118 ++++++++++++++++++
 .../{SchedActions.js => SchedActions/List.js} |  30 +++--
 .../components/Tabs/Vm/SchedActions/index.js  |  92 ++++++++++++++
 .../components/Tabs/Vm/Storage/index.js       |   2 +-
 .../src/client/constants/translates.js        |  23 ++++
 src/fireedge/src/client/constants/vm.js       |   1 +
 .../src/client/features/One/vm/services.js    |   5 +-
 .../src/client/models/VirtualMachine.js       |  55 ++++++--
 11 files changed, 311 insertions(+), 19 deletions(-)
 create mode 100644 src/fireedge/src/client/components/Tabs/Vm/SchedActions/Item.js
 rename src/fireedge/src/client/components/Tabs/Vm/{SchedActions.js => SchedActions/List.js} (65%)
 create mode 100644 src/fireedge/src/client/components/Tabs/Vm/SchedActions/index.js

diff --git a/src/fireedge/etc/sunstone/admin/vm-tab.yaml b/src/fireedge/etc/sunstone/admin/vm-tab.yaml
index af0a2382e2..fec2b227cc 100644
--- a/src/fireedge/etc/sunstone/admin/vm-tab.yaml
+++ b/src/fireedge/etc/sunstone/admin/vm-tab.yaml
@@ -151,6 +151,7 @@ info-tabs:
     enabled: true
     actions:
       sched_action_create: true
+      sched_action_update: true
       sched_action_delete: true
       charter_create: true
 
diff --git a/src/fireedge/etc/sunstone/user/vm-tab.yaml b/src/fireedge/etc/sunstone/user/vm-tab.yaml
index 5e894ed0f3..1c07d11f70 100644
--- a/src/fireedge/etc/sunstone/user/vm-tab.yaml
+++ b/src/fireedge/etc/sunstone/user/vm-tab.yaml
@@ -151,6 +151,7 @@ info-tabs:
     enabled: true
     actions:
       sched_action_create: true
+      sched_action_update: true
       sched_action_delete: true
       charter_create: true
 
diff --git a/src/fireedge/src/client/components/Tabs/Vm/Network/index.js b/src/fireedge/src/client/components/Tabs/Vm/Network/index.js
index e3870df03a..5aca050c6c 100644
--- a/src/fireedge/src/client/components/Tabs/Vm/Network/index.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Network/index.js
@@ -45,7 +45,7 @@ const VmNetworkTab = ({ tabProps = {} }) => {
     <>
       {actionsAvailable?.includes?.(VM_ACTIONS.ATTACH_NIC) && (
         <Button
-          data-cy='resize'
+          data-cy='attach-nic'
           size='small'
           color='secondary'
           onClick={show}
diff --git a/src/fireedge/src/client/components/Tabs/Vm/SchedActions/Item.js b/src/fireedge/src/client/components/Tabs/Vm/SchedActions/Item.js
new file mode 100644
index 0000000000..2f1b888c8c
--- /dev/null
+++ b/src/fireedge/src/client/components/Tabs/Vm/SchedActions/Item.js
@@ -0,0 +1,118 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { Edit, Trash, WarningTriangleOutline } from 'iconoir-react'
+import { useTheme, Typography, Paper } from '@material-ui/core'
+
+// import { useVmApi } from 'client/features/One'
+import { Action } from 'client/components/Cards/SelectCard'
+import { StatusChip } from 'client/components/Status'
+import { rowStyles } from 'client/components/Tables/styles'
+
+import * as VirtualMachine from 'client/models/VirtualMachine'
+import * as Helper from 'client/models/Helper'
+import { VM_ACTIONS } from 'client/constants'
+
+const SchedulingItem = ({ vmStartTime, schedule, actions = [] }) => {
+  const classes = rowStyles()
+  const { palette } = useTheme()
+
+  const { ID, ACTION, TIME, MESSAGE, DONE, WARNING } = schedule
+
+  const isRelative = String(TIME).includes('+')
+
+  const time = Helper.timeFromMilliseconds(
+    isRelative ? (+vmStartTime + +TIME) : +TIME
+  )
+
+  const doneTime = Helper.timeFromMilliseconds(+DONE)
+
+  const now = Math.round(Date.now() / 1000)
+  const isWarning = WARNING && (now - +vmStartTime) > +WARNING
+
+  const labels = [...new Set([
+    Helper.stringToBoolean(MESSAGE)
+  ])].filter(Boolean)
+
+  const { repeat, end } = VirtualMachine.periodicityToString(schedule)
+
+  return (
+    <Paper variant='outlined' className={classes.root}>
+      <div className={classes.main}>
+        <div className={classes.title}>
+          <Typography component='span'>
+            {`#${ID} ${ACTION}`}
+          </Typography>
+          {!!labels.length && (
+            <span className={classes.labels}>
+              {labels.map(label => (
+                <StatusChip key={label} text={label} />
+              ))}
+            </span>
+          )}
+        </div>
+        <div className={classes.caption}>
+          {repeat && <span>{repeat}</span>}
+          {end && <span>{`| ${end}`}</span>}
+          {DONE && (
+            <span title={doneTime.toFormat('ff')}>
+              {`| done ${doneTime.toRelative()}`}
+            </span>
+          )}
+          <span style={{ display: 'flex', gap: '0.5em' }}>
+            <span title={time.toFormat('ff')}>
+              {`| ${time.toRelative()}`}
+            </span>
+            {isWarning && (
+              <WarningTriangleOutline size={18} color={palette.warning.main} />
+            )}
+          </span>
+        </div>
+      </div>
+      {!!actions.length && (
+        <div className={classes.actions}>
+          {actions?.includes?.(VM_ACTIONS.SCHED_ACTION_UPDATE) && (
+            <Action
+              cy={`${VM_ACTIONS.SCHED_ACTION_UPDATE}-${ID}`}
+              icon={<Edit size={18} />}
+              handleClick={() => undefined}
+            />
+          )}
+          {actions?.includes?.(VM_ACTIONS.SCHED_ACTION_DELETE) && (
+            <Action
+              cy={`${VM_ACTIONS.SCHED_ACTION_DELETE}-${ID}`}
+              icon={<Trash size={18} />}
+              handleClick={() => undefined}
+            />
+          )}
+        </div>
+      )}
+    </Paper>
+  )
+}
+
+SchedulingItem.propTypes = {
+  vmStartTime: PropTypes.string.isRequired,
+  schedule: PropTypes.object.isRequired,
+  actions: PropTypes.arrayOf(PropTypes.string)
+}
+
+SchedulingItem.displayName = 'SchedulingItem'
+
+export default SchedulingItem
diff --git a/src/fireedge/src/client/components/Tabs/Vm/SchedActions.js b/src/fireedge/src/client/components/Tabs/Vm/SchedActions/List.js
similarity index 65%
rename from src/fireedge/src/client/components/Tabs/Vm/SchedActions.js
rename to src/fireedge/src/client/components/Tabs/Vm/SchedActions/List.js
index 64d7b4d1aa..eb33ceb61e 100644
--- a/src/fireedge/src/client/components/Tabs/Vm/SchedActions.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/SchedActions/List.js
@@ -15,15 +15,29 @@
  * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import * as React from 'react'
+import PropTypes from 'prop-types'
 
-const VmSchedulingTab = data => {
-  return (
-    <div>
-      <p>WIP - SCHED ACTIONS</p>
-    </div>
-  )
+import SchedulingItem from 'client/components/Tabs/Vm/SchedActions/Item'
+
+const SchedulingList = ({ vmStartTime, scheduling, actions }) => (
+  <div style={{ display: 'grid', gap: '1em', paddingBlock: '0.8em' }}>
+    {scheduling.map((schedule, idx) => (
+      <SchedulingItem
+        key={idx}
+        vmStartTime={vmStartTime}
+        schedule={schedule}
+        actions={actions}
+      />
+    ))}
+  </div>
+)
+
+SchedulingList.propTypes = {
+  vmStartTime: PropTypes.string,
+  scheduling: PropTypes.array,
+  actions: PropTypes.arrayOf(PropTypes.string)
 }
 
-VmSchedulingTab.displayName = 'VmSchedulingTab'
+SchedulingList.displayName = 'SchedulingList'
 
-export default VmSchedulingTab
+export default SchedulingList
diff --git a/src/fireedge/src/client/components/Tabs/Vm/SchedActions/index.js b/src/fireedge/src/client/components/Tabs/Vm/SchedActions/index.js
new file mode 100644
index 0000000000..2d57335d50
--- /dev/null
+++ b/src/fireedge/src/client/components/Tabs/Vm/SchedActions/index.js
@@ -0,0 +1,92 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { ClockOutline } from 'iconoir-react'
+import { Button } from '@material-ui/core'
+
+import { useDialog } from 'client/hooks'
+import { TabContext } from 'client/components/Tabs/TabProvider'
+import { DialogConfirmation } from 'client/components/Dialogs'
+import SchedulingList from 'client/components/Tabs/Vm/SchedActions/List'
+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
+
+import * as VirtualMachine from 'client/models/VirtualMachine'
+import * as Helper from 'client/models/Helper'
+import { T, VM_ACTIONS } from 'client/constants'
+
+const VmSchedulingTab = ({ tabProps = {} }) => {
+  const { display, show, hide } = useDialog()
+  const { data: vm } = React.useContext(TabContext)
+  const { actions = [] } = tabProps
+
+  const scheduling = VirtualMachine.getScheduleActions(vm)
+
+  const hypervisor = VirtualMachine.getHypervisor(vm)
+  const actionsAvailable = Helper.getActionsAvailable(actions, hypervisor)
+
+  return (
+    <>
+      {actionsAvailable?.includes?.(VM_ACTIONS.SCHED_ACTION_CREATE) && (
+        <Button
+          data-cy='sched-action-create'
+          size='small'
+          color='secondary'
+          onClick={show}
+          variant='contained'
+        >
+          {Tr(T.AddAction)}
+        </Button>
+      )}
+      {actionsAvailable?.includes?.(VM_ACTIONS.CHARTER_CREATE) && (
+        <SubmitButton
+          data-cy='charter-create'
+          color='secondary'
+          icon
+          label={<ClockOutline />}
+          onClick={show}
+        />
+      )}
+
+      <SchedulingList
+        actions={actionsAvailable}
+        scheduling={scheduling}
+        vmStartTime={vm?.STIME}
+      />
+
+      {display && (
+        <DialogConfirmation
+          title={T.AddAction}
+          handleAccept={hide}
+          handleCancel={hide}
+        >
+          <p>TODO: should define in view yaml ??</p>
+        </DialogConfirmation>
+      )}
+    </>
+  )
+}
+
+VmSchedulingTab.propTypes = {
+  tabProps: PropTypes.object
+}
+
+VmSchedulingTab.displayName = 'VmSchedulingTab'
+
+export default VmSchedulingTab
diff --git a/src/fireedge/src/client/components/Tabs/Vm/Storage/index.js b/src/fireedge/src/client/components/Tabs/Vm/Storage/index.js
index 74500e0909..b1eab1bd7e 100644
--- a/src/fireedge/src/client/components/Tabs/Vm/Storage/index.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Storage/index.js
@@ -42,7 +42,7 @@ const VmStorageTab = ({ tabProps = {} }) => {
     <>
       {actionsAvailable?.includes?.(VM_ACTIONS.ATTACH_DISK) && (
         <Button
-          data-cy='resize'
+          data-cy='attach-disk'
           size='small'
           color='secondary'
           onClick={show}
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
index 5881031079..60381e11ed 100644
--- a/src/fireedge/src/client/constants/translates.js
+++ b/src/fireedge/src/client/constants/translates.js
@@ -21,6 +21,7 @@ module.exports = {
   SortBy: 'Sort by',
   Filter: 'Filter',
   All: 'All',
+  On: 'On',
 
   /* actions */
   Accept: 'Accept',
@@ -50,10 +51,32 @@ module.exports = {
   AttachNic: 'Attach nic',
   Detach: 'Detach',
   TakeSnapshot: 'Take snapshot',
+  AddAction: 'Add action',
 
   /* questions */
   DoYouWantProceed: 'Do you want proceed?',
 
+  /* Scheduling */
+  Mon: 'Mon',
+  Monday: 'Monday',
+  Tue: 'Tue',
+  Tuesday: 'Tuesday',
+  Wed: 'Wed',
+  Wednesday: 'Wednesday',
+  Thu: 'Thu',
+  Thursday: 'Thursday',
+  Fri: 'Fri',
+  Friday: 'Friday',
+  Sat: 'Sat',
+  Saturday: 'Saturday',
+  Sun: 'Sun',
+  Sunday: 'Sunday',
+  Weekly: 'Weekly',
+  Monthly: 'Monthly',
+  Yearly: 'Yearly',
+  EachHours: 'Each %s hours',
+  AfterTimes: 'After %s times',
+
   /* dashboard */
   InTotal: 'In Total',
   Used: 'Used',
diff --git a/src/fireedge/src/client/constants/vm.js b/src/fireedge/src/client/constants/vm.js
index be2d1c5fef..eddd3f2986 100644
--- a/src/fireedge/src/client/constants/vm.js
+++ b/src/fireedge/src/client/constants/vm.js
@@ -494,6 +494,7 @@ export const VM_ACTIONS = {
 
   // SCHEDULING ACTION
   SCHED_ACTION_CREATE: 'sched_action_create',
+  SCHED_ACTION_UPDATE: 'sched_action_update',
   SCHED_ACTION_DELETE: 'sched_action_delete',
   CHARTER_CREATE: 'charter_create',
 
diff --git a/src/fireedge/src/client/features/One/vm/services.js b/src/fireedge/src/client/features/One/vm/services.js
index f718a48e1f..bba0d43a9e 100644
--- a/src/fireedge/src/client/features/One/vm/services.js
+++ b/src/fireedge/src/client/features/One/vm/services.js
@@ -46,13 +46,14 @@ export const vmService = ({
    * @param {string} data.filter - Filter flag
    * @param {number} data.start - Range start ID
    * @param {number} data.end - Range end ID
+   * @param {string|number} data.state - Filter state
    * @returns {Array} List of VMs
    * @throws Fails when response isn't code 200
    */
-  getVms: async ({ filter, start, end }) => {
+  getVms: async ({ filter, start, end, state }) => {
     const name = Actions.VM_POOL_INFO
     const command = { name, ...Commands[name] }
-    const config = requestConfig({ filter, start, end }, command)
+    const config = requestConfig({ filter, start, end, state }, command)
 
     const res = await RestClient.request(config)
 
diff --git a/src/fireedge/src/client/models/VirtualMachine.js b/src/fireedge/src/client/models/VirtualMachine.js
index a18341cefe..0eef8de902 100644
--- a/src/fireedge/src/client/models/VirtualMachine.js
+++ b/src/fireedge/src/client/models/VirtualMachine.js
@@ -14,6 +14,8 @@
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
 import { getSecurityGroupsFromResource, prettySecurityGroup } from 'client/models/SecurityGroup'
+import { timeToString } from 'client/models/Helper'
+import { Tr } from 'client/components/HOC'
 
 import {
   STATES,
@@ -21,15 +23,10 @@ import {
   VM_LCM_STATES,
   NIC_ALIAS_IP_ATTRS,
   HISTORY_ACTIONS,
+  T,
   StateInfo
 } from 'client/constants'
 
-/**
- * @param {string|number} action - Action code
- * @returns {HISTORY_ACTIONS} History action name
- */
-export const getHistoryAction = action => HISTORY_ACTIONS[+action]
-
 /**
  * This function removes, from the given list,
  * the Virtual machines in state DONE.
@@ -40,6 +37,12 @@ export const getHistoryAction = action => HISTORY_ACTIONS[+action]
 export const filterDoneVms = (vms = []) =>
   vms.filter(({ STATE }) => VM_STATES[STATE]?.name !== STATES.DONE)
 
+/**
+ * @param {string|number} action - Action code
+ * @returns {HISTORY_ACTIONS} History action name
+ */
+export const getHistoryAction = action => HISTORY_ACTIONS[+action]
+
 /**
  * @param {object} vm - Virtual machine
  * @returns {object} History records from resource
@@ -195,5 +198,43 @@ export const splitNicAlias = vm =>
 export const getSnapshotList = vm => {
   const { TEMPLATE = {} } = vm ?? {}
 
-  return [TEMPLATE.SNAPSHOT].flat()
+  return [TEMPLATE.SNAPSHOT].filter(Boolean).flat()
+}
+
+/**
+ * @param {object} vm - Virtual machine
+ * @returns {Array} List of schedule actions from resource
+ */
+export const getScheduleActions = vm => {
+  const { TEMPLATE = {} } = vm ?? {}
+
+  return [TEMPLATE.SCHED_ACTION].filter(Boolean).flat()
+}
+
+/**
+ * Converts the periodicity of the action to string value.
+ *
+ * @param {object} scheduleAction - Schedule action
+ * @returns {{repeat: string|string[], end: string}} - Periodicity of the action.
+ */
+export const periodicityToString = scheduleAction => {
+  const { REPEAT, DAYS = '', END_TYPE, END_VALUE = '' } = scheduleAction ?? {}
+
+  const daysOfWeek = [T.Sun, T.Mon, T.Tue, T.Wed, T.Thu, T.Fri, T.Sat]
+  const days = DAYS?.split(',')?.map(day => Tr(daysOfWeek[day])) ?? []
+
+  const repeat = {
+    0: `${Tr(T.Weekly)} ${days.join(',')}`,
+    1: `${Tr(T.Monthly)} ${DAYS}`,
+    2: `${Tr(T.Yearly)} ${DAYS}`,
+    3: Tr([T.EachHours, DAYS])
+  }[+REPEAT]
+
+  const end = {
+    0: Tr(T.None),
+    1: Tr([T.AfterTimes, END_VALUE]),
+    2: `${Tr(T.On)} ${timeToString(END_VALUE)}`
+  }[+END_TYPE]
+
+  return { repeat, end }
 }