frontend:add create pod and job action button

Author: ChayanDass

frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryAst.stories.storyshot

@@ -268,7 +268,19 @@
                   </h1>
                   <div
                     class="MuiBox-root css-ldp2l3"
-                  />
+                  >
+                    <button
+                      aria-label="Create Job"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+                      data-mui-internal-clone-element="true"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryMinute.stories.storyshot

@@ -268,7 +268,19 @@
                   </h1>
                   <div
                     class="MuiBox-root css-ldp2l3"
-                  />
+                  >
+                    <button
+                      aria-label="Create Job"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+                      data-mui-internal-clone-element="true"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

frontend/src/components/job/List.tsx

@@ -22,6 +22,7 @@ import { KubeContainer } from '../../lib/k8s/cluster';
 import Job from '../../lib/k8s/job';
 import { formatDuration } from '../../lib/util';
 import { useNamespaces } from '../../redux/filterSlice';
+import { CreateResourceButton } from '../common';
 import { StatusLabel } from '../common/Label';
 import { StatusLabelProps } from '../common/Label';
 import ResourceListView from '../common/Resource/ResourceListView';
@@ -107,6 +108,7 @@ export function JobsListRenderer(props: JobsListRendererProps) {
       title={t('Jobs')}
       headerProps={{
         noNamespaceFilter,
+        titleSideActions: [<CreateResourceButton resourceClass={Job} key="create-job-button" />],
       }}
       hideColumns={hideColumns}
       errors={errors}

frontend/src/components/job/__snapshots__/JobList.Items.stories.storyshot

@@ -19,7 +19,19 @@
             </h1>
             <div
               class="MuiBox-root css-ldp2l3"
-            />
+            >
+              <button
+                aria-label="Create Job"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+                data-mui-internal-clone-element="true"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+            </div>
           </div>
         </div>
         <div

frontend/src/components/namespace/__snapshots__/NamespaceDetails.Active.stories.storyshot

@@ -317,7 +317,19 @@
                   </h1>
                   <div
                     class="MuiBox-root css-ldp2l3"
-                  />
+                  >
+                    <button
+                      aria-label="Create Pod"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+                      data-mui-internal-clone-element="true"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

frontend/src/components/pod/List.tsx

@@ -26,6 +26,7 @@ import { parseCpu, parseRam, unparseCpu, unparseRam } from '../../lib/units';
 import { timeAgo } from '../../lib/util';
 import { useNamespaces } from '../../redux/filterSlice';
 import { HeadlampEventType, useEventCallback } from '../../redux/headlampEventSlice';
+import { CreateResourceButton } from '../common';
 import { StatusLabel, StatusLabelProps } from '../common/Label';
 import Link from '../common/Link';
 import ResourceListView from '../common/Resource/ResourceListView';
@@ -198,6 +199,7 @@ export function PodListRenderer(props: PodListProps) {
       title={t('Pods')}
       headerProps={{
         noNamespaceFilter,
+        titleSideActions: [<CreateResourceButton resourceClass={Pod} key="create-pod-button" />],
       }}
       hideColumns={hideColumns}
       errors={errors}

frontend/src/components/pod/__snapshots__/PodList.Items.stories.storyshot

@@ -19,7 +19,19 @@
             </h1>
             <div
               class="MuiBox-root css-ldp2l3"
-            />
+            >
+              <button
+                aria-label="Create Pod"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-whz9ym-MuiButtonBase-root-MuiIconButton-root"
+                data-mui-internal-clone-element="true"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+            </div>
           </div>
         </div>
         <div

frontend/src/lib/k8s/job.ts

@@ -21,7 +21,7 @@ import { KubePodSpec } from './pod';
 
 export interface KubeJob extends KubeObjectInterface {
   spec: {
-    selector: LabelSelector;
+    selector?: LabelSelector;
     template: {
       metadata?: KubeMetadata;
       spec: KubePodSpec;
@@ -61,6 +61,35 @@ class Job extends KubeObject<KubeJob> {
     }
     return -1;
   }
+  static getBaseObject(): KubeJob {
+    const baseObject = super.getBaseObject() as KubeJob;
+    baseObject.metadata = {
+      ...baseObject.metadata,
+      namespace: '',
+      labels: { app: 'headlamp' },
+    };
+    baseObject.spec = {
+      selector: {
+        matchLabels: { app: 'headlamp' },
+      },
+      template: {
+        spec: {
+          containers: [
+            {
+              name: '',
+              image: '',
+              command: [],
+              imagePullPolicy: 'Always',
+            },
+          ],
+          restartPolicy: 'Never',
+          nodeName: '',
+        },
+      },
+    };
+
+    return baseObject;
+  }
 }
 
 export default Job;

frontend/src/lib/k8s/pod.ts

@@ -40,6 +40,7 @@ export interface KubePodSpec {
   serviceAccount?: string;
   priority?: string;
   tolerations?: any[];
+  restartPolicy?: string;
 }
 
 export interface KubePod extends KubeObjectInterface {
@@ -435,6 +436,27 @@ class Pod extends KubeObject<KubePod> {
 
     return newDetails;
   }
+  static getBaseObject(): KubePod {
+    const baseObject = super.getBaseObject() as KubePod;
+    baseObject.metadata = {
+      ...baseObject.metadata,
+      namespace: '',
+      labels: { app: 'headlamp' },
+    };
+    baseObject.spec = {
+      containers: [
+        {
+          name: '',
+          image: '',
+          ports: [{ containerPort: 80 }],
+          imagePullPolicy: 'Always',
+        },
+      ],
+      nodeName: '',
+    };
+
+    return baseObject;
+  }
 }
 
 export default Pod;