dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-logTest.1

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/Ssh.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import Ssh from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Ssh.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label-key', 'conceal']
+}));
+
+describe('component: SecretDataTab/BasicAuth', () => {
+  const username = 'USERNAME';
+  const password = 'PASSWORD';
+
+  it('should render container with class secret-data-ssh', async() => {
+    const wrapper = mount(Ssh, { props: { username, password } });
+
+    expect(wrapper.find('.secret-data-ssh').exists()).toBeTruthy();
+  });
+
+  it('should render DetailText with username and password props passed correctly', async() => {
+    const wrapper = mount(Ssh, { props: { username, password } });
+
+    const usernameDetailTextComponent = wrapper.find('.username').findComponent({ name: 'DetailText' });
+    const passwordDetailTextComponent = wrapper.find('.password').findComponent({ name: 'DetailText' });
+
+    expect(usernameDetailTextComponent.props('value')).toStrictEqual(username);
+    expect(usernameDetailTextComponent.props('labelKey')).toStrictEqual('secret.ssh.public');
+
+    expect(passwordDetailTextComponent.props('value')).toStrictEqual(password);
+    expect(passwordDetailTextComponent.props('labelKey')).toStrictEqual('secret.ssh.private');
+    expect(passwordDetailTextComponent.props('conceal')).toStrictEqual(true);
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/auth-types.test.ts

@@ -0,0 +1,186 @@
+import * as authTypes from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+import * as crypto from '@shell/utils/crypto';
+
+jest.mock('@shell/utils/crypto');
+jest.mock('vuex', () => ({ useStore: jest.fn() }));
+
+describe('composables: SecretDataTab/auth-types', () => {
+  const resource = { _type: 'RESOURCE', data: { type: 'data' } };
+  const base64 = '64 decoded string';
+  const base64DecodeSpy = jest.spyOn(crypto, 'base64Decode');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useSecretInfo', () => {
+    it('should return the secret type and data set in resource', () => {
+      const info = authTypes.useSecretInfo(resource);
+
+      expect(info.value.secretType).toStrictEqual(resource._type);
+      expect(info.value.secretData).toStrictEqual(resource.data);
+    });
+
+    it('should return the an empty object for secretData if not set on resource', () => {
+      const info = authTypes.useSecretInfo({ _type: 'RESOURCE' });
+
+      expect(info.value.secretType).toStrictEqual(resource._type);
+      expect(info.value.secretData).toStrictEqual({});
+    });
+  });
+
+  describe('useSecretRows', () => {
+    it('should return empty array if data is not set', () => {
+      const rows = authTypes.useSecretRows({});
+
+      expect(rows.value).toStrictEqual([]);
+    });
+
+    it('should return a base64Decoded key/value if data is set', () => {
+      base64DecodeSpy.mockReturnValue(base64);
+      const row = { mockKey: 'value' };
+      const rows = authTypes.useSecretRows({ data: row });
+
+      expect(rows.value[0].key).toStrictEqual('mockKey');
+      expect(rows.value[0].value).toStrictEqual(base64);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(row.mockKey);
+    });
+  });
+
+  describe('useDockerAuths', () => {
+    it('should return the auths field from a base64decoded json object in the `.dockerconfigjson` data field', () => {
+      const data = { '.dockerconfigjson': 'base64Json' };
+      const json = { auths: 'AUTHS' };
+
+      base64DecodeSpy.mockReturnValue(JSON.stringify(json));
+      const dockerAuths = authTypes.useDockerAuths({ data });
+
+      expect(dockerAuths.value).toStrictEqual(json.auths);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(data['.dockerconfigjson']);
+    });
+  });
+
+  describe('useDockerRegistry', () => {
+    it('should return the first value from the docker auths', () => {
+      const data = { '.dockerconfigjson': 'base64Json' };
+      const registryUrl = 'registry-url.com';
+      const json = { auths: { [registryUrl]: { something: 'test' } } };
+
+      base64DecodeSpy.mockReturnValue(JSON.stringify(json));
+      const registry = authTypes.useDockerRegistry({ data });
+
+      expect(registry.value.registryUrl).toStrictEqual(registryUrl);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(data['.dockerconfigjson']);
+    });
+  });
+
+  describe('useDockerBasic', () => {
+    it('should return the username and password from the docker auths', () => {
+      const data = { '.dockerconfigjson': 'base64Json' };
+      const registryUrl = 'registry-url.com';
+      const username = 'USERNAME';
+      const password = 'PASSWORD';
+      const json = { auths: { [registryUrl]: { username, password } } };
+
+      base64DecodeSpy.mockReturnValue(JSON.stringify(json));
+      const dockerBasic = authTypes.useDockerBasic({ data });
+
+      expect(dockerBasic.value.username).toStrictEqual(username);
+      expect(dockerBasic.value.password).toStrictEqual(password);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(data['.dockerconfigjson']);
+    });
+  });
+
+  describe('useBasic', () => {
+    it('should return the username, password, rows from the docker auths', () => {
+      const username = 'USERNAME';
+      const password = 'PASSWORD';
+      const data = { username, password };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(username)
+        .mockReturnValueOnce(password)
+        .mockReturnValueOnce(username)
+        .mockReturnValueOnce(password);
+
+      const basic = authTypes.useBasic({ data });
+
+      expect(basic.value.username).toStrictEqual(username);
+      expect(basic.value.password).toStrictEqual(password);
+      expect(basic.value.rows).toStrictEqual([{ key: 'username', value: username }, { key: 'password', value: password }]);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(username);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(password);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(username);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(password);
+    });
+  });
+
+  describe('useSsh', () => {
+    it('should return the username, password from data fields ssh-publickey/privatekey', () => {
+      const username = 'USERNAME';
+      const password = 'PASSWORD';
+      const data = {
+        'ssh-publickey':  username,
+        'ssh-privatekey': password
+      };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(username)
+        .mockReturnValueOnce(password);
+
+      const ssh = authTypes.useSsh({ data });
+
+      expect(ssh.value.username).toStrictEqual(username);
+      expect(ssh.value.password).toStrictEqual(password);
+
+      expect(base64DecodeSpy).toHaveBeenCalledWith(username);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(password);
+    });
+  });
+
+  describe('useServiceAccount', () => {
+    it('should return the token, crt from data fields token, ca.crt', () => {
+      const token = 'TOKEN';
+      const crt = 'CRT';
+      const data = {
+        token,
+        'ca.crt': crt
+      };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(token)
+        .mockReturnValueOnce(crt);
+
+      const serviceAccount = authTypes.useServiceAccount({ data });
+
+      expect(serviceAccount.value.token).toStrictEqual(token);
+      expect(serviceAccount.value.crt).toStrictEqual(crt);
+
+      expect(base64DecodeSpy).toHaveBeenCalledWith(token);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(crt);
+    });
+  });
+
+  describe('useTls', () => {
+    it('should return the token, crt from data fields token, ca.crt', () => {
+      const token = 'TOKEN';
+      const crt = 'CRT';
+      const data = {
+        'tls.key': token,
+        'tls.crt': crt
+      };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(token)
+        .mockReturnValueOnce(crt);
+
+      const serviceAccount = authTypes.useTls({ data });
+
+      expect(serviceAccount.value.token).toStrictEqual(token);
+      expect(serviceAccount.value.crt).toStrictEqual(crt);
+
+      expect(base64DecodeSpy).toHaveBeenCalledWith(token);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(crt);
+    });
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/composables.test.ts

@@ -0,0 +1,102 @@
+import * as authTypes from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+import { useSecretDataTabDefaultProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables';
+import { SECRET_TYPES } from '@shell/config/secret';
+
+jest.mock('@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types');
+jest.mock('vuex', () => ({ useStore: jest.fn() }));
+
+describe('composables: SecretDataTab/composables', () => {
+  describe('useSecretDataTabDefaultProps', () => {
+    const useSecretInfoSpy = jest.spyOn(authTypes, 'useSecretInfo');
+    const resource = { type: 'Resource' };
+
+    it('should return the appropriate props when secret type is DOCKER_JSON', () => {
+      const dockerRegistry = { type: 'DockerRegistry' };
+      const dockerBasic = { type: 'DockerBasic' };
+      const useDockerRegistrySpy = jest.spyOn(authTypes, 'useDockerRegistry');
+      const useDockerBasic = jest.spyOn(authTypes, 'useDockerBasic');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.DOCKER_JSON } }));
+      useDockerRegistrySpy.mockImplementation((): any => ({ value: dockerRegistry }));
+      useDockerBasic.mockImplementation((): any => ({ value: dockerBasic }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useDockerRegistrySpy).toHaveBeenCalledWith(resource);
+      expect(useDockerBasic).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.registry).toStrictEqual(dockerRegistry);
+      expect(props.value.secretData.basicAuth).toStrictEqual(dockerBasic);
+    });
+
+    it('should return the appropriate props when secret type is TLS', () => {
+      const tls = { type: 'TLS' };
+      const useTlsSpy = jest.spyOn(authTypes, 'useTls');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.TLS } }));
+      useTlsSpy.mockImplementation((): any => ({ value: tls }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.certificate.certificate');
+      expect(useTlsSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.certificate).toStrictEqual(tls);
+    });
+
+    it('should return the appropriate props when secret type is SERVICE_ACCT', () => {
+      const serviceAccount = { type: 'serviceAccount' };
+      const useServiceAccountSpy = jest.spyOn(authTypes, 'useServiceAccount');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.SERVICE_ACCT } }));
+      useServiceAccountSpy.mockImplementation((): any => ({ value: serviceAccount }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useServiceAccountSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.serviceAccount).toStrictEqual(serviceAccount);
+    });
+
+    it('should return the appropriate props when secret type is SSH', () => {
+      const ssh = { type: 'SSH' };
+      const useSshSpy = jest.spyOn(authTypes, 'useSsh');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.SSH } }));
+      useSshSpy.mockImplementation((): any => ({ value: ssh }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.ssh.keys');
+      expect(useSshSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.ssh).toStrictEqual(ssh);
+    });
+
+    it('should return the appropriate props when secret type is BASIC', () => {
+      const basic = { type: 'basic' };
+      const useBasicSpy = jest.spyOn(authTypes, 'useBasic');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.BASIC } }));
+      useBasicSpy.mockImplementation((): any => ({ value: basic }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useBasicSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.basicAuth).toStrictEqual(basic);
+    });
+
+    it('should return the appropriate props when secret type is anything else', () => {
+      const basic = { type: 'basic' };
+      const useBasicSpy = jest.spyOn(authTypes, 'useBasic');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.FLEET_CLUSTER } }));
+      useBasicSpy.mockImplementation((): any => ({ value: basic }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useBasicSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.basic).toStrictEqual(basic);
+    });
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types.ts

