@rancher/shell 3.0.0-rc.3 → 3.0.0-rc.4

package/scripts/extension/publish

@@ -18,6 +18,8 @@ FORCE="false"
 GITHUB_BUILD="true"
 GITHUB_RELEASE_TAG=""
 PODMAN_CONTAINER="false"
+UPDATE_OLD_PACKAGES="true"
+UPDATE_LATEST_PACAKGES="true"
 
 GITHUB_SOURCE=$(git config --get remote.origin.url | sed -e 's/^git@.*:\([[:graph:]]*\).git/\1/')
 GITHUB_BRANCH="main"
@@ -35,10 +37,12 @@ usage() {
   echo "  -o <name>    Specify destination container registry organization for built images"
   echo "  -i <prefix>  Specify prefix for the built container image (default: 'ui-extension-')"
   echo "  -l           Specify Podman container build"
+  echo "  -n           Do not check for updates to existing Charts (Chart.yaml)"
+  echo "  -e           Only check for updates to existing Charts (Chart.yaml)"
   exit 1
 }
 
-while getopts "hvr:o:pi:fcb:t:s:l" opt; do
+while getopts "hvr:o:pi:fcb:t:s:lne" opt; do
   case $opt in
     h)
       usage
@@ -75,6 +79,13 @@ while getopts "hvr:o:pi:fcb:t:s:l" opt; do
     l)
       PODMAN_CONTAINER="true"
       ;;
+    n)
+      UPDATE_OLD_PACKAGES="false"
+      ;;
+    e)
+      UPDATE_OLD_PACKAGES="true"
+      UPDATE_LATEST_PACAKGES="false"
+      ;;
     *)
       usage
       ;;
@@ -211,137 +222,201 @@ CHART_TEMPLATE=${BASE_DIR}/tmp/helm
 ROOT_INDEX=${BASE_DIR}/index.yaml
 
 # --------------------------------------------------------------------------------
-# Iterate through all packages - built them all or build only those specified on the command line
+# Iterate through all existing charts and look for updates/removals
 # --------------------------------------------------------------------------------
