Remove lingui (#1874)

* remove lingui

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* babelless

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak ts-loader options

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak renderer webpack config

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/+workloads-pods/container-charts.tsx

@@ -1,12 +1,10 @@
 import React, { useContext } from "react";
-import { t } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { IPodMetrics } from "../../api/endpoints";
 import { BarChart, cpuOptions, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
-import { _i18n } from "../../i18n";
 import { themeStore } from "../../theme.store";
 
 type IContext = IResourceMetricsValue<any, { metrics: IPodMetrics }>;
@@ -36,22 +34,22 @@ export const ContainerCharts = observer(() => {
     [
       {
         id: "cpuUsage",
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`CPU cores usage`),
+        label: `Usage`,
+        tooltip: `CPU cores usage`,
         borderColor: "#3D90CE",
         data: cpuUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: "cpuRequests",
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`CPU requests`),
+        label: `Requests`,
+        tooltip: `CPU requests`,
         borderColor: "#30b24d",
         data: cpuRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: "cpuLimits",
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`CPU limits`),
+        label: `Limits`,
+        tooltip: `CPU limits`,
         borderColor: chartCapacityColor,
         data: cpuLimits.map(([x, y]) => ({ x, y }))
       }
@@ -60,22 +58,22 @@ export const ContainerCharts = observer(() => {
     [
       {
         id: "memoryUsage",
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Memory usage`),
+        label: `Usage`,
+        tooltip: `Memory usage`,
         borderColor: "#c93dce",
         data: memoryUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: "memoryRequests",
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Memory requests`),
+        label: `Requests`,
+        tooltip: `Memory requests`,
         borderColor: "#30b24d",
         data: memoryRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: "memoryLimits",
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`Memory limits`),
+        label: `Limits`,
+        tooltip: `Memory limits`,
         borderColor: chartCapacityColor,
         data: memoryLimits.map(([x, y]) => ({ x, y }))
       }
@@ -84,8 +82,8 @@ export const ContainerCharts = observer(() => {
     [
       {
         id: "fsUsage",
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Bytes consumed on this filesystem`),
+        label: `Usage`,
+        tooltip: `Bytes consumed on this filesystem`,
         borderColor: "#ffc63d",
         data: fsUsage.map(([x, y]) => ({ x, y }))
       }
@@ -101,4 +99,4 @@ export const ContainerCharts = observer(() => {
       data={{ datasets: datasets[tabId] }}
     />
   );
-});
+});

src/renderer/components/+workloads-pods/pod-charts.tsx

@@ -1,20 +1,18 @@
 import React, { useContext } from "react";
-import { t, Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { IPodMetrics } from "../../api/endpoints";
 import { BarChart, cpuOptions, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
-import { _i18n } from "../../i18n";
 import { WorkloadKubeObject } from "../../api/workload-kube-object";
 import { themeStore } from "../../theme.store";
 
 export const podMetricTabs = [
-  <Trans key="cpu">CPU</Trans>,
-  <Trans key="memory">Memory</Trans>,
-  <Trans key="network">Network</Trans>,
-  <Trans key="filesystem">Filesystem</Trans>,
+  "CPU",
+  "Memory",
+  "Network",
+  "Filesystem",
 ];
 
 type IContext = IResourceMetricsValue<WorkloadKubeObject, { metrics: IPodMetrics }>;
@@ -48,22 +46,22 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-cpuUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Container CPU cores usage`),
+        label: `Usage`,
+        tooltip: `Container CPU cores usage`,
         borderColor: "#3D90CE",
         data: cpuUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-cpuRequests`,
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Container CPU requests`),
+        label: `Requests`,
+        tooltip: `Container CPU requests`,
         borderColor: "#30b24d",
         data: cpuRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-cpuLimits`,
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`CPU limits`),
+        label: `Limits`,
+        tooltip: `CPU limits`,
         borderColor: chartCapacityColor,
         data: cpuLimits.map(([x, y]) => ({ x, y }))
       }
@@ -72,22 +70,22 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-memoryUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Container memory usage`),
+        label: `Usage`,
+        tooltip: `Container memory usage`,
         borderColor: "#c93dce",
         data: memoryUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-memoryRequests`,
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Container memory requests`),
+        label: `Requests`,
+        tooltip: `Container memory requests`,
         borderColor: "#30b24d",
         data: memoryRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-memoryLimits`,
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`Container memory limits`),
+        label: `Limits`,
+        tooltip: `Container memory limits`,
         borderColor: chartCapacityColor,
         data: memoryLimits.map(([x, y]) => ({ x, y }))
       }
@@ -96,15 +94,15 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-networkReceive`,
-        label: _i18n._(t`Receive`),
-        tooltip: _i18n._(t`Bytes received by all containers`),
+        label: `Receive`,
+        tooltip: `Bytes received by all containers`,
         borderColor: "#64c5d6",
         data: networkReceive.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-networkTransmit`,
-        label: _i18n._(t`Transmit`),
-        tooltip: _i18n._(t`Bytes transmitted from all containers`),
+        label: `Transmit`,
+        tooltip: `Bytes transmitted from all containers`,
         borderColor: "#46cd9e",
         data: networkTransmit.map(([x, y]) => ({ x, y }))
       }
@@ -113,8 +111,8 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-fsUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Bytes consumed on this filesystem`),
+        label: `Usage`,
+        tooltip: `Bytes consumed on this filesystem`,
         borderColor: "#ffc63d",
         data: fsUsage.map(([x, y]) => ({ x, y }))
       }

src/renderer/components/+workloads-pods/pod-container-env.tsx

@@ -2,7 +2,6 @@ import "./pod-container-env.scss";
 
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { IPodContainer, Secret } from "../../api/endpoints";
 import { DrawerItem } from "../drawer";
 import { autorun } from "mobx";
@@ -106,7 +105,7 @@ export const ContainerEnvironment = observer((props: Props) => {
   };
 
   return (
-    <DrawerItem name={<Trans>Environment</Trans>} className="ContainerEnvironment">
+    <DrawerItem name="Environment" className="ContainerEnvironment">
       {env && renderEnv()}
       {envFrom && renderEnvFrom()}
     </DrawerItem>
@@ -145,7 +144,7 @@ const SecretKey = (props: SecretKeyProps) => {
       <Icon
         className={cssNames("secret-button", { loading })}
         material="visibility"
-        tooltip={<Trans>Show</Trans>}
+        tooltip="Show"
         onClick={showKey}
       />
     </>

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -2,9 +2,7 @@ import "./pod-container-port.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t } from "@lingui/macro";
 import { Pod } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { apiBase } from "../../api";
 import { observable } from "mobx";
 import { cssNames } from "../../utils";
@@ -45,7 +43,7 @@ export class PodContainerPort extends React.Component<Props> {
 
     return (
       <div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
-        <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
+        <span title={`Open in a browser`} onClick={() => this.portForward() }>
           {text}
           {this.waiting && (
             <Spinner />

src/renderer/components/+workloads-pods/pod-details-affinities.tsx

@@ -1,7 +1,6 @@
 import "./pod-details-affinities.scss";
 import React from "react";
 import jsYaml from "js-yaml";
-import { Trans } from "@lingui/macro";
 import { AceEditor } from "../ace-editor";
 import { DrawerParamToggler, DrawerItem } from "../drawer";
 import { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../api/endpoints";
@@ -19,7 +18,7 @@ export class PodDetailsAffinities extends React.Component<Props> {
     if (!affinitiesNum) return null;
 
     return (
-      <DrawerItem name={<Trans>Affinities</Trans>} className="PodDetailsAffinities">
+      <DrawerItem name="Affinities" className="PodDetailsAffinities">
         <DrawerParamToggler label={affinitiesNum}>
           <div className="ace-container">
             <AceEditor
@@ -33,4 +32,4 @@ export class PodDetailsAffinities extends React.Component<Props> {
       </DrawerItem>
     );
   }
-}
+}

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -1,7 +1,6 @@
 import "./pod-details-container.scss";
 
 import React from "react";
-import { t, Trans } from "@lingui/macro";
 import { IPodContainer, IPodContainerStatus, Pod } from "../../api/endpoints";
 import { DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
@@ -12,7 +11,6 @@ import { PodContainerPort } from "./pod-container-port";
 import { ResourceMetrics } from "../resource-metrics";
 import { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
-import { _i18n } from "../../i18n";
 
 interface Props {
   pod: Pod;
@@ -27,8 +25,8 @@ export class PodDetailsContainer extends React.Component<Props> {
 
     return (
       <span className={cssNames("status", state)}>
-        {state}{ready ? `, ${_i18n._(t`ready`)}` : ""}
-        {state === "terminated" ? ` - ${status.state.terminated.reason} (${_i18n._(t`exit code`)}: ${status.state.terminated.exitCode})` : ""}
+        {state}{ready ? `, ready` : ""}
+        {state === "terminated" ? ` - ${status.state.terminated.reason} (exit code: ${status.state.terminated.exitCode})` : ""}
       </span>
     );
   }
@@ -38,9 +36,9 @@ export class PodDetailsContainer extends React.Component<Props> {
       return (
         <span>
           {lastState}<br/>
-          {_i18n._(t`Reason`)}: {status.lastState.terminated.reason} - {_i18n._(t`exit code`)}: {status.lastState.terminated.exitCode}<br/>
-          {_i18n._(t`Started at`)}: {status.lastState.terminated.startedAt}<br/>
-          {_i18n._(t`Finished at`)}: {status.lastState.terminated.finishedAt}<br/>
+          Reason: {status.lastState.terminated.reason} - exit code: {status.lastState.terminated.exitCode}<br/>
+          Started at: {status.lastState.terminated.startedAt}<br/>
+          Finished at: {status.lastState.terminated.finishedAt}<br/>
         </span>
       );
     }
@@ -60,9 +58,9 @@ export class PodDetailsContainer extends React.Component<Props> {
     const startup = pod.getStartupProbe(container);
     const isInitContainer = !!pod.getInitContainers().find(c => c.name == name);
     const metricTabs = [
-      <Trans key="cpu">CPU</Trans>,
-      <Trans key="memory">Memory</Trans>,
-      <Trans key="filesystem">Filesystem</Trans>,
+      "CPU",
+      "Memory",
+      "Filesystem",
     ];
 
     return (
@@ -76,25 +74,25 @@ export class PodDetailsContainer extends React.Component<Props> {
         </ResourceMetrics>
         }
         {status &&
-        <DrawerItem name={<Trans>Status</Trans>}>
+        <DrawerItem name="Status">
           {this.renderStatus(state, status)}
         </DrawerItem>
         }
         {lastState &&
-        <DrawerItem name={<Trans>Last Status</Trans>}>
+        <DrawerItem name="Last Status">
           {this.renderLastState(lastState, status)}
         </DrawerItem>
         }
-        <DrawerItem name={<Trans>Image</Trans>}>
+        <DrawerItem name="Image">
           {image}
         </DrawerItem>
         {imagePullPolicy && imagePullPolicy !== "IfNotPresent" &&
-        <DrawerItem name={<Trans>ImagePullPolicy</Trans>}>
+        <DrawerItem name="ImagePullPolicy">
           {imagePullPolicy}
         </DrawerItem>
         }
         {ports && ports.length > 0 &&
-        <DrawerItem name={<Trans>Ports</Trans>}>
+        <DrawerItem name="Ports">
           {
             ports.map((port) => {
               const key = `${container.name}-port-${port.containerPort}-${port.protocol}`;
@@ -108,7 +106,7 @@ export class PodDetailsContainer extends React.Component<Props> {
         }
         {<ContainerEnvironment container={container} namespace={pod.getNs()}/>}
         {volumeMounts && volumeMounts.length > 0 &&
-        <DrawerItem name={<Trans>Mounts</Trans>}>
+        <DrawerItem name="Mounts">
           {
             volumeMounts.map(mount => {
               const { name, mountPath, readOnly } = mount;
@@ -124,7 +122,7 @@ export class PodDetailsContainer extends React.Component<Props> {
         </DrawerItem>
         }
         {liveness.length > 0 &&
-        <DrawerItem name={<Trans>Liveness</Trans>} labelsOnly>
+        <DrawerItem name="Liveness" labelsOnly>
           {
             liveness.map((value, index) => (
               <Badge key={index} label={value}/>
@@ -133,7 +131,7 @@ export class PodDetailsContainer extends React.Component<Props> {
         </DrawerItem>
         }
         {readiness.length > 0 &&
-        <DrawerItem name={<Trans>Readiness</Trans>} labelsOnly>
+        <DrawerItem name="Readiness" labelsOnly>
           {
             readiness.map((value, index) => (
               <Badge key={index} label={value}/>
@@ -142,7 +140,7 @@ export class PodDetailsContainer extends React.Component<Props> {
         </DrawerItem>
         }
         {startup.length > 0 &&
-        <DrawerItem name={<Trans>Startup</Trans>} labelsOnly>
+        <DrawerItem name="Startup" labelsOnly>
           {
             startup.map((value, index) => (
               <Badge key={index} label={value}/>
@@ -151,13 +149,13 @@ export class PodDetailsContainer extends React.Component<Props> {
         </DrawerItem>
         }
         {command &&
-        <DrawerItem name={<Trans>Command</Trans>}>
+        <DrawerItem name="Command">
           {command.join(" ")}
         </DrawerItem>
         }
 
         {args &&
-        <DrawerItem name={<Trans>Arguments</Trans>}>
+        <DrawerItem name="Arguments">
           {args.join(" ")}
         </DrawerItem>
         }

src/renderer/components/+workloads-pods/pod-details-list.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { podsStore } from "./pods.store";
 import { Pod } from "../../api/endpoints";
 import { autobind, bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
@@ -66,7 +65,7 @@ export class PodDetailsList extends React.Component<Props> {
     const { maxCpu } = this.props;
     const value = usage.toFixed(3);
     const tooltip = (
-      <p><Trans>CPU</Trans>: {Math.ceil(usage * 100) / maxCpu}%<br/>{usage.toFixed(3)}</p>
+      <p>CPU: {Math.ceil(usage * 100) / maxCpu}%<br/>{usage.toFixed(3)}</p>
     );
 
     if (!maxCpu) {
@@ -86,7 +85,7 @@ export class PodDetailsList extends React.Component<Props> {
   renderMemoryUsage(id: string, usage: number) {
     const { maxMemory } = this.props;
     const tooltip = (
-      <p><Trans>Memory</Trans>: {Math.ceil(usage * 100 / maxMemory)}%<br/>{bytesToUnits(usage, 3)}</p>
+      <p>Memory: {Math.ceil(usage * 100 / maxMemory)}%<br/>{bytesToUnits(usage, 3)}</p>
     );
 
     if (!maxMemory) return usage ? bytesToUnits(usage) : 0;
@@ -134,7 +133,7 @@ export class PodDetailsList extends React.Component<Props> {
 
     return (
       <div className="PodDetailsList flex column">
-        {showTitle && <DrawerTitle title={<Trans>Pods</Trans>}/>}
+        {showTitle && <DrawerTitle title="Pods"/>}
         <Table
           items={pods}
           selectable
@@ -147,13 +146,13 @@ export class PodDetailsList extends React.Component<Props> {
           className="box grow"
         >
           <TableHead>
-            <TableCell className="name" sortBy={sortBy.name}><Trans>Name</Trans></TableCell>
+            <TableCell className="name" sortBy={sortBy.name}>Name</TableCell>
             <TableCell className="warning"/>
-            <TableCell className="namespace" sortBy={sortBy.namespace}><Trans>Namespace</Trans></TableCell>
-            <TableCell className="ready"><Trans>Ready</Trans></TableCell>
-            <TableCell className="cpu" sortBy={sortBy.cpu}><Trans>CPU</Trans></TableCell>
-            <TableCell className="memory" sortBy={sortBy.memory}><Trans>Memory</Trans></TableCell>
-            <TableCell className="status"><Trans>Status</Trans></TableCell>
+            <TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell>
+            <TableCell className="ready">Ready</TableCell>
+            <TableCell className="cpu" sortBy={sortBy.cpu}>CPU</TableCell>
+            <TableCell className="memory" sortBy={sortBy.memory}>Memory</TableCell>
+            <TableCell className="status">Status</TableCell>
           </TableHead>
           {
             !virtual && pods.map(pod => this.getTableRow(pod.getId()))

src/renderer/components/+workloads-pods/pod-details-tolerations.tsx

@@ -1,6 +1,5 @@
 import "./pod-details-tolerations.scss";
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../api/endpoints";
 import { DrawerParamToggler, DrawerItem } from "../drawer";
 
@@ -16,7 +15,7 @@ export class PodDetailsTolerations extends React.Component<Props> {
     if (!tolerations.length) return null;
 
     return (
-      <DrawerItem name={<Trans>Tolerations</Trans>} className="PodDetailsTolerations">
+      <DrawerItem name="Tolerations" className="PodDetailsTolerations">
         <DrawerParamToggler label={tolerations.length}>
           {
             tolerations.map((toleration, index) => {
@@ -24,10 +23,10 @@ export class PodDetailsTolerations extends React.Component<Props> {
 
               return (
                 <div className="toleration" key={index}>
-                  <DrawerItem name={<Trans>Key</Trans>}>{key}</DrawerItem>
-                  {operator && <DrawerItem name={<Trans>Operator</Trans>}>{operator}</DrawerItem>}
-                  {effect && <DrawerItem name={<Trans>Effect</Trans>}>{effect}</DrawerItem>}
-                  {!!tolerationSeconds && <DrawerItem name={<Trans>Effect</Trans>}>{tolerationSeconds}</DrawerItem>}
+                  <DrawerItem name="Key">{key}</DrawerItem>
+                  {operator && <DrawerItem name="Operator">{operator}</DrawerItem>}
+                  {effect && <DrawerItem name="Effect">{effect}</DrawerItem>}
+                  {!!tolerationSeconds && <DrawerItem name="Effect">{tolerationSeconds}</DrawerItem>}
                 </div>
               );
             })
@@ -36,4 +35,4 @@ export class PodDetailsTolerations extends React.Component<Props> {
       </DrawerItem>
     );
   }
-}
+}

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -5,7 +5,6 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { autorun, observable, reaction, toJS } from "mobx";
-import { Trans } from "@lingui/macro";
 import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
@@ -77,27 +76,27 @@ export class PodDetails extends React.Component<Props> {
           <PodCharts/>
         </ResourceMetrics>
         <KubeObjectMeta object={pod}/>
-        <DrawerItem name={<Trans>Status</Trans>}>
+        <DrawerItem name="Status">
           <span className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</span>
         </DrawerItem>
-        <DrawerItem name={<Trans>Node</Trans>}>
+        <DrawerItem name="Node">
           {nodeName && (
             <Link to={getDetailsUrl(nodesApi.getUrl({ name: nodeName }))}>
               {nodeName}
             </Link>
           )}
         </DrawerItem>
-        <DrawerItem name={<Trans>Pod IP</Trans>}>
+        <DrawerItem name="Pod IP">
           {podIP}
         </DrawerItem>
-        <DrawerItem name={<Trans>Priority Class</Trans>}>
+        <DrawerItem name="Priority Class">
           {pod.getPriorityClassName()}
         </DrawerItem>
-        <DrawerItem name={<Trans>QoS Class</Trans>}>
+        <DrawerItem name="QoS Class">
           {pod.getQosClass()}
         </DrawerItem>
         {conditions &&
-        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+        <DrawerItem name="Conditions" className="conditions" labelsOnly>
           {
             conditions.map(condition => {
               const { type, status, lastTransitionTime } = condition;
@@ -107,7 +106,7 @@ export class PodDetails extends React.Component<Props> {
                   key={type}
                   label={type}
                   className={cssNames({ disabled: status === "False" })}
-                  tooltip={<Trans>Last transition time: {lastTransitionTime}</Trans>}
+                  tooltip={`Last transition time: ${lastTransitionTime}`}
                 />
               );
             })
@@ -115,7 +114,7 @@ export class PodDetails extends React.Component<Props> {
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
-        <DrawerItem name={<Trans>Node Selector</Trans>}>
+        <DrawerItem name="Node Selector">
           {
             nodeSelector.map(label => (
               <Badge key={label} label={label}/>
@@ -127,20 +126,20 @@ export class PodDetails extends React.Component<Props> {
         <PodDetailsAffinities workload={pod}/>
 
         {pod.getSecrets().length > 0 && (
-          <DrawerItem name={<Trans>Secrets</Trans>}>
+          <DrawerItem name="Secrets">
             <PodDetailsSecrets pod={pod}/>
           </DrawerItem>
         )}
 
         {pod.getInitContainers() && pod.getInitContainers().length > 0 &&
-        <DrawerTitle title={<Trans>Init Containers</Trans>}/>
+        <DrawerTitle title="Init Containers"/>
         }
         {
           pod.getInitContainers() && pod.getInitContainers().map(container => {
             return <PodDetailsContainer key={container.name} pod={pod} container={container}/>;
           })
         }
-        <DrawerTitle title={<Trans>Containers</Trans>}/>
+        <DrawerTitle title="Containers"/>
         {
           pod.getContainers().map(container => {
             const { name } = container;
@@ -159,7 +158,7 @@ export class PodDetails extends React.Component<Props> {
 
         {volumes.length > 0 && (
           <>
-            <DrawerTitle title={<Trans>Volumes</Trans>}/>
+            <DrawerTitle title="Volumes"/>
             {volumes.map(volume => {
               const claimName = volume.persistentVolumeClaim ? volume.persistentVolumeClaim.claimName : null;
               const configMap = volume.configMap ? volume.configMap.name : null;
@@ -171,13 +170,13 @@ export class PodDetails extends React.Component<Props> {
                     <Icon small material="storage"/>
                     <span>{volume.name}</span>
                   </div>
-                  <DrawerItem name={<Trans>Type</Trans>}>
+                  <DrawerItem name="Type">
                     {type}
                   </DrawerItem>
                   { type == "configMap" && (
                     <div>
                       {configMap && (
-                        <DrawerItem name={<Trans>Name</Trans>}>
+                        <DrawerItem name="Name">
                           <Link
                             to={getDetailsUrl(configMapApi.getUrl({
                               name: configMap,
@@ -191,12 +190,12 @@ export class PodDetails extends React.Component<Props> {
                   { type === "emptyDir" && (
                     <div>
                       { volume.emptyDir.medium && (
-                        <DrawerItem name={<Trans>Medium</Trans>}>
+                        <DrawerItem name="Medium">
                           {volume.emptyDir.medium}
                         </DrawerItem>
                       )}
                       { volume.emptyDir.sizeLimit && (
-                        <DrawerItem name={<Trans>Size Limit</Trans>}>
+                        <DrawerItem name="Size Limit">
                           {volume.emptyDir.sizeLimit}
                         </DrawerItem>
                       )}
@@ -204,7 +203,7 @@ export class PodDetails extends React.Component<Props> {
                   )}
 
                   {claimName && (
-                    <DrawerItem name={<Trans>Claim Name</Trans>}>
+                    <DrawerItem name="Claim Name">
                       <Link
                         to={getDetailsUrl(pvcApi.getUrl({
                           name: claimName,

src/renderer/components/+workloads-pods/pods.tsx

@@ -3,7 +3,6 @@ import "./pods.scss";
 import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
-import { Trans } from "@lingui/macro";
 import { podsStore } from "./pods.store";
 import { RouteComponentProps } from "react-router";
 import { volumeClaimStore } from "../+storage-volume-claims/volume-claim.store";
@@ -92,18 +91,18 @@ export class Pods extends React.Component<Props> {
           (pod: Pod) => pod.status.podIP,
           (pod: Pod) => pod.getNodeName(),
         ]}
-        renderHeaderTitle={<Trans>Pods</Trans>}
+        renderHeaderTitle="Pods"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Containers</Trans>, className: "containers", sortBy: sortBy.containers },
-          { title: <Trans>Restarts</Trans>, className: "restarts", sortBy: sortBy.restarts },
-          { title: <Trans>Controlled By</Trans>, className: "owners", sortBy: sortBy.owners },
-          { title: <Trans>Node</Trans>, className: "node", sortBy: sortBy.node },
-          { title: <Trans>QoS</Trans>, className: "qos", sortBy: sortBy.qos },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Containers", className: "containers", sortBy: sortBy.containers },
+          { title: "Restarts", className: "restarts", sortBy: sortBy.restarts },
+          { title: "Controlled By", className: "owners", sortBy: sortBy.owners },
+          { title: "Node", className: "node", sortBy: sortBy.node },
+          { title: "QoS", className: "qos", sortBy: sortBy.qos },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Status", className: "status", sortBy: sortBy.status },
         ]}
         renderTableContents={(pod: Pod) => [
           <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} />,