Implement KubeObjectStatusText extension API (#1188)

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

src/renderer/components/+user-management-roles/roles.scss

@@ -2,4 +2,10 @@
   .help-icon {
     margin-left: $margin / 2;
   }
+
+  .TableCell {
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
 }

src/renderer/components/+user-management-roles/roles.tsx

@@ -9,6 +9,7 @@ import { rolesStore } from "./roles.store";
 import { Role } from "../../api/endpoints";
 import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleDialog } from "./add-role-dialog";
+import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
 enum sortBy {
   name = "name",
@@ -38,11 +39,13 @@ export class Roles extends React.Component<Props> {
           renderHeaderTitle={<Trans>Roles</Trans>}
           renderTableHeader={[
             { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { className: "warning" },
             { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
             { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           ]}
           renderTableContents={(role: Role) => [
             role.getName(),
+            <KubeObjectStatusIcon object={role} />,
             role.getNs() || "-",
             role.getAge(),
           ]}