-for d in pkg/*/ ; do
-  pkg=$(basename $d)
-
-  if [ -z "$1" ] || [[ " ${PLUGINS[*]} " =~ " ${pkg} " ]]; then
-    # Check we don't already have a published version by looking in the assets folder
-    PKG_VERSION=$(jq -r .version ./pkg/${pkg}/package.json)
-    PKG_NAME="${pkg}-${PKG_VERSION}"
-    PKG_ASSET=${ASSETS}/${pkg}/${PKG_NAME}.tgz
-
-    # Skip the build for a package that does not match the tagged release name
-    if [[ -n "${GITHUB_RELEASE_TAG}" ]] && [ ${GITHUB_BUILD} == "true" ] && [[ ${GITHUB_RELEASE_TAG} != ${PKG_NAME} ]]; then
-      echo -e "${YELLOW}Github release tag ${RESET}${BOLD}${GITHUB_RELEASE_TAG}${RESET}${YELLOW} does not match asset name${RESET}"
-      echo -e "${YELLOW}Skipping ${RESET}${BOLD}${PKG_NAME}${RESET}"
-      continue
-    fi
+if [ "${UPDATE_OLD_PACKAGES}" = "true" ]; then
+  pushd ${ASSETS} > /dev/null
+  echo -e "${CYAN}${BOLD}Checking existing charts for updates ...${RESET}"
 
-    echo -e "${CYAN}${BOLD}Building extension: ${pkg} (${PKG_VERSION}) ${RESET}"
+  for FOLDER_NAME in */ ; do
+    EXT_NAME=${FOLDER_NAME::${#FOLDER_NAME}-1}
+    echo -e "${CYAN}${EXT_NAME}${RESET}"
 
-    echo "Package version: ${PKG_VERSION}"
-    echo "Package folder:  ${PKG_NAME}"
+    for CHART_ARCHIVE in ${EXT_NAME}/*.tgz ; do
+      rm -f ${TMP}/Chart.yaml
 
-    # --------------------------------------------------------------------------------
-    # Build the plugin from source
-    # --------------------------------------------------------------------------------
-    echo -e "${CYAN}Building extension from source code${RESET}"
-    FORCE_COLOR=1 yarn build-pkg $pkg | cat
+      # path in chart may be different to tar file name, so extratct the Chart.yaml file to the top-level folder
+      tar --strip-components=1 -C ${TMP} -xf ${CHART_ARCHIVE} */Chart.yaml
 
-    echo -e "${CYAN}Adding extension code ...${RESET}"
+      EXISTING_MD5=$(md5 -q ${TMP}/Chart.yaml)
+      VERSION=$(yq eval .version ${TMP}/Chart.yaml)
 
-    EXT_FOLDER=${BASE_DIR}/extensions/${pkg}/${PKG_VERSION}
-    PKG_DIST="${BASE_DIR}/dist-pkg/${PKG_NAME}"
+      CHART_FOLDER=${CHARTS}/${EXT_NAME}/${VERSION}
+      LATEST=${CHART_FOLDER}/Chart.yaml
 
-    rm -rf ${EXT_FOLDER}
+      if [ ! -f "${LATEST}" ]; then
+        echo "  - Chart for ${EXT}-${VERSION} appears to have been deleted - removing chart archive: ${CHART_ARCHIVE}"
+        rm -f ${ASSETS}/${CHART_ARCHIVE}
+        BUILT="true"
+      else
+        # Re-package the helm chart so that the Chart.yaml is processed in the same way so we can compare it
+        mkdir -p ${TMP}/tmp_chart
+        helm package ${CHART_FOLDER} -d ${TMP}/tmp_chart > /dev/null
+        rm ${TMP}/Chart.yaml
 
-    mkdir -p ${EXT_FOLDER}/plugin
+        # path in chart may be different to tar file name, so list the files to find what the chart archive is named
+        FILENAME=$(cd ${TMP}/tmp_chart; ls)
 
-    # Copy the code into the folder
-    cp -R ${PKG_DIST}/* ${EXT_FOLDER}/plugin
+        # path in chart may be different to tar file name, so extratct the Chart.yaml file to the top-level folder
+        tar --strip-components=1 -C ${TMP} -xf ${TMP}/tmp_chart/${FILENAME} */Chart.yaml
+        LATEST_MD5=$(md5 -q ${TMP}/Chart.yaml)
 
-    pushd ${BASE_DIR}/extensions/${pkg}/${PKG_VERSION} > /dev/null
-    rm -f plugin/report.html
-    find plugin -type f | sort > files.txt
-    popd > /dev/null
+        rm -f $TMP/tmp_chart/${FILENAME}
 
-    # --------------------------------------------------------------------------------
-    # Create the Helm chart
-    # --------------------------------------------------------------------------------
+        if [ "${EXISTING_MD5}" != "${LATEST_MD5}" ]; then
+          BUILT="true"
 
-    if [ -f ${PKG_ASSET} ] && [ "${FORCE}" == "false" ]; then
-      echo -e "${YELLOW}Helm chart has already been created - skipping (run with -f to force build)${RESET}"
-      continue;
-    fi
+          echo "  + Chart.yaml has changed for ${CHART_ARCHIVE}"
+          # Chart was already re-generated - update ir
+          rm ${CHART_ARCHIVE}
+          helm package ${CHART_FOLDER} -d ${ASSETS}/${EXT_NAME}
+        fi
+      fi
 
-    CHART_FOLDER=${CHARTS}/${pkg}/${PKG_VERSION}
+      rm -d ${TMP}/tmp_chart
+      rm ${TMP}/Chart.yaml
+      
+    done
+  done
 
-    mkdir -p ${ASSETS}/${pkg}
-    rm -rf ${CHART_FOLDER}
-    mkdir -p ${CHART_FOLDER}
+  popd > /dev/null
+fi
 
-    cp -R ${CHART_TEMPLATE}/charts/ui-plugin-server/* ${CHART_FOLDER}
+# --------------------------------------------------------------------------------
+# Iterate through all packages - built them all or build only those specified on the command line
+# --------------------------------------------------------------------------------
+if [ "${UPDATE_LATEST_PACAKGES}" = "true" ]; then
+  for d in pkg/*/ ; do
+    pkg=$(basename $d)
+
+    if [ -z "$1" ] || [[ " ${PLUGINS[*]} " =~ " ${pkg} " ]]; then
+      # Check we don't already have a published version by looking in the assets folder
+      PKG_VERSION=$(jq -r .version ./pkg/${pkg}/package.json)
+      PKG_NAME="${pkg}-${PKG_VERSION}"
+      PKG_ASSET=${ASSETS}/${pkg}/${PKG_NAME}.tgz
+
+      # Skip the build for a package that does not match the tagged release name
+      if [[ -n "${GITHUB_RELEASE_TAG}" ]] && [ ${GITHUB_BUILD} == "true" ] && [[ ${GITHUB_RELEASE_TAG} != ${PKG_NAME} ]]; then
+        echo -e "${YELLOW}Github release tag ${RESET}${BOLD}${GITHUB_RELEASE_TAG}${RESET}${YELLOW} does not match asset name${RESET}"
+        echo -e "${YELLOW}Skipping ${RESET}${BOLD}${PKG_NAME}${RESET}"
+        continue
+      fi
 
-    # Update Chart.yaml and values.yaml from the package file metadata
-    # Use the script from the template repository
-    echo -e "${CYAN}Patching Helm chart template${RESET}"
+      echo -e "${CYAN}${BOLD}Building extension: ${pkg} (${PKG_VERSION}) ${RESET}"
 
-    CHART=${CHART_FOLDER} REGISTRY="${REGISTRY}" ORG="${REGISTRY_ORG}" PACKAGE_JSON=${BASE_DIR}/pkg/${pkg}/package.json ${CHART_TEMPLATE}/scripts/patch
+      echo "Package version: ${PKG_VERSION}"
+      echo "Package folder:  ${PKG_NAME}"
 
-    # Copy README file from the plugin to the Helm chart, if there is one
-    if [ -f "./pkg/${pkg}/README.md" ]; then
-      cp ./pkg/${pkg}/README.md ${CHART_FOLDER}/README.md
-    fi
+      # --------------------------------------------------------------------------------
+      # Build the plugin from source
+      # --------------------------------------------------------------------------------
+      echo -e "${CYAN}Building extension from source code${RESET}"
+      FORCE_COLOR=1 yarn build-pkg $pkg | cat
 
-    pushd ${CHART_FOLDER}/templates > /dev/null
-    
-    if [ "${GITHUB_BUILD}" == "true" ]; then
-      echo "Patching for GitHub build"
-      ENDPOINT=https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/extensions/${pkg}/${PKG_VERSION}
-    else
-      echo "Patching for container build"
-      ENDPOINT=http://${IMAGE_PREFIX}${BASE_EXT}-svc.cattle-ui-plugin-system:8080/plugin/${PKG_NAME}
-    fi
-    sed -i.bak -e 's@endpoint: .*@endpoint: '"${ENDPOINT}"'@g' cr.yaml
-    rm *.bak
-    popd > /dev/null
+      echo -e "${CYAN}Adding extension code ...${RESET}"
 
-    # Additional patches
-    ${SCRIPT_DIR}/helmpatch ${CHART_FOLDER} "${BASE_DIR}/pkg/${pkg}/package.json"
+      EXT_FOLDER=${BASE_DIR}/extensions/${pkg}/${PKG_VERSION}
+      PKG_DIST="${BASE_DIR}/dist-pkg/${PKG_NAME}"
 
-    # Package into a .tgz helm chart
-    helm package ${CHART_FOLDER} -d ${ASSETS}/${pkg}
+      rm -rf ${EXT_FOLDER}
 
-    # --------------------------------------------------------------------------------
-    # Update the helm index just for this chart 
-    # --------------------------------------------------------------------------------
-    HELM_INDEX=${BASE_DIR}/index.yaml
+      mkdir -p ${EXT_FOLDER}/plugin
 
-    if [ -f "${HELM_INDEX}" ]; then
-      UPDATE="--merge ${HELM_INDEX}"
-    elif [ "${GITHUB_BUILD}" == "true" ] && [[ -n ${GITHUB_SOURCE} ]]; then
-      # Check if git branch contains index.yaml
-      GITHUB_SOURCE=$(echo -e "${GITHUB_SOURCE}" | sed 's/https:\/\///g')
+      # Copy the code into the folder
+      cp -R ${PKG_DIST}/* ${EXT_FOLDER}/plugin
+
+      pushd ${BASE_DIR}/extensions/${pkg}/${PKG_VERSION} > /dev/null
+      rm -f plugin/report.html
+      find plugin -type f | sort > files.txt
+      popd > /dev/null
+
+      # --------------------------------------------------------------------------------
+      # Create the Helm chart
+      # --------------------------------------------------------------------------------
+
+      if [ -f ${PKG_ASSET} ] && [ "${FORCE}" == "false" ]; then
+        echo -e "${YELLOW}Helm chart has already been created - skipping (run with -f to force build)${RESET}"
+        continue;
+      fi
 
-      wget -P ${BASE_DIR} https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/index.yaml 2>/dev/null
-      HELM_INDEX="${BASE_DIR}/index.yaml"
+      CHART_FOLDER=${CHARTS}/${pkg}/${PKG_VERSION}
 
-      if [ -f "${HELM_INDEX}" ]; then
-        UPDATE="--merge ${HELM_INDEX}"
+      mkdir -p ${ASSETS}/${pkg}
+      rm -rf ${CHART_FOLDER}
+      mkdir -p ${CHART_FOLDER}
+
+      cp -R ${CHART_TEMPLATE}/charts/ui-plugin-server/* ${CHART_FOLDER}
+
+      # Update Chart.yaml and values.yaml from the package file metadata
+      # Use the script from the template repository
+      echo -e "${CYAN}Patching Helm chart template${RESET}"
+
+      CHART=${CHART_FOLDER} REGISTRY="${REGISTRY}" ORG="${REGISTRY_ORG}" PACKAGE_JSON=${BASE_DIR}/pkg/${pkg}/package.json ${CHART_TEMPLATE}/scripts/patch
+
+      # Copy README file from the plugin to the Helm chart, if there is one
+      if [ -f "./pkg/${pkg}/README.md" ]; then
+        cp ./pkg/${pkg}/README.md ${CHART_FOLDER}/README.md
+      fi
+
+      pushd ${CHART_FOLDER}/templates > /dev/null
+      
+      if [ "${GITHUB_BUILD}" == "true" ]; then
+        echo "Patching for GitHub build"
+        ENDPOINT=https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/extensions/${pkg}/${PKG_VERSION}
+      else
+        echo "Patching for container build"
+        ENDPOINT=http://${IMAGE_PREFIX}${BASE_EXT}-svc.cattle-ui-plugin-system:8080/plugin/${PKG_NAME}
       fi
+      sed -i.bak -e 's@endpoint: .*@endpoint: '"${ENDPOINT}"'@g' cr.yaml
+      rm *.bak
+      popd > /dev/null
+
+      # Additional patches
+      ${SCRIPT_DIR}/helmpatch ${CHART_FOLDER} "${BASE_DIR}/pkg/${pkg}/package.json"
+
+      # Package into a .tgz helm chart
+      helm package ${CHART_FOLDER} -d ${ASSETS}/${pkg}
+
+      BUILT="true"
     fi
+  done
+fi
 
-    # Base URL referencing assets directly from GitHub
-    BASE_URL="assets/"
+# Update the Helm Index for all charts, if changes were made
+if [ "${BUILT}" == "true" ]; then
+  # --------------------------------------------------------------------------------
+  # Update the helm index for all charts
+  # --------------------------------------------------------------------------------
+  HELM_INDEX=${BASE_DIR}/index.yaml
+
+  echo "Updating Helm Index file"
+
+  if [ -f "${HELM_INDEX}" ]; then
+    UPDATE="--merge ${HELM_INDEX}"
+  elif [ "${GITHUB_BUILD}" == "true" ] && [[ -n ${GITHUB_SOURCE} ]]; then
+    # Check if git branch contains index.yaml
+    GITHUB_SOURCE=$(echo -e "${GITHUB_SOURCE}" | sed 's/https:\/\///g')
 
-    # Relative URL references assets within the container deployment
-    RELATIVE_URL="plugin/"
-    
-    rm -rf ${CHART_TMP}
-    mkdir -p ${CHART_TMP}
-    cp ${ASSETS}/${pkg}/*.tgz ${CHART_TMP}
+    wget -P ${BASE_DIR} https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/index.yaml 2>/dev/null
+    HELM_INDEX="${BASE_DIR}/index.yaml"
 
-    if [ "${GITHUB_BUILD}" == "true" ]; then
-      helm repo index ${ASSETS} --url ${BASE_URL} ${UPDATE}
-    elif ! [ -e "${HELM_INDEX}" ]; then
-      helm repo index ${ASSETS} --url ${RELATIVE_URL}
+    if [ -f "${HELM_INDEX}" ]; then
+      UPDATE="--merge ${HELM_INDEX}"
     fi
+  fi
+
+  # Base URL referencing assets directly from GitHub
+  BASE_URL="assets/"
 
-    BUILT="true"
+  # Relative URL references assets within the container deployment
+  RELATIVE_URL="plugin/"
+  
+  if [ "${GITHUB_BUILD}" == "true" ]; then
+    helm repo index ${ASSETS} --url ${BASE_URL} ${UPDATE}
+  elif ! [ -e "${HELM_INDEX}" ]; then
+    helm repo index ${ASSETS} --url ${RELATIVE_URL}
   fi
-done
+fi
 
 if [ "${GITHUB_BUILD}" == "true" ] && [[ -n "${GITHUB_RELEASE_TAG}" ]] && [ "${BUILT}" == "false" ]; then
   echo -e "${YELLOW}Github release tag ${RESET}${BOLD}${GITHUB_RELEASE_TAG}${RESET}${YELLOW} did not match any package name.${RESET}"

package/store/catalog.js

@@ -7,7 +7,6 @@ import { findBy, addObject, filterBy, isArray } from '@shell/utils/array';
 import { stringify } from '@shell/utils/error';
 import { classify } from '@shell/plugins/dashboard-store/classify';
 import { sortBy } from '@shell/utils/sort';
-import { importChart } from '@shell/utils/dynamic-importer';
 import { ensureRegex } from '@shell/utils/string';
 import { isPrerelease } from '@shell/utils/version';
 import difference from 'lodash/difference';
@@ -265,31 +264,6 @@ export const getters = {
     };
   },
 
-  chartSteps(state, getters) {
-    return (name) => {
-      const steps = [];
-
-      const stepsPath = `./${ name }/steps/`;
-      // require.context only takes literals, so find all candidate step files and filter out
-      const allPaths = require.context('@shell/chart', true, /\.vue$/).keys();
-
-      allPaths
-        .filter((path) => path.startsWith(stepsPath))
-        .forEach((path) => {
-          try {
-            steps.push({
-              name:      path.replace(stepsPath, ''),
-              component: importChart(path.substr(2, path.length)),
-            });
-          } catch (e) {
-            console.warn(`Failed to load step component ${ path } for chart ${ name }`, e); // eslint-disable-line no-console
-          }
-        });
-
-      return steps;
-    };
-  },
-
   inStore(state) {
     return state.inStore;
   },

package/store/growl.js

@@ -18,11 +18,14 @@ export const getters = {
 
 export const mutations = {
   add(state, data) {
-    state.stack.push({
-      id:      state.nextId++,
-      started: (new Date().getTime()),
-      ...data
-    });
+    state.stack = [
+      ...state.stack,
+      {
+        id:      state.nextId++,
+        started: (new Date().getTime()),
+        ...data
+      }
+    ];
   },
 
   remove(state, id) {

package/utils/cluster.js

@@ -1,4 +1,5 @@
 import semver from 'semver';
+import { camelToTitle } from '@shell/utils/string';
 import { CAPI } from '@shell/config/labels-annotations';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -90,3 +91,11 @@ export function abbreviateClusterName(input) {
 
   return result;
 }
+
+export function labelForAddon(store, name, configuration = true) {
+  const addon = camelToTitle(name.replace(/^(rke|rke2|rancher)-/, ''));
+  const fallback = `${ addon } ${ configuration ? 'Configuration' : '' }`;
+  const key = `cluster.addonChart."${ name }"${ configuration ? '.configuration' : '.label' }`;
+
+  return store.getters['i18n/withFallback'](key, null, fallback);
+}

package/utils/versions.ts

@@ -0,0 +1,39 @@
+import { setKubeVersionData, setVersionData } from '@shell/config/version';
+
+class Versions {
+    private promise?: Promise<any>;
+
+    async fetch(context: { store: any }): Promise<any> {
+      if (this.promise) {
+        return this.promise;
+      }
+
+      const rancherVersionRequest = context.store.dispatch('rancher/request', {
+        url:                  '/rancherversion',
+        method:               'get',
+        redirectUnauthorized: false
+      }).then((response: any) => {
+        setVersionData(response);
+      }).catch((e: Error) => {
+        console.warn('Failed to fetch Rancher version metadata', e); // eslint-disable-line no-console
+      });
+
+      const kubeVersionRequest = context.store.dispatch('rancher/request', {
+        url:                  '/version',
+        method:               'get',
+        redirectUnauthorized: false
+      }).then((response: any) => {
+        setKubeVersionData(response);
+      }).catch((e: Error) => {
+        console.warn('Failed to fetch Kube version metadata', e); // eslint-disable-line no-console
+      });
+
+      this.promise = Promise.allSettled([rancherVersionRequest, kubeVersionRequest]);
+
+      return this.promise;
+    }
+}
+
+const versions = new Versions();
+
+export default versions;

package/vue.config.js

@@ -74,6 +74,7 @@ const getProxyConfig = (proxyConfig) => ({
   '/meta':           proxyMetaOpts(api), // Browser API UI
   '/v1-*':           proxyOpts(api), // SAML, KDM, etc
   '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
+  '/version':        proxyPrimeOpts(api), // Rancher Kube version endpoint
   // These are for Ember embedding
   '/c/*/edit':       proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
   '/k/':             proxyOpts('https://127.0.0.1:8000'),
@@ -362,6 +363,9 @@ const getVirtualModulesAutoImport = (dir) => {
   return new VirtualModulesPlugin(autoImportTypes);
 };
 
+// Get current shell version
+const shellPkgData = require(path.join(__dirname, 'package.json'));
+
 /**
  * DefinePlugin does string replacement within our code. We may want to consider replacing it with something else. In code we'll see something like
  * process.env.commit even though process and env aren't even defined objects. This could cause people to be mislead.
@@ -377,6 +381,7 @@ const createEnvVariablesPlugin = (routerBasePath, rancherEnv) => new webpack.Def
   'process.env.rancherEnv':                JSON.stringify(rancherEnv),
   'process.env.harvesterPkgUrl':           JSON.stringify(process.env.HARVESTER_PKG_URL),
   'process.env.api':                       JSON.stringify(api),
+  'process.env.UI_EXTENSIONS_API_VERSION': JSON.stringify(shellPkgData.version),
   // Store the Router Base as env variable that we can use in `shell/config/router.js`
   'process.env.routerBase':                JSON.stringify(routerBasePath),
   __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',

package/components/form/PodSecurity.vue

@@ -1,168 +0,0 @@
-<script>
-import { RadioGroup } from '@components/Form/Radio';
-import ArrayList from '@shell/components/form/ArrayList';
-import KeyValue from '@shell/components/form/KeyValue';
-import { mapGetters } from 'vuex';
-import { LabeledInput } from '@components/Form/LabeledInput';
-
-export default {
-  components: {
-    RadioGroup,
-    ArrayList,
-    KeyValue,
-    LabeledInput
-  },
-  props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    },
-    mode: {
-      type:    String,
-      default: 'view'
-    }
-  },
-
-  data() {
-    const {
-      shareProcessNamespace, securityContext = {}, hostPID, hostIPC
-    } = this.value;
-    const {
-      runasNonRoot, runAsUser, runAsGroup, supplementalGroups, fsGroup, sysctls
-    } = securityContext;
-
-    return {
-      shareProcessNamespace,
-      hostPID,
-      hostIPC,
-      runasNonRoot,
-      runAsUser,
-      runAsGroup,
-      supplementalGroups,
-      fsGroup,
-      sysctls
-    };
-  },
-
-  computed: { ...mapGetters({ t: 'i18n/t' }) }
-};
-</script>
-
-<template>
-  <div>
-    <div class="row">
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="shareProcessNamespace"
-          name="shareProcessNamespace"
-          :label="t('workload.container.security.shareProcessNamespace')"
-          :labels="['No', 'Yes']"
-          :options="[false, true]"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="runasNonRoot"
-          name="runasNonRoot"
-          :label="t('workload.container.security.runAsNonRoot')"
-          :options="[false, true]"
-          :labels="[t('workload.container.security.runAsNonRootOptions.noOption'), t('workload.container.security.runAsNonRootOptions.yesOption')]"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <LabeledInput
-          v-model.number="runAsUser"
-          :label="t('workload.container.security.runAsUser')"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-6">
-        <LabeledInput
-          v-model.number="runAsGroup"
-          :label="t('workload.container.security.runAsGroup')"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <h5 class="text-label">
-          <t k="workload.container.security.supplementalGroups" />
-        </h5>
-        <ArrayList
-          v-model:value="supplementalGroups"
-          :add-label="t('workload.container.security.addGroupIDs')"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <LabeledInput
-          v-model.number="fsGroup"
-          :label="t('workload.container.security.fsGroup')"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="hostIPC"
-          name="hostIPC"
-          :label="t('workload.container.security.hostIPC')"
-          :labels="['No', 'Yes']"
-          :options="[false, true]"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="hostPID"
-          name="hostPID"
-          :label="t('workload.container.security.hostPID')"
-          :labels="['No', 'Yes']"
-          :options="[false, true]"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-12">
-        <KeyValue
-          v-model:value="sysctls"
-          :title="t('workload.container.security.sysctls')"
-          :key-label="t('workload.container.security.sysctlsKey')"
-          :mode="mode"
-        >
-          <template #title>
-            <h3>
-              {{ t('workload.container.security.sysctls') }}
-            </h3>
-          </template>
-        </KeyValue>
-      </div>
-    </div>
-  </div>
-</template>