@@ -0,0 +1,109 @@
+import { computed, toValue } from 'vue';
+import { base64Decode } from '@shell/utils/crypto';
+
+export const useSecretInfo = (resource: any) => {
+  return computed(() => {
+    const resourceValue = toValue(resource);
+
+    return {
+      secretType: resourceValue._type,
+      secretData: resourceValue.data || {}
+    };
+  });
+};
+
+export const useSecretRows = (resource: any) => {
+  return computed(() => {
+    const resourceValue = toValue(resource);
+
+    const rows: any[] = [];
+    const { data = {} } = resourceValue;
+
+    Object.keys(data).forEach((key) => {
+      const value = base64Decode(data[key]);
+
+      rows.push({
+        key,
+        value
+      });
+    });
+
+    return rows;
+  });
+};
+
+export const useDockerAuths = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    const json = base64Decode(secretInfo.value.secretData['.dockerconfigjson']);
+
+    return JSON.parse(json).auths;
+  });
+};
+
+export const useDockerRegistry = (resource: any) => {
+  const dockerAuths = useDockerAuths(resource);
+
+  return computed(() => {
+    return { registryUrl: Object.keys(dockerAuths.value)[0] };
+  });
+};
+
+export const useDockerBasic = (resource: any) => {
+  const dockerAuths = useDockerAuths(resource);
+  const dockerRegistry = useDockerRegistry(resource);
+
+  return computed(() => {
+    return {
+      username: dockerAuths.value[dockerRegistry.value.registryUrl].username,
+      password: dockerAuths.value[dockerRegistry.value.registryUrl].password,
+    };
+  });
+};
+
+export const useBasic = (resource: any) => {
+  const rows = useSecretRows(resource);
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      username: base64Decode(secretInfo.value.secretData.username || ''),
+      password: base64Decode(secretInfo.value.secretData.password || ''),
+      rows:     rows.value
+    };
+  });
+};
+
+export const useSsh = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      username: base64Decode(secretInfo.value.secretData['ssh-publickey'] || ''),
+      password: base64Decode(secretInfo.value.secretData['ssh-privatekey'] || ''),
+    };
+  });
+};
+
+export const useServiceAccount = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      token: base64Decode(secretInfo.value.secretData['token']),
+      crt:   base64Decode(secretInfo.value.secretData['ca.crt']),
+    };
+  });
+};
+
+export const useTls = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      token: base64Decode(secretInfo.value.secretData['tls.key']),
+      crt:   base64Decode(secretInfo.value.secretData['tls.crt']),
+    };
+  });
+};

