Jelajahi Sumber

HUE-9485 [frontend] Add a Vue Duration component

Johan Ahlen 5 tahun lalu
induk
melakukan
4c1cc1e6ad

+ 56 - 0
desktop/core/src/desktop/js/components/Duration.test.ts

@@ -0,0 +1,56 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { shallowMount } from '@vue/test-utils';
+import Duration from './Duration.vue';
+
+describe('Duration.vue', () => {
+  it('should render', () => {
+    const wrapper = shallowMount(Duration, {
+      propsData: {
+        value: 1234567890
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should render 00:00:00 duration', () => {
+    const wrapper = shallowMount(Duration, {
+      propsData: {
+        value: 0
+      }
+    });
+    expect(wrapper.element.firstChild?.textContent).toContain('00:00:00');
+  });
+
+  it('should render 01:01:01 duration', () => {
+    const wrapper = shallowMount(Duration, {
+      propsData: {
+        value: 1000 + 1000 * 60 + 1000 * 60 * 60
+      }
+    });
+    expect(wrapper.element.firstChild?.textContent).toContain('01:01:01');
+  });
+
+  it('should render 100:01:01 duration', () => {
+    const wrapper = shallowMount(Duration, {
+      propsData: {
+        value: 1000 + 1000 * 60 + 1000 * 60 * 60 * 100
+      }
+    });
+    expect(wrapper.element.firstChild?.textContent).toContain('100:01:01');
+  });
+});

+ 43 - 0
desktop/core/src/desktop/js/components/Duration.vue

@@ -0,0 +1,43 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<template>
+  <span>{{ duration }}</span>
+</template>
+
+<script lang="ts">
+  import { Duration as LuxonDuration } from 'luxon';
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+
+  export const duration = (value: number): string =>
+    LuxonDuration.fromMillis(value).toFormat('hh:mm:ss');
+
+  @Component
+  export default class Duration extends Vue {
+    @Prop({ required: true })
+    value!: number;
+
+    get duration(): string {
+      return duration(this.value);
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>

+ 2 - 2
desktop/core/src/desktop/js/components/HueTable.vue

@@ -56,11 +56,11 @@
   import { Column, Row } from './HueTable';
   import { Column, Row } from './HueTable';
 
 
   @Component
   @Component
-  export default class HueTable extends Vue {
+  export default class HueTable<T> extends Vue {
     @Prop({ required: false, default: () => [] })
     @Prop({ required: false, default: () => [] })
     rows?: Row[];
     rows?: Row[];
     @Prop({ required: false, default: () => [] })
     @Prop({ required: false, default: () => [] })
-    columns?: Column[];
+    columns?: Column<T>[];
   }
   }
 </script>
 </script>
 
 

+ 7 - 0
desktop/core/src/desktop/js/components/__snapshots__/Duration.test.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Duration.vue should render 1`] = `
+<span>
+  342:56:07
+</span>
+`;