Implement Minion Pool feature redesign CORWEB-247

README.md

@@ -26,7 +26,7 @@ Your server will be running at `http://localhost:3000/` (the port is configurabl
 ## Development mode
 
 - set env. variable `NODE_MODE='development'`
-- run `yarn ui-dev` to start local development server (starts on port 3001)
+- run `yarn client-dev` to start local development server (starts on port 3001)
 - run `yarn server-dev` to start the express server in development mode
 
 To debug the client code using VS Code, simply run the project's launch configuration from the 'Run' menu (Ctrl+Shift+D).

config.ts

@@ -109,6 +109,8 @@ const conf: Config = {
   // replicas, migrations, endpoints, users etc.
   mainListItemsPerPage: 20,
 
+  maxMinionPoolEventsPerPage: 50,
+
   servicesUrls: {
     keystone: '{BASE_URL}/identity',
     barbican: '{BASE_URL}/barbican',

src/@types/Config.ts

@@ -34,4 +34,5 @@ export type Config = {
   passwordFields: string[],
   mainListItemsPerPage: number,
   servicesUrls: Services,
+  maxMinionPoolEventsPerPage: number,
 }

src/@types/Field.ts

@@ -17,7 +17,14 @@ import LabelDictionary from '../utils/LabelDictionary'
 import { ProviderTypes } from './Providers'
 
 type Separator = { separator: boolean }
-type EnumItemObject = { label?: string, value?: any, name?: string, id?: string | null }
+type EnumItemObject = {
+  label?: string,
+  value?: any,
+  name?: string,
+  id?: string | null,
+  disabled?: boolean,
+  subtitleLabel?: string,
+}
 export const isEnumSeparator = (e: any): e is Separator => (typeof e !== 'string' && e.separator === true)
 
 export type EnumItem = (

src/@types/MinionPool.ts

@@ -12,23 +12,50 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Execution } from './Execution'
-
+export type MinionMachine = {
+  id: string
+  created_at: string
+  updated_at: string
+  allocation_status: string
+  connection_info?: any
+  power_status: string
+  provider_properties: any
+  last_used_at?: string
+  allocated_action: string | null
+}
+export type MinionPoolEvent = {
+  id: string
+  index: number
+  level: 'INFO' | 'DEBUG' | 'ERROR'
+  message: string
+  created_at: string
+}
+export type MinionPoolProgressUpdate = {
+  id: string
+  current_step: number
+  message: string
+  created_at: string
+}
+export type MinionPoolEventProgressUpdate = MinionPoolEvent | MinionPoolProgressUpdate
 export type MinionPool = {
   id: string
   created_at: string
   updated_at: string | null
-  pool_name: string
-  pool_os_type: string
-  pool_status: string
+  name: string
+  os_type: 'linux' | 'windows'
+  status: string
   minimum_minions: number
+  maximum_minions: number
   environment_options: { [prop: string]: any }
   endpoint_id: string
-  last_execution_status: string
   notes?: string
-  pool_platform: 'source' | 'destination'
+  platform: 'source' | 'destination',
+  minion_machines: MinionMachine[],
+  minion_retention_strategy: 'poweroff' | 'delete'
+  minion_max_idle_time: number,
 }
 
 export type MinionPoolDetails = MinionPool & {
-  executions: Execution[]
+  events: MinionPoolEvent[],
+  progress_updates: MinionPoolProgressUpdate[]
 }

src/components/atoms/StatusIcon/StatusIcon.tsx

@@ -26,14 +26,17 @@ import warningImage from './images/warning'
 import pendingImage from './images/pending.svg'
 import successHollowImage from './images/success-hollow.svg'
 import errorHollowImage from './images/error-hollow.svg'
+import warningHollowImage from './images/warning-hollow.svg'
 
 type Props = {
   status: string,
   useBackground?: boolean,
   hollow?: boolean,
   secondary?: boolean,
   style?: React.CSSProperties
+  outlined?: boolean
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  title?: string
 }
 
 const getSpinnerUrl = (
@@ -48,7 +51,7 @@ const getRunningImageUrl = (props: Props) => {
 
 const getWarningUrl = (background: string) => `url('data:image/svg+xml;utf8,${encodeURIComponent(warningImage(background))}')`
 
-const statuses = (status: any, props: any) => {
+const statuses = (status: any, props: Props) => {
   switch (status) {
     case 'COMPLETED':
       return css`
@@ -57,6 +60,7 @@ const statuses = (status: any, props: any) => {
     case 'STARTING':
     case 'RUNNING':
     case 'PENDING':
+    case 'AWAITING_MINION_ALLOCATIONS':
       return css`
         background-image: ${getRunningImageUrl(props)};
         ${StyleProps.animations.rotation}
@@ -74,6 +78,7 @@ const statuses = (status: any, props: any) => {
     case 'FAILED_TO_SCHEDULE':
     case 'FAILED_TO_CANCEL':
     case 'ERROR':
+    case 'ERROR_ALLOCATING_MINIONS':
       return css`
         background-image: url('${props.hollow ? errorHollowImage : errorImage}');
       `
@@ -90,10 +95,11 @@ const statuses = (status: any, props: any) => {
       return css`
         background-image: ${getWarningUrl('#424242')};
       `
+    case 'INFO':
     case 'UNSCHEDULED':
     case 'UNEXECUTED':
       return css`
-        background-image: ${getWarningUrl(Palette.grayscale[2])};
+        background-image: ${props.hollow ? `url('${warningHollowImage}')` : getWarningUrl(Palette.grayscale[2])};
       `
     default:
       return null

src/components/atoms/StatusIcon/story.tsx

@@ -70,3 +70,8 @@ storiesOf('StatusIcon', module)
       <StatusIcon status="CANCELLING" useBackground />
     </Wrapper>
   ))
+  .add('info hollow', () => (
+    <Wrapper>
+      <StatusIcon status="INFO" hollow />
+    </Wrapper>
+  ))

src/components/atoms/StatusPill/StatusPill.tsx

@@ -29,12 +29,31 @@ const LABEL_MAP: { [status: string]: string } = {
   CANCELLING_AFTER_COMPLETION: 'CANCELLING',
   FAILED_TO_SCHEDULE: 'UNSCHEDULABLE',
   FAILED_TO_CANCEL: 'CANCELED',
+  AWAITING_MINION_ALLOCATIONS: 'AWAITING MINIONS',
+  ERROR_ALLOCATING_MINIONS: 'MINIONS ERROR',
+  // Minion Pool statuses
+  VALIDATING_INPUTS: 'VALIDATING',
+  ALLOCATING_SHARED_RESOURCES: 'ALLOCATING',
+  ALLOCATING_MACHINES: 'ALLOCATING',
+  DEALLOCATING_MACHINES: 'DEALLOCATING',
+  DEALLOCATING_SHARED_RESOURCES: 'DEALLOCATING',
+  IN_MAINTENANCE: 'MAINTENANCE',
+  RESCALING: 'SCALING',
+  IN_USE: 'IN USE',
+  // Minion Machine power statuses
+  POWERING_OFF: 'POWERING OFF',
+  POWERING_ON: 'POWERING ON',
+  POWERED_ON: 'POWERED ON',
+  POWERED_OFF: 'POWERED OFF',
+  POWER_ERROR: 'ERROR',
 }
 
 const statuses = (status: any) => {
   switch (status) {
     case 'COMPLETED':
-    case 'ALLOCATED':
+    case 'ALLOCATED': // Minion Pool status
+    case 'POWERED_ON': // Minion Machine status
+    case 'AVAILABLE': // Minion Pool status
       return css`
         background: ${Palette.success};
         color: white;
@@ -43,6 +62,8 @@ const statuses = (status: any) => {
     case 'FAILED_TO_SCHEDULE':
     case 'FAILED_TO_CANCEL':
     case 'ERROR':
+    case 'ERROR_ALLOCATING_MINIONS':
+    case 'POWER_ERROR': // Minion Machine power status
       return css`
         background: ${Palette.alert};
         color: white;
@@ -66,9 +87,19 @@ const statuses = (status: any) => {
     case 'STARTING':
     case 'RUNNING':
     case 'PENDING':
-    case 'INITIALIZING':
-    case 'ALLOCATING':
-    case 'RECONFIGURING':
+    case 'AWAITING_MINION_ALLOCATIONS':
+    case 'INITIALIZING': // Minion Pool status
+    case 'ALLOCATING': // Minion Pool status
+    case 'RECONFIGURING': // Minion Pool status
+    case 'VALIDATING_INPUTS': // Minion Pool status
+    case 'ALLOCATING_SHARED_RESOURCES': // Minion Pool status
+    case 'ALLOCATING_MACHINES': // Minion Pool status
+    case 'SCALING': // Minion Pool status
+    case 'RESCALING': // Minion Pool status
+    case 'DEPLOYING': // Minion Pool status
+    case 'IN_USE': // Minion Pool status
+    case 'HEALTHCHECKING': // Minion Machine status
+    case 'POWERING_ON': // Minion Machine power status
       return css`
         background: url('${runningImage}');
         animation: bgMotion 1s infinite linear;
@@ -79,10 +110,15 @@ const statuses = (status: any) => {
           100% { background-position: 0 -1px; }
         }
       `
+
     case 'CANCELLING':
     case 'UNINITIALIZING':
-    case 'DEALLOCATING':
+    case 'DEALLOCATING': // Minion Machine status
+    case 'POWERING_OFF': // Minion Machine power status
     case 'CANCELLING_AFTER_COMPLETION':
+    case 'IN_MAINTENANCE': // Minion Pool status
+    case 'DEALLOCATING_MACHINES': // Minion Pool status
+    case 'DEALLOCATING_SHARED_RESOURCES': // Minion Pool status
       return css`
         background: url('${cancellingImage}');
         animation: bgMotion 1s infinite linear;
@@ -101,9 +137,11 @@ const statuses = (status: any) => {
         border-color: transparent;
       `
     case 'UNSCHEDULED':
-    case 'UNINITIALIZED':
-    case 'DEALLOCATED':
-    case 'INITIALIZED':
+    case 'UNKNOWN': // Minion Pool/Machine status
+    case 'UNINITIALIZED': // Minion Pool/Machine status
+    case 'DEALLOCATED': // Minion Pool status
+    case 'INITIALIZED': // Minion Pool status
+    case 'POWERED_OFF': // Minion Machine status
       return css`
         background: ${Palette.grayscale[2]};
         color: ${Palette.black};
@@ -156,6 +194,7 @@ const Wrapper = styled.div<any>`
   ${(props: any) => statuses(props.status)}
   ${(props: any) => (props.status === 'INFO' ? getInfoStatusColor(props) : '')}
   text-transform: uppercase;
+  overflow: hidden;
 `
 
 type Props = {

src/components/atoms/StatusPill/story.tsx

@@ -40,6 +40,8 @@ const STATUSES = [
   'FAILED_TO_SCHEDULE',
   'DEADLOCKED',
   'STRANDED_AFTER_DEADLOCK',
+  'AWAITING_MINION_ALLOCATIONS',
+  'ERROR_ALLOCATING_MINIONS',
   // Minion Pool statuses
   'INITIALIZED',
   'UNINITIALIZED',
@@ -50,6 +52,8 @@ const STATUSES = [
   'ALLOCATING',
   'ALLOCATED',
   'RECONFIGURING',
+  'IN_USE',
+  'HEALTHCHECKING',
 ]
 
 const renderAllStatuses = (small?: boolean) => (