package/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables.ts

@@ -0,0 +1,52 @@
+import { computed, ComputedRef } from 'vue';
+import { Props } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue';
+import { SECRET_TYPES } from '@shell/config/secret';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import {
+  useBasic, useSsh, useTls, useSecretInfo, useDockerRegistry, useServiceAccount, useDockerBasic
+} from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+
+export const useSecretDataTabDefaultProps = (resource: any): ComputedRef<Props> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    switch (secretInfo.value.secretType) {
+    case SECRET_TYPES.DOCKER_JSON:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: {
+          registry:  useDockerRegistry(resource).value,
+          basicAuth: useDockerBasic(resource).value
+        }
+      };
+    case SECRET_TYPES.TLS:
+      return {
+        tabLabel:   i18n.t('secret.certificate.certificate'),
+        secretData: { certificate: useTls(resource).value }
+      };
+    case SECRET_TYPES.SERVICE_ACCT:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { serviceAccount: useServiceAccount(resource).value }
+      };
+    case SECRET_TYPES.SSH:
+      return {
+        tabLabel:   i18n.t('secret.ssh.keys'),
+        secretData: { ssh: useSsh(resource).value }
+      };
+    case SECRET_TYPES.BASIC:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { basicAuth: useBasic(resource).value }
+      };
+    default:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { basic: useBasic(resource).value }
+      };
+    }
+  });
+};

