Toggle app scaling from table view

src/containers/apps/Apps.tsx

@@ -49,6 +49,30 @@ export default class Apps extends ApiComponent<
             })
     }
 
+    async onAppScaled(appName: string, instanceCount: number) {
+        const self = this
+
+        const def = self.state.apiData?.appDefinitions.find(
+            (x) => x.appName === appName
+        )
+        if (!def) return alert('App not found: ' + appName)
+
+        const toggled = { ...def, instanceCount }
+
+        Promise.resolve() //
+            .then(function () {
+                self.setState({ isLoading: true })
+                return self.apiManager.updateConfigAndSave(appName, toggled)
+            })
+            .then(function () {
+                return self.reFetchData()
+            })
+            .catch(Toaster.createCatcher())
+            .then(function () {
+                self.setState({ isLoading: false })
+            })
+    }
+
     render() {
         const self = this
 
@@ -80,6 +104,9 @@ export default class Apps extends ApiComponent<
                         defaultNginxConfig={apiData.defaultNginxConfig}
                         apps={apiData.appDefinitions}
                         rootDomain={apiData.rootDomain}
+                        onAppScaled={(appName: string, count: number) =>
+                            self.onAppScaled(appName, count)
+                        }
                     />
                 ) : (
                     <div />

src/containers/apps/AppsTable.tsx

@@ -5,7 +5,7 @@ import {
     LinkOutlined,
     LoadingOutlined,
 } from '@ant-design/icons'
-import { Card, Col, Input, Row, Table, Tag, Tooltip } from 'antd'
+import { Button, Card, Col, Input, Row, Table, Tag, Tooltip } from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { History } from 'history'
 import React, { Component, Fragment } from 'react'
@@ -26,6 +26,7 @@ class AppsTable extends Component<
         rootDomain: string
         defaultNginxConfig: string
         isMobile: boolean
+        onAppScaled: (appName: string, instanceCount: number) => void
         search: string | undefined
     },
     { searchTerm: string }
@@ -80,6 +81,26 @@ class AppsTable extends Component<
                 dataIndex: 'instanceCount',
                 key: 'instanceCount',
                 align: ALIGN,
+                render: (instanceCount: number, row, index) => {
+                    return (
+                        <Button
+                            style={{ margin: -5 }}
+                            onClick={async () => {
+                                const warning =
+                                    'Do you want to turn this app OFF?'
+                                if (instanceCount && !window.confirm(warning))
+                                    return
+                                if (!row.appName) return alert('no row.appName')
+                                this.props.onAppScaled(
+                                    row.appName,
+                                    instanceCount ? 0 : 1
+                                )
+                            }}
+                        >
+                            {instanceCount}
+                        </Button>
+                    )
+                },
             },
             {
                 title: 'Tags',