package/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import Basic, { Props as BasicProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Basic.vue';
+import Ssh, { Props as SshProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Ssh.vue';
+import ServiceAccountToken, { Props as ServiceAccountTokenProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/ServiceAccountToken.vue';
+import Certificate, { Props as CertificateProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Certificate.vue';
+import BasicAuth, { Props as BasicAuthProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/BasicAuth.vue';
+import Registry, { Props as RegistryProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Registry.vue';
+
+export interface SecretData {
+  basic?: BasicProps;
+  basicAuth?: BasicAuthProps;
+  ssh?: SshProps;
+  serviceAccount?: ServiceAccountTokenProps;
+  certificate?: CertificateProps;
+  registry?: RegistryProps;
+}
+
+export interface Props {
+  tabLabel: string;
+  secretData: SecretData;
+
+  weight?: number;
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <Tab
+    class="secret-data-tab"
+    name="data"
+    :label="props.tabLabel"
+    :weight="props.weight"
+  >
+    <Registry
+      v-if="props.secretData.registry"
+      v-bind="props.secretData.registry"
+    />
+    <BasicAuth
+      v-if="props.secretData.basicAuth"
+      v-bind="props.secretData.basicAuth"
+    />
+    <Certificate
+      v-else-if="props.secretData.certificate"
+      v-bind="props.secretData.certificate"
+    />
+    <ServiceAccountToken
+      v-if="props.secretData.serviceAccount"
+      v-bind="props.secretData.serviceAccount"
+    />
+    <Ssh
+      v-if="props.secretData.ssh"
+      v-bind="props.secretData.ssh"
+    />
+    <Basic
+      v-if="props.secretData.basic"
+      v-bind="props.secretData.basic"
+    />
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+.secret-data-tab {
+  :deep() .entry:not(:first-of-type) {
+    margin-top: 16px;
+  }
+}
+</style>

package/components/Resource/Detail/SpacedRow.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="spaced-row">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.spaced-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));;
+  grid-auto-flow: dense;
+  grid-gap: 24px;
+}
+</style>

package/components/Resource/Detail/StatusBar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { stateColorCssVar, StateColor } from '@shell/utils/style';
+
+export interface Segment {
+  color: StateColor;
+  percent: number;
+}
+
+export interface Props {
+  segments: Segment[]
+}
+
+const { segments } = defineProps<Props>();
+
+const computeStyle = (segment: Segment) => {
+  return {
+    backgroundColor: stateColorCssVar(segment.color),
+    width:           `${ segment.percent }%`
+  };
+};
+</script>
+
+<template>
+  <div class="status-bar">
+    <div
+      v-for="(segment, i) in segments"
+      :key="i"
+      class="segment"
+      :style="computeStyle(segment)"
+    >
+&nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    column-gap: 2px;
+    height: 21px;
+
+    .segment {
+        height: 4px;
+
+        &:first-of-type {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+
+        &:last-of-type {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+    }
+}
+</style>

package/components/Resource/Detail/StatusRow.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+
+export interface Props {
+        color: StateColor;
+        label: string;
+        count: number;
+        percent: number;
+}
+
+const {
+  color, label, count, percent
+} = defineProps<Props>();
+</script>
+
+<template>
+  <div class="status-row">
+    <div
+      class="indicator"
+      :style="{backgroundColor: stateColorCssVar(color)}"
+    />
+    <div class="label">
+      {{ label }}
+    </div>
+    <div class="count">
+      <Bubble>{{ count }}</Bubble>
+    </div>
+    <div class="percent text-muted">
+      {{ percent.toFixed(1) }}%
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+
+    .indicator {
+      height: 4px;
+      border-radius: 4px;
+      width: 20px;
+      margin-right: 10px;
+    }
+
+    .percent {
+      width: 60px;
+      text-align: right;
+    }
+}
+</style>